Pagina html 100% con tabella centrata

**Kairos** · 22-03-2011, 13:14

Pagina index con tabella centrata.
Qualcuno può suggerirmi qualcosa da cui partire per creare la classica pagina riempibile 100% della dimensione della finestra del browser, con centrata una tabella composta da 2 righe e 2 colonne....

Riesco a farla, ma non a centrarla e non capisco il perché.

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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento senza titolo</title> 
<style type="text/css"> 

div.center {margin:0 auto; text-align:center;} 

 
body { background-image: url(images/background.jpg); 
background-repeat: repeat; } 
</style> 
</head> 
<body> 
<div class="center"> 
<table width="100%" border="0" cellspacing="5" cellpadding="2" align="center"> 
<tr>  <style type="text/css"> 

<!-- #Tabella_01 { position:absolute; left:0px; top:0px; width:900px; height:600px; } 

#Sezione-01_ { position:absolute; left:0px; top:0px; width:900px; height:360px; } 

#Sezione-02_ { position:absolute; left:0px; top:360px; width:145px; height:240px; } 

#italian_ { position:absolute; left:145px; top:360px; width:140px; height:123px; } 

#Sezione-04_ { position:absolute; left:285px; top:360px; width:327px; height:240px; } 

#english_ { position:absolute; left:612px; top:360px; width:128px; height:123px; } 

#Sezione-06_ { position:absolute; left:740px; top:360px; width:160px; height:240px; } 

#Sezione-07_ { position:absolute; left:145px; top:483px; width:140px; height:117px; } 

#Sezione-08_ { position:absolute; left:612px; top:483px; width:128px; height:117px; } --> 

</style>  
</head> 
<body style="background-color:#11111;"> 
 
<div id="Tabella_01" class="center"> <div id="Sezione-01_">
[img]images/Sezione_01.jpg[/img] </div>
 <div id="Sezione-02_">
 [img]images/Sezione_02.jpg[/img] </div> 
<div id="italian_">
  [img]images/italian.jpg[/img] 
</div> <div id="Sezione-04_"> [img]images/Sezione_04.jpg[/img] </div> 
<div id="english_"> 
 [img]images/english.jpg[/img] 
</div> 
<div id="Sezione-06_"> [img]images/Sezione_06.jpg[/img] 
</div> 
<div id="Sezione-07_"> [img]images/Sezione_07.jpg[/img] 
</div> <div id="Sezione-08_"> [img]images/Sezione_08.jpg[/img] 
</div> 
</div> 
 
</tr> 
</table> 
</div> 
</body> 
</html>

Perché si allinea a sinistra????

Grazie dell'attenzione!

**Myaku** · 22-03-2011, 15:14

c'è un po' di casino, hai aperto il body, l'hai condito con un po' di css, poi ci hai chiuso head, e poi ci hai riaperto il body ... òcio agli errori, usa il validatore

Inoltre, quel codice andrebbe un po' ripulito. La tabella a contenere tutto non è corretta (le tabelle servono per altro), e ci vedo un po' di divite.

ps. non è specificata la larghezza del div con margin: 0 auto

**Kairos** · 22-03-2011, 15:20

Grazie, ti spiego il motivo del casino....

Ho creato la pagina con photoshop ed ha creato lui le diverse sezioni della tabella.

Cosa mi consigli per ottenere centrata nella finestra del browser, qualunque sia la dimensione una tabella in modo tale da avere due immagini con collegamento ipertestuale alla sezione italian o alla inglese?

Grazie mille!

**Myaku** · 22-03-2011, 15:31

Originariamente inviato da Kairos
Ho creato la pagina con photoshop ed ha creato lui le diverse sezioni della tabella.

Cosa mi consigli per ottenere centrata nella finestra del browser, qualunque sia la dimensione una tabella in modo tale da avere due immagini con collegamento ipertestuale alla sezione italian o alla inglese?

1. correggi gli errori di sintassi, appoggiati al validatore del w3c (ma secondo me, visto il codice fai prima a riscrivere tutto da 0

)
2. il "contenitore" sarà un div di larghezza dichiarata (a quel punto il "margin: 0 auto" ti dovrebbe funzionare), per le immagini ti basta una lista

**Kairos** · 22-03-2011, 15:45

OK afferrato, gentilissimo!

**webdemo** · 22-03-2011, 16:31

Originariamente inviato da Kairos
OK afferrato, gentilissimo!

occhio,
stai parlando con una gentile donzella

**Kairos** · 22-03-2011, 16:36

Perdonami, non passo molto spesso di qua, grazie della segnalazione webdemo, scusa ancora Myaku!

**Myaku** · 22-03-2011, 17:51

Originariamente inviato da webdemo
occhio,
stai parlando con una gentile donzella

**webdemo** · 22-03-2011, 18:02

dato che anche in altri 3d ho notato la ::confusione::

meglio mettere i puntini sulle i

Discussione: Pagina html 100% con tabella centrata

Strumenti discussione

Ricerca discussione

Visualizza

Pagina html 100% con tabella centrata

Permessi di invio