homepage Welcome to WebmasterWorld Guest from 54.161.190.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Margin Problem using CSS to Style List as Side Navigation
Need help using CSS to add margins to only non-linked text
drummerboy9000




msg:3809566
 3:52 pm on Dec 17, 2008 (gmt 0)

I am making a sidebar for a website using a list styled using css.

The navigational links look and function properly. The problem is, if I try to insert text that isn't a link, I can't put a margin or padding around it, because it messes up the button design of the links:

HTML:

<div class="leftSideBar">

<ul>
<li><a href="http://www.example.com">Link 1</a></li>
<li><a href="http://www.example.com">Link 2</a></li>
<li>Non-Linked Line of Text</li>
</ul>

</div>

CSS:

.leftSideBar {
width: 186px;
float: left;
clear: left;
background-color: #808080;
}

.leftSideBar ul {
list-style-type: none;
list-style-position: outside;
margin: 0 0 1em 0;
padding: 0;
}

.leftSideBar li {
margin: 0;
padding: 0;
}

.leftSideBar a {
color: #0000FF;
text-align: left;
text-decoration: underline;
display: block;
padding: 1.5ex 1ex 1.5ex 10px;
margin: 0;
}

.leftSideBar a:focus, .leftSideBar a:hover, .leftSideBar a:active {
color: #ffffff;
background-color: #303030;
text-decoration: none;
background-color: #000000;
}

If you notice, the linked text are buttons which when you hover over them, the box around them turns dark. to do this I can't have any margins or padding on the css for "ul" or "li" because it creates an unwanted space around the box around the links, but I have css margins on the "a" so there is room around the text.

The problem is, this lack of margins or padding affects the non-linked text.

Is there a simple (or non-simple) way to add margins to this non-linked text without messing up the design of the linked text?

(I would prefer it to stay a list, and prefer that the linked text not have margins around it for apearance reasons)

 

swa66




msg:3809769
 8:18 pm on Dec 17, 2008 (gmt 0)

How about putting the not-linked text in a <p> inside the the <li> and style that ? (remember it by default might have margins or padding, so reset them to what you want it to have). Similarly a <span> could be used, or a class on the <li>s that need to be handled differently or ... there really are dozen of solutions to target just those you seek to have targeted.

drummerboy9000




msg:3809797
 9:00 pm on Dec 17, 2008 (gmt 0)

Thank you! The span option around them worked perfectly.

drummerboy9000




msg:3809808
 9:21 pm on Dec 17, 2008 (gmt 0)

Here's the code that worked for me, in case anyone wants to see it:

HTML:

<div class="leftSideBar">

<ul>
<li><a href="http://www.example.com">Link 1</a></li>
<li><a href="http://www.example.com">Link 2</a></li>
<span id="nolink">
<li>Non-Linked Line of Text</li>
</span>
</ul>

</div>

CSS added (I didn't change the other part, I just added this to it)
#nolink li {padding: 1.5ex 1ex 1.5ex 10px;}

drummerboy9000




msg:3809830
 9:39 pm on Dec 17, 2008 (gmt 0)

Minor issue: The new part of my code doesn't validate. W3C says you can't have span tags (or hardly any other tags) within any part of a list.

It still apears to work fine in the major browsers. Any suggestions?

swa66




msg:3809874
 10:39 pm on Dec 17, 2008 (gmt 0)

reverse the order: have the <span> inside the <li>
(and obviously adapt the CSS accordingly), neither is there really a need to give it an id.
A selector like: "
.leftSideBar ul li span" should have plenty of specificity to to win.

Also you most probably do not need that div around the <ul> either (over-using divs is called divititis)

drummerboy9000




msg:3810442
 2:50 pm on Dec 18, 2008 (gmt 0)

Some reason when I put the span inside the li it doesn't work. It actually worked in my code example I put above, but when I added it to the whole code (which had some other CSS and images and stuff) it didn't work.

BUT

When I tried putting it in the li like you mentioned earlier, it worked great (and was easier to implement as well)

Here it is:

HTML:

<div class="leftSideBar">

<ul>
<li><a href="http://www.example.com">Link 1</a></li>
<li><a href="http://www.example.com">Link 2</a></li>
<li id="nolink"> >Non-Linked Line of Text</li>
</ul>

</div>

CSS added (I didn't change the other part, I just added this to it)
#nolink {padding: 1.5ex 1ex 1.5ex 10px;}

As far as the div tag, I probably didn't have to have it for this example, although I think I need it in the overall site to make it work properly. I think. But I'm definately not an expert at this.

Thank you so much for the help! It is greatly appreciated.

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