Come allineare in centro una serie di link [era: Dubbio]

**emanius** · 10-01-2014, 18:43

Salve a tutti sono un neofita dei codici html/css e questo è il mio primo post.
Oggi è il secondo giorno che seguendo tutorial sto provando a creare un menu di navigazione orizzontale.

Sono riuscito a dare 'spazio' ai miei bottoni utilizzando il comando padding (height/width non sembra funzionare).

Ora non riesco ad allineare centralmente (rispetto il box nero) il testo stesso dei pulsanti.

C'è una soluzione?

codice HTML:

<body>                
<header>                        
<div id="menu" >                                  
<a class="menu" href="index.html"> INDEX </a>                 
<a class="menu"  href="portfolio.html"> PORTFOLIO </a>                 
<a class="menu"  href="biografia.html"> BIOGRAFIA </a>                 
<a class="menu"  href="curiosità.html"> CURIOSITÀ </a>                    
</div>                   
 </header>            
</body>

codice:

body{
    background-color: grey;
  
}






div
{
    font-size: 18px;
    font-family: verdana;
    font-weight: lighter;
   text-align: center;
   
}


a.menu
{
    
    background-color: black;
    color: white;
    font-weight: normal;
    text-decoration: None;
    
    letter-spacing: 0.4em;
    margin: 0px 5px 0px 0px;
    
    border-bottom-color: yellow;
    border-style: solid;
    border-bottom-width: 6px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    




}

so di aver pasticciato un pò ma sto andando a tentativi :P, grazie!

**fcaldera** · 10-01-2014, 19:03

benvenuto nel forum
ti invito a leggere il regolamento in evidenza riguardo al titolo da dare alle discussioni.

**carlomarangoni** · 10-01-2014, 20:03

Piuttosto che correggere il tuo faccio prima a farti un esempio da capo così puoi vedere le varie regole e farti un'idea di come funziona

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#cm-nav li a.arrow {background-image: url("arrow-right.gif")}
#cm-nav > li > a.arrow {background-image: url("arrow-down.gif")}
ul#cm-nav ,
ul#cm-nav ul {
 list-style: none;
 margin: 0px;
 padding: 0px
}
ul#cm-nav li {
 list-style: none;
 margin: 0px;
 padding: 0px;
 width: auto;
 float: left;
 position: relative
}
ul#cm-nav li li {
 width: auto;
 float: none
}
#cm-nav a {
 background: yellow;
 padding: 5px;
 border: 1px solid black;
 text-align: left;
 font-family: verdana;
 text-decoration: none;
 display: block;
 white-space: nowrap
}
}#cm-nav a.no-click {cursor: default}
#cm-nav li a {margin: -1px -1px 0px 0px}
#cm-nav li li a {margin: 0px 0px -1px}
#cm-nav > li > a.arrow {padding-right: 14px}
#cm-nav ul.arrow-pad > li > a {padding-right: 11px}
#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-position: right;
 background-repeat: no-repeat
}
#cm-nav li:hover > a {
 color: white;
 background-color: red
}
#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul {
 display: none;
 position: absolute;
 z-index: 999
}
#cm-nav li:hover ul {display: block}
#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}
#cm-nav li:hover ul {margin-left: 0px}
#cm-nav ul ul {
 left: -1px;
 top: 1px
}
#cm-nav li {top: -1px}
#cm-nav a {font-size: 18pt}
#cm-nav a {background-color: rgb(0, 0, 0)}
#cm-nav a {border-color: rgb(255, 255, 255)}
#cm-nav a {color: rgb(255, 255, 255)}
</style>
</head>
<body style="background:#DADADA">
<ul id="cm-nav">
   <li><a href="index.html" target="_self">Home Page</a></li>
   <li><a href="portfoglio.html" target="_self">Portfoglio</a></li>
   <li><a href="Biografia.html" target="_self">Biografia</a></li>
   <li><a href="curiosita.html" target="_self">Curiosità</a></li>
</ul>
</body>
</html>

**emanius** · 10-01-2014, 20:20

ti ringrazio carlomarangoni e domani provvederò ad esaminare attentamente il testo che mi hai inviato! purtroppo sono ancora inesperto e non so se riuscirò a capire la fonte del mio problema.. ho letto da qualche parte che gli elementi 'inline' danno problemi e hanno molte limitazioni.. tantè che se pongo il menù in verticale se non sbaglio il problema non sussiste

**carlomarangoni** · 11-01-2014, 00:14

No problemi non ce ne sono se viene fatto come si deve.

Prova la pagina che ti ho postato e vedrai che funziona senza problemi

**emanius** · 11-01-2014, 12:47

Originariamente inviata da carlomarangoni

Piuttosto che correggere il tuo faccio prima a farti un esempio da capo così puoi vedere le varie regole e farti un'idea di come funziona

codice:

#cm-nav li a.arrow {background-image: url("arrow-right.gif")}
#cm-nav > li > a.arrow {background-image: url("arrow-down.gif")}
ul#cm-nav ,
ul#cm-nav ul {

Non riesco a comprendere il senso di queste quattro righe. In internet non ho trovato molto.. potresti descrivermele passo passo? sarebbe molto utile..

codice:



	
		
			
			
				}#cm-nav a.no-click {cursor: default}
#cm-nav li a {margin: -1px -1px 0px 0px}
#cm-nav li li a {margin: 0px 0px -1px}
#cm-nav > li > a.arrow {padding-right: 14px}
#cm-nav ul.arrow-pad > li > a {padding-right: 11px}
#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-position: right;
 background-repeat: no-repeat
}

E qui??

codice:



	
		
			
			
				#cm-nav li:hover > a {
 color: white;
 background-color: red
}
#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul {
 display: none;
 position: absolute;
 z-index: 999
}
#cm-nav li:hover ul {display: block}
#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}
#cm-nav li:hover ul {margin-left: 0px}
#cm-nav ul ul {
 left: -1px;
 top: 1px
}
#cm-nav li {top: -1px}
#cm-nav a {font-size: 18pt}
#cm-nav a {background-color: rgb(0, 0, 0)}
#cm-nav a {border-color: rgb(255, 255, 255)}
#cm-nav a {color: rgb(255, 255, 255)}

Anche qui.. di solito creo il contenitore nell'html e poi lo modello con i CSS, qui invece vedo che hai fatto tutto con i css? poi utilizzo il css esterno, e molti comandi non li ho mai visti.. se qualcuno ha la pazienza di spiegarmi in maniera dettagliata i comandi di questo codice sarebbe ottimo! o magari anche solo una parte, nel mentre che mi documento sul web!

Discussione: Come allineare in centro una serie di link [era: Dubbio]

Strumenti discussione

Ricerca discussione

Visualizza

Come allineare in centro una serie di link [era: Dubbio]

Permessi di invio