SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu and column witdh assistance please!

    hello, i am trying to get the menu to my layout stretch all the width of my column but i somehow can find where to make changes to achieve it on IE, FF, safari, opera and netscape browsers.
    the menu is quite straightforward and i think the problem might be coming from the layout. Can someone please help?
    many thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to provide us with some code or a link in order for us to help

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, sorry paul here is the link

    almost there... changed #inner to
    #inner{
    margin-right:22%;}
    it was 23% and changed
    #contentMenu {padding: 0 2px;}
    from padding:0
    but somehow i am getting on FF and netsacpe a small gap. this only works well if i put
    #contentMenu {padding: 0 1px;}
    .
    anyway, is there a way to display both #contentMenu padding or work around it? many thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As you have a fixed pixel width you should be using pixels and not percentages because percentages will always be out.

    I think this is what you were trying to do.

    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=iso-8859-1" />
    <title>test layout3</title>
    <style type="text/css">
    
    
    
    * {margin:0;padding:0; border:0;}
    p,h1,h2{padding:5px;margin-bottom:1em; margin-left:0.5em;}
    h2{font-size:98&#37;}
    h3 { font: 12px Georgia, "Times New Roman", Times, serif; padding:2px 3px; margin: 0; color: #ff0000;}
    body{
        text-align:center;
        margin:auto; 
        background:#FFF url(http://www.layout3.upfrontec.com/images/bg5.png) no-repeat;
        color:#F0F0EE;
        width:770px;
        text-align: left;
        font-family: Arial, Tahoma, sans-serif; 
        font-size:12px;
    }
    #wrapper{
        margin:21px 0;
        background:#626D75;/* right column colour*/
        text-align:left;
        border:5px #F2F2F2 solid;
        min-height:0;
    }
    
    
    #header,#footer{
        background:#999;
        color:#000;
        /*width:100%;*/
        clear:both;
    }
    #header{border-bottom:1px solid #FFF; background:url(http://www.layout3.upfrontec.com/images/u_header.jpg) no-repeat; height:114px;}
    #footer{border-top:1px solid #FFF; overflow:hidden; padding:4px;}
    #footer a{color:#FFF;}
    
    #breadcrumb{ background:#999; color:#FFF; padding:4px; border-bottom:1px solid #FFF;}
    
    
    #inner{
        margin-right:167px;
        background:#EBEBEB;
        border-right:1px solid #fff;
    }
    
    #middle{
        background:#AEE758;
        margin-left:415px;
        color:#000;
        position:relative;
        border-left:1px solid #FFF;
    }
    
    
    #content2{
        position:relative;
        width:100%;
        float:left;/* contain clearing*/
    }
    #left{
        width:415px;
        margin-left:-414px;/*overlap for old mozilla*/
        position:relative;
        left:-2px;/* now line it up*/
        float:left;
        color:#000;
    }
    #right{
        width:167px;
        margin-right:-166px;/*overlap for old mozilla*/
        position:relative;
        left:2px;/* now line it up*/
        float:right;
    }
    #left{margin-right:-3px;}/* 3 pixel jog*/
    #right{margin-left:-1px;}/* */
    
    
    /* clear without structural mark-up */
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /* mac hide  \*/
    .clearfix {display: block;}
    /* End hide */
    
            
    
    /*menu*/
    #contentMenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 167px;
    margin: 0;
    }
    
    #contentMenu h1 {
    display: block;
    background-color:#FF9900;
    font-size: 90%;
    padding: 3px 0 5px 5px;
    color: #333333;
    margin: 0px;
    width:162px;
    }
    
    #contentMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #contentMenu ul li {
    margin: 0px;
    padding: 0px;
    }
    #contentMenu ul li a {
    font-size: 80%;
    display: block;
    border-bottom: 1px dashed #C39C4E;
    padding: 5px 2px 2px 5px;
    text-decoration: none;
    color: #aee758;
    width:160px;
    }
    
    #contentMenu ul li a:hover, #contentMenu ul li a:focus {
    font-weight:bold;
    color: #ff9900;
    background-color: #aee758;
    }
    
    
    
    
    /*Start breadCrumb */
               
        #breadcrumb {
        height: 18px; 
        font-size:12px;
        padding: 2px;
        background: #999; 
        color: #f5f5f5;
       }
      #breadcrumb li {
       float: left;
       display: inline;
       margin-right: 4px;
       }
       #breadcrumb a {
       color: #fff; /* Our breadcrumb links are going to be white */
       font-weight: bold; /* And bold */
       background: url(http://www.layout3.upfrontec.com/../images/Ysq_icon.png) bottom  right no-repeat;
       padding-right: 11px; /* We need to add some padding to the right of the link. This space is where the background image is going to be shown. */
       text-decoration: none;
       }
      #breadcrumb a:hover {
       color: #333;
       background: url(http://www.layout3.upfrontec.com/../images/Bsq_icon.png) top right no-repeat;
     }
    
    /*E O breadCrumb*/ 
    
    
    </style>
    <!--[if IE ]>
    <style type="text/css">
    * html #wrapper{height:1%}
    
    * html .clearfix,* html #inner, * html #middle {height: 1%;}
    
    #inner, #middle{min-height:1px}
    
    
    </style>
    <![endif]-->
    <script type="text/javascript">
    <!--
    window.onload=show;
    function show(id) {
    var d = document.getElementById(id);
        for (var i = 1; i<=10; i++) {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"> </div>
        <!-- end #header-->
        <!--<div id="breadcrumb">-->
        <ul id="breadcrumb">
            <li><a href="#">Home</a></li>
        </ul>
        <!--</div>-->
        <!-- end #breadcrumb-->
        <div id="inner">
            <div id="middle" class="clearfix">
                <div id="content">
                    <div id="left">
                        <p> Ut mauris velit, convallis vel, sodales ut, viverra at, nulla. Maecenas dignissim, nulla ut ultricies dignissim, leo risus tempus odio, et dignissim ligula est at elit. Cras ac dolor in neque volutpat iaculis. Suspendisse nunc neque, blandit sit amet, convallis vitae, venenatis et, nisl. Cras lacinia. Maecenas eget sem at mi porta venenatis. Phasellus ac massa. Nunc tempor. Maecenas nunc leo, consectetuer ut, euismod eu, ultrices vitae, elit. Nunc auctor dignissim enim. Cras pretium erat condimentum est. Phasellus non massa luctus mi pretium ullamcorper. Sed ultricies. In id mauris. Duis mollis, nibh a sodales malesuada, ante ipsum tristique lacus, et tristique wisi magna quis dolor. Morbi volutpat sem in tellus. Nunc lacinia velit quis lectus. </p>
                    </div>
                    <div id="right"  class="column">
                    
                                <div id="contentMenu"><h1>Navigation</h1>
                            <ul>
                                <li><a href="#" tabindex="1">menu1</a></li>
                                <li><a href="#" tabindex="2">menu2</a></li>
                                <li><a href="#" tabindex="3">menu3</a></li>
                                <li><a href="#" tabindex="4">menu4</a></li>
                                <li><a href="#" tabindex="5">menu5</a></li>
                                <li><a href="#" tabindex="6">menu6</a></li>
                            </ul>
                        </div>
                    </div>
                    <div id="content2"  class="column">
                        <h3>W3C Standards?<span>&nbsp;</span></h3>
                        <p>The Web Standards Group is for web designers &amp; developers who are interested in web standards (HTML, XHTML, XML, CSS, XSLT etc.) and best practices (accessible sites using valid and semantically correct code)... </p>
                    </div>
                </div>
                <!-- end #content-->
            </div>
            <!-- end #middle-->
        </div>
        <!-- end #inner-->
        <div id="footer"> Footer </div>
        <!-- end #footer-->
    </div>
    <!-- end #wrapper-->
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul thats exactly what i have been trying to achieve. many thanks again Maestro.


Bookmarks

Posting Permissions

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