[CSS] div e sovrapposizione

hee136 · 14-09-2010, 10: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, 10:57

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

vladix · 14-09-2010, 11: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, 11:14

Quote:

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 · 14-09-2010, 11:16

index.htm

Codice:

<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

Codice:

#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, 11:20

Quote:

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 · 14-09-2010, 11: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, 12:22

Ecco uno screen-shot del problema:

Quote:

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, 15:41

sei riuscito a risolvere il problema?
ti ricordi come?

thx

Jones D. Daemon · 29-05-2013, 20: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.

14-09-2010, 10:57	#2
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	Sarebbe bene se postassi il codice, sia HTML che CSS. A dirla così è un po' difficile capire cosa non va __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

14-09-2010, 11:01	#3
vladix Member Iscritto dal: Jan 2008 Città: roma Messaggi: 296	dovrebbe bastare definire lunghezza e larghezza in percentuale ( per il ridimensionamento automatico) . Se ancora non vedi il scroll metti overflow: scroll; come proprieta css __________________ Acer 5940G{Intel Core i7 Q720 Quadri motore; 8Gb DDR3; ATI Radeon HD 4650 1024MB; 500Gb hdd}

21-05-2013, 15:41	#9
[Riot]-kyashan Senior Member Iscritto dal: Feb 2004 Città: Roma Messaggi: 1994	sei riuscito a risolvere il problema? ti ricordi come? thx __________________ ho concluso felicemente con Ak72 - FURTO -ninja.paolo-bloodflowers-gegeg-gargasecca-Pirella-Fabio169-Fabri00-zziplex-Balillamod-Davidman-miclog-ochalan-ciacino83-VitOne e tanti tanti altri...

29-05-2013, 20:58	#10
Jones D. Daemon Senior Member Iscritto dal: Jun 2011 Messaggi: 2814	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. __________________ IntelCore i7 4770s - Asus H97I-PLUS - 2 x 8gb Kingston HyperX Fury - NZXT Manta Black/Red - Cooler Master V700 - 2 x Samsung 850 EVO 250GB Raid0 - WD Caviar RED 2TB - MSI GTX 1070 Gaming X

14-09-2010, 10:22	#1
hee136 Junior Member Iscritto dal: Sep 2010 Messaggi: 27	[CSS] div e sovrapposizione 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. Ultima modifica di hee136 : 14-09-2010 alle 11:16.

14-09-2010, 11:24	#7
hee136 Junior Member Iscritto dal: Sep 2010 Messaggi: 27	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.

Strumenti
Mostra una versione stampabile Invia questa pagina per email