Problemi con Div contenitore..

**timberwolf** · 15-01-2013, 03:15

Ho il classico problema con il div contenitore che non "tiene" il div al suo interno ma lo fa scivolare (di poco) all'esterno, leggermente più sotto..

Prima di postare qui, ho cercato in rete, ma le varie soluzioni trovate e provate, non sembrano funzionare per il mio "caso" come sempre posto il codice ed allego il link ad un grab per rendere meglio l'idea di ciò che succede..

http://www.os4games.it/immagini/grab_4.png

codice css:

body{
margin: 0px;
background: #FF831C;
}

#wrapper{
width: 1000px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
padding: 0;
border: 1px solid;
background: #FFFFFF;
}

#header{
width: 1000px;
height: 350px;
padding: 0px;
border: 0px solid;
/*background: url(../img/bg.png) no-repeat;*/
background-position: center;
}

#logo{
position: absolute;
width: 240px;
height: 200px;
margin-left: 50px;
margin-top: 200px;
border: 1px solid;
background: url(../img/logo_2.png);
}

#top_bar{
width: 1000px;
height: 60px;
border: 1px solid;
background-color: #FFFFFF;
}

#container{
width: 1000px;
border-color: red;
border: 1px solid;
}

#menu_box{
width: 170px;
height: 450px;
margin-left: 30px;
border: 1px solid;
margin-top: 20px;
}

#page{
position: absolute;
font-family: Verdana;
width: 720px;
border: 1px solid;
margin-top: 20px;
margin-left: 220px;
}

#page p{
text-align: justify;
}

/* MENU' VERTICALE 2 */

ul#menu {
font-family: Sans-Serif;
font-size: 13px;
margin: 0;
padding: 0;
list-style: none;
}

ul#menu li {
background-color: #FF831C;
display: block;
width: 160px;
height: 40px;
margin: 5px 0;
}

ul#menu li a {
color: #FFFFFF;
display: block;
font-weight: bold;
line-height: 30px;
padding-left: 15px;
text-decoration: none;
width: 135px;
height: 30px;
}

ul#menu li.active, ul#menu li:hover {
background-color: #9e1f62;
}

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Italiamo</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">

<div id="header"><div id="logo"></div></div>
<div id="top_bar"></div>
<div id="container">
<div id="page">

ITALY-AMO è una Scuola il cui obiettivo è insegnare ai suoi ospiti stranieri la lingua di Dante. Lo vogliamo fare in un modo speciale, lo vogliamo fare avendo sempre il contatto diretto con lo studente, accompagnandolo per mano nell’apprendimento o nell’approfondimento di questa splendida lingua. Vogliamo che lo studente si senta chiamato per nome e che quando se ne andrà lo faccia con la voglia di ritornare.
ITALY-AMO vuole essere la parte migliore di ciò che significa essere italiani, vuole prediligere la qualità alla quantità e la soddisfazione del cliente al mero guadagno.
L’ ambiente, serio e confortevole nel cuore della città di Sanremo, in una bellissima ed elegante zona pedonale, offre allo studente la possibilità di entrare nel vivo di questa incantevole cittadina di mare, in cui oltre ad affrontare un percorso di studio possa vivere appieno l’ambiente che lo circonda, fatto di locali da aperitivo (in vero e proprio” italian style”) e ristoranti tipici. Lo studente potrà godere del mare, della possibilità di passeggiate e attività all’aria aperta durante tutto l’anno, nonché dello splendido entroterra, con i suoi borghi, boschi e montagne.
I nostri corsi sono strutturati in modo tale da garantire il massimo apprendimento linguistico creando classi con un numero limitato di studenti e con insegnanti preparati e motivati, rigorosamente madrelingua.
La Scuola organizza altresì corsi di lingue straniere (inglese, francese, tedesco, spagnolo, russo, arabo) link e si occupa del servizio traduzioni (link)
LO STAFF
Lo staff è composto da un gruppo di persone, insegnanti e personale amministrativo, che ama il proprio lavoro, ama l’insegnamento ed il contatto con gli studenti. Gli insegnanti sono tutti madrelingua e hanno diversi anni di esperienza e titoli di studio in questo campo specifico.aaaa aaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaa
aaaa aaaaa aaaaaaa aaaaa aaaa a</p>
</div>
<div id="menu_box">
<ul id="menu">
[*]Home
[*]Dove Siamo
[*]I Nostri Corsi
[*]Servizio Traduzioni
[*]Galleria
[*]Attività
[*]Modulo d'iscrizione
[*]Contatti
[*]Disclaimer
[/list]
</div>

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

Come si vede dal grab, il div "page" si allunga dinamicamente contenendo tutto il testo, ma il suo div contenitore "container" lo fa scivolare in basso e quindi fuori dalla pagina..

**ResianTaxidrive** · 15-01-2013, 12:08

togli position:absolute a .page.
Non si assegna mai il position absolute a un div quando non si sa esattamente di che dimensioni sarà; e poi, a cosa ti serve?

**timberwolf** · 15-01-2013, 13:20

avevo assegnato il position absolute a #page per farlo stare a destra del menu.. se lo tolgo salta l'impaginazione.. :-(

**ResianTaxidrive** · 15-01-2013, 17:40

ci sono ben altri sistemi per fare quello che vuoi tu, ad esempio mettere float:left sia al #menu che a #page

**timberwolf** · 15-01-2013, 20:18

ho provato ma non funziona, boh ora mi studierò qualcosa..

**timberwolf** · 15-01-2013, 20:33

okey ho fatto dei progressi, ora ho solo un problema, il blocco della pagina é più in basso rispetto al menu e non affiancato..

ecco il grab:

http://www.os4games.it/immagini/grab_6.png

Nel css ho aggiunto all'id #wrapper overflow: auto ed agli id #top_bar, #container, #menu_box e #page float:left

qui il codice corretto ed aggiornato, il css e l'html:

body{
margin: 0px;
background: #FF831C;
}

#wrapper{
width: 1000px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
padding: 0;
border: 1px solid;
border-color: green;
background: #FFFFFF;
overflow: hidden;
}

#header{
width: 1000px;
height: 350px;
padding: 0px;
border: 0px solid;
/*background: url(../img/bg.png) no-repeat;*/
background-position: center;
}

#logo{
position: absolute;
width: 240px;
height: 200px;
margin-left: 50px;
margin-top: 200px;
border: 1px solid;
background: url(../img/logo_2.png);
}

#top_bar{
float: left;
width: 1000px;
height: 60px;
border: 1px solid;
background-color: #FFFFFF;
}

#container{
float: left;
width: 1000px;
border-color: red;
border: 1px solid;
}

#menu_box{
float: left;
width: 170px;
height: 450px;
margin-left: 30px;
border: 1px solid;
margin-top: 20px;
}

#page{
float: left;
font-family: Verdana;
width: 720px;
border: 1px solid;
margin-top: 20px;
margin-left: 220px;
}

#page p{
text-align: justify;
}

/* MENU' VERTICALE 2 */

ul#menu {
font-family: Sans-Serif;
font-size: 13px;
margin: 0;
padding: 0;
list-style: none;
}

ul#menu li {
background-color: #FF831C;
display: block;
width: 160px;
height: 40px;
margin: 5px 0;
}

ul#menu li a {
color: #FFFFFF;
display: block;
font-weight: bold;
line-height: 30px;
padding-left: 15px;
text-decoration: none;
width: 135px;
height: 30px;
}

ul#menu li.active, ul#menu li:hover {
background-color: #9e1f62;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Italiamo</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">

<div id="header"><div id="logo"></div></div>
<div id="top_bar"></div>
<div id="container">
<div id="menu_box">
<ul id="menu">
[*]Home
[*]Dove Siamo
[*]I Nostri Corsi
[*]Servizio Traduzioni
[*]Galleria
[*]Attività
[*]Modulo d'iscrizione
[*]Contatti
[*]Disclaimer
[/list]
</div>
<div id="page">

ITALY-AMO è una Scuola il cui obiettivo è insegnare ai suoi ospiti stranieri la lingua di Dante. Lo vogliamo fare in un modo speciale, lo vogliamo fare avendo sempre il contatto diretto con lo studente, accompagnandolo per mano nell’apprendimento o nell’approfondimento di questa splendida lingua. Vogliamo che lo studente si senta chiamato per nome e che quando se ne andrà lo faccia con la voglia di ritornare.
ITALY-AMO vuole essere la parte migliore di ciò che significa essere italiani, vuole prediligere la qualità alla quantità e la soddisfazione del cliente al mero guadagno.
L’ ambiente, serio e confortevole nel cuore della città di Sanremo, in una bellissima ed elegante zona pedonale, offre allo studente la possibilità di entrare nel vivo di questa incantevole cittadina di mare, in cui oltre ad affrontare un percorso di studio possa vivere appieno l’ambiente che lo circonda, fatto di locali da aperitivo (in vero e proprio” italian style”) e ristoranti tipici. Lo studente potrà godere del mare, della possibilità di passeggiate e attività all’aria aperta durante tutto l’anno, nonché dello splendido entroterra, con i suoi borghi, boschi e montagne.
I nostri corsi sono strutturati in modo tale da garantire il massimo apprendimento linguistico creando classi con un numero limitato di studenti e con insegnanti preparati e motivati, rigorosamente madrelingua.
La Scuola organizza altresì corsi di lingue straniere (inglese, francese, tedesco, spagnolo, russo, arabo) link e si occupa del servizio traduzioni (link)
LO STAFF
Lo staff è composto da un gruppo di persone, insegnanti e personale amministrativo, che ama il proprio lavoro, ama l’insegnamento ed il contatto con gli studenti. Gli insegnanti sono tutti madrelingua e hanno diversi anni di esperienza e titoli di studio in questo campo specifico.aaaa aaaaa aaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaa
aaaa aaaaa aaaaaaa aaaaa aaaa a</p>
</div>
</div>
</div>
</body>
</html>

**timberwolf** · 15-01-2013, 20:42

ok risolto, grazie per la pazienza ed i consigli come sempre utilissimi

ho modificato nell'id #page il margin-top ed il margin-left a 20px e tutto ora é ok

Discussione: Problemi con Div contenitore..

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con Div contenitore..

Permessi di invio