Problema Menù orizzontale

**kayla1994** · 02-06-2015, 23:22

Buonasera a tutti

Sto creando il Menù principale del mio sito che è un menù orizzonatale e sto riscontrando problemi quando vado a zoomare, perché gli elementi vanno un po' deve gli pare e vorrei chiedere il vostro parere.

Questa è la parte HTML:
<div id="Holder-Menu">
<a href="#">VOCE 1</a>
<a href="#">VOCE 2</a>
<a href="#">VOCE 3</a>
</div>
<div id="Spacer1"></div>

voglio che il menù sia allineato allo spacer.

Questo è il codice CSS

#Spacer1 {background-color:#000; width:60%; margin:5% auto; padding:1px 0px}
#Holder-Menu {width:60%; height:0px; background-color:#000; margin:0 auto;}
#Holder-Menu a {padding:0.1% 12.84%; float:left; color:#fff; background-color:#567; margin:0% 0.1%;}

Come dicevo prima con il 100% di zoom gli elementi sono ordinati correttamente, ma aumentando succede il fatto che spiegavo prima, mentre vorrei che il menù mantenesse la stessa larghezza dello spacer.
Se qualcuno riuscisse a darci un'occhiata gli sarei infinitamente grata

Grazie a tutti

**carlomarangoni** · 02-06-2015, 23:38

Non può mantenere gli stessi comportamenti quando ci sono dimensioni diverse come il padding, e poi quel float:left non capisco che sonso ha e dovrebbe avere delle colpe

**kayla1994** · 03-06-2015, 00:04

Originariamente inviata da carlomarangoni

Non può mantenere gli stessi comportamenti quando ci sono dimensioni diverse come il padding, e poi quel float:left non capisco che sonso ha e dovrebbe avere delle colpe

Il float mi serve per accostare tutti e tre gli elementi del menù. Per il padding credevo non ci fossero problemi dato che l'ho messo apposta in percentuale. Inoltre quello che si nota è che lo spacer non si "restringe" mentre il menù sì.

**carlomarangoni** · 03-06-2015, 00:15

Il padding perchè possa servire vuole in tutti e tre gli elementi!
P er combaciare come ho capito che tu vuoi le misure devono essere uguali per tutti gli elementi altrmenti allargando e diminuendo le finestre hanno reazioni diverse! misura=margin+width+padding.

Poi per dire cose certe bisogna vedere la pagina in azione

**kayla1994** · 03-06-2015, 00:19

Conta che la larghezza è data tutta dal padding perché il width non è specificato e all'inizio del file css ho azzerato il margin e il padding per tutti i tag che utilizzo
Togliendo il div che contiene il menù risolvo il problema, però poi non riesco a centrare il tutto.
Quello che semplifichi da una parte finisce per complicarsi dall'altra

**carlomarangoni** · 03-06-2015, 01:47

Metti online la pagina che si possa vedere

**mirkobellavita** · 03-06-2015, 10:24

se spacer lo metti all'interno di holder menu e a spacer assegni una larghezza del 100% ?

<div id="Holder-Menu">
<a href="#">VOCE 1</a>
<a href="#">VOCE 2</a>
<a href="#">VOCE 3</a>
<div id="Spacer1"></div>
</div>

**kayla1994** · 03-06-2015, 14:01

Originariamente inviata da carlomarangoni

Metti online la pagina che si possa vedere

HTML:
<html>

<head>
<title>MIO SITO</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="Logo"><img src="Logo.png"></div>

<div id="Holder-Menu">
<a href="#">VOCE 1</a>
<a href="#">VOCE 2</a>
<a href="#">VOCE 3</a>
</div>

<div id="Spacer1"></div>

<div id="Holder">

<h1>Home</h1>

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</div>

<div id="Spacer2"></div>

<div id="Footer">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

</body>
</html>

CSS
body {background-color:#ccc; margin:0%; padding:0%}
p {margin:0%; padding:0%}
a {margin:0%; padding:0%; text-decoration:none}
h1 {margin:0%; padding:0%}
h2 {margin:0%; padding:0%}
ul {margin:0%; padding:0%}
li {margin:0%; padding:0%}
img {margin:0%; padding:0%; width:100%}
div {margin:0%; padding:0%}

#Logo {width:57.5%; margin:0 auto; margin-top:5%; margin-bottom:2%;}

#Spacer1 {background-color:#000; width:60%; margin:5% auto; padding:1px 0px}
#Spacer2 {background-color:#000; width:60%; margin:5% auto; padding:1px 0px; margin-bottom:1%;}

#Holder-Menu {width:60%; height:0px; background-color:#000; margin:0 auto}
#Holder-Menu a {padding:0.1% 12.84%; float:left; color:#fff; background-color:#567; margin:0% 0.1%}

#Holder {width:45%; margin: 0 auto}
#Holder h1 {margin-top:5%; margin-bottom:5%; text-align:center}
#Holder p {font-size:15px; text-align:justify;}

#Footer {background-color:#567; width:60%; height::40px; margin:0% auto; margin-bottom:1%}

Come vedi è una pagina molto semplice per ora.
Grazie ancora per l'interesse.

Discussione: Problema Menù orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Problema Menù orizzontale

Permessi di invio