Sono abbastanza nuovo per lo sviluppo web e hoho cercato di creare un sito, finora sono riuscito a fare un menu di navigazione e un logo. Il mio problema è che dopo aver provato a fondo molti tutorial e post non sono stato in grado di risolvere il mio problema. Voglio allineare il mio logo con la mia barra di navigazione in modo che il logo sia sul lato sinistro e la barra di navigazione sia in linea con il logo ma sul lato destro, con entrambi uno accanto all'altro. le prossime domande sono come creare un menu a discesa per alcune delle schede della barra di navigazione? grazie
Il mio html è il seguente
<!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="/images/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>
e la parte css è la seguente
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
}
risposte:
0 per risposta № 1Se dovessi ristrutturare il tuo codice HTML, spostando il tuo "ul" nell'intestazione, è molto semplice.
<header>
<div id="logo">
<img src="/images/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>
e il CSS necessario
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Ecco un JSFiddle che lo mostra funzionante: http://jsfiddle.net/STu89/
Ho anche rimosso uno che non è stato aperto e messo a nudo vari / div che non sono stati abbinati.