Convertire questa tabella in CSS

**ivanhalen** · 21-11-2004, 14:17

Salve,
E' difficile abbandonare la struttura a tabelle, soprattutto se si è giunti a stabilire un proprio "template" standard che va bene praticamente su quasi tutto... ma è un passaggio che "s'ha da fà": quindi, perdonate i miei (presumo numerosi) post da novellino...

In sostanza, come accennavo prima, devo convertire un mio "template" tabellare in una forma tableless... ho già incontrato una prima difficoltà nella conversione dell'header... la tabella è questa:

codice:

<table width="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1" align="left">[img]header-left.jpg[/img]</td>
    <td width="100%" align="right" valign="bottom" background="header-bg.jpg"></td>
    <td width="1" align="right">[img]header-right.jpg[/img]</td>
  </tr>
</table>

La parte che mi dà grattacapi è la terza colonna: non riesco a posizionare a destra l'immagine header-right.jpg (con le tabelle era un gioco da ragazzi), tenendo presente che la colonna centrale, un giorno, potrebbe avere dei contenuti - ad esempio il codice di un banner.
Finora ho creato questo:

codice:

<div id="page">
<div id="header">
[img]../themes/default/header-left.jpg[/img]
eventuale codice del banner, o comunque altro testo
[img]../themes/default/header-right.jpg[/img]
</div>
</div>

mentre il CSS è questo:

codice:

html, body {
	margin: 0px;
}

#page {
	width: 780px;
	position: absolute; left:50%;
	margin: 0 0 0 -390px;
}

#header {
	background-image: url(header-bg.jpg);
	vertical-align: text-top;
}

Tra l'altro, come faccio a posizionare il testo inframmezzato a "middle" (cioè all'altezza mediana delle immagini)? Al momento è a baseline di default, e non vorrei utilizzare [img]../themes/default/header-left.jpg[/img]...

Sono più confuso che persuaso... aiuto! :-D
Grazie in anticipo alle anime pie che mi aiuteranno...

**Jerry Masslo** · 21-11-2004, 18:40

se fai un disegnino è meglio, lì ci sono immagini che tu visualizzi, gli altri no.

**ivanhalen** · 21-11-2004, 18:53

meglio: posto quello che sto realizzando

versione vecchia (tabelle) | versione nuova (css)

Il CSS della versione nuova si trova qui

(tra l'altro, notare che le immagini sono perfettamente allineate nel vecchio modello, mentre non lo sono nel nuovo - al top delle immagini si vedono 2px di sfondo blu... :master: )

**Jerry Masslo** · 22-11-2004, 11:56

prova così:

<body>
<div id="page">
<div class="destra"></div>
<div id="header">Qui scrivo altro testo, che può essere il codice di un banner o altro (da definire)
</div>
</div>
</body>
</html>

--------

* {margin:0; padding:0}
body {text-align:center;
background:#f5f8fd
}

#page {
width: 780px;
background:#08324b url(header-b.jpg) repeat-x;
position:relative;
margin:auto
}
#header {
background:url(header-l.jpg) no-repeat;
color:white;
min-height:60px;
height:auto!important;
padding-left:160px;
padding-right:160px;
padding-top:50px;
height:110px;
}

.destra {position:absolute;
right:0;
background:url(header-r.jpg) top right no-repeat;
width:100%;
height:110px
}

----

il codice è buono per gli ie in quirk, per fare andare ie6 in quirk con quel doctype basta aggiungere un commento html in cima alla pagina tipo:

preferisco questa soluzione perché solo ie6 può andare in standard mode e quindi occorrerebbero tre tipi di codice uno per ie6 uno per gli altri ie e un altro per i browser standard tipo mozilla e opera, mentre in questo modo dove serve ne bastano due

**ivanhalen** · 22-11-2004, 13:18

OTTIMO! Funziona perfettamente, tuttavia trovo il codice CSS parecchio complicato da leggere per uno come me, con una esperienza medio-bassa dei fogli di stile...

Mi sa che devo iniziare a semplificare il layout, altrimenti il tutto diventa difficile da gestire: ad esempio, inizio ad eliminare l'immagine a destra...

Grazie, Jerry Masslo!

Discussione: Convertire questa tabella in CSS

Strumenti discussione

Ricerca discussione

Visualizza

Convertire questa tabella in CSS

Permessi di invio