[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.

This post has been edited by Wickham: 28 November 2011 - 02:21 AM

[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!

This post has been edited by cowboyandy: 29 November 2011 - 02:21 PM