allineare le voci del menu con stile (Css)

bella

Utente Attivo
3 Ott 2005
57
0
0
Salve, sto impazzendo nel trovare una soluzione a questo problema.
Nel menu' BLU in altro della mia pagina http://www.italianrugby.net/index.php non riesco a centrare le voci: ovvero vorrei che le 7 voci del menu superiore occupassero "lo stesso spazio" delle 7 voci del menu inferiore, e che di conseguenza fossero allineate come colonne, ma ho invece utilizzato le funzionalita' CSS (poiche' vorrei evitare di inserire tabelle).

Il semplice codice che ho utilizzato per creare questo menu e' il seguente:

<div id="MENU">
<a class="MENU" href="http://www.italianrugby.net/index.php">HOME</a>
<a class="MENU" href="http://www.italianrugby.net/news/news.php">NEWS</a>
<a class="MENU" href="http://www.italianrugby.net/articoli/articoli.php">ARTICOLI</a>
<a class="MENU" href="http://www.italianrugby.net/classifiche/classifiche.htm">TORNEI</a>
<a class="MENU" href="http://www.italianrugby.net/union/union.htm">UNIONa15</a>
<a class="MENU" href="http://www.italianrugby.net/league/league.htm">LEAGUEa15</a>
<a class="MENU" href="http://www.italianrugby.net/sevens/sevens.htm">SEVENSa7</a>
<div>
<div id="MENU">
<a class="MENU" href="http://www.italianrugby.net/eventi/eventi.htm">EVENTI</a>
<a class="MENU" href="http://www.italianrugby.net/chat/chat.htm">CHAT</a>
<a class="MENU" href="http://www.italianrugby.net/forum/forum.htm">FORUM</a>
<a class="MENU" href="http://www.italianrugby.net/giochi/giochi.htm">GIOCHI</a>
<a class="MENU" href="http://www.italianrugby.net/varie/varie.htm">VARIE</a>
<a class="MENU" href="http://www.italianrugby.net/cerca/cerca.htm">CERCA</a>
<a class="MENU" href="http://www.italianrugby.net/scrivici/scrivici.htm">SCRIVICI</a>
</div>

Cosa posso fare ora, per "allineare" le voci del menu' con un perfetto stile estetico??? :cry:
 

dead

Utente Attivo
22 Lug 2005
684
0
0
54
Brescia
www.dead.it
Prova cosi:


<head>
<style type="text/css"><!--

div.MEN1{
text-align: center;
width:100%;
display:block;
}

a.MENU{
background-color: blue;
border-style: outset;
color: white;
font-weight: Bold;
text-decoration: None;
width:12%;
float:left;
margin: 5px 0;
}

a:hover.MENU{
font-style: Italic;
background-color:white;
color: blue;
font-weight: Bold;
text-decoration: None;
}
--></style>
</head>

<body>
<div class="MEN1">
<a class="MENU" href="http://www.italianrugby.net/index.php">HOME</a>
<a class="MENU" href="http://www.italianrugby.net/news/news.php">NEWS</a>
<a class="MENU" href="http://www.italianrugby.net/articoli/articoli.php">ARTICOLI</a>
<a class="MENU" href="http://www.italianrugby.net/classifiche/classifiche.htm">TORNEI</a>
<a class="MENU" href="http://www.italianrugby.net/union/union.htm">UNIONa15</a>
<a class="MENU" href="http://www.italianrugby.net/league/league.htm">LEAGUEa15</a>
<a class="MENU" href="http://www.italianrugby.net/sevens/sevens.htm">SEVENSa7</a>
<div>
<br />
<div class="MEN1">
<a class="MENU" href="http://www.italianrugby.net/eventi/eventi.htm">EVENTI</a>
<a class="MENU" href="http://www.italianrugby.net/chat/chat.htm">CHAT</a>
<a class="MENU" href="http://www.italianrugby.net/forum/forum.htm">FORUM</a>
<a class="MENU" href="http://www.italianrugby.net/giochi/giochi.htm">GIOCHI</a>
<a class="MENU" href="http://www.italianrugby.net/varie/varie.htm">VARIE</a>
<a class="MENU" href="http://www.italianrugby.net/cerca/cerca.htm">CERCA</a>
<a class="MENU" href="http://www.italianrugby.net/scrivici/scrivici.htm">SCRIVICI</a>
</div>
</body>


p.s.
fra parentesi tieni conto che non è corretto
- usare lo stesso id per due elementi diversi
- usare lo stesso nome per due classi o id che hanno direttive differenti.
 

bella

Utente Attivo
3 Ott 2005
57
0
0
dead ha scritto:
eheh, tu stai usando quel zozzone di IExplorer.:D
con firefox non vengono allineati!

eheh, pure io usero' quello zozzone di IExplorer!:fonzie:
Ho riscontrato alcuni problemi Dead con quel codice, ma ancora non mi si allinea. Continuero' a provare..ma grazie lo stesso!:beer:
 

sbobby

Utente Attivo
26 Gen 2006
791
0
0
Roma
A me è venuta in mente un'altra idea, ma dovresti sostituire le scritte del menu con delle immagini: se ti crei delle immagini tutte della stessa misura, con scritto all'interno i vari nomi del menu (insomma devi creare dei tasti con quei nomi) poi puoi inserirli in una cosa del genere:

<div class="contenitore">
<div class="prima _linea_tasti>
<a href="./tuapagina.htm"><img class="tasti" src="./images/tasto1.JPG" alt="tasto1" /></a>
<a href="./tuapagina2.htm"><img class="tasti" src="./images/tasto2.JPG" alt="tasto2" /></a>
...e cosi via...
</div>
<div class="seconda_linea_tasti>
<a href="./tuapagin3.htm"><img class="tasti" src="./images/tasto3.JPG" alt="tasto3" /></a>
<a href="./tuapagina4.htm"><img class="tasti" src="./images/tasto3.JPG" alt="tasto3" /></a>
...e cosi via...
</div></div>

dove al class=tasti gli puoi dare un'uguale spaziatura e al class=contenitore puoi dare la grandezza che vuoi e l'allineamento che vuoi all'interno menu...Secondo me cosi si vede bene su qualsiasi browser...
 

bella

Utente Attivo
3 Ott 2005
57
0
0
Bella e simpatica la tua idea cflsite di sostituire immagini al posto di testo nel menu'; giusto per valutare il tutto, sto pensando agli effetti positivi, ed effetti negativi.

Positivo, il fatto di avere una migliore grafica, con le immagini personalizzabili direttamente da una cartella "immagini tasti menu".
Positivo, il fatto di allineare il menu senza usare tabelle.

Negativo, il fatto di appesantire troppo le pagine, con 14 immagini jpg aggiuntive per ogni pagina?
Negativo, il fatto di non sfruttare in pieno le potenzialita' del CSS, esempio mouseover etc?
 

sbobby

Utente Attivo
26 Gen 2006
791
0
0
Roma
Giustissima la tua analisi...In fin dei conti però sei crei delle immagini ottimizzate e con degli strumenti adatti potresti riuscire anche a farle grandi 2kb ciascuna quindi il sito non si appesantirebbe poi troppo!!! E' una scelta che devi fare te...Io nel mio sito ho optato per delle immagini perchè ne giova davvero tanto la grafica...Poi vedi tu!!!:p
 

bella

Utente Attivo
3 Ott 2005
57
0
0
cflsite ha scritto:
Giustissima la tua analisi...

Con queste tue gentili parole, credo di potermi FINALMENTE appropriare del titolo di WebMaster:fonzie:
Grazie di cuore, ora tocca a me far scintille nel web:beer:
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Allineare due righe di testo in photoshop Photoshop 2
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
F Allineare immagine al centro HTML e CSS 6
S Come allineare tre immagini in linea al centro HTML e CSS 1
A Allineare il testo dentro una select composta da più campi pesi da un db PHP 5
I come allineare un icona HTML e CSS 6
M allineare due box(div) affiancati HTML e CSS 19
K allineare div al centro HTML e CSS 9
P Allineare data a sx dello schermo e titolo al centro HTML e CSS 16
K allineare controlli in un div HTML e CSS 3
A Allineare due colonne in una tabella HTML PHP 6
G Allineare Div in orrizzontale con cilo for PHP PHP 1
L Allineare 2 tools su sito web HTML e CSS 0
N Allineare numeri a destra. Classic ASP 2
G Come allineare in alto una tabella? HTML e CSS 5
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
F [PHP] Cercare voci uguali nel db e unire alcune variabili PHP 0
V motore di ricerca e voci link Ajax 2
S strane voci dalla telecamera ip IP Cam e Videosorveglianza 4
asevenx Gestire posizionamento voci sottomenu che si nascondono HTML e CSS 1
Z Preventivo SEO: quali voci inserire? SEO e Posizionamento 2
A Voci di menu che non si comportano da link HTML e CSS 1
F border li causa lo spostamento delle voci di menù HTML e CSS 2
M disabled di alcune voci di un menù a tendina prese da un ciclo while PHP 6
blacksbugs Cambiare sfondo alle voci dei menù [CSS] HTML e CSS 3
F Inserire voci di selezione PHP 3
R Aiuto!! per Magento/analisi sito - Meta e Tag duplicati e voci non trovate Magento 6
A menu Ajax con tanti (tantissime voci) Ajax 1
B disattivare voci menu Classic ASP 3
G Miglior ordinamento delle voci in un file css? HTML e CSS 3
B Disattivare voci Classic ASP 0
N AIUTO! Voci della cartina geografica! HTML e CSS 1
D Visualizzazione pagina basata sul valore di un campo del database PHP 0
Barierta Testo a comparsa con passaggio del mouse Javascript 13
W Elenco dei link del file presenti in una cartella PHP 2
C Dopo chiusura del tag php la stringa html va a capo PHP 1
R Trovare la Tabella del pagamento su WooCommerce WordPress 0
R Barra del menù principale decentrata Joomla 4
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
felino Stampante Epson XP-322: nessuna traccia del colore nero! Hardware 6
M Controllo del codice fiscale/partita iva PHP 11
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A fread non legge il contenuto del file PHP 4
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Saluti a tutti gli utenti del Forum Presentati al Forum 0
S Trasferire dati sulle pagine del sito PHP 7
V [Buoni amazon]+[Itunes] legali e scontati del 25% Altri Annunci 0
Mastiff_84 Saluto a tutti i membri del forum Presentati al Forum 1
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1

Discussioni simili