Qusta cosa mi lascia alquanto perplesso per il semplice motivo che quello che voglio io è proprio farlo diventare più alto (lungo)
insomma che il valore di height si autoregoli in base al contenuto cosa che invece al momento non succede ................... da quanto ho capito tu dici che invece dovrebbe funzionare così normalmente solo che io se provo a visualizzare la pagina non funzia affatto
mi resta il box verde (main) di dimensioni fisse mentre il box rossiccio (news) si allunga in base al suo contenuto superando persino main
ecco una preview per farti capire come lo vedo io: come vedi il box main resta fisso e non gliene frega niente di quanto diventa alto news (che cmq continua anche oltre quanto si vede nello screenshot)
allego anche il codice intero della pagina e del CSS magari è qualcos'altro a dare l'errore
codice:
<!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 content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Isle der Engel</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="main">
<div id="news">
<div id="news_header"></div>
</div>
<div id="extra">
</div>
<div id="disclaimer">Copyright © 2005-2006 Isle der Engel by ssjx
[img]images/php-logos/php-icon.png[/img]
</div>
<div id="bottom_girl"> </div>
</div>
</body>
</html>
codice:
body {
background-image: url(../images/bg_darkgreen.gif);
background-repeat: repeat;
background-color: #9BD094;
}
a:link {
color: #CC3333;
}
a:visited {
color: #990033;
}
div#header {
background-image: url(../images/bg_header.gif);
background-repeat: repeat-x;
position: absolute;
width: 100%;
height: 75px;
top: 35px;
left: 0px;
}
div#top_right {
background-image: url(../images/top_right.gif);
position: absolute;
width: 250px;
height: 157px;
top: 112px;
right: 6%;
z-index: 1;
}
div#main {
background-image: url(../images/bg_lightgreen.gif);
background-repeat: repeat;
background-color: #EFFEED;
border: 1px solid #006600;
position: absolute;
width: 80%;
left: 10%;
right: 10%;
top: 195px;
bottom: 30px;
}
div#extra {
background-image: url(../images/bg_extra.gif);
background-repeat: repeat;
border: 1px solid #006600;
position: absolute;
width: 150px;
right: 40px;
top: 20px;
background-color: #FFFFFF;
}
div#disclaimer {
font-family: "Trebuchet MS", Sans-Serif;
background-color: #FFFFFF;
border: 1px solid #006600;
position: absolute;
font-size: 11px;
z-index: 2;
text-align: center;
padding: 5px;
bottom: 100px;
left: 25%;
right: 25%;
}
div#bottom_girl {
background-image: url(../images/bottom_girl.gif);
position: absolute;
width: 150px;
height: 350px;
z-index: 2;
right: 0px;
bottom: 0px;
}
div#news {
position: absolute;
left: 50px;
top: 20px;
right: 70px;
border: 1px solid #CC3300;
}
div#news_header {
}
Rispondi quotando
E' normalissimo che lo faccia, e anzi, è la cosa corretta! Se hai un box posizionato in modo relativo, fisso o assoluto (e il tuo #news lo è) questo viene estratto dal normale flusso del documento e quindi non influisce più sul layout di tutti gli altri box. I box posizionati in modo assoluto hanno per default uno z-index maggiore di tutti i box posizionati staticamente. Solo non ho capito a cosa ti serve quel position: absolute (e ti ricordo che non puoi usare left insieme a right e top insieme a bottom...non ha significato!). Se il tuo box #news è interno a #main, basta che li lasci posizionati in modo statico, quindi elimina quel position: absolute (almeno in #news) e tutte le dichiarazioni di offset (scostamento). Quindi, puoi centrare orizzontalmente il box #news in #main con queste regole: