Forums

nathan42100

Hey, need some help here. Designing a website and integrating facebook into it. (http://tifty.tinr.org/index2.php)

I want a layout like this
http://triton.imageshack.us/Himg243/scaled.php?server=243&filename=whatiwantpo9.png&xsize=578&ysize=480

However, I can't get the navigation bar the way I want it. I tried floats but they don't seem to want to work :x

Here is my code as of right now (html) but can be changed in anyway

<div id=\"pagewrap\">
...
<div id=\"menubar\">
    <a href=\"#\">ABOUT US</a>
    <a href=\"#\">EXECUTIVE BOARD</a>
    <a href=\"#\">LINKS</a>
    <a href=\"#\">FLYERS</a>
    <a href=\"#\">PICTURES</a>
    <div id=\"menubar\" style=\"float:right;\">
    <?if(isset($user_id)) if (isBoardMember()) echo \"<a href=\\"#\\">BOARD PAGE</a> | \"; ?>
    <a href=\"#\">CONTACT US</a></div>
    </div>
...
</div>

humanboy

Try putting links b in a span tag instead of a div tag.

iopet

Find:

    <div id=\"menubar\"> 
    <a href=\"#\">ABOUT US</a> 
    <a href=\"#\">EXECUTIVE BOARD</a> 
    <a href=\"#\">LINKS</a> 
    <a href=\"#\">FLYERS</a> 
    <a href=\"#\">PICTURES</a> 
    <div id=\"menubar2\" style=\"float:right;\"> 
        <a href=\"#\">CONTACT US</a></div> 
    </div>

Replace with:

<div style=\"clear: both;\"></div>

<div id=\"menubar\">
	<div id=\"menubar2\">
		<a href=\"#\">contact us</a>
	</div>

	<a href=\"#\">about us</a>
	<a href=\"#\">executive board</a>
	<a href=\"#\">links</a>
	<a href=\"#\">flyers</a>
	<a href=\"#\">pictures</a>
</div>

Find:

#menubar
{
    font-size: 10pt;
    display: block;
    background: #809FFF;
    margin-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

#menubar2
{
    font-size: 10pt;
    display: inline;
    float:right;
    background: #809FFF;
    margin-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

#menubar a
{
    color: white;
    display: compact;
    list-style: none;
    text-decoration: none;
}

#menubar a:hover
{
    background: #CCCCFF;
}

Replace with:

#menubar {
	background: #809fff;
	margin-bottom: 5px;
	padding: 0 5px;
	font-size: 10pt;
	text-transform: uppercase;
}

#menubar2 {
	float: right;
}

#menubar a {
	color: #fff;
	text-decoration: none;
}

#menubar a:hover {
	background: #ccf;
}

nathan42100

Thanks iopet. The clear:both did it.

treehouse : what would you like to learn today?

Forums

CSS horizontal nav