Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Only one class showing up when there should be many.

    Hey guys. I am having some trouble with a layout I am working on. Basically, I am using nested divs to create a fixed width two-column layout, and I want classes in the main div. The problem is, I added the classes and styled them, but only the first one is showing up! I have no idea where the other ones are going. Here is my code. It's all in one page - I'll split it up later.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Geodon</title>
    	<style type="text/css" media="screen, print, projection">
    	body,
    	html {
    		margin:0;
    		padding:0;
    		color:#000;
    		background-image:url('background.gif');
    		background-repeat:no-repeat;
    		background-attachment:fixed;
    		background-position:center top;
    		background-color:#1c0929;
    	}
    	#wrap {
    		width:1000px;
    		margin:0 auto;
    	}
    	#header {
        	padding:5px 10px;
    	height:300px;
    	color:#ad8fff;
    	}
    	h1 {
    	    margin:0;
    	    color:#ad8fff;
        }
    
    	#main {
    		float:left;
    		width:600px;
    	}
    	.post {
    		background-image:url('trans.png');
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 8px;
      margin-left: 0px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      text-align: justify;
      box-shadow: #000000;
    	}
    	h2 {
    		margin:0 0 1em;
    	}
    	#sidebar {
    		float:right;
    		width:300px;
    		padding:10px;
    		background-image:url('trans.png');
    	}
    	#footer {
    		clear:both;
    	    	color:#ad8fff;
    		Height:50px;
    		padding-top:25px;
    	}
    	#footer p {
    		margin:0;
        }
    	* html #footer {
    		height:1px;
    	}
    	</style>
    </head>
    <body>
    <div id="wrap">
    	<div id="header"><h1>Simple 2 column CSS layout, final layout</h1></div>
    	<div id="main">
    		<div class="post"><h2>Column 1</h2>
    		<p><a href="/">456 Berea Street Home</a></p>
    		<p><a href="/lab/developing_with_web_standards/csslayout/2-col/">Simple 2 column CSS layout</a></p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p></div>
    		<div class='post"><p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p></div>
    <div class="post">		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
    		<h3>Consectetuer adipiscing elit</h3>
    		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p></div>
    	</div>
    	<div id="sidebar">
    		<h2>Column 2</h2>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
    		<ul>
    			<li><a href="/">Link 1</a></li>
    			<li><a href="/">Link 2</a></li>
    			<li><a href="/">Link 3</a></li>
    			<li><a href="/">Link 4</a></li>
    		</ul>
    	</div>
    	<div id="footer">
    		<p>Footer</p>
    	</div>
    </div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Protagonist,
    Check your code with the validator, see the links to validators in my signature line below.

    This bit highlighted in red is causing you some trouble -
    Code:
    justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p></div>
    		<div class='post"><p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec se
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Also, if you would like to use multiple classes on the same element, then you just separate them with a space like so:

    Code:
    <div class="class1 class2 class3">
    Kind regards,

    LC.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •