posizionamento di un div sotto uno con proprietà absolute

parides

posizionamento di un div sotto uno con proprietà absolute

Ciao a tutti,

scusate per l'argomento del post che sicuramente è già stato trattato ma col cerca sono arrivato a post senza soluzione definitiva.

Vengo al dunque ho un div con lunghezza variabile in base al contenuto e posizione absolute,..e mi serve in questo modo,...poi ho bisogno di mettere un altro div subito dopo.

Come posso fare ad avere il secondo div sempre sotto? ho fatto diverse prove ma non avendo ancora molte nozioni di css non capisco come risolvere.:?

Grazie.
Ciao.

prill

Ciao Parides, il tuo div è posizionato in maniera assoluta rispetto a che cosa? rispetto alla pagina, ad altri elementi? Vedere la tua struttura potrebbe essere d'aiuto

parides

ciao Prill,

di seguito ti inserisco il css e il php del file

template.css :

body {
padding:0;
margin:0;
margin-top:20px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#555;
background:url(../images/linea_bg.jpg) repeat-x 0px 20px;
background-color:#fdfa03; /sfondo giallo/
}
a img {
border:none;
}
a:link, a:visited, a:hover, a:active {
color:#555556;
}
h1, h2, h3, h4 {
margin:0;
padding:0;
}
.header {
width:100%;
height:216px;
background:url(../images/header_bg.jpg) center no-repeat;
border: solid 0px #ff0000 ;
}
.top-menu {
padding-left:0px;
margin-top:0px;
padding-right:0px;
width:100%;
height:30px; /riportare a 216/
background-color:#00ff00; /sfondo verde/
}
.path {
margin-bottom:10px;
height:30px; /riportare a 216/
background-color:#0000ff; /sfondo blu/
}
.container {
width:980px;
border: solid 1px ;
position:absolute;
left: 50%;
margin-left: -490px;
margin-top: -5px;
}
.left {
float: left;
width:200px;
background-color:#00ff00; /sfondo verde/
}
.right {
float: right;
width:200px;
background-color:#00ff00; /sfondo verde/
}
.content {
margin:0;
padding-top:20px;
width:580px;
min-height:200px;
line-height:150%;
float:left;
background-color:#dddddd; /sfondo grigio/
}
.content_no_1 {
margin:0;
padding-top:20px;
width:780px;
min-height:300px;
line-height:150%;
float:left;
background-color:#dddddd; /sfondo grigio/
}
.content_no_2 {
margin:0;
padding-top:20px;
width:980px;
min-height:300px;
line-height:150%;
float:left;
background-color:#dddddd; /sfondo grigio/
}
.footer {
width:100%;
margin-bottom:10px;
background-color:#0000ff; /sfondo blu/
}
.menu {
padding-left:50px;
margin-top:10px;
padding-right:30px;
width:232px;
float:left;
}
.menu ul {
padding:0px;
margin:0px;
list-style:none;
width:200px;
margin-bottom:10px;
}
.menu ul ul li{
border-bottom:none;
}
.menu ul li{
padding:0;
display:block;
border-bottom:1px dotted #CCC;
background:url(../images/readmore_2.gif) left top no-repeat;
padding:5px 0px 5px 15px;
}
.menu a {
text-decoration:none;
}
.menu a:link, #menu a:hover, a:visited, a:active {
color:#555556;
}
h1 {
font-size:18px;
font-weight:normal;
font-family:"Times New Roman", Times, serif;
color:#004F78;
}
.menu .moduletable_menu, .moduletable, .moduletable_text {
background:url(../images/menu_h3_bg.png) top left no-repeat;
padding:0px 16px;
padding-top:16px;
margin-bottom:16px;
}
.article_separator {
clear:left;
}

index.php :

<?php
// no direct access
defined('JEXEC') or die('Restricted access');
?>
<?php echo "<?xml version="1.0" encoding="utf-8"?".">"; ?>
<head>
<jdoc:include type="head" />
<?php JHTML::('behavior.mootools'); ?> 
<?php JHTML::_('behavior.modal');?>

</head>
<body>

<div class="path">path
 <jdoc:include type="modules" name="path" style="xhtml"  />

</div>
<div class="container">

<?php if ($this->countModules('left')) { ?>
<div class="left">left
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php } ?>

<?php if ($this->countModules('left') && $this->countModules('right')) {
$classe_contenuti = 'content';
} else {
if ($this->countModules('left') || $this->countModules('right')) {
$classe_contenuti = 'content_no_1';
} else {
$classe_contenuti = 'content_no_2';
}
}
?>

 <div class="<?php echo $classe_contenuti; ?>"> content
 <jdoc:include type="message" />
<jdoc:include type="component" />
 </div>

<?php if ($this->countModules('right')) { ?>
<div class="right">right
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php } ?>

</div>

<div class="footer">footer
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>

</body>
</html>

se si fa interpretare il file da un browser si vede una barra blu (il footer) che sta sotto il contenitor che a sua volta contiene due colonne laterali verdi e una centrale grigia.

Grazie.
Ciao.

prill

Qual è lo scopo del posizionamento assoluto del div container? da quel che vedo mi sembra solo un allineamento orizzontale centrato, fra l'altro con una tecnica che crea dei problemi: prova a rimpicciolire la finestra al di sotto dei 980 pixel e vedrai parte del contenuto sparire.
Se devi solo centrare il div in orizzontale è sufficiente un margin:0 auto, se devi ottenere altro effetto, sapendo quale, si può eventualmente cercare una soluzione alternativa

parides

si lo scopo finale è quello di ottenere un container con dentro left, content e right sempre uno a fianco all'altro e centrati nella pagina,...ma non avendo dimistichezza con i css non riesco bene ad utilizzarli.
vedo di seguire i tuoi consigli,..e se ne hai altri,...ti ringrazio.
ciao.

prill

Allora senz'altro puoi togliere il posizionamento assoluto, basterà specificare la larghezza e il margin:0 auto come detto su. Altri suggerimenti: inserisci tutti i tuoi div all'interno di un unico contenitore generale, se tutti i tuoi box devono avere un larghezza di 980 pixel, impostala direttamente qui, centralo col margin auto, e per le vecchie versioni di Explorer aggiungi anche un text-align:center per body; ricordati poi dopo gli elementi flottanti inseriti nel div container di interrompere il float

parides

Ok Prill,...grazie di tutti i suggerimenti ed insegnamenti,...illuminanti. Appena ho un attimo gli metto in pratica. Grazie di nuovo. Ciao.