que tal, tengo un problema con mi plantilla html/css, deseo que el menu de mi pagina, este alineado con mi logotipo como se puede apreciar en esta imagen,que en el header este mi logo y tambien mi menu "nav bar"
No eh podido ponerlos alineados aquí les paso mi codigo.
<head>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
margin:0px
}
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #000;
background-image: url(cmmakeup.jpg);
text-align: left;
padding: 0px;
height: auto;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#main {
}
a:link {
font-weight: bold;
color: #000;
}
#container #Header #logo #mk-logo {
background-image: url(logomkhead.png);
text-indent: -9999px;
display: block;
height: 95px;
width: 324px;
margin-right: 0px;
margin-left: 0px;
}
#container #Header #navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
font-weight: bold;
color: #000;
text-align: center;
height: 35px;
}
#container #Header #banner {
text-align: center;
height: 128px;
}
a:visited {
font-weight: bold;
color: #000;
}
a:hover {
font-weight: bold;
color: #0F0;
}
#Header {
background-image: url(cmmakeup.jpg);
padding: 0px;
height: 272px;
margin-right: auto;
margin-left: auto;
}
#main {
text-decoration: blink;
background-image: url(cmmakeup.jpg);
padding: 0px;
margin-top: 20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
height: auto;
min-height: 305;
}
#container #Header #navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
font-weight: bold;
color: #000;
text-align: right;
height: 35px;
position: fixed;
white-space: normal;
vertical-align: 0%;
}
#container #Header #navbar ul {
margin: 0px;
padding-top: 12px;
list-style-type: none;
}
#container #Header #navbar ul li {
display: inline;
text-transform: uppercase;
background-image: url(images/navwidgetwhite.png);
background-repeat: no-repeat;
background-position: center 0px;
margin: 0px;
height: 35px;
padding-top: 11px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 0px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(cmmakeup.jpg);
height: 100px;
padding-top: 20px;
position: relative;
}
#container #Header #logo {
height: 110px;
}
#container #Header #navbar ul li a {
text-decoration: none;
}
#container #navbar ul li a:link {
color: #7ac1b7;
text-decoration: none;
}
#container #navbar ul li a:visited {
color: #7ac1b7;
text-decoration: none;
}
#container #navbar ul li a:hover {
color: #9e2520;
text-decoration: none;
background-image: url(images/navwidget.png);
background-repeat: no-repeat;
background-position: center 0px;
margin: 0px;
height: 35px;
padding-top: 11px;
padding-bottom: 0px;
}
</style>
<Head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="faviconmk.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mk Portafolio</title>
</head>
<body>
<div id="container">
<div id="Header"><!-- comentarios navbar -->
<div id="logo"><a href="www.juareztve.com" title="foto" target="_blank" id="mk-logo">mk logo</a>
</div>
<!-- comentarios logo -->
<div id="banner">
<div id="navbar">
<ul>
<li><a href="index.html" title="home" target="_self">Home</a></li>
<li><a href="about.html" title="About" target="_self">About</a></li>
<li><a href="trabajos.html" title="Trabajos" target="_self">Trabajos</a></li>
<li><a href="Contacto.html" title="Contacto" target="_self">Contacto</a></li>
</ul>
</div>
</div><!-- comentarios banner -->
</div><!-- comentarios header -->
<div id="main">
<div id="content">
</div><!-- comentarios content -->
<div id="sidebar">
</div><!-- comentarios sidebar -->
</div><!-- comentarios main -->
<div id="footer">
<div id="footnav">
</div><!-- comentarios footnav -->
<div id="contact">
</div><!-- comentarios contact -->
<div id="network">
</div><!-- comentarios network -->
</div><!-- comentarios footer -->
</div><!-- comentarios -->
</body>
</html>
así es como lo tengo actualmente.
