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

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

Hybrid View

Permessi di invio