Jump to content


Photo

Adding Bottom Border Image To ul css


  • Please log in to reply
3 replies to this topic

#1 cowboyandy

cowboyandy

    Member

  • Member
  • PipPip
  • 25 posts
  • LocationWimberley, TX

Posted 27 November 2011 - 08:20 PM

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? :bash:

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!
  • 0
The Ole Cowboy
Gittin' Older, But Not Agin'!
The Ole Cowboy - was hacked, haven't reuploaded yet

#2 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 27 November 2011 - 09:17 PM

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.
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#3 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 28 November 2011 - 01:52 AM

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 by Wickham, 28 November 2011 - 02:21 AM.

  • 0

#4 cowboyandy

cowboyandy

    Member

  • Member
  • PipPip
  • 25 posts
  • LocationWimberley, TX

Posted 29 November 2011 - 02:17 PM

:clap: :clap:
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 by cowboyandy, 29 November 2011 - 02:21 PM.

  • 0
The Ole Cowboy
Gittin' Older, But Not Agin'!
The Ole Cowboy - was hacked, haven't reuploaded yet




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users