menu orizzontale con rettangolo di fondo

**paolabacci72** · 26-03-2009, 13:01

ciao a tutti!
premetto che ho visitato e consultato numerosi link prima di chiedere....ma non ho risolto ancora nulla!
avrei bisogno di una dritta...quello che vorrei fare è un menu orizzontale (che sta posizionato in basso e a dx nell'header) che abbia 4 link, e il tutto che sia compreso in un rettangolo sottostante.
Il menu dovrà posizionarsi al centro di tale rettangolo.

la porzione di codice html è questa:

<div id=”navigation”>
illustrazione
un po’ di…
</div>

Assegnando un bordo e uno sfondo al div navigation (es fondo giallo) non compare nulla...l'unico modo era quello di assegnare un ulteriore div che racchiudesse anche il div navigation. così:

<div id=”spazionav”>
<div id=”navigation”>
illustrazione
un po’ di…
</div>
</div>
Così facendo, assegnando a questo div spazionav aggiunto uno sfondo, mi compare...ma non credo che il sistema sia giusto, anche perchè i link stanno centrati orizzontalmente rispetto al div spazionav ma
sfalsati rispetto all'altezza, ovvero più in alto. Posto il css...

div#navigation{
position: relative; align: center; }

div#spazionav{
position: relative; width:300px; height: 25px; left: 450px; top: 75px; background-color: #CCCCFF; text-align: center;
}

a.navigation
{top: 3px; background-color: #99ccFF;
color: #003366;
font-weight: bold;
text-decoration: none;
padding: 3px;
border: solid 1px black;
}

a:hover.navigation
{background-color: #003366;
color: #FF33CC;
font-weight: bold;
text-decoration: none;
padding: 3px;
border: solid 1px #FF33CC;
}

a:visited.navigation
{background-color: #CCCCCC;
color: black;
font-weight: bold;
text-decoration: none;
padding: 3px;
border: solid 1px black;
}

grazie a tutti!

**gabar-el** · 26-03-2009, 23:52

ti consiglio di utilizzare un elenco indefinito per effettuare il menu che ti serve e non dei semplici link, guarda meglio tra le varie guide, credo tutte spieghino come farlo proprio con gli elenchi.
ciao

**paolabacci72** · 28-03-2009, 14:23

ciao, prima di tutto grazie per la tua risposta!
credimi ho guardato tantissimi link prima di mandare una richiesta di aiuto sul forum, ma non ho risolto nulla...

comunque, se faccio il menu come elenco, poi come faccio a fare in modo che intorno ad esso ci sia un rettangolo colorato? devo attribuire dei valori a ul? o racchiuderlo in un contenitore e dare a questo dei valori forse...tipo border...o non so...è questo che non ho trovato spiegato e quindi non mi è chiaro.
rispiego quello che vorrei ottenere:
menu prizzontale, 4 voci e ciascuna voce su un pulsante rettangolare (e questo lo avevo fatto),
attorno a tutte e 4 le voci un unico rettangolo di un altro colore, coma base.
le 4 voci con i rispettivi rettangoli dovrebbero posizionarsi al centro di tale rettangolo esterno...

sapreste darmi indicazione sul codice e sul css?

grazie mille!!

**gabar-el** · 28-03-2009, 15:35

prova a vedere un attimo questo codice:

codice:

<html>
<head>
<style>
ul {margin:0;padding:0;list-style-type:none; height:65px; background:#000;}
li {float:left; padding:0.5em; margin:1em; background:#f00;}
</style>
</head>
<body>
<ul>[*]prima[*]seconda[*]terza[*]quarta[/list]
</body>
</html>

è una soluzione semplice e non flessibile, ma dovrebbe aiutarti a capire un pò. le soluzioni cmq son tante, puoi utilizzare i posizionamenti inserendo un div e centrando il menu ad es.
puoi agire in maniera diversa sui link (che non ho inserito nell'es.)
ti invio in pm il codice di un mio sito, dai un occhio anche a quello. ciao

**paolabacci72** · 30-03-2009, 09:39

ciao, grazie mille per la tua risposta e disponibilità....
ma se appunto come dici volessi usare un div e all'interno di esso posizionare il menu...come faccio a centrarlo? devo intervenire su ul, giusto?

tipo
<div id="menu">
<ul>[*]primo link[*]secondo link[*]terzo link[/list]

poi nel css assegno un colore di fondo al div menu, e gli allineo al centro l'elenco, es:
div#menu{ background-color:#CCCCFF; text-align: center}

sarebbe una cosa del genere, giusto? chiaramente l'ho semplificata tanto!
comunque stasera do uno sguardo a tutto il materiale che mi hai postato e me lo studio!

grazie mille davvero!

**gabar-el** · 30-03-2009, 15:25

nel modo in cui hai postato centri orizzontalmente, per centrarlo verticalmente devi agire su margin e padding del ul o sull'height del div.
in teoria ci sarebbero altri metodi, ma vedi se risolvi così

**paolabacci72** · 30-03-2009, 15:33

grazie!

ti farò sapere...buona giornata!

Discussione: menu orizzontale con rettangolo di fondo

Strumenti discussione

Ricerca discussione

Visualizza

menu orizzontale con rettangolo di fondo

Permessi di invio