PDA

View Full Version : [CSS] div e sovrapposizione

hee136
14-09-2010, 09:22
Buongiorno

sono ancora all'inizio dello studio di Html e di Css e stavo provando a fare un esercizio.
Mi sono bloccato all'inizio.

Ho disposto due div uno affianco all'altro e ho provato a ridimensionare la finestra.
Ho così notato che il contenuto di uno dei due div finisce sopra l'altro.

Esiste un modo per evitare che uno dei due div finisca sopra l'altro?
Oppure esiste un modo per evitare che a causa del ridimensionamento della finestra il contenuto del div si sposti e compaiano invece le barre di scrolling per muoversi nel contenuto della finistra?

Grazie mille. :)
kwb
14-09-2010, 09:57
Sarebbe bene se postassi il codice, sia HTML che CSS.
A dirla così è un po' difficile capire cosa non va :D
vladix
14-09-2010, 10:01
dovrebbe bastare definire lunghezza e larghezza in percentuale ( per il ridimensionamento automatico) .

Se ancora non vedi il scroll metti overflow: scroll; come proprieta css
kwb
14-09-2010, 10:14
dovrebbe bastare definire lunghezza e larghezza in percentuale ( per il ridimensionamento automatico) .

Se ancora non vedi il scroll metti overflow: scroll; come proprieta css

No ma lo scroll non lo vuole :D
Il suo problema è che ridimensionando le finestre i div si sovrappongono e spuntano le barre di scrolling :O
hee136
14-09-2010, 10:16
index.htm

<body>
<div id="banner">
<h1 id="text_ban">Esempio</h1><img id="prova" src="images/prova.jpg">
</div>

<div id="login">
<br><br>

<form method="post" action="login.php" name="">
<input type="text" value="Email" name="user"><br><br>
<input type="password" name="pwd"><br><br>
<input type="submit" value="Entra">
<input type="reset" value="Cancella">
</form><br><br>
<a href="modulo.php">Registrati</a>
</div>

<div>
<img id="sfondo" src="images/sfondo.jpg">

<p>Questo è un testo di prova (...) </p>
<p> (...) </p>

<p> (...) </p>
</div>

</body>
</html>


I (...) sono stati aggiunti ora per evitare di allungare troppo la discussione e rendere problematica la lettura del codice html.

Ecco il file css

#banner {
background-color:#1E90FF;
height:70px;
width:100%;
}
#prova {
float:right;
}
#text_ban {
position:absolute;
}
#sfondo {
left:30%;
position:absolute;
top:30%;
z-index:-1;
}
#login {
float:left;
height:400px;
width:20%;}
hee136
14-09-2010, 10:20
No ma lo scroll non lo vuole :D
Il suo problema è che ridimensionando le finestre i div si sovrappongono e spuntano le barre di scrolling :O

Ho sbagliato il titolo e l'ho editato.
Il mio problema è che ridimensionando le finestre i div si sovrappongono.
Le soluzioni che ho pensato (ma che non so come mettere in pratica) sono:
- un modo per evitare che il contenuto (testo ed un'immagine) esca dal div.
- trovare un modo per cui il contenuto rimanga fermo e compaiano solo le barre di scrolling per visualizzare le varie parti della pagine.

Ringrazio per le risposte e mi scuso se sono stato poco chiaro.
hee136
14-09-2010, 10:24
La pagina si compone di 3 div.
Uno che rimane in alto e si estende per tutta la larghezza (il cui id è banner).
Due div sotto quest'ultimo, uno a destra e l'altro a sinistra (i cui id sono login ed il div successivo senza id).

Quando ridimensiono la finestra, il testo e l'immagine del div senza id si va a sovrapporre sul div con id login.
hee136
14-09-2010, 11:22
Ecco uno screen-shot del problema:

http://img696.imageshack.us/img696/9936/finestra17.jpg

Come si vede, il testo e l'immagine del div laterale, quando si ridimensiona la finestra, vanno a coprire il div col modulo.
[Riot]-kyashan
21-05-2013, 14:41
sei riuscito a risolvere il problema?
ti ricordi come? :)

thx
Jones D. Daemon
29-05-2013, 19:58
Il problema è lo z-index, invece di dare uno z-index all'immagine per farla apparire come sfondo, usa background-image:url('images/...');

lo z-index se devi proprio usarlo (ma lo sconsiglio, sopratutto epr problemi con Explorer), inseriscilo anche sul div con id="prova", e assignagli un valore identico all'altro.