Adding Bottom Border Image To ul css

[cowboyandy]

I tried to search this, but the search was blocked for using the word "border". So here's what I'm trying to do:

 

My navigation column contains an "hr" divider between each link anchor, but I use an image instead of a straight hr. Check the left column here. That's quite a bit of <li>image</li> coding!

 

I thought there's a way to add the "texashr.gif" to the css for the nav-left ul, but apparently I've gotten incorrect information on how to do that. here's the css for the left nav column:

 

#nav-left {

background-color:#ebe0cc;

text-align:center;

width:185px;

margin-left:15px;

padding:10px;

border:1px solid #8b4513;

float:left;

}

 

.nav-left image {

border:0px;

}

 

.nav-left ul {

list-style-type:none;

padding:0px;

margin:0px;

}

 

.nav-left li {

color:#aa4400;

margin-bottom:4px;

}

 

After a few days of research, I thought bottom-border: url(/siteimages/texashr.gif); would be the key, but no matter where I put it in the above coding, it doesn't work. It would be nice to have a lot less <li></li> entries in the body html. If this is possible, what the heck am I missing?

 

Any guidance is greatly appreciated! I don't mind reading and learning, but apparently I haven't found the right tutorial to read!

 

Have a great evening, and God bless!

[benjaminmorgan]

You could create a div with a class for it. Make the

.divide {
background: url(/siteimages/texashr.gif);
width:175px;
height:9px;

Then just replacing the image with <div class="divide"></div>.......At least it is cleaner code wise. I have never heard of a border being an image. Sorry if that isn't what you are looking for.

[Wickham]

This adds the texashr.gif to the top of every li tag in the .nav-left menu. I've just tested in Firefox and I got the double image as I didn't delete all your images in separate li tags. I didn't edit your markup but you need to delete all the li tags with the Texas flag image.

 

.nav-left li { 
   background: url(images/texashr.gif) top center 
no-repeat; display: block;
}

 

You will also have to lower the link text to avoid the image. Padding to the top of the li tag doesn't work, but adding padding-top to the "a" does work, but some of your left menu items aren't links, so I had to combine the text with the link above.

CSS

.nav-left li { 
   background: url(images/texashr.gif) top center 
no-repeat; display: block;
}
.nav-left li a { 
   padding-top: 10px; display: block; 
}

Typical section of markup:-

<li><a 
href="http://www.renttexashillcountry.com/austin/index
.html">Austin</a><!--</li>							

    <li>--><font size="0"><em>Oak Hill, 
Rollingwood,<br>Sunset Valley, West Lake 
Hills</em></font></li>

<!--	<li><img 
src="http://www.renttexashillcountry.com/siteimages/te
xashr.gif" alt="Texas Flag"></li>
-->							
<li><a 
href="http://www.renttexashillcountry.com/bandera/inde
x.html">Bandera</a><br><!--</li>							

    <li>--><font size="0"><em>Bandera Falls, 
Lakehills, Medina, Mico, Pipe Creek, 
Tarpley</em></font></li>

<!--	<li><img 
src="http://www.renttexashillcountry.com/siteimages/te
xashr.gif" alt="Texas Flag"></li>
-->				

Note that the Texas flag li is deleted and I've deleted the </li> and <li> between the ink and the text that wasn't a link and inserted a <br> tag in one place but it doesn't seem to be needed, for instance, between Austin and Oak Hill there's no <br> and I don't know why the Oak Hill doesn't go next to Austin, but it doesn't so that's OK.

Edited November 28, 2011 by Wickham

[cowboyandy]

Not sure what I did wrong before, but I went back and tried again....success! Am now in the process of deleting all those extra lines! Much cleaner html!

 

Thanks, Wickham! Have a great day, and God bless!

Edited November 29, 2011 by cowboyandy