...

View Full Version : <div>'s in a horizontal line, not a vertical column



yonni
08-22-2005, 05:08 PM
using this 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

Pepe, the bull
08-22-2005, 05:18 PM
In the CSS for the menu2 class, add...

display: inline;
This will display all menu2 divs inline with other divs as opposed to block style which is default.

yonni
08-22-2005, 05:55 PM
thanks, that works fine

Pepe, the bull
08-22-2005, 11:01 PM
As a side note, you should close tags in reverse order of how you opened them.


<a href="login.php">
<div class="menu2">
Login
</div>
</a>
<a href="faq.php">
<div class="menu2">
FAQ
</div>
</a>

Kurashu
08-23-2005, 12:07 AM
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:


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


CSS:


#nav li {
display: inline;
}

mrruben5
08-23-2005, 01:36 AM
Indeed, If you can show us the source of your css, we can help you better :D

yonni
08-23-2005, 10:04 AM
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>

bazz
08-23-2005, 10:42 AM
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>

:confused: :confused:

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum