Modifca menù css-posizione

Printable View

13-09-2011, 18.03.45

Modifca menù css-posizione

Buongiorno, ho creato online un menù orizzontale (questo è il sito: http://criopera.altervista.org/index.php) che funziona bene, l'unico problema è che vorrei far sì che le voci siano centrate rispetto alla pagina, questo è il codice:

Codice:

ul.menu { list-style-type:none; width:auto; position:relative; display:block; height:33px; font-size:12px; background:url(images/bg.png) repeat-x top left; font-family:Verdana,Helvetica,Arial,sans-serif; border:1px solid #000; margin:0; padding:0; } ul.menu li { display:block; float:left; margin:0; padding:0; } ul.menu li a { float:left; color:#A79787; text-decoration:none; height:24px; padding:9px 15px 0; font-weight:big; } ul.menu li a:hover,.current { color:#fff; background:url(images/bg.png) repeat-x top left; text-decoration:none; } ul.menu .current a { color:#fff; font-weight:700; } /*RED*/ ul.menu.red{ background-color:#B11718; } ul.menu.red li a:hover, .menu.red li.current { background-color:#DE3330; }

Come posso fare?

EDIT:

Pardon, queste sono le informazioni di stile ovviamente ;)
13-09-2011, 18.19.59

Ingloba, se lo è già, il menu in un div e per quest'ultimo imposta una larghezza inferiore alla pagina (anche in forma %) e i margini ad auto.
13-09-2011, 18.20.55

Mi faresti una rapida traduzione di quello che hai detto? O meglio, mi diresti come farlo? :D
13-09-2011, 18.23.12

Usa text-align.

EDIT:
simpleticket voleva dire di impostare il width.
13-09-2011, 18.26.12

Ok, ma come faccio praticamente?
Il codice è:

Codice:

<head> <link rel="stylesheet" href="/menu/menu_style.css" type="text/css" /> </head> <ul class="menu red"> <li class="current"><a href="http://www.cri.it/flex/cm/pages/ServeBLOB.php/L/IT/IDPagina/1" target="_self">Sito CRI</a></li> <li><a href="http://criopera.altervista.org/Pionieri.html" target="_self">Pionieri</a></li> <li><a href="http://criopera.altervista.org/VdS.html" target="_self">VdS</a></li> <li><a href="http://criopera.altervista.org/SezFemminile.html" target="_self">Sez. Femminile</a></li> <li><a href="http://criopera.altervista.org/Capisquadra.html" target="_self">Capisquadra</a></li> <li><a href="http://criopera.altervista.org/Mezzi.html" target="_self">Mezzi</a></li> <li><a href="http://criopera.altervista.org/Servizi.html" target="_self">Servizi</a></li> <li><a href="http://criopera.altervista.org/LaSede.html" target="_self">La sede</a></li> <li><a href="http://criopera.altervista.org/Contatti.html" target="_self">Contatti</a></li> </ul>
13-09-2011, 18.26.24

Citazione:

Originalmente inviato da testpanco

Mi faresti una rapida traduzione di quello che hai detto? O meglio, mi diresti come farlo? :D

nel body

Codice HTML:

<div id="boxmenu">  </div>

nell'head

Codice HTML:

<style> ... #boxmenu{ width: 75%; /*Lo adatti alle tue necessità*/ margin: auto; ... </style>

Se usi text-align, tutto sarà centrato (anche il contenuto del menu ...).
Come ti dico sarà centrato, rispetto alla pagina, il blocco del menu, mentre il resto manterrà l'allineamtneto che aveva.
13-09-2011, 18.31.45

Ho modificato portando il codice a:

Codice:

<head> <link rel="stylesheet" href="/menu/menu_style.css" type="text/css" /> <style> #boxmenu{ width: 75%; /*Lo adatti alle tue necessità*/ margin: auto; </style> </head> <body> <div id="boxmenu"> <ul class="menu red"> <li class="current"><a href="http://www.cri.it/flex/cm/pages/ServeBLOB.php/L/IT/IDPagina/1" target="_self">Sito CRI</a></li> <li><a href="http://criopera.altervista.org/Pionieri.html" target="_self">Pionieri</a></li> <li><a href="http://criopera.altervista.org/VdS.html" target="_self">VdS</a></li> <li><a href="http://criopera.altervista.org/SezFemminile.html" target="_self">Sez. Femminile</a></li> <li><a href="http://criopera.altervista.org/Capisquadra.html" target="_self">Capisquadra</a></li> <li><a href="http://criopera.altervista.org/Mezzi.html" target="_self">Mezzi</a></li> <li><a href="http://criopera.altervista.org/Servizi.html" target="_self">Servizi</a></li> <li><a href="http://criopera.altervista.org/LaSede.html" target="_self">La sede</a></li> <li><a href="http://criopera.altervista.org/Contatti.html" target="_self">Contatti</a></li> </ul> </div> </body>

Ma non ottengo il risultato voluto; ho sbagliato qualcosa e se sì, potete correggermi?
13-09-2011, 18.33.34

Citazione:

Originalmente inviato da simpleticket

Se usi text-align, tutto sarà centrato (anche il contenuto del menu ...).

Ma non vuole portare TUTTO il menu al centro?
Se no, allora scusate, ho capito male! :crycry:
13-09-2011, 18.34.33

Ma io vedo il menu centrato nella pagina.
13-09-2011, 18.38.17

Io su entrambi i computer, con risoluzioni divers vedo:
http://criopera.altervista.org/Picture.png
E come puoi notare i margini del corpo del forum sono tagliati, e le voci stesse del menù non sono comunque ben centrate. D:

(Anticipo un grazie ad entrambi comunque ;) )

EDIT:

Non si può agire sulle info di stile e caratteri?
13-09-2011, 18.43.24

Beh, puoi aggiungere una linea sotto il menu!
13-09-2011, 18.46.12

Come? :D

EDIT:

Ora sono riuscito a centrare le voci cambiando banalmente il valore width a 75.5, ora mi serve di non far tagliare i margini al menù.
13-09-2011, 18.53.47

Non scrivere due post di seguito!
Comunque non eri riuscito a centrare già prima?

Per linea intendo che metti una linea rossa sotto il menu così sembra che la pagina finisce lì.
13-09-2011, 18.58.37

Scusate per i post consecutivi.
Cooomunque ho inserito una linea sotto il menù, ora pare più ordinato, se non fosse che appena ho inserito il codice dello stesso meù, si è ingrandito tutto il testo, come posso tenerlo fisso a, tipo 12px.
E se proprio volete conquistare la mia adorazione (XD), come posso colorare lo sfondo della parte sopra la riga che ho inserito sotto il menù, di nero?
13-09-2011, 19.04.09

Prova a modificare lo stile in

Codice HTML:

<style> #box_esterno{ width: 100%; background:url(images/bg.png) repeat-x top left; } #boxmenu{ width: 75.5%; /*Lo adatti alle tue necessit�*/ margin: auto; } </style>

e il div in

Codice HTML:

<div id="box_esterno"> <div id="boxmenu">  </div> </div>
13-09-2011, 19.09.06

Come hai detto tu, simpleticket, non cambia nulla
13-09-2011, 19.12.44

Hai cambiato la parte del body ma non hai sistemato la parte dello stile.
13-09-2011, 19.18.40

Cambiata anche quella ma senza successo

(Sto lavorando su una copia della home: http://criopera.altervista.org/PROVAindex.php )
13-09-2011, 19.45.33

Scusa non avevo tenuto conto dei path

Così dovrebbe andare:

Codice HTML:

<style> #box_esterno{ width: 100%; background:url(menu/images/bg.png) repeat-x top left; } #boxmenu{ width: 75.5%; /*Lo adatti alle tue necessit�*/ margin: auto; } </style>
13-09-2011, 20.40.19

Ok, bene o male ci sono.
E per la questione dei caratteri che in index sono diventati giganti?
Preciso che l'index è in php come avrete visto, e io ho ficcato lo script del menu sopra tutto il codice php.
13-09-2011, 20.54.03

Citazione:

Originalmente inviato da criopera

Ok, bene o male ci sono.
E per la questione dei caratteri che in index sono diventati giganti?
Preciso che l'index è in php come avrete visto, e io ho ficcato lo script del menu sopra tutto il codice php.

Si in effetti il codice è dove non dovrebbe essere.

Prendi questo blocco

Codice PHP:

<div id="box_esterno"> <div id="boxmenu"> <ul class="menu red"> <li class="current"><a href="http://www.cri.it/flex/cm/pages/ServeBLOB.php/L/IT/IDPagina/1" target="_self">Sito CRI</a></li> <li><a href="http://criopera.altervista.org/Pionieri.html" target="_self">Pionieri</a></li> <li><a href="http://criopera.altervista.org/VdS.html" target="_self">VdS</a></li> <li><a href="http://criopera.altervista.org/SezFemminile.html" target="_self">Sez. Femminile</a></li> <li><a href="http://criopera.altervista.org/Capisquadra.html" target="_self">Capisquadra</a></li> <li><a href="http://criopera.altervista.org/Mezzi.html" target="_self">Mezzi</a></li> <li><a href="http://criopera.altervista.org/Servizi.html" target="_self">Servizi</a></li> <li><a href="http://criopera.altervista.org/LaSede.html" target="_self">La sede</a></li> <li><a href="http://criopera.altervista.org/Contatti.html" target="_self">Contatti</a></li> </ul> </div> </div> <hr> </body>

cancella quel </body>

e mettilo subito dopo

Codice PHP:

<body class="ltr"> <a name="top"></a>

Per i caratteri, apri il foglio

/styles/RedSilver3/theme/stylesheet.css

e modifica tutti gli elementi font-size. Potresti partire con un valore di "1em;" e poi aggiustare il tiro.
13-09-2011, 21.08.41

Santo Dio, praticamente devo andare a caso, quale sarà quello giusto? Mi divertirò parecchio... :D
Grazie mille comunque
14-09-2011, 14.47.38

Hmm...modificando i valori di font-size, si modifica stranamente solo la grandezza dei caratteri del menù, e non quelli che costituiscono le parti testuale di index D:
COme faccio?
14-09-2011, 15.00.22

devi modificare il file

/styles/RedSilver3/theme/stylesheet.css

se modifichi il file

/menu/menu_style.css

modifichi il menu.
14-09-2011, 15.16.28

Ok, ce l'ho fatta, ad eccezione della riga di navigazione utente (per intenderci quella che contiene: FAQ - 0 nuovi messaggi privati - Cerca - Iscritti - Pannello di Controllo Utente - Logout [ nomeutente ], "Segna come già letti" e le info sul template e il copyright in fondo), nonostante abbia cambiato tutti i parametri font-size in "12px", (perchè non rispondeva a "em")