Margin Problem using CSS to Style List as Side Navigation

Need help using CSS to add margins to only non-linked text

[drummerboy9000]

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]

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]

Thank you! The span option around them worked perfectly.

[drummerboy9000]

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]

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]

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]

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.