Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Horizontal Line Becomes Vertical

    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)

    Code:
    <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>
    Last edited by GardenGnome2; 11-25-2008 at 12:01 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Post the html that has the links in it as well please.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Here's the full CSS code. It may be unnecessary, but I don't want to miss anything.

    CSS:
    Code:
    <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:

    Code:
    <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>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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
    two

    that first one is pretty cool because it centers the menu and is not picky about widths of the individual links.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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?

  • #8
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by GardenGnome2 View Post
    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;
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I see... sorry for being so dense.
    Try this for a start maybe -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •