Oppure

Loading
12/09/11 12:49
Qwertj
Salve a tutti,
Ho creato un pagina web con un layout a tre colonne. Il problema è che se ridimensiono la finestra le colonne (quella di destra in particolare) si sovrappone alle altre.
Il css è questo: 
/*colonna centrale: contenuto*/
#content {position: absolute;
		top: 35px;
		left: 266px;
		padding: 15px 10px;
		margin-right: 225px;}
/*colonna di destra*/
#lateralBar {float: right;
                width: 200px;
		padding: 50px 10px 10px 10px;}
/*colonna di sinistra*/
#userbar {margin-left: 15px;}
                z-index: 1;
		width: 223px;
		padding: 50px 10px 10px 10px;}

Come posso fare?
Ultima modifica effettuata da Qwertj 12/09/11 16:45
aaa
12/09/11 13:05
XBarboX
Ti consiglio di mettere larghezza fissa per le due colonne (sinistra e destra) e di lasciare larghezza fluida per la colonna centrale(content) in modo che occupi sempre lo spazio tra le due colonne.

Oppure fai tutte e tre le colonne con width statiche.

Se hai problemi a farlo chiedi pure.
aaa
12/09/11 16:44
Qwertj
le colonne laterali hanno già larghezza fissa, quella centrale no...
Non c'è altro modo?
aaa
13/09/11 13:33
XBarboX 
<!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>PROVA</title>
	
	<style>
	body{
		margin: 0px;
	}
	
	#left{
		width: 200px;
		background-color: green;
	}
	
	#right{
		width: 200px;
		background-color: yellow;
	}
	
	#cont{
		background-color: orange;
	}
	
	</style>
	
</head>

<body>
<table style="width: 100%;" cellspacing=0 cellpadding=0>
<tr>
	<td id="left">COLONNA SINISTRA</td>
	<td id="cont">CONTENT</td>
	<td id="right">COLONNA DESTRA</td>
</tr>
</table>
</body>

</html>
aaa
13/09/11 13:49
Mte90
quando ho qualche problema con i layout vado su questo sito.
dynamicdrive.com/style/layouts/
ha tutte le combinazioni, fixed,static ecc
aaa
13/09/11 16:35
Qwertj
Ho risolto con una semplice funzione jQuery eseguita sull'onload del body: 
$('#content').css('width', $('body').width() - 258 - 250);

Dove 258 e 250 sono l'ingombro orizzontale (margini + larghezza) delle colonne di destra e sinistra
aaa
13/09/11 19:56
Mte90
non avevo approfondito il tuo problema ma se era questo hai provato con margin-left e margin-right?
aaa
14/09/11 6:52
Qwertj
Si ho provato ma mi ridimensiona il contenuto scasinando tutto il layout
E in effetti anche con quello script non funziona bene .-.
aaa