Horizontal Liquid Navigation Menu with Logo to the left
How can you code for floatin开发者_如何转开发g a logo to left of a horizontal nav bar and have it display in liquid similar to this site?
I would love to find a tutorial on how to do it but unfortunately all i can find is examples of horizontal menus by themselves
this is the code used in the example: ;)
<html>
<head>
<style>
.header_box_cmg
{
width:100%;
margin:0auto;
padding:0;
height:125px;
background:#03a691 url(/views/afl/images/bg/bg_header.jpg) top center repeat-x
}
.header_cmg
{
width:920px;
height:125px;
margin:0auto;
padding:0 20px;
overflow:hidden;
background:transparent url(/views/afl/images/bg/bg_glow.jpg) top center no-repeat
}
.top_options
{
float:right;
display:inline;
width:50%;
overflow:hidden;
margin-top:20px
}
.top_options p
{
font-size:1.1em;
margin:7px 20px 0 0
}
.main_nav
{
width:624px;
height:50px;
overflow:hidden;
float:right;
display:inline;
margin-top:22px
}
.main_nav li
{
float:left;
display:inline;
height:50px;
margin-left:80px
}
.main_nav li.first
{
margin-left:0
}
.main_nav li a
{
display:block;
height:50px;
text-indent: -9999px;
background:transparent url(/views/afl/images/bg/bg_main_nav.png) 0 0 no-repeat
}
#home{width:36px;background-position:0 0;margin-left:}
#home:hover, body.home #home{background-position:0 -50px}
#then{width:61px;background-position: -36px 0}
#then:hover, body.then #then{background-position: -36px -50px}
#thep{width:61px;background-position: -97px 0}
#thep:hover, body.thep #thep{background-position: -97px -50px}
#thea{width:90px;background-position: -158px 0}
#thea:hover, body.thea #thea{background-position: -158px -50px}
#cont{width:53px;background-position: -250px 0}
#cont:hover, body.cont #cont{background-position: -250px -50px}
</style>
</head>
<body>
<div class="header_box_cmg">
<div class="header_cmg"> home
<h1><a href="http://ambassadorsforlife.org/" title="Ambassadors for LIFE">
<img src="/views/afl/images/ambassadors_for_life.png" alt="Ambassadors for LIFE" title="Ambassadors for LIFE" />
</a></h1>
<div class="top_options">
<a href="http://ambassadorsforlife.org/become-an-ambassador/" class="btn_become_ambassador">Become An Ambassador</a>
<p class="float-right"><a href="http://my.ambassadorsforlife.org/">Sign in to my account</a></p>
</div>
<ul class="main_nav">
<li class="first"><a href="http://ambassadorsforlife.org/" id="home">Home</a></li>
<li><a href="http://ambassadorsforlife.org/the-need/" id="then">The Need</a></li>
<li><a href="http://ambassadorsforlife.org/the-plan/" id="thep">The Plan</a></li>
<li><a href="http://ambassadorsforlife.org/ambassadors/" id="thea">Ambassadors</a> </li>
<li><a href="http://ambassadorsforlife.org/contact/" id="cont">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论