tabelle che si ridimensionano

**qwertyuio** · 11-02-2011, 19:36

ciao a tutti!
non riesco a rendere una tabella ridimensionabile, ovvero, la tabella 4x3 contiene delle immagini in ogni td, le immagini sono state poste a 100% in larghezza e altezza nel css, ma la tabella (con width 95%) non si ridimensiona, ovvero le immagini non si ridimensionano!
come fare?

#central { <-tabella
width: 95%;
height: 100%;
margin: 0 auto;
}

#central td {
margin: 0 auto;

}

#quad_1 {

width: 100%;
height: 100%;
}
#quad_2 {
width: 100%;
height: 100%;
}

i quad_ da 1 a 12 sono tutti uguali e sono riferiti alle immagini contenute nei td

grazie

**JVM** · 12-02-2011, 13:41

da quello che so per applicare delle modifiche dinamiche agli elementi di una pagina si deve ricorrere a qualcosa di diverso da css, ad esempio javascript, ma a quel punto la soluzione non sarebbe così immediata, ci sarebbe da scrivere un piccolo script. Oltre a questo credo che l'operazione di ridimensionamento di molte immagini durante l'evento onresize della finestra del browser sia un pò pesantuccio per il browser stesso.

comunque per darti uno spunto di una possibile soluzione tramite javascript dai un'occhiata a questo codice, ho inserito solo due immagini, e il ridimensionamento si attiva solo quando ridimensioni la finestra. Ma secondo me diventa una cosa troppo macchinosa

.

questo è il file style.css

codice:

td{
border-style:solid;
border-color:#2A3F00;
border-width:1px;
height:33%;
width:25%;

}

table{
width:100%;
height:inherit;
position:relative;
margin-top:-20px;
}

img{
position:relative;
margin-top:0px;
border-style:solid;
border-color:#ff0000;
border-width:1px;
}

div{
border-style:solid;
border-color:#ff0000;
border-width:1px;
}

questo il file html

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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" />
</head>

<body onresize="document.getElementById('i').style.width=(document.getElementById('t').offsetWidth/4).toString()+'px';document.getElementById('i').style.height=(document.getElementById('t').offsetHeight/3).toString()+'px';
document.getElementById('l').style.width=(document.getElementById('t').offsetWidth/4).toString()+'px';document.getElementById('l').style.height=(document.getElementById('t').offsetHeight/3).toString()+'px'
document.getElementById('d').style.height=(window.innerHeight/1.5).toString()+'px';
document.getElementById('t').style.height=(window.innerHeight/1.5).toString()+'px';"
>

<div id="d">
	<table id="t" border="0">
	  <tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	  </tr>
	  <tr>
		<td>[img]foto.jpg[/img]</td>
		<td>[img]foto.jpg[/img]</td>
		<td></td>
		<td></td>
	  </tr>
	  <tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	  </tr>
	</table>
</div>
</body>
</html>

in allegato c'è l'immagine da utilizzare nel file html

**qwertyuio** · 12-02-2011, 17:46

grazie per l'aiuto!

Discussione: tabelle che si ridimensionano

Strumenti discussione

Ricerca discussione

Visualizza

tabelle che si ridimensionano

Permessi di invio