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 5 of 5

Thread: horizontal list

  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts

    horizontal list

    please look at the example at this link

    http://sudhakargolakaram.co.in/horizontallist.html


    my question is about the 1st horizontal list, i want the list to look like the 2nd list

    when i created the 1st list i noticed that for few links the border-right of white color i have given is not stretching like the other 3 links which have few words.

    i need the list to look like it is in the Second list

    if i use height value for the list ie6 has an issue with that.

    so as a workaround in the 2nd list for all the links where the right border was not extending like the other links, i created a class and give this class an extra bottom padding for all these links and for the links which had the extended right border i did not use any class

    so this worked fine, in case of the first list is there a way i can change my code so that all the links will have an equal height of the right border


    please advice.

    thanks.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    check this and tell what ie6 says. also check in any other browser you want.

    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>
    
    
    <title>Homepage Jobs@Last</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	margin: 0;
    	padding: 0;
    	font: normal 12px Arial, Helvetica, sans-serif;
    	background: #fff;
    	color: #000;
    }
    .clear {
    	clear: both;
    }
    .break {
    	clear: both;
    }
    
    #wrapper {
    	width: 750px;
    	margin: 0 auto;
    }
    
    #topmenu1{
    	float: left;
    	width: 750px;
    	height: auto;
    	background: #4883f2;
    }
    #topmenu1 .menu1{
    	float: left;
    	width: 750px;
    	height: auto;
    }
    #topmenu1 .menu1 ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    #topmenu1 .menu1 ul li {
    	display: inline;
    	float: left;
    	margin: 0 5px 0 0;
    	padding: 0 0px 0 0px;
    	border-right:1px solid #FFFFFF;
    	height:30px;
    	padding: 10px 20px 5px 16px;
    }
    
    #topmenu1 .menu1 ul li a {
    	color: #000;
    	font-weight: bold;
    	text-decoration: none;
    	text-align: center;
    	background: #4883f2;
    	display: block;
    /*	height: 35px;	*/
    	margin: 0px;
    
    }
    #topmenu1 .menu1 ul li.aboutus {
    	border-right: none;
    }
    
    /*#topmenu1 .menu1 ul li a.toplist {
    	padding: 10px 20px 5px 12px;
    }*/
    
    #topmenu1 .menu1 ul li a:hover {
    	text-decoration: underline;
    }
    .menu1 ul li{
    	cursor: pointer;
    }
    
    
    
    
    
    
    
    
    
    
    
    #topmenu2{
    	float: left;
    	width: 750px;
    	height: auto;
    	background: #4883f2;
    }
    #topmenu2 .menu2{
    	float: left;
    	width: 750px;
    	height: auto;
    }
    #topmenu2 .menu2 ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    #topmenu2 .menu2 ul li {
    	display: inline;
    	float: left;
    	margin: 0 5px 0 0;
    	padding: 0 0px 0 0px;
    	border-right: 1px solid #fff;
    }
    
    #topmenu2 .menu2 ul li a {
    	color: #000;
    	font-weight: bold;
    	text-decoration: none;
    	text-align: center;
    	background: #4883f2;
    	display: block;
    /*	height: 35px;	
    */	margin: 0 1px 0 0;
    	padding: 10px 20px 20px 17px;
    }
    #topmenu2 .menu2 ul li.aboutus {
    	border-right: none;
    }
    
    #topmenu2 .menu2 ul li a.toplist {
    	padding: 10px 20px 5px 12px;
    }
    
    #topmenu2 .menu2 ul li a:hover {
    	text-decoration: underline;
    }
    .blueborder {
    	clear: both;
    	border-bottom: 5px solid #5b32ff;
    }
    
    .menu2 ul li{
    	cursor: pointer;
    }
    </style>
    </head><body>
    <div id="wrapper">
    <br><br><br>
    First List
      <div id="topmenu1">
      	<div class="menu1">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Job Search</a></li>
            <li><a href="#">Advertisers and <br>Employers</a></li>
            <li><a href="#">Immigration <br>Resources</a></li>
            <li><a href="#">Education and <br>Training</a></li>
            <li><a href="#">Contact Us</a></li>
            <li class="aboutus"><a href="#">About Us</a></li>
          </ul>
          </div>
          <!-- menu1 ends -->
      </div>
      <!-- topmenu1 ends -->
      <div class="blueborder"></div>
      
      
      <br><br><br>
      Second List
      <div id="topmenu2">
      	<div class="menu2">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Job Search</a></li>
            <li><a href="#" class="toplist">Advertisers and <br>Employers</a></li>
            <li><a href="#" class="toplist">Immigration <br>Resources</a></li>
            <li><a href="#" class="toplist">Education and <br>Training</a></li>
            <li><a href="#">Contact Us</a></li>
            <li class="aboutus"><a href="#">About Us</a></li>
          </ul>
          </div>
          <!-- menu2 ends -->
      </div>
      <!-- topmenu2 ends -->
      <div class="blueborder"></div>
      
    </div>
    <!-- wrapper ends -->
    
    </body></html>
    vineet

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for replying

    the code you mentioned worked in all browsers
    you have specified height for
    #topmenu1 .menu1 ul li {
    height: 30px;
    }
    whereas i specified for
    #topmenu1 .menu1 ul li a {
    height: 30px;
    }


    however i checked the output in many browsers
    the code works fine in ie6 ie 7 firefox and opera, in chrome and safari the last list item was starting in a new line so i had to reduce the left padding

    from padding: 10px 20px 5px 16px; to

    #topmenu1 .menu1 ul li {
    padding: 10px 20px 5px 14px;
    }


    because chrome and opera were not be to adjust to 16px like other browsers
    can a style sheet for these 2 browsers be written exclusively, either an external one or embedded style

    please advice

    thanks

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    instead of 16px make it 15px;

    Code:
    #topmenu1 .menu1 ul li {
    	display: inline;
    	float: left;
    	margin: 0 5px 0 0;
    	padding: 0 0px 0 0px;
    	border-right:1px solid #FFFFFF;
    	height:30px;
    	padding: 10px 20px 5px 15px;
    }
    i have check it with 15px and it works fine in chrome and opera.

    which opera version are you using.

    vineet

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts
    the issue was with chrome and opera

    chrome version = 3.0
    safari version = 3.2.3

    i have also tried with 15px now it works in chrome but not in safari, for safari i have to use 14px

    also without making this too complicated, one question as you noticed in my code for the last list item i have given a class so that the last list item does not have a right border, this last list item appears as a link based on the left and right padding
    #topmenu2 .menu2 ul li a {
    padding: 10px 20px 20px 15px;
    }

    due to this a small portion after this list until the right edge of this containing div when i move the mouse a hyperlink does not appear as the padding is not stretching till the right edge of the div

    is it possible to have the last list item appear as a hyperlink until the right edge of the containing div

    thanks


  •  

    Posting Permissions

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