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

yonni · 08-22-2005, 05:08 PM

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

Pepe, the bull · 08-22-2005, 05:18 PM

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.

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.

Code:

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

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;
}

mrruben5 · 08-23-2005, 01:36 AM

Indeed, If you can show us the source of your css, we can help you better

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

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