CSS Help needed - positioning

[joe8232]

Hi all,

I am relatively new to CSS - used to use tables to layout a webpage. The problem I am having is that I have a div aligned left that I plan to use for navigation.

I have added a list to it and want to get the items in the list to appear like elements of a table - like the ones here [www.st-and.ac.uk] for prospective students etc.

The only problem I have is that the doesn't seem to start at the same place as the div but rather about 50px to the right. Why is this?

Here is the page: www.st-and.ac.uk/~jl386/site/ and here is the code:

#leftRail{
width:175px;
float:left;
margin-right:25px;
margin-bottom:25px;
background-image:url(blue_background.jpg);
background-repeat:no-repeat;
color:#fff;
margin-left:15px;
}

#leftRail li {

list-style:none;
background-color:#FF0000;
color:#fff;
border-bottom:1px solid;
width:175px;
}

then on the page:
<div id="leftRail">
<ul>
<li><a href="index.php">Home Page</a></li>
<li>Events</li>
<li>News</li>
<li><a href="photo.php">Photo Album</a></li>
<li>Aurora</li>
<li>Comittee</li>
<li>Links</li>
</ul>
</div>

Any help would be really appreciated.

 

[Darth.Titan]

an <ul> usually gets indented a bit. Try:
#leftRail ul{
margin: 0;
padding: 0;
}

 

[joe8232]

an <ul> usually gets indented a bit. Try:
#leftRail ul{
margin: 0;
padding: 0;
}

Great! Thanks for that Darth.Titan - I was trying all sorts of things like having negative margins etc. Really appreciate it.

 

[&Ingonyama]

Its good to set all margins/padding to 0 at the beginning of your stylesheet like this:

* { padding: 0; margin: 0 }

(the start means "ALL")

There's also Eric Meyers reset stylesheet which does the same thing but sets other things to good starting values:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

 

[InLikeALion]

Its good to set all margins/padding to 0 at the beginning of your stylesheet like this:

* { padding: 0; margin: 0 }

(the start means "ALL")

There's also Eric Meyers reset stylesheet which does the same thing but sets other things to good starting values:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Resets are a good idea ( I start with Eric Meyers and personalize it to the project at hand). However, I've read places that the universal selector (*) has issues, so a reset like Eric's, which uses actual tag names, might give you better results.

 

[InLikeALion]

Just a comment on another general area - your kerning is very tight in all your body copy, and I didn't see the use of typography to distinguish types of content/your blurbs in the right hand column. The information needs visual hierarchy.

Also, taking a look at your code, you seem to be suffering from divitis. You have a lot of unnecessary divs at the beginning of your document.

I'm just trying to be constructive - not talking down to you. I'm still learning, too. Just wanted to pass along some knowledge.