allineamento testo in box model

**miki_naw** · 30-09-2005, 15:37

ciao a tutti,
vorrei creare un bottone di dimensioni fisse, tramite il tag a (in modo che tutta l'area sia cliccabile).
Non ho capito però come fare a posizionare SOLO il testo, lasciando il posizionamento del box inalterato.
(nell'esempio che riporto vorrei mettere la scritta al centro)

grazie in anticipo!
----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">

</style>
</head>

<body>
<table width="106" border="0" cellspacing="0" cellpadding="0">
<tr>
CIAO
</tr>
</table>
</body>
</html>

**thomas_anderson** · 30-09-2005, 16:08

Sbaglio o quella è una tabella usata a scopo di formattazione della pagina? Il tuo doctype non ti scusa affatto: http://www.meyerweb.com/
Per il solo testo devi usare text-align: center;. Cmq elimina quella orrenda tabella, usa font alternativi oltre al Verdana, usa misure relative per i font (non i px)e vedrai che forse riuscirò a perdonarti per quella tabella.

**miki_naw** · 30-09-2005, 16:57

Originariamente inviato da thomas_anderson
Sbaglio o quella è una tabella usata a scopo di formattazione della pagina? Il tuo doctype non ti scusa affatto: http://www.meyerweb.com/
Per il solo testo devi usare text-align: center;. Cmq elimina quella orrenda tabella, usa font alternativi oltre al Verdana, usa misure relative per i font (non i px)e vedrai che forse riuscirò a perdonarti per quella tabella.

ok mi hai distrutto :-D
vada per il text-align: center ;...se però voglio centrarlo anche verticalmente?
i font alternativi li ho omessi perchè ho riscritto il css da postare qui..e l'ho fatot in velocità...
mi perdoni la tabella ora? :-P

**thomas_anderson** · 30-09-2005, 18:34

Scherzavo!
l'ho detto solo per evitare di farti prendere cattive abitudini.

Per l'allineamento orizzontale c'è la proprietà vertical-align. ma se tu vuoi centrarlo all'interno di un box-casella di menu devi usare opportunamente margini e padding.

codice:

div#menu a {
display: block;
text-align: center;
width: 200px;
margin: 0;
padding: 5px 0; /* varia a piacere */
background: #f8f8ee;
color: #000;
font: 85% Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
border: 1px solid #ccc;
}

div#menu a:hover {
background: #eee;
color: #666;
text-decoration: underline;
}

**miki_naw** · 03-10-2005, 08:42

Originariamente inviato da thomas_anderson
Scherzavo!
l'ho detto solo per evitare di farti prendere cattive abitudini.

Per l'allineamento orizzontale c'è la proprietà vertical-align. ma se tu vuoi centrarlo all'interno di un box-casella di menu devi usare opportunamente margini e padding.

codice:

div#menu a {
display: block;
text-align: center;
width: 200px;
margin: 0;
padding: 5px 0; /* varia a piacere */
background: #f8f8ee;
color: #000;
font: 85% Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
border: 1px solid #ccc;
}

div#menu a:hover {
background: #eee;
color: #666;
text-decoration: underline;
}

perfetto!
era esattamente quello che cercavo di ottenere...
thanx a lot!

**thomas_anderson** · 03-10-2005, 13:30

Per fare un effetto "bottoni depressi" alterna 2px outset #colore e 2px inset #colore sul rollover.

**miki_naw** · 05-10-2005, 09:12

sono ancora qui :-D
Ho ancora dubbi sul posizionamento del solo testo dentro il div :-(
così riesco ad allineare il testo, in H e in V, ma non riesco ad estendere l'area cliccabile a tutto il box. Aggiungendo height e width a #testo mi sballa tutto a causa del padding.
io vorrei ottenere un effetto tipo quello allegato, in cui l'area cliccabile è tutto il bottone, non solo il testo...
sono partito dalla base di t.anderson :-D

-------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">

</style>
</head>

<body>
<div id="menu"><div id="testo">ACCADEMIA</div></div>
</body>
</html>

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

**thomas_anderson** · 06-10-2005, 11:13

devi aggiungere width: 77px; ad a ed un background ad a:hover, senza dimenticare il color per a:hover. non so se ti conviene impostare un altezza predefinita. usa il padding-top e padding-bottom uguali per stabilirla.

**miki_naw** · 06-10-2005, 11:41

Originariamente inviato da thomas_anderson
devi aggiungere width: 77px; ad a ed un background ad a:hover, senza dimenticare il color per a:hover. non so se ti conviene impostare un altezza predefinita. usa il padding-top e padding-bottom uguali per stabilirla.

grazie mille per la tua pazienda e disponibilità...ora è tutto chiaro!!!

Discussione: allineamento testo in box model

Strumenti discussione

Ricerca discussione

Visualizza

allineamento testo in box model

Permessi di invio