Centrare link in DIV

**carbonio** · 21-07-2009, 01:05

Ciao a tutti.. non conosco molto bene i css e mi sto imbattendo in un problema: non riesco a centrare dei link all'interno di un div.. non capisco...
è un menù orizzontale per una pagina web.. tra l'altro nel parametro "float" posso solo scegliere left o right.. forse ne faccio un uso improprio

Vi posto il codice html e css.

Mi sapreste aiutare? grazie mille a chi se la sente di leggere il codice

----- HTML -----

<body>
<center>
<div id="totale">
<div id="testata">[img]img/logo-testata.jpg[/img]
<div id="menu-top">[img]img/sfondo-menu_top-sx.gif[/img]Home Dove siamo Staff Referenze Dicono di noi Contatti[img]img/sfondo-menu_top-dx.gif[/img]</div>
</div>

--- ------ ------- -------

</div>
</center>
</body>

----- CSS -----

body {
background-color: #FFFFFF;
padding: 5px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#totale {
width: 960px;
background-color: #FFFFFF;
display: block;
visibility: visible;
height: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #FF0033;
border-right-color: #FF0033;
border-bottom-color: #FF0033;
border-left-color: #FF0033;
}
#menu-top {
background-image: url(../img/sfondo-menu_top.gif);
background-repeat: repeat;
background-position: left top;
height: 30px;
display: inline;
float: left;
width: 960px;
text-align: center;
margin: 0px;
padding: 0px;
border: 1px solid #FF00FF;
}
#testata {
margin-bottom: 60px;
display: block;
float: left;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
border: 1px solid #00FF00;
height: auto;
width: 960px;
}
#menu-top a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
width: 120px;
display: inline;
float: left;
padding-top: 5px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
height: 24px;
visibility: visible;
overflow: visible;
text-align: center;
}

**ricman** · 21-07-2009, 13:23

http://forum.html.it/forum/showthread/t-1160777.html

**ispuk** · 21-07-2009, 15:46

secondo me non serve il float al #menutop , a meno che tu non debba affiancarvi orizzontalmente un'altro div !

poi io non userei tutti quei margini a 0px

inserirei margin:0 auto;

poi un'altra cosa se hai il menu dentro un div fai in modo che il div sia della larghezza di tutto il menu ne di più ne di meno una volta fatto ciò applichi un text-align :center; o al div stesso o al div che lo contiene o al body,dipende tutto da che tipo di sito stai costruendo

**carbonio** · 26-07-2009, 10:50

Ciao, grazie per le risposte... però non mi son spiegato.

Posto il codice in maniera più sgombra:

HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prova</title>
<link href="css/prova.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenit1">Prova Prova Prova Prova Prova</div>
</body>
</html>

CSS
#contenit1 {
text-align: center;
background-image: url(../img/sfondo-menu_top.gif);
height: 30px;
display: block;
width: 950px;
}
#contenit1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
width: 100px;
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 24px;
text-align: center;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
float: left;
}

Quello che voglio fare è centrare i link nel div che li contiene.
così:

Basta mettere un "text-align: center;" come ho fatto nel div "contenit1" direte voi..

SI ok, però sorge un problema: non riesco così a far funzionare le impostazioni che ho dato ai tag <a> all'interno del div con la pseudo classe "#contenit1 a" o meglio i bordi sinistra e destra li mette, ma non funzionano i parametri:

padding-top: 5px;
width: 100px;
height: 24px;

La musica cambia se attribuisco in "#contenit1 a" al parametro "float" il valore: left o right
Diventando questo: http://docs.google.com/Doc?docid=0AZ...N3Zkcmdu&hl=en

Come si noterà i parametri:
padding-top: 5px;
width: 100px;
height: 24px;

funzionano, ma ovviamente i link perdono l'allinemento al centro..
Ho provato dando delle classi ad ogni link invece di utilizzare una pseudo classe per tutti... ma non va...

Volevo evitare di mettere ogni link dentro un div e questi ultimi alinearli al centro del "contenit1"...

Boh!?

Forse il problema è a monte nella struttura, secondo voi?

**ispuk** · 26-07-2009, 13:17

cosi dovrebbe andare

salva tutta la pagina come index.html o come vuoi tu

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prova</title>
<style type="text/css">

</style>

</head>

<body>
<div id="contenit1">
<div id="contenitorelink">
<a>prova1<a>prova2<a>prova3<a>
prova4
</div>
</div>
</body>
</html>

se poi vuoi dare dei bordi ad ogni link o crei un div per ogni "casella" link con i relativi styles

o sostituisci il div "contenitorelink" con una tabella a 4 righe con gli stessi style che ha adesso il div stesso

ciao

**ispuk** · 26-07-2009, 13:27

per i font del testo dei link crea una classe specifica con i css e scegli tutti gli stili che vuoi

ma è sempre meglio che ogni cosa abbia un suo stile ben distinto dagli altri anche per poi in un futuro doverla modificare

Discussione: Centrare link in DIV

Strumenti discussione

Ricerca discussione

Visualizza

Centrare link in DIV

Permessi di invio