side nav bar

pjwhite99 · 26-11-2011 09:10PM #1

Hi

i am making a side nav bar with a unordered list inside a div,

you know when you make a list it all way pushes over to the right abit is there any way of stoping this i want the list tight up to the left of the div???

ivanc · 27-11-2011 11:55AM

pjwhite99 wrote: »

Hi

i am making a side nav bar with a unordered list inside a div,

you know when you make a list it all way pushes over to the right abit is there any way of stoping this i want the list tight up to the left of the div???

Put a negative margin on the li.

matt-dublin · 27-11-2011 01:46PM

put a 0 margin on the ul and a 0 margin on the li

you shouln't use negative margins.

pjwhite99 · 28-11-2011 08:21PM

matt-dublin wrote: »

put a 0 margin on the ul and a 0 margin on the li

still never worked this is what i have done

#side_links ul li {
line-height: 35px;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #27C3F3;
color: #8E6C3E;
list-style-position: inside;
list-style-image: url(../images/arrow.png);
font-weight: bold;
margin: 0px;
width: 140px;
}

any ideas?

matt-dublin · 28-11-2011 09:24PM

can you post both the html and css?

it sounds like the container the list is in had padding.

also try
padding-left: 0px;

in bothe the ul and li css

29-11-2011 10:46AM

pjwhite99 wrote: »

still never worked this is what i have done

#side_links ul li {

Just to be sure, is side_links the name of the ul or the div above the ul? Also, that CSS only applys to the li elements, not the ul. Set the padding-left and margin-left of both to 0px

ivanc · 29-11-2011 04:55PM

matt-dublin wrote: »

you shouln't use negative margins.

The use of negative margins is perfectly valid mark up and solves a lot of those little issues like the indent when using an unordered list.

tricky D · 29-11-2011 05:08PM

It is explicitly allowed in the spec, but not for padding which is explicitly not allowed.

matt-dublin · 29-11-2011 05:55PM

ivanc wrote: »

The use of negative margins is perfectly valid mark up and solves a lot of those little issues like the indent when using an unordered list.

it does work you're right, but if you need to use - margins and padding then you should have a look at all of your container positioning and padding.

in theory you should never have to use it if everything is structured correctly

pjwhite99 · 29-11-2011 06:37PM

28064212 wrote: »

Just to be sure, is side_links the name of the ul or the div above the ul? Also, that CSS only applys to the li elements, not the ul. Set the padding-left and margin-left of both to 0px

i needed to use #side_links ul works fine now thanks

Liam Byrne · 29-11-2011 09:21PM

matt-dublin wrote: »

put a 0 margin on the ul and a 0 margin on the li

you shouln't use negative margins.

Huh ?

position:absolute;left:50%;width:950px;margin-left:-475px

is a perfectly acceptable CSS-based method of centering a popup overlay on an unknown screen size

matt-dublin · 29-11-2011 09:39PM

why wouldn't you just use an auto margin for that? wouldn't it centre without the added bloat?
margin:auto; width:950px;

Giblet · 29-11-2011 11:16PM

Negative margins should only be used when you need to move something into a defined margin outside the regular flow of a document, centered absolutely positioned elements require it in some cases too, but never just to get something into position without considering how it will affect the flow of the doc.. For a UL, just set margin to 0.

margin:auto only works when you have a width for the container.

tricky D · 30-11-2011 02:26PM

From Smashing Mag

The Definitive Guide to Using Negative Margins

matt-dublin · 30-11-2011 02:34PM

smashin mag wrote:

Dreamweaver doesn’t understand it
Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

excellent.

tricky D · 30-11-2011 02:37PM

Yup, that raised a chuckle from me also.

side nav bar

Comments