div con width:500 height:100% centrato

**marco_webd** · 11-02-2011, 21:36

salve ragazzi, non riesco proprio a risolvere un problema con un div.
io vorrei creare un div con larghezza definita ad esempio 500px, ma con altezza al 100% CENTRATO.
questo effetto riesco a farlo solo impostando position:absolute ma con questo tipo di posizionamento non riesco a metterlo al centro dello schermo, perchè margin left e right auto non cambiano niente.
quale altra impostazione mi serve?
vi ringrazio

**Prill** · 11-02-2011, 21:43

Ciao marco_webd, non è necessario il posizionamento assoluto, dagli un margin:0 auto;

**marco_webd** · 11-02-2011, 21:52

Originariamente inviato da Prill
Ciao marco_webd, non è necessario il posizionamento assoluto, dagli un margin:0 auto;

grazie per la risposta, ma se tolgo position:absolute e metto margin:0 sparisce il div!
posto il codice, come l'hai consigliato tu, magari sbaglio ancora.

codice:

<html>
<head>
<style type="text/css">
body{
margin:0px;
}
#contenitore{
	height: 100%;
	width: 500px;
             background-color: #003;
	margin:auto;
}
</style>
<body>
<div id="contenitore">
</div>

</body>
</html>

**Prill** · 11-02-2011, 22:00

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>Titolo</title>

<style type="text/css">
*{
  margin:0;
  padding:0;
}
html,body{
   height:100%;
}
#contenitore{
	height: 100%;
	width: 500px;
	margin:auto;
        background-color:red;
}
</style>
</head>
<body>
<div id="contenitore">
</div>

</body>
</html>

diamo un'altezza percentuale anche alla pagina, inserisco uno sfondo colorato solo per vedere il div

**marco_webd** · 11-02-2011, 22:12

grazie ora funziona...ma che significa quell'asterisco?

**Prill** · 11-02-2011, 22:27

è un selettore universale, le sue impostazioni sono applicate a tutti gli elementi. Azzero tutti i margini e padding in una sola volta (saranno poi da ripristinare dove servono)

**marco_webd** · 11-02-2011, 23:57

grazie per l'aiuto! però volevo chiederti un'altra cosa. E' possibile dare lo stesso effetto a quel div con la posizione assoluta? ti speigo io vorrei inserire un altro div con posizione relative sopra a quello chiamato contenitore. quello contenitore infatti avraà una trasparenza. il problema è dato dal fato che il div contenitore ha un'altezza del 100%. come posso inseire il div nella stessa posizione dell'altro? se metto top - 50%. in ie funziona ma in mozilla no. hai qualche idea?
grazie

**Prill** · 12-02-2011, 09:34

Puoi fare il contrario, cioè assegnare un position:relative al div contenitore e un position:absolute con un top:0 e un left:0, più un width e un height del 100% all'altro div.

Ma perché sovrapporre i div? se tutto ciò che devi fare è avere un div contenitore con uno
sfondo trasparente puoi darglielo direttamente e inserire al suo interno tutti gli altri contenuti. Per lo sfondo trasparente puoi 1. mpostare come sfondo una png; 2. se lo sfondo è un colore, usare valori rgba, un esempio di quest'ultima possibilità:

codice:

#contenitore{
	width: 500px;
	height: 100%;
        background:rgba(0, 0, 51, 0.5);
	margin:0 auto;
}

il css per Explorer dalla versione 8 in giù, senza supporto per rgba:

codice:

<!--[if lte IE 8]>
<style type="text/css">
#contenitore {
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000033,endColorstr=#7F000033)";
	filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000033,endColorstr=#7F000033);
	zoom: 1;
}</style>
<![endif]-->

il link per uno strumento in rete per generare il codice per IE: http://kimili.com/journal/rgba-hsla-...rnet-explorer/

**marco_webd** · 12-02-2011, 13:05

Originariamente inviato da Prill
Puoi fare il contrario, cioè assegnare un position:relative al div contenitore e un position:absolute con un top:0 e un left:0, più un width e un height del 100% all'altro div.

Ma perché sovrapporre i div? se tutto ciò che devi fare è avere un div contenitore con uno
sfondo trasparente puoi darglielo direttamente e inserire al suo interno tutti gli altri contenuti. Per lo sfondo trasparente puoi 1. mpostare come sfondo una png; 2. se lo sfondo è un colore, usare valori rgba, un esempio di quest'ultima possibilità:

oh, SEI FORTE!!! grazie! ti spiego il perchè della sovrapposizione...col tuo metodo non mi serve piu! ma prima, il mio problema stava nel fatto che per l'opacità utilizzavo alfa opacity! quindi se avevo altro contenuto all'interno di quel div, cioè altri div inseriti al suo interno, mi mostrava tutto il contenuto con la trasparenza!
l'rgba non lo conoscevo! bravissimo! e grazie ancora!
a questo punto ne approfitto per chiudere in bellezza! un'altra cosa che non conoscevo è l'html prima del body nei css, cioè:

html,body{
}

sarebbe una sorta di regola in più per rafforzare il tag body? infatti quando andavo ad impostare un height:100% con position relative, senza inserie il codice che mi hai suggerito (html, body) non mi funzionava mai.
beh se risponderai anche a questo ti do la lode!

per il momento è 10 il voto!

ciao e grazie di nuovo

**Prill** · 12-02-2011, 17:37

Un'altezza in percentuale è sempre in rapporto a un elemento contenitore il quale dovrà avere a sua volta un'altezza specificata, il div è inserito in body, il body è all'interno del tag html, quindi specifichiamo l'altezza per l'intero documento, per il corpo e per il box.
Pensavo che per prendere i voti fosse necessario entrare in convento

Prego, ciao

Discussione: div con width:500 height:100% centrato

Strumenti discussione

Ricerca discussione

Visualizza

div con width:500 height:100% centrato

Permessi di invio