[XHTML] Inizio problemi da neofita

**colde** · 16-02-2005, 21:08

Ciao a tutti,
sto cominciando a sperimentare qualcosa con XHTML e ho già le prime difficoltà. Comincio già a confondermi le idee e non capisco l'errore.

ho semplicemente inserito un box come testata con all'interno una semplice scritta da centrare ma non riesco a centrarla verticalmente. Perchè?

questo è il codice CSS

/* CSS Document */
body { bgcolor: #ffffff;
font: 80% verdana,helvetica,sans-serif;
margin: 0;
padding: 20px 0px 20px 0px;
text-align: center
}

#bodyContent { width:80%; text-align:center; margin:0 auto }

#testa { height: 50px;
background: #093B81;
border: 2px solid #0066cc;
padding: 10px 0 10px 0
}

#testo_testata { vertical-align: middle;
font-size: 2em;
font-weight: bold;
color: #ffffff;
text-align: center;
font-family: arial
}

e questo l'HTML

<body>
<div id="bodyContent">

<div id="testa">
<div id="testo_testata">
PROVA TITOLO PAGINA
</div>
</div>
</div>

</body>

Perche non mi centra il testo?

**haZe** · 16-02-2005, 23:03

Vuoi centrarla verticalmente? O ho capito male?

Centrare verticalmente un elemento non è facilissimo, ma è fattibile. Se è questo che ti serve ti posso spiegare come.

Se invece era centare orrizontalmente... innanzitutto prova a mettere il punto e virgola a tutte le istruzioni CSS. Poi se metti la pagina online diventa tutto più facile

**colde** · 16-02-2005, 23:28

Dopo svariate prove ci sono riuscito, comunque volevo centrarla verticalmente. Ora sto provando e riprovando per vedere le varie modifiche con i vari padding, float, margin e cose così.

Mi chiedevo una cosa:
avevo inserito la scritta e poi volevo inserire un'immagine alla sua destra; ho usato il float all'immagine ma non mi face va nessuno spostamento così ho provato ha inserire nell'html prima il div dell'immagine e poi quello del testo. Ora si è messa a posto però non capisco perchè quando avevo il box di testo prima del box immagine il float non funzionava. Sapreste spiegarmelo?

Denghiu.

**haZe** · 17-02-2005, 00:27

Qui ci vuole una ripassata sul floating

http://www.html.it/css/guida_css_26.htm

**colde** · 17-02-2005, 01:09

E' piu forte di me, non lo capisco.

Ho provato in questo modo:

<body>
<div id="bodyContent">

<div id="testa">
<div id="img_testata">[img]img\immagine_prova.gif[/img]</div>
<div id="testo_testata">PROVA INSERIMENTO TITOLO</div>
</div>
</div>
</body>

e poi nel CSS esterno

#bodyContent { width:80%; text-align:center; margin:0px auto }

#testa { height: 36px;
background-color: #093B81;
border: 1px solid #093B81;
}

#testo_testata { vertical-align: middle;
font-size: 2em;
font-weight: bold;
color: #ffffff;
text-align: center;
padding-top: 8px;
padding-left: 10%;
padding-right: 10%;
margin: 0px;
}

#img_testata { vertical-align: middle;
border: 0px;
margin: 0px;
text-align: left;
float: right;
}

Il mio scopo è di creare un rettangolo blu con la scritta bianca centrata e un'immagine alla sua destra che termini al limite del bordo del rettangolo. L'immagine è piu alta del rettangolo ed è arrotondata quindi in sovrapposizione i due oggetti creano un effetto "pancia" poichè metà immagine termina sotto il rettangolo.

I risultati sono sconcertanti però.
Con FF a schermo intero mi vede la pagina correttamente come dico io ma se rimpicciolisco la finestra mi sposta l'immagine di un px verso sinistra creando un vuoto per metà immagine e facendo vedere la mancanza di un bordino rispetto allo sfondo della testata. In pratica l'immagine non risulta adiacente al bordo del rettangolo ma spostata di un px.

Con IE invece mi ingrandisce lo sfondo della testata per tutta l'altezza dell'immagine.

Comincio a sdraiarmi su un'autostrada?

Mi sembra vivo!!! Fa di nuovo quello che vuole lui.

**haZe** · 17-02-2005, 01:20

Guardando solo il codice ammetto di non essere in grado di far molto

Non è che potresti gentilmente mettere il tutto online e passarci il link?

**Mich_** · 17-02-2005, 09:44

Per i problemi "tecnici" vedo che hai gia` risposte, quindi ti scrivo per problemi di fondo.

Scrivere un titolo senza il tag <h1> (o <h2>, <h3>, ...) e` un errore.
Infatti il <div> e` una divisione della pagina, non introduce un titolo. Il problema e` evidente quando la pagina viene "letta" con strumenti diversi dalla "tua" visualizzazione: non c'e` modo di capire che quello e` un titolo.
Se uno usa un CSS diverso dal tuo (cosa possibile con molti browser moderni), il tuo titolo diventa del testo normale.

Quindi se vuoi scrivere correttamente, usa i tag per quello che sono, e usa i tag corretti.

PS1. l'attributo bgcolor non esiste nei CSS.

PS2. per centrare verticalmente un oggetto dentro un altro si usa (per i browser conformi):
margin: auto,0;

**pierofix** · 17-02-2005, 09:57

Per centrare verticalmente un testo in un elemento block (es. div) bisogna utilizzare un trucchetto.

Se hai questo

codice:

<div>Ciao a tutti.</div>

Nel css devi fare così

codice:

div {
   color: #fff;
   background: #069;
   height: 100px;
   line-height: 100px;
}

ovvero si setta l'interlinea uguale all'altezza.

**colde** · 17-02-2005, 10:35

Grazie delle risposte.
Il tag bgcolor l'avevo già tolto, mi sono accorto che è una baggianata. Ora facio qualche altra prova e al limite lo pubblico e posto l'indirizzo.

Ho riprovato inserendo h1 nel titolo ma il problema me lo da ugualmente.
Se volete vedere questo è l'indirizzo:

http://oikyspa.fauser.it/prova/index.html

**colde** · 17-02-2005, 11:06

dimenticavo...il css è questo:

#bodyContent { width:80%; text-align:center; margin:0px auto }

#testa { height: 36px;
background-color: #093B81;
border: 1px solid #093B81;
}

h1 { vertical-align: middle;
font-size: 2em;
font-weight: bold;
color: #ffffff;
text-align: center;
padding-top: 8px;
padding-left: 10%;
padding-right: 10%;
margin: 0px;
}

Discussione: [XHTML] Inizio problemi da neofita

Strumenti discussione

Ricerca discussione

Visualizza

[XHTML] Inizio problemi da neofita

Permessi di invio