Jump to content
Stef's Coding Community
cowboyandy

Adding Bottom Border Image To ul css

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

: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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...