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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post

    Simple Menu Problem

    I'm fairly new to web design and I would appreciate some help with a little problem I am having with the menu.

    The site width is 800px - 600 for a banner and 200 for the menu. The problem is that the menu wont position itself to the left of the banner. This means that the menu begins at the bottom of the banner rather than being in line with it. I've always been crap at floats and positioning and I imagine that is where the problem is. Any help would be greatly appreciated.


    What I have:

    ---Banner---
    --------------menu-
    ----Main Content---


    What I want:

    ----Banner----menu-
    ----Main Content---

    Code:
    font-size: 62.5%;
    font-family:Arial, "Helvetica Condensed", Helvetica;
    background:url(../images/bg_1.jpg)}
     
    #wrapper{
    width:800px;
    margin:0 auto;}
     
    #banner{width:600px;}
     
    #banner h1 a {width:240px;
    height:135px;
    display:block;
    background:url(../images/banner.png) left top no-repeat;
    text-indent:-5000px;
    text-decoration:none;
    outline:none;
    margin:0;
    padding:0;}
     
    #banner h2{
    font-size:1.1em;
    color:#999;
    margin:0;
    line-height:0px;}
     
    #nav{
    width:200px;
    margin-left:600px;}
     
    #nav ul{
    list-style-type:none;
    margin:0;
    padding:0;}
     
    #nav li{
    float:left;
    list-style-type:none;
    font-size:1.1em;
    text-transform:uppercase;
    padding:0 5px 7px}
     
    #contentDiv{
    width:800px;
    clear:both;
    padding-top:30px;
    background:url(../images/line.png) left top no-repeat;
    color:#f3eedb; 
    text-align:justify; 
    font-size:1.1em;}
    Code:
    <body id="home">
    <div id="wrapper">
    	<div id="banner">
        	<h1><a href="index.html" title="HOME"> fsdfsdf </a></h1>
            <h2>Blah Blah</h2>
            <div id="nav">
              <ul>
                <li><a href="index.html" title="Click for Home">Home</a></li>
                <li><a href="music.html" title="Click for Music">Music</a></li>
                <li><a href="news.html" title="Click for News">News</a></li>
                <li><a href="biography.html" title="Click for Biography">Biography</a></li>
                <li><a href="press.html" title="Click for Press">Press</a></li>
                <li><a href="links.html" title="Click for Links">Links</a></li>
                <li><a href="contact.html" title="Click for Contact">Contact</a></li>
              </ul>
            </div>
        </div>
    	<div id="contentDiv"></div>

  • #2
    Regular Coder cyrus709's Avatar
    Join Date
    Dec 2008
    Posts
    102
    Thanks
    22
    Thanked 5 Times in 5 Posts
    One way to handle this is to make the position absolute for your menu and place it X from the top. Works for me.
    PHP Code:
    .nav{
    width:200px;
    margin-left:600px;
    top:10px;
    position:absolute;

    Play around with the position from the top to get it right where you want it.
    Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

  • Users who have thanked cyrus709 for this post:

    garabildi (02-14-2011)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello garabildi,
    Do you have a preference which way you position that menu? Either floating or absolute positioning will work.

    Nothing wrong with cyrus709's suggestion ... but why use a margin with ap? Try positioning both top and left like this -
    Code:
    .nav {
    width: 200px;
    position: absolute;
    top: 10px;
    left: 600px;
    }
    You will need to make #banner position: relative; for this to work correctly.
    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

  • Users who have thanked Excavator for this post:

    garabildi (02-14-2011)

  • #4
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    Thanks for the suggestion, guys.

    While I was waiting for responses I played around with the CSS a bit and I think I have come up with something suitable.


    Code:
    #banner{
    width:630px;
    height:177px;
    float:left;
    }
    #banner h1 a{width:240px;
    height:135px;
    display:block;
    background:url(../images/banner_2.png) left top no-repeat;
    text-indent:-5000px;
    text-decoration:none;
    outline:none;
    margin:0;
    padding:0;}
    
    #banner h2{
    font-size:1.1em;
    color:#999;
    margin:0;}
    
    #nav{
    float:left;
    margin-top:147px;
    width:170px;}
    	
    #nav ul{
    list-style-type:none;
    margin:0;
    padding:0;}
    	
    #nav li{
    float:left;
    list-style-type:none;
    font-size:1.1em;
    text-transform:uppercase;}
    
    .colA{padding:0 5px 0 5px;}
    .colB{padding:0 7px 0 5px;}
    Code:
    <body id="home">
    <div id="wrapper">
    	<div id="banner">
        	<h1><a href="index.html" title="HOME"> fsdfsdf </a></h1>
            <h2>Blah Blah</h2>
            <div id="nav">
              <ul>
                <li class="colA"><a href="index.html" title="Click for Hhome">Home</a></li>
            <li class="colA"><a href="music.html" title="Click for Music">Music</a></li>
    		<li class="colA"><a href="news.html" title="Click for News">News</a></li>
            <li class="colA"><a href="biography.html" title="Click for Biography">Bio</a></li>
    		<li class="colB"><a href="press.html" title="Click for Press">Press</a></li>
    		<li class="colB"><a href="links.html" title="Click for Links">Links</a></li>
    		<li class="colB"><a href="contact.html" title="Click for Contact">Contact</a></li>
            </div>
        </div>
    	<div id="contentDiv"></div>
    Even though this seems to work fine in IE7, Opera 11 and FF3, perhaps the absolute/ relative positioning method is remains the better option?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That code is invalid without the </ul> to close the unordered list. I think the whole layout will likely break when you validate your list.

    Try it like this instead -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #banner {
    	width:630px;
    	height:177px;
    	float: left;
    	background: #ccc;
    }
    #banner h1 a {
    	width:240px;
    	height:135px;
    	margin:0;
    	padding:0;
    	float: left;
    	display:block;
    	background: #f00 url(../images/banner_2.png) left top no-repeat;
    	text-indent:-5000px;
    	text-decoration:none;
    	outline:none;
    }
    #banner h2 {
    	font-size:1.1em;
    	color:#999;
    	margin:0;
    	background: #00f;
    }
    #nav {
    /*
    float:left;
    margin-top:147px;
    */
    	width:170px;
    	margin: 20px 0 0 450px;
    }
    #nav ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
    #nav li {
    	float:left;
    	list-style-type:none;
    	font-size:1.1em;
    	text-transform:uppercase;
    }
    	.colA {padding:0 5px 0 5px;}
    	.colB {padding:0 7px 0 5px;}
    </style>
    <title>Untitled Document</title>
    </head>
    <body id="home">
    	<div id="banner">
        	<h1><a href="index.html" title="HOME"> fsdfsdf </a></h1>
            <h2>Blah Blah</h2>
            <div id="nav">
              <ul>
                  <li class="colA"><a href="index.html" title="Click for Hhome">Home</a></li>
                  <li class="colA"><a href="music.html" title="Click for Music">Music</a></li>
                  <li class="colA"><a href="news.html" title="Click for News">News</a></li>
                  <li class="colA"><a href="biography.html" title="Click for Biography">Bio</a></li>
                  <li class="colB"><a href="press.html" title="Click for Press">Press</a></li>
                  <li class="colB"><a href="links.html" title="Click for Links">Links</a></li>
                  <li class="colB"><a href="contact.html" title="Click for Contact">Contact</a></li>   
              </ul>     
            </div>
        <!--end banner--></div>
    </body>
    </html>
    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

  • #6
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    Well spotted! I must have just copied it across incorrectly as I definitely have the close tag in the original. I tried the suggestion of

    Code:
    /*float:left;
    margin-top:147px;/*
    but that brings the menu under the banner and not to the right of the screen

    -Banner------------
    -Menu-------------
    ----Main Content---

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by garabildi View Post
    Well spotted! I must have just copied it across incorrectly as I definitely have the close tag in the original. I tried the suggestion of

    Code:
    /*float:left;
    margin-top:147px;/*
    but that brings the menu under the banner and not to the right of the screen

    -Banner------------
    -Menu-------------
    ----Main Content---
    There are more edits to that code than just those two lines. Either do a line by line comparison to yours or just copy/paste that example into a new .html and view it in your browser to see the differences.
    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

  • #8
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    Thanks, Excavator! Your advice would still require me to do a little bit of css re-gigging. Perhaps this is because I'm hampered by a poorly coded base.

    Is there any reason why I should not use my own reworking of the code (which appears to work fine on a number of browsers) over the code you have provided (which still requires me to put some work into it)?


  •  

    Posting Permissions

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