DIV che si spostano

**roscel** · 25-08-2004, 18:37

Ciao,
sto studiando un po' i fogli di stile grazie ai suggerimenti trovati soprattutto su questo forum.

Vorrei riuscire ad eliminare o cmq ridurre al minimo l'uso delle tabelle per il layout delle pagine web e così sono arrivata a fare quanto sotto riportato, però mi succede che quando vado a ridimensionare la finestra del browser (IE) il div centro si sposta perchè il div right viene spostato sempre + verso sinistra man mano che si ridimensiona la finestra.

Vi chiedo (nella speranza di essere stata chiara a sufficienza nell'esposizione del mio probl): e' normale, tutto questo?
Cosa si potrebbe fare per ovviare ciò?

codice:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Prova css</TITLE>
<STYLE TYPE="text/css">
.p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}
.p a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: blue;
	text-decoration: none;
}
.p a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #0066FF;
	background-color: #FFCC00;
	text-decoration: none;
}
.p a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
	text-decoration: none;
}
.col-sx {
	height: 100%;
	display: block;
	margin: 5px;
	border: 1px solid #0000ff;
	padding: 0;
	visibility: visible;
	float: left;
	width: 200px;
	background-color: #CED8EA;
}
.col-md {
	height: 100%;
	display: block;
	border: 0px;
	visibility: visible;
	float: none;
	margin-top: 0px;
	margin-left: 220px;
	width: 30px;
	background-color: #FFFFFF;
	padding-top: 5px;
}
.col-dx {
	height: 100%;
	display: block;
	margin: 5px;
	border: 1px solid #0000FF;
	padding: 0;
	visibility: visible;
	float: right;
	width: 200px;
	background-color: #EFEFEF;
}
.testa {
	font-family: verdana, arial, times;
	color: navy;
	font-size: 12px;
	height: 5%;
	display: block;
	border: 1px solid #000000;
	padding: 2;
	visibility: visible;
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	background-color: #FFFF99;
}
.piede {
	font-family: verdana, arial, times;
	color: navy;
	font-size: 12px;
	height: 5%;
	display: block;
	border: 1px solid #000000;
	padding: 2;
	visibility: visible;
	margin-left: 10px;
	margin-right: 10px;
	/*float: left;*/
	width: 100%;
	background-color: #FFCC99;
}
</STYLE>
</HEAD>

<BODY>
<DIV ID="box"> 
	<DIV ID="testa" CLASS="testa">INIZIO</DIV> 
		<DIV ID="colsx" CLASS="col-sx"> 
			<DIV ID="link1" CLASS="p"> left 1 </DIV> 
			<DIV ID="link2" CLASS="p"> left 2 </DIV> 
			<DIV ID="link3" CLASS="p"> left 3 </DIV> 
			<DIV ID="link4" CLASS="p"> left 4 </DIV> 
		</DIV> 
		<DIV ID="right" CLASS="col-dx">   
			<DIV ID="a" CLASS="p"> right 1 </DIV> 
			<DIV ID="b" CLASS="p"> right 2 </DIV> 
			<DIV ID="c" CLASS="p"> right 3 </DIV> 
			<DIV ID="d" CLASS="p"> right 4 </DIV> 
		</DIV> 
		<DIV ID="centro" CLASS="col-md">   
			<DIV ID="main" CLASS="p"> center 1
 dfaafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 
 center 1
 dfaafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 
 center 1
 dfaafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 
 center 1
 dfaafffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 
</DIV> 
		</DIV> 
		

	<DIV ID="coda" CLASS="piede">fine</DIV> 
</DIV>
</BODY>
</HTML>

GRAZIE x l'attenzione.

Ciao

ciaO

Rosamaria

**Jerry Masslo** · 25-08-2004, 18:49

ma tu lo vuoi di larghezza fissa?

in ogni caso comunque scegli:

http://www.inknoise.com/experimental/layoutomatic.php

te lo fanno loro secondo le tue indicazioni con tutti i crismi, in pixel o in percentuale

non pensare che non sia bello perché non lo stai facendo tu, quella è solo la struttura poi ti rimane tutto il resto

**roscel** · 26-08-2004, 10:51

ok.

mi studio il codice generato dal programmino, ma vorrei capire a il significato di questa parte di regola:

width: 760px;
\width: 780px;
w\idth: 760px;
margin-left: auto;
margin-right: auto;

1. tra i tre width con il \ prima e dentro l'attributo che differenza c'è?

Non lo so e non lo riesco a capire.

2. gli attributi margin-left e margin-right si riferiscono alla distanza dai margini della finestra, non alla distanza dagli elementi "confinanti", giusto?

Ciao

**Jerry Masslo** · 26-08-2004, 11:09

i margini considerali parte dell'ingombro di un elemento, come un'area che l'elemento riserva a sé, quindi se è direttamente dentro il body si riferisce alla finestra se è dentro un elemento si riferisce a quell'elemento o ad altri elementi annidati, la cosa però si complica coi float perché possono inserirsi in quei margini. mi sarò spiegato?

gli slash sono degli hack, cioé dei trucchetti per risolvere il problema causato dal box model di ie, lo standard dice che l'ingombro di un elemento, escluso i margini è dato dal width + padding + border, mentre ie in quirk (il 6 in dipendenza dal doctype può funzionare anch'esso in standard mode) ingloba padding e bordi dentro il width causando una diversa interpretazione dello stesso codice, quello è un modo per aggirarlo ma ce ne sono altri.

come prima cosa devi scegliere un doctype adatto alle tue esigenze in ogni caso.

dimenticavo il margin auto è per centrare quel contenitore, quello è il sistema standard mentre ie in quirk vuole un text-align:center nel body

Discussione: DIV che si spostano

Strumenti discussione

Ricerca discussione

Visualizza

DIV che si spostano

Permessi di invio