Modifca menù css-posizione

13-09-2011, 18.03.45

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

**radiodelmomento** · 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

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">
  <!-- il menu -->
</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?

**radiodelmomento** · 13-09-2011, 18.33.34

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!

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:

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?

**radiodelmomento** · 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ù.

**radiodelmomento** · 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">
    <!-- Menu -->
  </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

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")

Discussione: Modifca menù css-posizione

LinkBack

Strumenti discussione

Display

Modifca menù css-posizione

Regole di scrittura