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
    Feb 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menu buttons being squashed

    Help!

    I am messing around with CSS and HTML. I have managed to add some menus within some header, but when I resize the browser to the left, the menu buttons get pushed off.

    I ve heard you could use position either relative, static or absolute, it might be a red herring though. How can I keep the menu buttons from moving around.

    Here is the HTML
    ----------------------
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<title>Menu added</title>
    				<link rel="stylesheet" href="style.css" type="text/css">
    </head>
    
    <body>
    <p align="right"><br />
    <a href="http://www.intensivstation.ch"><img src="http://intensivstation.ch/files/en_templates/css_logo.gif" alt="" width="414" height="56" border="0" /></a></p>
    
    <div id="header">
    
    	<div id="tabs">
    	  <ul>
    		<li><a href="http://www.free-css.com/"><span>CSS Templates</span></a></li>
    		<li><a href="http://www.free-css.com/"><span>CSS Layouts</span></a></li>
    		<li><a href="http://www.free-css.com/"><span>CSS Books</span></a></li>
    		<li><a href="http://www.free-css.com/"><span>CSS Menus</span></a></li>
    		<li><a href="http://www.free-css.com/"><span>CSS Tutorials</span></a></li>
    		<li><a href="http://www.free-css.com/"><span>CSS Reference</span></a></li>
    		<li><a rel="nofollow" target="_blank" href="http://www.exploding-boy.com/" title="explodingboy"><span>explodingboy</span></a></li>
    	  </ul>
    	</div>
    
    </div>
    
    <div id="content">
    	<div id="navi">
    		<h2>MENU</h2>	
    <pre>
    #content #navi {
    border-left:1px dotted #000; 
    border-bottom:1px dotted #000;
    float:right;
    width:250px;
    background-color:#ff99cc;
    margin:0px 0px 20px 20px;
    }
    </pre>
    <p>
    				<img src="xhtml10.gif" alt="" width="80" height="15" border="0"/><br/>
    				<img src="css.gif" alt="css" width="80" height="15" border="0"/><br />
    				<a href="http://www.monorom.to"><img src="monorom.gif" alt="monorom" width="80" height="15" border="0"/></a><br />
    				<!-- Creative Commons License -->
    				<a rel="license" href="http://creativecommons.org/licenses/by/1.0/"><img src="cc.gif" alt="Creative Commons License" width="80" height="15" border="0"/></a><br />
    This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/1.0/">Creative Commons License</a>.
    <!-- /Creative Commons License -->
    
    </p>
    	</div>
    	
    	<h2>CONTENT</h2>
    	<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
    	<p>MENU floating<br />
    layout grid with a floating menu on the left.<br />
    The menu is fixed in it's width. The height adjusts to the content.<br />
    <a href="/en/templates/">&#171;= more TEMPLATES</a>
    <br /></p>
    <pre>
    html { 
      padding:0px;
      margin:0px;
    }
    
    body {
      background-color: #e1ddd9;
      font-size: 12px;
      font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
      color:#564b47;  
      padding:0px 20px;
      margin:0px;
    }
    	
    #content {
      border:1px solid #564b47; 
       background-color:#fff;
    }
    </pre>
    <br /><!-- This little BR is because IE5PC likes to ignore the margin-bottom on the last P above if it is the last element in the DIV-->
    </div>
    
    </body>
    </html>
    -------------------------

    Here is the CSS

    html {
    padding:0px;
    margin:0px;
    }

    body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;
    padding:0px 20px;
    margin:0px;
    }

    p, h2, pre {
    margin: 0px;
    padding: 10px;
    }

    #header {
    font-size: 11px;
    text-transform:uppercase;
    text-align: right;
    color: #564b47;
    padding:5px 15px;
    margin:0px;
    height:27px; /** the height can sometimes push the menu off the border **/
    }

    /** menu insert **/

    h1 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin:0;
    padding:0;
    }

    hr {
    border:none;
    border-top:1px solid #CCCCCC;
    height:1px;
    margin-bottom:25px;
    }

    #tabs {
    float:left;
    width:100%;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #666;
    }

    #tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }

    #tabs li {
    display:inline;
    margin:0;
    padding:0;
    }

    #tabs a {
    float:left;
    background:url("tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }

    #tabs a span {
    float:left;
    display:block;
    background:url("tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#666;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}

    /* End IE5-Mac hack */
    #tabs a:hover span {
    color:#FFF;
    }

    #tabs a:hover {
    background-position:0% -42px;
    }

    #tabs a:hover span {
    background-position:100% -42px;
    }


    /** end of menu insert **/

    h2 {
    font-size:14px;
    padding-top:10px;
    text-transform:uppercase;
    color: #564b47;
    background-color: transparent;
    }

    a {
    color: #ff66cc;
    font-size: 11px;
    background-color:transparent;
    text-decoration: none;
    }

    pre {
    color: #564b47;
    font-size: 11px;
    background-color:transparent;
    font-family: Courier, Monaco, Monospace;
    }

    /* positioning-layers static and absolute */


    #content {
    border:1px solid #564b47;
    background-color:#fff;
    }

    #content #navi {
    border-left:1px dotted #000;
    border-bottom:1px dotted #000;
    float:right;
    width:250px;
    background-color:#ff99cc;
    margin:0px 0px 20px 20px;
    }

  • #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 purge,
    Give that menu a width and it won't size down like the rest of your page.
    Try this -
    Code:
    #tabs ul {
    width: 775px;
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    When posting code (including CSS) in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.

    This will wrap your code in a scroll box which greatly helps the readability of your post.
    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:

    purge (11-08-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry bout the coding thing. I did put a tag on that, but the rest of the tag did not seem to catch the CSS part.

    Your suggestion worked a treat, so it seems I must add a width on to the correct element. I guess I did not know which one, but at least if I run into the menu situation again, at least I know what else I can try.

    How do you thank people here?


  •  

    Posting Permissions

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