HTML & CSS Layout Help

**jzm** · 04-25-2011 04:17 AM

Hello,

I am trying to create a layout with the sidebar on the left and content on the right, this is my first time creating a site with this layout type:

Doctype: HTML5 -> Transitional

Issues:

1. I am having trouble to create a layout that expands dependent on the amount of data given.

2. How would I produce the graphic -> Metal so that it expands.

3. Why am I getting overlap with I hover over my nav dropdown menu -> The nav does not seem to get wider for the number of options within it.

4. Would I make my #rightCol graphic a fixed width?

5. Do I even need #rightCol?

6. Should I make the width 960 or 990px?

HTML:

HTML Code:

       <html>
    <head>
    </head>
    <body>
    	<div id ="wrapper">
            <div id ="header">
    		<h1 id = "companyName">Houses</h1>
    		<h4 id = "companyQuote">"Houses"</h4>
    	    </div>
    <div id="leftCol">
    <nav>
    <ul>
                <li>Dashboard></li>
                <li>Edit Pages
                    <ul>
                        <li><a href="#">Pages</a></li>
                    </ul>
                </li>
                <li>Gallery
                    <ul>
                        <li><?php echo anchor('admin/addimage','Add Image');?></li>
                        <li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
                    </ul>
                </li>
                    <li>Sales
                        <ul>
                            <li>Add Sale</li>
                            <li>Edit Sale
                        <ul>
                            <li><a href="#">Sales</a></li>
                        </ul>
                        </li>
                        </li>
                    <li><Delete Sale </li>
                </ul>
                        <li><Log Out</li>
                </li>
    </nav>
    </div><!-- Left Col End -->
    	<div id="rightCol">
                   <section id="content">
                       <h1>PageName></h1>
                        <p>Content<p>
                          </section>
       </div><!-- Right Col End -->     
        
        <div id="footer">content</div>
    	</div> <!-- Wrapper Close -->
    </body>
    </html>

CSS:

Code:

        /*Reset */
    html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }
     
    /* Main CSS */
    #wrapper{
        width:990px;
        height:auto;
        margin: 0 auto;
    }
    #header{
        background-image:url('../images/header.png');
        background-color:#000;
        width:990px;
        height:220px;
    }
    
    #leftCol{
        width:190px;
        float:left;
    }
    
    #rightCol{
        width:990px;
        margin:0 0 0 0px;
    }
    /*Menu */
    nav{
        float:left;
        width:190px;
        height:500px;
        margin:0 0 0 0;
        background-image:url('../images/metalnavbg.png');
    
    
    }
     
    nav ul{
        float:left;
        margin:0;
        list-style:none;
        font-size:14px;
        width:190px;
    }
     
    nav li a{
        font-size:14px;
        color:#fff;
        line-height:25px; /*Text Hight On Button */
        text-decoration:none;
        text-indent:25px;
        display:block;
        width:190px;
        height:27px;
        background-image:url('../images/normal.png');
    }
    
    nav ul li ul{
        display:none;
    }
    
    nav ul li:hover ul{
        display:block;
    }
     
    nav a:hover{
        background-image:url('../images/onclick.png');
    }
     
    /*Content */
     
     
    #content{
        width:990px;
    }
     
    #content h1{
        margin: 10px 0 0 0;
        text-indent:25px;
        font-family: 'Josefin Slab', arial, serif;
        font-size:24px;
    }
     
    #content p{
        margin:10px 0 0 0;
        text-indent:26px;
    }
     
    #footer{
        clear:both;
        background:url('../images/footer.png') no-repeat #000;
        width:990px;
        height:60px;
    }
     
    /* Misc*/
     
    #metal{
        float:left;
        margin:160px 0 0 -190px;
        background-image:url('../images/metalnavbg.png');
        height:400px;
        width:190px;
    }
     
    /* Text Formatting */
     
    #companyName{
        text-align:center;
        padding-top:45px;
        font-size:35px;
        color:#f0f0ef;
    }
     
    #companyQuote{
        text-align:center;
        font-size:18px;
        color:#a5a4a2;
    }
     
    /*Forms */
    
    #leftFormCol{
    	float:left;
    	width:100px;
    	border:1px solid gray;
    }
    
    #rightFormCol{
    	float:left;
    	width:150px;
    	margin:0 0 0 75px;
    	border: 1px solid blue;
    }
     
    /*General*/
     
    #validation{
        font-weight:bold;
        color:#ff0101;
    }
    
    form{
        width:100%;
        float:left;
        margin: 0 0 0 25px;
    	border: 1px solid black;
    }
    
    fieldset{
        border:none;
    }
    
    label{
    	width:30px;
    	margin: 0 42px 3px 5px;
    	border: 1px solid green;
    }
    
    input{
        width:130px;
        height:20px;
        margin: 0 42px 3px 5px;
    	border: 1px solid red;
    }
    
    ::-webkit-input-placeholder{
        text-indent:5px;
        color:red;
    }
     
    /*Admin Login */
    #loginForm{
        margin: 0 auto 10px;
        width:150px;
        height:150px;
        background-color:#c5c4c3;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
    }
    #loginForm label{
        font-weight:bold;
        margin:5px 0 0 15px;
        display:block;
    }
    #loginForm input{
        margin:10px 0 0 15px;
        height:15px;
    }
    #loginForm input[type=submit]{
        margin-top:5px;
        display:block;
    }
    #sales{
        width:150px;
        height:180px;
        margin-left:15px;
        border: 1px solid red;
    }
     
    #sales .thumbnail{
        height:150px;
        width:150px;
    }
     
    #sales .location{
        float:left;
        text-align:center;
        font-weight:bold;
        margin-left:8px;
    }
     
    #sales .price{
        float:left;
        text-align:left;
        font-weight:bold;
        padding-left:5px;
        color:#ff0101;
    }

**njaohnt** · 04-30-2011 09:27 AM

I have no idea.

Thread: HTML & CSS Layout Help

Thread Tools

Display

HTML & CSS Layout Help

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions