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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <div>'s in a horizontal line, not a vertical column

    using this code
    Code:
    <a href="login.php">
    	<div class="menu2">
    	</a>
    		Login
    	</div>
    	<a href="faq.php">
    	<div class="menu2">
    	</a>
    		FAQ
    	</div>
    	<a href="faq.php">
    	<div class="menu2">
    	</a>
    		FAQ
    	</div>
    the <div>'s are put in a vertical column, however i want them to be in a horizontal line, left to right. please help

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    In the CSS for the menu2 class, add...
    Code:
    display: inline;
    This will display all menu2 divs inline with other divs as opposed to block style which is default.
    Pepe, the bull

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, that works fine

  • #4
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    As a side note, you should close tags in reverse order of how you opened them.

    Code:
    <a href="login.php">
    	<div class="menu2">
    		Login
    	</div>
    </a>
    <a href="faq.php">
    	<div class="menu2">
    		FAQ
    	</div>
    </a>
    Pepe, the bull

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    More so, why you are you placing block level elements inside of inline elements? Plus, you might want to consider using a list for your menu. They are a lot more versatile and semantic than styling a bunch of separate divs to try to emulate the same thing.

    HTML:
    Code:
    <ul id="nav">
    <li><a href="login.php">Login</a></li>
    <li><a href="faq.php">FAQ</a></li>
    </ul>
    CSS:
    Code:
    #nav li {
    display: inline;
    }

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Indeed, If you can show us the source of your css, we can help you better
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem with closing the <a> tag after the text is that it then counts the text as a link and underlines it in blue. It's just easier to close it after the opening tag of the <div>

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by yonni
    The problem with closing the <a> tag after the text is that it then counts the text as a link and underlines it in blue. It's just easier to close it after the opening tag of the <div>


    If you are using the 'a' tag, then, I'm afraid, it IS a link because it links you to another page.

    If you want not to show the underline then do your code something like this.

    <ul id="nav">
    <li><a href="login.php">Login</a></li>
    <li><a href="faq.php">FAQ</a></li>
    </ul>

    ul#nav a {
    text-decoration : none;
    }

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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