...

View Full Version : Horizontal Line Becomes Vertical



GardenGnome2
11-24-2008, 10:58 PM
I created a horizontal line from this website that worked both in IE and FF from this website.

http://http://www.sovavsiti.cz/css/hr.html

However in FF, when I added the property

'display:inline;'

(because I added links on either side of these and without this property, the line would be below the links)



<style type="text/css">
hr {
border: 0;
}
div.hr {
display:inline;
height: 1px;
background: #000 url(hr1.gif) no-repeat scroll center;
width: 50px;
}
div.hr hr {
display: none;
}
</style>
<div class="hr"><hr /></div>

_Aerospace_Eng_
11-24-2008, 11:15 PM
Post the html that has the links in it as well please.

GardenGnome2
11-25-2008, 12:30 AM
Here's the full CSS code. It may be unnecessary, but I don't want to miss anything.

CSS:

<style type="text/css">
hr {
border: 0;
}
div.hr {
display:inline;
height: 1px;
background: #000 url(hr1.gif) no-repeat scroll center;
width: 50px;
}
div.hr hr {
display: none;

#menu {
position:absolute;
background-color:transparent;
width:40%;
height:20%;
left:31%;
}

#menu ul {
list-style-type:none;
margin:5px;
}

#menu li {
display:inline;
}

#menu li a {
border:1px solid black;
background-color:#fff;
color:#000;
text-decoration:none;
padding-left:7px;
padding-right:7px;
}

#menu li a:hover {
border:1px solid black;
background-color:#3366ff;
color:#fff;
text-decoration:none;
}
</style>

HTML:


<div id="menu">
<ul>
<li><a href="#">link</a></li><div class="hr"><hr /></div>
<li><a href="#">link</a></li><div class="hr"><hr /></div>
<li><a href="#">link</a></li><div class="hr"><hr /></div>
<li><a href="#">link</a></li><div class="hr"><hr /></div>
<li><a href="#">link</a></li>
</ul>
</div>

Excavator
11-25-2008, 02:04 AM
Hello GardenGnome2,
I a little unclear what you want the hr to do.
Do you want a 50px wide hr between every li in your menu?
If your trying to put the 3 images inside the hr, like the page you quote, why do you change it to height: 1px;?

Are you wanting the images between each li all spaced out horizontally? I'm not sure putting them in an hr tag is the way to do that.. it's definitely a way, but maybe not the best way.

GardenGnome2
11-25-2008, 02:21 AM
You can delete the image if you want. I didn't know there was any.
I want say 20px between each li.
So, are there better ways?
I got this solution off a website mentioned in my first post.

Excavator
11-25-2008, 02:45 AM
Now I'm really confused... your doing all this with the hr stuff to make a 20px space with nothing in it?

Try one of these maybe...
one (http://nopeople.com/CSS/menu_centered2/index.html)
two (http://nopeople.com/CSS/menu_centered3/index.html)

that first one is pretty cool because it centers the menu and is not picky about widths of the individual links.

GardenGnome2
11-25-2008, 02:48 AM
Sorry I'm making this very confusing. Let's start over.

Let's take your examples. In between those links, I want a horizontal line that's say about 20px.

What is a solution for this?

twodayslate
11-25-2008, 03:34 AM
Sorry I'm making this very confusing. Let's start over.

Let's take your examples. In between those links, I want a horizontal line that's say about 20px.

What is a solution for this?
border-bottom: 20px solid #000;

Excavator
11-25-2008, 03:58 AM
I see... sorry for being so dense.
Try this for a start maybe -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>horizontal centered ul menu with no images</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navlist {
width: 660px;
height: 18px;
margin: 100px auto 0 auto;
}
#navlist ul a {
display: block;
}
#navlist li {
float: left;
width: 70px;
height: 18px;
margin: 0 0 10px 0;
list-style-type: none;
text-align: center;
background: #FAEBD7;
border: 1px solid #f5d7b4;
color: #CD8162;
font: 60% Lucida Grande, Lucida Sans Unicode, verdana, lucida, sans-serif;
}
#navlist li a {
float: left;
width: 70px;
height: 18px;
}
#navlist li a:hover {
color: #FFFFFF;
background: #DDA0DD;
}
#navlist a:active {
background: #c60;
color: #fff;
}
hr {
border-top-width: 1px;
border-top-style: groove;
border-top-color: #FF0000;
width: 20px;
margin: 10px 0 0 25px;
}
</style>
</head>
<body>
<p style="background:#999999;; margin:0 0 10px 0; padding: 0 0 5px 0"><a href="http://nopeople.com/design/CSS tips/index.html" style="color: #ffffff" >Back to CSS Tips</a></p>
<ul id="navlist">
<li><a href="http://www.nopeople.com/">One</a></li>
<li><hr /></li>
<li><a href="http://www.nopeople.com/">Two</a></li>
<li><hr /></li>
<li><a href="http://www.nopeople.com/">Three</a></li>
<li><hr /></li>
<li><a href="http://www.nopeople.com/">Four</a></li>
<li><hr /></li>
<li><a href="http://www.nopeople.com/">Five</a></li>
</ul>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum