[CSS] div e sovrapposizione

[hee136]

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]

Sarebbe bene se postassi il codice, sia HTML che CSS.
A dirla così è un po' difficile capire cosa non va

[vladix]

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]

Originariamente inviato da vladix

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
Il suo problema è che ridimensionando le finestre i div si sovrappongono e spuntano le barre di scrolling

[hee136]

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]

Originariamente inviato da kwb

No ma lo scroll non lo vuole
Il suo problema è che ridimensionando le finestre i div si sovrappongono e spuntano le barre di scrolling

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]

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]

Ecco uno screen-shot del problema:

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]

sei riuscito a risolvere il problema?
ti ricordi come?

thx

[Jones D. Daemon]

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.