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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    I just cant get my LI's where i want them to go!

    Im having trouble positioning my LI items in my UL called "leftlist".

    I have set my leftlist UL to width 500px by height 60px.

    I need the background image in my leftlist UL to appear as it is doing (the image is 300x60 no repeat). The main div has the other background image set to repeat-x.

    Inside the leflist UL are three LI's. I want them horizontal (as they already are) but positioned directly underneath the 45 degree angle part of the white line - and without altering any of the rest of the positioning of the page if that makes sense -

    http://www.tomkilbourn.com/newsite/t...left_list.html

    I just cant work it out, any ideas? Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try something like:

    Code:
    #leftlist {
    padding: 20px 0 0 296px;
    }
    and see if that doesn't get it close.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Its put the list close, but also moved the rest of the LI out of position which has also pused the wrapper div down and the other background image out of place..

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    you need a div wrapper on the third UL.

    Wrap a floated div around the UL using a different ID name, of course, then position the image as a background to the div. Position the UL using margins, add the colours and on:hover and Bob's yer uncle...

    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"><!-- Source is http://www.tomkilbourn.com/newsite/test/masthead_with_left_list.html -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    font: 10px verdana, arial, helvetica, sans-serif;
    margin: 5px;
    padding: 0px;
    }
    
    
    ul#toplist, ul#sidelist {
    font:600 11px Arial,Helvetica,sans-serif;
    padding: 0;
    margin: 0;
    
    }
    
    ul#toplist {
    	width: 100%;
    	background-color: #000000;
    	background-image: url(masthead_with_left_list_files/toplist_background.gif);
    	background-repeat: repeat-x;
    	padding: 2px 0px 2px 0px;
    }
    
    ul#sidelist { 
    float: right; 
    }
    
    
    ul#toplist li, ul#sidelist  li {
    display: inline;
    padding: 1px 0 0 0;
    border-right: 1px solid white;
    }
    
    ul#toplist li a, ul#sidelist  li a {
    padding: 0 5px;
    color: #ccc;
    text-decoration: none;
    }
    
    #masthead a:hover, #sidelist a:hover {
    color:#999;
    text-decoration:underline;
    }
    
    ul#toplist li.toplistlast, ul#sidelist  li.sidelistlast {
    border:none;
    }
    
    ul#sidelist li.sidelistlast {
    	background-color:#330000;
    	margin: 0;
    }
    
    
    #masthead {
    	overflow: hidden;
    	background-image: url(masthead_with_left_list_files/gradient_banner_for_curve.gif);
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    
    #masthead img { 
    float: left; 
    }
    
    div#leftlist_div {
    float:left;
    	height: 60px;
    	width: 600px;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	background-image:url(masthead_with_left_list_files/bannerimage_with_curve.gif);
    	background-repeat: no-repeat;
    
    }
    
    ul#leftlist {
    		  margin:20px 0px 0px 300px;
    		  padding:0;
    		  }
    
    ul#leftlist li {
    		  margin: 0px 0px 0px 0px;
    		  padding: 2px ;
    		  display:inline;
    		  background-color:#ff0000;
    		  color: #ffffff;
    		  }
    
    
    
    ul#leftlist  li a:link {
    		  color: #cccccc;
    		  background-color:#990000;
    		  padding: 2px ;
    		  }
    
    ul#leftlist  li a:hover {
    		  color: #333333;
    		  background-color:#993333;
    		  }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="masthead">
    <ul id="toplist">
    <li><a href="#">toplist one</a></li>
    <li><a href="#">toplist two</a></li>
    <li><a href="#">toplist three</a></li>
    <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.tomkilbourn.com/newsite/test/test.shtml">validate css</a></li>
    <li class="sidelistlast"><a href="http://validator.w3.org/check?uri=http%3A//www.tomkilbourn.com/newsite/test/test.shtml">validate page</a></li>
    </ul>
    
    
    <div id="leftlist_div">
    
    	 <ul id ="leftlist">
    	 	 <li><a href="#">leftlist one</a></li>
    		 <li><a href="#">leftlist two</a></li>
    		 <li><a href="#">leftlist three</a></li>
    
         </ul>
    
      </div> <!-- close left_list div here -->
    
    
    <ul id="sidelist">
    <li><a href="#">sidelist one</a></li>
    <li><a href="#">sidelist two</a></li>
    <li class="sidelistlast"><a href="#">sidelist three</a></li>
    </ul>
    
    <br style="clear: both;"/>
    </div>
    
    </body>
    </html>
    You will need to adjust the references for the images. I snagged a copy onto my HDD and the local references are still there... Oops... can't do everything for you...
    Last edited by jlhaslip; 09-13-2007 at 04:08 AM.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Hey thanks that has got it

    Can I be really annoying now and ask if it can be done without using the extra Div?

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    I have got it looking ok without an extra div by making the ul#leftlist 30px in height and adding a top padding of 30px. The original height of the UL was 60px. It looks ok, but Im not happy with it having a height of 30px now.

    Have a look - http://www.tomkilbourn.com/newsite/t...left_list.html
    Last edited by moss2076; 09-13-2007 at 03:36 PM.

  • #7
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    I really like that design and layout. If I were you I'd use the right side links as a drop down list. Anyway, it doesn't appear correct in IE 6 if you care.
    My Website: DumpsterDoggy

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Hi thanks for your input, im using IE7 and FF. What isnt appearing correct in IE 6? Its a pain that I cant run 6 and 7 on one machine.

  • #9
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Quote Originally Posted by moss2076 View Post
    Its a pain that I cant run 6 and 7 on one machine.
    Yeah, that is annoying. Luckily, at work I have IE6 and at home IE7. So that works nicely for me.

    Add this code:

    Code:
    #masthead {
    	overflow: hidden;
    	background-image: url(http://www.tomkilbourn.com/newsite/images/gradient_banner_for_curve.gif);
    	background-repeat: repeat-x;
    	background-position: bottom;
    	height: 78px;
    }
    78px seems to look good on all browsers I checked IE6, FF, Opera 9
    My Website: DumpsterDoggy

  • #10
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Cool Ive added the height to the wrapper div. I have given the UL a height of 40px (even though the image is 60px) and given the UL padding top of 20px. That way 40px + 20px equals the 60px needed for the height.

    Does that sound and look about right?

  • #11
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    That's what I tried at first, but it did not look right in IE6. I attached a (crappy looking) screen shot of IE6 with those changes. So if 78px looks good in all browsers, I'd just leave it. Not sure why it isn't 60px, but I don't know how all the browsers render differently in these aspects.
    Attached Thumbnails Attached Thumbnails I just cant get my LI's where i want them to go!-test_screen.gif  
    My Website: DumpsterDoggy


  •  

    Posting Permissions

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