Welcome to WebmasterWorld Guest from 54.225.56.78

Forum Moderators: not2easy

Message Too Old, No Replies

Margin Problem using CSS to Style List as Side Navigation

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

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

New User

5+ Year Member

joined:Sept 5, 2007
posts: 7
votes: 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)

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

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 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.
9:00 pm on Dec 17, 2008 (gmt 0)

New User

5+ Year Member

joined:Sept 5, 2007
posts:7
votes: 0


Thank you! The span option around them worked perfectly.
9:21 pm on Dec 17, 2008 (gmt 0)

New User

5+ Year Member

joined:Sept 5, 2007
posts:7
votes: 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;}
9:39 pm on Dec 17, 2008 (gmt 0)

New User

5+ Year Member

joined:Sept 5, 2007
posts:7
votes: 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?

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

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 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)

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

New User

5+ Year Member

joined:Sept 5, 2007
posts:7
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members