testo non contenuto in un div parent

**pinimoteo** · 25-09-2006, 09:35

salve a tutti, ho letto ieri sul forum una domanda di FinalFantasy dal titolo "adattare contenuto"
del 24/09/06 ore 14:42; ne parlo perchè la risposta, ancora non pervenuta, mi interessa parecchio.
Se io ho un livello container (con altezza 100% della pagina) in cui sono contenuti altri due livelli e nel primo inserisco del testo, tantissimo testo, mentre con IE non si hanno problemi (almeno questa volta) con FF e quindi Netscape l'altezza totale dei due livelli figli supera l'altezza del container.
Se quindi devo costruire un sito un poco più complesso con vari livelli uno dentro l'altro il problema non è secondario; quindi vi chiedo come vi regolate in questi casi?

grazie 1000

**Mich_** · 25-09-2006, 10:27

Sembra il bug dei float (ma la descrizione non e` sufficientemente precisa per esserne certi).

In qualche browser, se hai un float all'interno di un blocco non-float, il blocco esterno non si accoge della lunghezza dei float interni.
La soluzione e` dichiarare float anche il blocco contenitore.

**pinimoteo** · 25-09-2006, 10:47

ciao Mich_, grazie della risposta,
in realtà il problema l'ho riscontrato quando stavo costruendo il sito utilizzando gli spostamenti dei livelli con il "float" ed anche io avevo pensato fosse dovuto ai "float" applicati; ma nell'esempio semplicissimo che ho prima prospettato non vengono usati spostamenti, si tratta di un livello contenitore con al suo interno un paio di livelli che si sistemano uno sotto l'altro secondo regola.

**Mich_** · 25-09-2006, 11:21

Dovresti postare il codice (X)HTML+CSS usato, e l'eventuale DOCTYPE.
Non credo che sia esattamente come lo hai descritto.
Quel problema e` noto, e si verifica con posizionamenti diversi, e con float contenuti in non-float; non mi pare di averlo visto per altri motivi.

**pinimoteo** · 25-09-2006, 12:19

codice semplice di prova:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="css3.aspx.vb" Inherits="Esercitazioni.css3"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>css3</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="file3.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="top">
contenuto da inserire molto esteso
</div>
<div id="bottom">
bottom
</div>
</div>
</body>
</html>

codice css:

**pinimoteo** · 25-09-2006, 12:21

codice semplice di prova:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="css3.aspx.vb" Inherits="Esercitazioni.css3"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>css3</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="file3.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="top">
contenuto da inserire molto esteso
</div>
<div id="bottom">
bottom
</div>
</div>
</body>
</html>

codice css:

/* Foglio di stile CSS PERSONALE per un nuovo progetto di applicazione Web */

/* elementi base */

BODY
{
font:8pt/16pt georgia;
color:#555753;
background:black;
margin:0px;

}
p
{
font:8pt/16pt georgia;
margin-top:0px;
text-align:justify;
}
h3
{
font:italic normal 12pt georgia;
letter-spacing:1px;
margin-bottom:0px;
color:#7D775C;
}
a:link
{
font-weight:bold;
text-decoration:none;
color:#B7A5DF;
}
a:visited
{
font-weight:bold;
text-decoration:none;
color:#D4CDDC;
}
a:hover, a:active
{
text-decoration:underline;
color:#9685BA;
}

/* elementi specifici */

#container

{
background:red;
width:760px;
height:100%;
margin:0px 122px 0px 122px;
color:White;
text-align:center;
}
#top
{
background:blue;
width:350px;
}

#bottom
{
background:brown;
}

grazie Mich_

**pinimoteo** · 25-09-2006, 12:29

scusate a tutti e sopratutto a te Mich_ ho commesso un'errore da principiante non modificando il DOCTYPE in XHTML.

scusa di nuovo e alla prossima domanda Mich_, nella spearanza che sia più seria e meno affetta da distrazioni.

grazie 1000

**Mich_** · 25-09-2006, 12:37

Ci sono in effetti alcuni problemi in quel CSS.

1. non hai specificato alcun CSS peer il tag <html> e neppure per il tag <body>.
IE interpreta il selettore BODY (cosa che non necessariamente fanno gli altri browser): i selettori di tag devono essere scritti minuscoli (come pure i tag in XHTML).

2. Nel #content hai specificato height: 100%, ma il suo padre (contenitore) non ha un'altezza definita, quindi il 100% non ha significato. Devi specificare height: 100% sia nel html che nel body

3. potrebbe essere necessario descrivere esplicitamente overflow:auto; nel #container

Da parte mia preferirei specificare:

codice:

html, body {
  height: 100%;
  width: 100%;
}

solo in html e body, ma non in #container (credo che i brwoser siano in grado di gestirsi meglio se non li forzi).

EDIT: vedo adesso la nota sul DOCTYPE: le mie considerazioni sono comunque valide

Discussione: testo non contenuto in un div parent

Strumenti discussione

Ricerca discussione

Visualizza

testo non contenuto in un div parent

messaggio completo

Permessi di invio