cowboyandy Posted November 28, 2011 Report Share Posted November 28, 2011 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! Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted November 28, 2011 Report Share Posted November 28, 2011 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 28, 2011 Report Share Posted November 28, 2011 (edited) 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 Quote Link to comment Share on other sites More sharing options...
cowboyandy Posted November 29, 2011 Author Report Share Posted November 29, 2011 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.