Da tabella di 2 colonne a....CSS

**Mr_Flash** · 25-10-2007, 20:05

Ciao a tutti,
ho questo codice html che vorrei "trasformare" in css: mi aiutate?

<table width="760" border="0" cellspacing="0" cellpadding="0">
<tr>

<td width="259">[img]img/img1.gif[/img][img]img/img2.gif[/img][img]img/img3.gif[/img][img]img/img4.gif[/img][img]img/img5.gif[/img]</td>
<td width="501">[img]img/img6.gif[/img][img]img/img7.gif[/img][img]img/img8.gif[/img][img]img/img9.gif[/img]</td>
</tr>
</table>

Praticamente è una tabella divisa in 2 colonne. La prima colonna contiene delle immagini che fanno da pulsanti e che devono essere inserite una sotto l'altra.

Grazie per l'aiuto.

**copsteve** · 25-10-2007, 22:39

Abbozzo una struttura, anche se a guardare il tuo codice mi si incrociano gli occhi...

Codice CSS:

codice:

table#tabella{
width: 760px;
height: auto;
border: 0;
margin: 0;
padding: 0;
}

.td_1 td{
width: 259px;
height: auto;
}

.td_2 td{
width: 501px;
height: auto;
}

Ti converrebbe poi dimensionare le immagini da inserire già con i pixel giusti, in modo da non dover assegnare ulteriori dimensioni.

Codice HTML:

codice:

<table id="tabella>
<tr>
<td class="td_1">[img]img/immagine1[/img][img]img/immagine2[/img]...</td>
<td class="td_2">[img]img/immagine1[/img][img]img/immagine2[/img]...</td>
</tr>
</table>

Ripeto, è solo un abbozzo che spero possa esserti utile... non prenderlo come "oro colato".

**mucu** · 26-10-2007, 07:27

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">

ul {

    float: left;

    margin: 0px;

    padding: 0px;

    list-style-type: none;

}

div {

    width: 760px;

}

</style>

</head>

<body>

<div>

  <ul>[*][img]img/img1.gif[/img][*][img]img/img2.gif[/img][*][img]img/img3.gif[/img][*][img]img/img4.gif[/img][*][img]img/img5.gif[/img][/list]

  [img]img/img6.gif[/img][img]img/img7.gif[/img][img]img/img8.gif[/img][img]img/img9.gif[/img]</div>

</body>

</html>

a me sembra di capire che vuoi fare tutto in css
comunque il tag img vuole una sbarra finale /

**Mr_Flash** · 26-10-2007, 16:12

a me sembra di capire che vuoi fare tutto in css
comunque il tag img vuole una sbarra finale /

Esatto, volevo tutto in CSS.

Grazie ad entrambi per il vostro aiuto, mi metto subito ad analizzare il codice che avete postato!

**Mr_Flash** · 29-10-2007, 18:12

Scusate ma ho un altro problema....

l'ultima immagine presente nell'header mi va a capo sia con IE che con Firefox e non so perchè...ho rimodificato il css prendendo spunto dalla guida "Layout a due colonne float":

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<title>Titolo pagina</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" href="foglio.css" type="text/css">

<div id="container">

<div id="header">
<ul>[*][img]img01.gif[/img][*][img]img06.gif[/img][*][img]img07.gif[/img][*][img]img08.gif[/img][*][img]img09.gif[/img][/list]
[img]img02.gif[/img]
[img]img03.gif[/img]
[img]img04.gif[/img]
[img]img05.gif[/img] MI VIENE A CAPO
</div>

<div id="spot">
[img]img-centrale_01.gif[/img]
[img]imgcentrale_02.gif[/img]
[img]imgcentrale_03.gif[/img]
</div>

<div id="navigation">
<ul>[*]Home[*]Testo 1[*]Testo 2[*]Testo 3[*]Testo 4[*]Testo 5[*]Testo 6[/list]
</div>

<div id="content">

<h2>Testo</h2>

testotesto</p>
</div>

<div id="footer">© 2006 -2007</div>

</div>
</div>
</body></html>

CSS

/*stili per il layout fisso*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{width: 760px;margin: 0 auto;text-align: left;
border-left: 1px solid #cccccc;border-right: 1px solid #cccccc}

/*stili generici, su header e footer*/
div#header{color: #ffffff;width: 760px;}
div#spot{width: 760px;}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

ul{
float: left;
margin: 1em 0 1em 1em;
padding: 0;
list-style-type: none;
}

/*stili specifici per il layout*/
div#navigation{float:right;width: 13em}
div#content{margin-right: 13em;padding: 1em}
div#footer{clear:right; text-align:center; padding: 0.5em;
background-color: #69c; color: #000}

/*stili per la navigazione*/
div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}

Grazie per il vostro aiuto

**Mr_Flash** · 29-10-2007, 18:15

Se la elimino le "img-centrali" in Firefox le vedo sempre in modo disallineato..

Discussione: Da tabella di 2 colonne a....CSS

Strumenti discussione

Ricerca discussione

Visualizza

Da tabella di 2 colonne a....CSS

Permessi di invio