homepage Welcome to WebmasterWorld Guest from 54.163.139.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
List Alignment in DIV
Saboi

5+ Year Member



 
Msg#: 4682853 posted 8:33 pm on Jun 25, 2014 (gmt 0)

Hello guys,

Part of my HTML code is below. The paragraph displays just well, aligned from the left. However, the LI content automatically aligns to the center. The CSS code is much further below.

What do I need to do to have the LI content align to the left? I would like to create menu's of these.

Will appreciate your advise.


<div id="leftMenu">
<ul>
<li><a href="#">Free SMS</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Exemptions</a></li>
</ul>

<p>Let me see where this will show. Well, looks like it has displayed in the correct way and without padding.
</div><!--End of LeftMenu DIV-->



#leftMenu
{
width: 130px;
background-color: grey;
height: 400px;
float: clear;
margin-top: 39px;
margin-left: 0px;
}

#leftMenu ul li
{
list-style: none;
border-bottom: 2px solid black;
background-color: yellow;
border-left: 0px;
text-align: left;

}


 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4682853 posted 9:04 pm on Jun 25, 2014 (gmt 0)

What do I need to do to have the LI content align to the left?

At times like this it's very useful to open the page in any browser with an Inspector feature (exact name and location will depend on the browser). So instead of fine-tooth-combing your whole css to see where the elusive {text-align: center;} is coming from, just home right in on the element and it will tell you what part of the CSS is being invoked.

Centering isn't the default position for any aspect of a list, so it's got to be in the CSS somewhere. For example, you might have a navigation element inside a header, which happens to say
#header * {text-align: center;}
because you were thinking everything in the header should be centered. I'm just making that up, but it's the likeliest explanation.

brandozz



 
Msg#: 4682853 posted 9:08 pm on Jun 25, 2014 (gmt 0)

Are you trying to clear the padding of the list? The list actually isn't centered, it just appears that way because of the default padding and width of the containing element.

#leftMenu ul {
padding: 0;
}

Saboi

5+ Year Member



 
Msg#: 4682853 posted 9:15 pm on Jun 25, 2014 (gmt 0)

Hello lucy24, thank you for the insight.

@brandozz, thank you too.

I changed the padding as advised and it positioned just how I wanted it.

Thank you guys.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved