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
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE6 Navmenu float positioning issue.

    I was hoping I might get a little help on a positioning problem I'm having with a simple navigation menu. I am trying to float right and have the links align horizontally. Instead they align left and align vertically. Here is my css and html for the ul list.

    <div id="styletwo">
    <ul>
    <li><a href="" title="">Contact Us</a></li>
    <li><a href="" title="">Donate</a></li>
    <li><a href="" title="" class="current">Membership</a></li>
    <li><a href="" title="">Our Work</a></li>
    <li><a href="" title="">Home</a></li>
    </ul>

    </div>



    #styletwo{
    position:relative;
    display:inherit;
    height:21px;
    font-size:11px;
    font-weight:bold;
    background:transparent url(images/bgOFF.gif) repeat-x top left;
    font-family:Arial,Verdana,Helvitica,sans-serif;
    width: 1000px;
    margin: 0;
    }
    #styletwo ul{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    }
    #styletwo ul li{
    display:block;
    float:right;
    margin:0 1px 0 0;
    }
    #styletwo ul li a{
    display:block;
    float:inherit;
    color:#034895;
    text-decoration:none;
    padding:3px 20px 0 20px;
    height:18px;
    }
    #styletwo ul li a:hover {
    color:#FF352E;
    background:transparent url(images/bgON.gif) repeat-x top left;


    If anyone has any ideas I would really appriciate it.
    Last edited by minddesign; 06-01-2009 at 04:52 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If anyone has any ideas I would really appriciate it.
    Please post your complete code here (and use [CODE][/CODE] tags to wrap your code). Or a link to your page would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #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 minddesign,
    Is this more what you had in mind?
    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" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px Arial,Verdana,Helvitica,sans-serif;
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #styletwo{
    	font-weight: bold;
    	background: transparent url(images/bgOFF.gif) repeat-x top left;
    	width: 1000px;
    }
    #styletwo ul{
    	width: 200px;
    	float: right;
    	list-style-type:none;
    }
    #styletwo ul li{
    	display:block
    }
    #styletwo ul li a{
    	display: block;
    	color: #034895;
    	text-decoration: none;
    	padding: 3px 20px 0 20px;
    	height: 18px;
    }
    #styletwo ul li a:hover {
    	color: #FF352E;
    	background: transparent url(images/bgON.gif) repeat-x top left;
    }
    </style>
    </head>
    <body>
    	<div id="styletwo">
    		<ul>
    			<li><a href="" title="">Contact Us</a></li>
    			<li><a href="" title="">Donate</a></li>
    			<li><a href="" title="" class="current">Membership</a></li>
    			<li><a href="" title="">Our Work</a></li>
    			<li><a href="" title="">Home</a></li>
    		</ul>
    	</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

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help.

    It's aligning vertically not horizontally though? I am going to tinker for a bit to see if I figure something out.

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hollidaysburg Area YMCA</title>
    <style type="text/css"> 
    
    
    body  {
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	color: #666666;
    	background-color: #034895;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 100%;
    	background-image: url(file:///D|/Documents%20and%20Settings/dude/Desktop/Sensory%20Sunshine/mainBG.jpg);
    	background-repeat: repeat-x;
    }
    #h1 {
    	color: #000033;
    }
    .twoColFixLtHdr #container {
    	width: 1024px;
    	margin: 0 auto; 
    	border: 1px solid;
    	text-align: left; 
    	border-color: #CCCCCC;
    	background-color: #FFFFFF;
    	background-position: bottom;
    	background-repeat: no-repeat;
    } 
    .twoColFixLtHdr #header {
    	padding: 0px 0px 0px 8px;
    	margin: 0px 10px 18px 10px;
    } 
    .twoColFixLtHdr #header h1 {
    	margin: 0; 
    	padding: 10px 0; 
    	margin-left: 100px;
    	color: #034895;
    }
    .twoColFixLtHdr #sidebar1 {
    	float: left; 
    	width: 200px; 
    	padding: 15px 10px 15px 20px;
    }
    .twoColFixLtHdr #mainContent {
    	margin: 0 50px 30px 270px; 
    	padding: 10px 75px 20px 20px; 
    } 
    .twoColFixLtHdr #footer {
    	padding: 0 10px 0 20px;
    } 
    .twoColFixLtHdr #footer p {
    	margin: 0; 
    	padding: 10px 0; 
    }
    .fltrt { 
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }td img {display: block;}
    
    </style>
    <!--[if IE 5]>
    <style type="text/css"> 
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    </style>
    <![endif]-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="styletop.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body class="twoColFixLtHdr">
    
    <div id="container">
      <div id="header">
      
        <div id="styletwo">
          <ul>
            <li><a href="" title="">Contact Us</a></li>
            <li><a href="" title="">Donate</a></li>
            <li><a href="" title="" class="current">Membership</a></li>
            <li><a href="" title="">Our Work</a></li>
            <li><a href="" title="">Home</a></li>
          </ul>
        </div>
        <img align="" src="logo5.jpg" width="153" height="105" />
      </div>
     
      <img src="photobarblue.png" width="1024" height="252" />
       
    
      <div id="sidebar1">
        <h4 id="h1">Fun at the YMCA</h4>
        <div id="styleone">
    	<ul>
    	<li><a href="" title="">Aquatics</a></li>
    	<li><a href="" title="">Wellness Center</a></li>
    	<li><a href="" title="" class="current">Land fitness</a></li>
    	<li><a href="" title="">Sports</a></li>
    	<li><a href="" title="">Race Series</a></li>
        <li><a href="" title="">Child Care</a></li>
    
    	</ul>
    	<!-- end #sidebar1 -->
        </div>
    	
      </div>
      
      <div id="mainContent">
        <h3 id="h1">Community Wellness Center</h3>
        
        <p>Welcome to the Hollidaysburg Area YMCA website. We have recently updated out web presence to ensure the most pleasant online experience possible. While you are here please  take the time to check out all that your local YMCA has to offer. </p>
        <p>Whether you are looking for swimming lessons for the kids, personal fitness activities such as yoga or spinning or simply a day of fun with the family, the Hollidaysburg YMCA is the place to visit.</p>
         It's Your YMCA</h4>
        <p>We take pride in all that we have to offer here at the Y. We also love to hear what you, our members are interested in. Please feel free to take the time to contact us and let us know how we are doing. We are here for you and look forward to helping you and your family live a healthier, happier life.</p>
        <!-- end #mainContent --></div>
    
    <br class="clearfloat" />
      <div id="footer">
      
        <div><p>Hollidaysburg Area YMCA</p></div>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the CSS for the menu in question.
    Code:
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #styletwo{
    	font-weight: bold;
    	background: transparent url(images/bgOFF.gif) repeat-x top left;
    	width: 1000px;
    }
    #styletwo ul{
    	width: 200px;
    	float: right;
    	list-style-type:none;
    }
    #styletwo ul li{
    	display:block;
    }
    #styletwo ul li a{
    	display: block;
    	color: #034895;
    	text-decoration: none;
    	padding: 3px 20px 0 20px;
    	height: 18px;
    }
    #styletwo ul li a:hover {
    	color: #FF352E;
    	background: transparent url(images/bgON.gif) repeat-x top left;
    }

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If you are trying to make a 3 column fixed layout, take a look at good sample at http://bonrouge.com/3c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the link! I'm going to go ahead and update my code. It's really the main navmenu that is messing me up. It's seems simple enough. I want it to float top right, while aligning horizontally.


    ************* I just noticed an error on my first post!! **************

    I was hoping I might get a little help on a positioning problem I'm having with a simple navigation menu. I am trying to float right and have the links align vertically. Instead they align left and align horizontally. Here is my css and html for the ul list.


    I mixed up Horizontally and vertically... Silly... Sorry for the mix up.


  •  

    Posting Permissions

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