Cant seem to align logo with navbar

StackOverflow https://stackoverflow.com/questions/17758349

Вопрос

I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue. I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other. next questions is how to create a drop down menu for some of navbar tabs? thankyou

My html is as follows 

<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" 

height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

and the css part is as follows

ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li     
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px   
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-  
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}

#header ul li {
list-style: none;
display:inline-block;
float:right
} 

logo.JPG 
{
vertical-align:middle;
float:left
}
Это было полезно?

Решение

If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.

<header>
    <div id="logo">
        <img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
    </div>
    <div id="menu">
        <ul>
            <li><a id="nav-index" class="first"   href="%E2%80%9D#%E2%80%9D">Home</a></li>
            <li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
            <li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
            <li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
            <li><a id="nav-latestnews" href="#">Latest News</a></li>
            <li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
        </ul>    
    </div>
</header>

and the CSS needed

header { width: 700px; }

#logo { float: left; }

#menu { float: right; }
#menu ul { padding: 0; margin: 0; }

Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/

I've also removed a which wasn't opened and stripped out various /div which weren't matched.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top