Sempre sui div (lo so, sono noioso!!)

**Asmodeo** · 19-05-2004, 14:45

Allora, io vorrei realizzare una pagina di questo genere

Il fatto è che come al solito non riesco a fare i posizionamenti con i div!
Ecco il codice della pagina:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="top">top</div>
<div id="time">time</div>
<div id="menu">menu</div>
<div id="cerca">cerca</div>
<div id="login">login</div>
<div id="poll">poll </div>
<div id="principale">principale

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

...ed ecco il css...

codice:

body {
	margin: 0px;
	position: relative;
}
div#top {
	border: 2px outset; 
	width: 80%; 
	height: 14%;
	margin-bottom: 2%;
}
div#time {
	border: 2px outset; 
	width: 15%;
	height: 14%;
	position: absolute; 
	top: 0%; 
	right:0%;
	margin-bottom: 2%;
}
div#menu {
	border: 2px outset; 
	width: 170px;
	float: left;
}
div#principale {
	border: 2px outset;
	/*width: 100%;*/
	position: absolute;
	top: 20%;
	left: 200px;
	right: 200px;/*
	margin-left: 200px;
	margin-right: 200px;*/
}
div#cerca {
	border: 2px outset;
	width: 170px;
	float: right;
}
div#login {
	border: 2px outset;
	width: 170px;
	float: bottom;
}
div#poll {
	border: 2px outset; 
	width: 170px;
	float: bottom;
}

Grazie in anticipo anche solo per aver letto sto lunghissimo post!

Byez

**ilpiubello** · 19-05-2004, 16:10

La scelta dei div per costruire la struttura è stata voluta?
Te lo chiedo perché vista la non proprio massima gestibilità dei tag nei vari browser e la linearità della struttura potresti crearla con una semplicissima tabella e non avresti problemi di coordinate ma puoi fare tutto con i margini e gli spazi.

ps: una domanda, come mai hai utilizzato declaration per xml su una pagina html?

**zoom** · 19-05-2004, 16:39

Originariamente inviato da ilpiubello
La scelta dei div per costruire la struttura è stata voluta?
Te lo chiedo perché vista la non proprio massima gestibilità dei tag nei vari browser e la linearità della struttura potresti crearla con una semplicissima tabella e non avresti problemi di coordinate ma puoi fare tutto con i margini e gli spazi

cmq...

codice:

<div box>
	<div testa>
		<div top>
		
		</div>	
		<div time>
		
		</div>
	</div>
	<div content>
		<div sx>
			<div menu>
			</div>
			<div login>
			
			</div>
		</div>
		<div principale>
			
		</div>
		<div dx>
			<div cerca>
			
			</div>
			<div poll>
			
			</div>
		</div>
	</div>
</div>

div testa: position:relative;
div time: position:absolute;right:0;top:0;
div sx: float:left; width:...
div principale: float:left;width:----
div dx: float:right;width:---;

poi imposti tutte le caratteristiche di margini, padding, colori ecc....
buttata giù di corsa senza neanche testarlo in un browser..., guarda se funziona e se va bene

**Jerry Masslo** · 19-05-2004, 17:04

non ho visto quella di zoom però questo l'ho testato, mi chiedo come hai fatto a disegnarlo così senza logica apparente, comunque vedi che ci puoi fare.

<html>
<head>
<title>E magari l'hai disegnato</title>
<style type="text/css">
html, body {height:100%}
* {margin:0;padding:0}
body {background:gray;
width:100%;
}
.contenitore {width:92%;
position:relative;
left:4%;
padding:1%;
background:silver;
top:2%;
}
.testa {width:100%;
}
.testaLarga {width:60%;
background:white;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid silver;
float:left;

}
.testaStretta {width:30%;
background:white;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid silver;
float:right;
}
.corpo {width:100%;
margin-top:2%;
}
.sinistra {width:20%;
background:white;
float:left;
}
.centro {width:50%;
background:white;
float:left;
margin-left:5%;
margin-right:5%;
}
.destra {width:19%;
float:right;
background:white;
}
.clear {clear:both;
height:0;
line-height:0;
}
</style>

</head>

<body>
<div class="contenitore">

<div class="testa"><div class="testaLarga"> top</div> <div class="testaStretta">time</div></div>
<br class="clear">
<div class="corpo">
<div class="sinistra">sinistra e qui ci puoi annidare quello che hai tu</div>
<div class="centro">centro che dovrebbe essere il tuo principale</div>
<div class="destra">destra e come in sinistra ci annidi quel che ti pare</div>
</div>
<br class="clear">

</div>

</body>
</html>

**Asmodeo** · 20-05-2004, 17:21

Grazie masslo, ma cosa vuoi dire con "E magari l'hai pure disegnato".

Cmq che vuol dire

codice:

height: auto!important;

?
Ciauz

**zoom** · 20-05-2004, 17:42

serve per ovviare come al solito a un problema di IE.
infatti exploder interpreta height come se fosse min-height (che naturalmente ignora...)

height:auto!important; /*Specifica altezza auto. la direttiva important gli da precedenza all'height successivo. Naturalmente IE non vede manco questo....*/
height:100px; /*Specifica l'altezza per IE*/
min-height:100px; /*Specifica la mi-height (uguale all'height di IE)*/

**Asmodeo** · 20-05-2004, 17:57

Grazie mille per la tutto zoom, alla fine ho adottato la tua soluzione, è più facile e pulita. Ma comunque ho notato un problema: anche con l'hack sull'height mozilla non mi visualizza correttamente l'altezza del div testa (l'ho impostato in percentuale) a meno che io non tolga la dichiarazione del doctype (xhtml transitional)!!! Posso toglierlo tranquillamente o sono più i danni dei vantaggi?!?

**Jerry Masslo** · 20-05-2004, 18:01

Originariamente inviato da Asmodeo
Grazie masslo, ma cosa vuoi dire con "E magari l'hai pure disegnato".

...
Ciauz

solo che se è disegnato si suppone che almeno si metta sulla stessa linea quello che ci deve stare, un programma di grafica è certo più facile di scrivere il codice, il tuo disegno invece pare che ogni blocco al massimo si regoli sulla posizione di un altro, poi c'è molto spazio vuoto un po' sprecato e anche le dimensioni dei blocchi non sembrano appropriate, cioè se vedessi un layout esattamente così penserei si sia raggiunto un risultato non voluto.

tanto è tuo e te lo fai come ti pare.

**Asmodeo** · 20-05-2004, 18:45

Ah quello, beh, il disegno l'ho fatto in due microsecondi con psp, era tanto per dare un'idea!! Ho preso lo strumento per disegnare i rettangoli e li ho tracciati a caso, pensavo si capisse... Ovviamente il sito è strutturato meglio!!!

Ciauz

**zoom** · 21-05-2004, 09:30

Originariamente inviato da Asmodeo
Grazie mille per la tutto zoom, alla fine ho adottato la tua soluzione, è più facile e pulita. Ma comunque ho notato un problema: anche con l'hack sull'height mozilla non mi visualizza correttamente l'altezza del div testa (l'ho impostato in percentuale) a meno che io non tolga la dichiarazione del doctype (xhtml transitional)!!! Posso toglierlo tranquillamente o sono più i danni dei vantaggi?!?

il doctype devi lasciarlo.
in che senso non visualizza correttamente l'altezza? :master:

Discussione: Sempre sui div (lo so, sono noioso!!)

Strumenti discussione

Ricerca discussione

Visualizza

Sempre sui div (lo so, sono noioso!!)

Permessi di invio