realizzare due menu (verticale e orizontale)

**tabagista** · 14-07-2015, 03:47

E' possibile ricavare due menu, uno orizzontale e l'altro verticale da questo CSS ?

codice:

body {background:#eee;}
.BUTTON{
font:bold 20px "arial" ;
text-align:center;
color:#f7f7f7;

border:0px inset #ffffff;
text-shadow:0px -1px 1px #222222;

height: 40px;line-height:2.5em; width: 248px; border-radius: 1em 4em 1em 4em; background:#FF0;


padding:10px 10px;

padding-top: 5px;


cursor:pointer;
margin:0 auto;
}
.BUTTONStyle:active{
cursor:pointer;
position:relative;
top:2px;
}
a:link {  text-decoration: none}

**KillerWorm** · 14-07-2015, 12:41

Bisognerebbe vedere il contesto in cui applichi quel css.
Ad ogni modo prova con

codice:

display: inline-block;

**tabagista** · 15-07-2015, 10:46

codice:

display: inline-block;

dovrebbe allineare i div ma l'ho provato su un gruppo di div e non mi funziona forse dipende dalle immagini e dal div principale che sono molto grandi (ma mi servirebbero di queste dimensioni) il codice è questo

codice:

<style>
.gruppo {
    width: 1150px;  margin: 0 auto;display: inline-block;}

</style>



</head>

<body>
<div class="gruppo">
<div style="float:left;width:280px;"><a href="uno.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;  "><img src="separatore.gif" width="30"  /></div>

<div style="float:left;  width:280px;"><a href="due.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;"><img src="separatore.gif" width="30"/></div>

<div style="float:left;  width:280px;"><a href="tre.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;"><img src="separatore.gif" width="30"/></div>

<div style="float:left;  width:280px;"><a href="quattro.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;"><img src="separatore.gif" width="30"/></div>

<div style="float:left;  width:280px;"><a href="cinque.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>


    
    <div style="clear:both;"></div>
</div>

Cosa ne pensi?

**KillerWorm** · 15-07-2015, 11:40

No, non ci siamo. Non riesco a capire cosa vorresti ottenere di preciso. Il css che hai indicato sopra non ha niente a che vedere con quel codice html, o sbaglio?
Quantomeno non lo vedo applicato. Da quanto ho capito, quel css (con classe .BUTTON) andrebbe applicato ai singoli pulsanti del menu ma nel tuo html non lo vedo.

La regola display: inline-block; andrebbe quindi inserita nella classe .BUTTON, quindi applicata ai singoli pulsanti, mentre tu la stai applicando a .gruppo, che è il contenitore di tutti i pulsanti, è chiaro che non stia funzionando.

Inoltre, l'uso del float forza l'accostamento, l'uno all'altro, dei vari elementi, quindi è possibile che interferisca su quanto vorresti ottenere.

Una domanda: c'è qualche motivo particolare perché tu stia usando del css in-linea (inserito con style nei singoli elementi)? Questo crea un po' di confusione rendendo poco gestibile la cosa. Non sarebbe meglio incorporarlo tutto nell'head?

Puoi chiarire meglio il fatto che vorresti avere quel menu sia orizzontale, sia verticale... mi sfugge qualcosa. Se hai una pagina pubblica, puoi postare il link per avere un riferimento?

**tabagista** · 15-07-2015, 16:58

No infatti, quel codice postato non c'entra con i button di prima ma ho provato ad usare display: inline-block; sul gruppo di div che ho postato e non funziona.
hai ragione ho incasinato un bel po' le cose postando un codice riferito ad altri div passando proprio di palo in frasca...
mi sa che è meglio se apro un'altra discussione per il secondo argomento...
Qui torno al menu che era l'argomento originario il fatto di avere due menu (or. e vert.) è per delle prove che sto facendo.

Vedo di fare come dici

display: inline-block; andrebbe quindi inserita nella classe .BUTTON, quindi applicata ai singoli pulsanti,

grazie del supporto!

Discussione: realizzare due menu (verticale e orizontale)

Strumenti discussione

Ricerca discussione

Visualizza

realizzare due menu (verticale e orizontale)

Permessi di invio