View Full Version : I just cant get my LI's where i want them to go!

09-12-2007, 11:55 PM
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 -


I just cant work it out, any ideas? Thanks:)

09-13-2007, 01:41 AM
try something like:

#leftlist {
padding: 20px 0 0 296px;

and see if that doesn't get it close.

09-13-2007, 02:31 AM
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..

09-13-2007, 03:58 AM
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...

<!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 -->
<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 {

ul#toplist li.toplistlast, ul#sidelist li.sidelistlast {

ul#sidelist li.sidelistlast {
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 {
height: 60px;
width: 600px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-repeat: no-repeat;


ul#leftlist {
margin:20px 0px 0px 300px;

ul#leftlist li {
margin: 0px 0px 0px 0px;
padding: 2px ;
color: #ffffff;

ul#leftlist li a:link {
color: #cccccc;
padding: 2px ;

ul#leftlist li a:hover {
color: #333333;




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

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


</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>

<br style="clear: both;"/>


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... :)

09-13-2007, 01:58 PM
Hey thanks that has got it :)

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

09-13-2007, 03:34 PM
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/test/masthead_with_left_list.html

09-13-2007, 04:06 PM
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.

09-13-2007, 04:11 PM
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.

09-13-2007, 04:53 PM
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:

#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

09-13-2007, 05:00 PM
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?

09-13-2007, 05:18 PM
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.