menu orizzontale float

**anarcoma** · 02-03-2012, 12:20

buongiorno a tutti
volevo sapere se qualcuno può suggerirmi una soluzione per il mio problema: volevo fare un menu orizzontale in alto con delle voci a destra e altre a sinistra. il problema è che quando vado a creare un div sotto non riesco a distanziarlo dal menu, mi rimane sempre attaccato, qualsiasi margine metto...

la pagina da cui mi sono ispirato (copiato

è questa:
http://hammockmusic.com/

il mio codice css e html (spero di averlo snellito il più possibile):

codice:

#testata{
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, .6);
	width:100%;
	margin-top:10px;
	float:left;
	}

#menusx{
	float:left;
	padding:15px;
}

#menudx{
	float:right;
	padding:15px;
	}
	
#about{
	background-color: #F00;
	width:180px;
	}

codice:

<div id="testata">
	<div id="menusx">uno due tre quattro cinque</div>
	<div id="menudx">sei sette otto nove dieci</div>
</div>


<div id="about">
  

bababb bblalbalblbla</p>
  

blalbla</p>
  

blablaba</p>
  

blalb</p>
  

abla</p>
  

blalblalblldllbladb</p>
</div>

**Mich_** · 02-03-2012, 13:03

Ci sono ottime raccolte di menu gia` pronti: ti conviene partire da quelle (vedi riferimenti tra i "link utili").

Comunque non vedo il menu nel tuo codice HTML: vedo solo una serie di

.

I menu si devono fare rispettando la semantica: pertanto si devono usare i tag di lista

**storm363** · 02-03-2012, 16:13

penso che lo vuoi cosi...

codice:

<html> 
<head> 
<style> #testata{ 
background-color: rgb(0, 0, 0); 
background-color: rgba(0, 0, 0, .6); 
width:100%; 
margin-top:10px; 
float:right; 
} 
#menusx { 
float:left;
padding:15px;
text-transform: uppercase; 
color: white; 
} 
#menudx { 
float:right; 
padding:0px; 
} 
#nav li { 
display: inline; 
list-style-type: none;
padding-right: 20px; 
text-transform:uppercase; 
font-size: 13px; 
} 
li a:hover { 
color:white; 
} 
#about { 
background-color: #F00; 
width:180px; 
float:right; 
} 
a:visited, a:link { 
color: #ccc; 
text-decoration:none; 
} 
</style> 
<body> 
<div id="testata"> 
<div id="menusx">Hammock | Music</div> 
<div id="menudx"> <ul id="nav"> [*]One [*]Two [*]Three [*]Four [*]Five[/list]
</div> 
</div> 
</body> 
</html>

**anarcoma** · 03-03-2012, 16:22

Grazie storm,
sei stato veramente molto gentile.
Il tuo codice funziona erfettamente.
Praticamente devo mettere la probrietà 'float' anche al div#about per poterlo distanziare... devo ammettere però che concettualmente non capisco il perché

**anarcoma** · 03-03-2012, 16:27

Originariamente inviato da Mich_
Ci sono ottime raccolte di menu gia` pronti: ti conviene partire da quelle (vedi riferimenti tra i "link utili").

Comunque non vedo il menu nel tuo codice HTML: vedo solo una serie di

.

I menu si devono fare rispettando la semantica: pertanto si devono usare i tag di lista

scusa mi sono spiegato male... i tag p erano per rappresentare il contenuto di un div che volevo distanziare dal menu.
grazie comunque per il suggerimento dei tag di lista.

**storm363** · 03-03-2012, 16:33

niente, un piacere per me))
e mi sa che il float in about l'ho messo per sbaglio))

**anarcoma** · 03-03-2012, 16:44

l'avrai anche messo per sbaglio, ma così ottengo esattamente ciò che mi serviva

se metto il float il margine mi funziona, se lo tolgo no... i misteri del float...

codice:

<html> 
<head> 
<style> #testata{ 
background-color: rgb(0, 0, 0); 
background-color: rgba(0, 0, 0, .6); 
width:100%; 
margin-top:10px; 
float:right; 
} 
#menusx { 
float:left;
padding:15px;
text-transform: uppercase; 
color: white; 
} 
#menudx { 
float:right; 
padding:0px; 
} 
#nav li { 
display: inline; 
list-style-type: none;
padding-right: 20px; 
text-transform:uppercase; 
font-size: 13px; 
} 
li a:hover { 
color:white; 
} 
#about { 
background-color: #F00; 
width:180px; 
float:left;
margin-top:30px;
} 
a:visited, a:link { 
color: #ccc; 
text-decoration:none; 
} 
</style> 
<body> 
<div id="testata"> 
<div id="menusx">Hammock | Music</div> 
<div id="menudx"> <ul id="nav"> [*]One [*]Two [*]Three [*]Four [*]Five[/list]
</div> 
</div> 

<div id="about">ciao</div>
</body> 
</html>

**storm363** · 03-03-2012, 18:13

hmm strano))

Discussione: menu orizzontale float

Strumenti discussione

Ricerca discussione

Visualizza

menu orizzontale float

Permessi di invio