Salve ragazzi,
vorrei che un div si posizionasse esattamente al bottom di un altro div (vedi illustrazione in immagine allegata).
Il div principale contiene un menu, dovrei "chiuderlo" al bottom con una immagine, ma non riesco a studiare una soluzione che sia compatibile con tutti i browser...
Sapreste indicarmene qualcuna?
Grazie mille.
bisognerebbe vedere il contesto in cui stanno questi 2 div..nella pagina non hai altro?
cmq hai già provato a posizionare l'immagine d sfondo sui css tipo nel div contenente il menù:
background-repeat:no-repeat;
background-position: bottom;
background-image: url(foto.jpg);
il div è settato in float sulla sinistra, contenuto in un div più grande che contiene tutto il layout e serve per definire le dimensioni totali del layout stesso.
il div che contiene il menu ha già uno sfondo, non mi fa inserire due sfondi
ci sono altri metodi?
grazie mille
creando un altro div sempre flottato a sinistra tenendo il suo margin-top a zero impostandogli l'eltezza dell'immagine di sfondo..il div precedente col margin bottom a zero in questo modo dovrebbe stargli subito sotto.
però se fai vedere il codice html e css potremmo esserti + d'aiuto, magari il problema è un altro se c'hai già provato e non funzia
non è esattamente quello che cerco in quanto il div del menu si deve adattare in altezza a quello che sta di fianco (sarebbe il corpo del sito), e quindi in base a questo posizionare al suo interno, al bottom, quella immagine (o div contenente l'immagine stessa).
per comodità posto tutto il codice (chiedo scusa per l'eccessiva lunghezza):
HTML:
CSS:<!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" xml:lang="it" >
<head>
<title>titolo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="striscia"></div>
<div id="menu">menu </div>
<div id="corpo">
corpo corpo
</div>
<div id="boxdestro" style="background: ">
<div id="menudxtitolo">
<object type="application/x-shockwave-flash" data="menutitolo.swf" width="170" height="60">
<param name="movie" value="menutitolo.swf">
<param name="quality" value="high">
</object>
</div>
<div style="padding: 10px;"> voce 1
voce 2
voce 3
voce 4
voce 5
voce 6
voce 7
</div>
<div id="newstitolo">
<object type="application/x-shockwave-flash" data="newstitolo.swf" width="170" height="60">
<param name="movie" value="newstitolo.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>
</div>
<div style="padding: 10px;"> Titolo news
Piccola descrizione
Titolo news
Piccola descrizione
Titolo news
Piccola descrizione
Titolo news
Piccola descrizione
</div>
[img]imgs/giras_menu.gif[/img] </div>
</div>
<div id="footer">
<div style="padding: 5px;">FOOTER FOOTER
info@lalala.com - www.lalala.com -
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background: #fff repeat-x;
font: 9pt "lucida sans unicode", verdana;
color: #fff;
}
a:link {
text-decoration: none;
color: #000;
}
a:hover, a:active {
text-decoration: none;
color: #000;
}
div#container {
width: 740px;
border-top: 6px solid #fff;
border-bottom: 6px solid #fff;
border-left: 6px solid #fff;
background: url(imgs/box_dx_back.jpg) repeat-y left;
}
div#header {
width: 740px;
height: 96px;
color: #000;
background: #fff url(imgs/header.jpg);
}
div#striscia {
width: 740px;
height: 1px;
background: #486FA2;
font: 0pt arial;
}
div#menu {
width: 740px;
height: 30px;
background: url(imgs/menu_back.jpg);
font: 8.5pt arial;
}
div#menu a {
display: block;
float: left;
padding: 8px 31px 9px 31px;
letter-spacing: 2px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
div#menu a:hover {
background: url(imgs/menu_back_over.jpg);
color: #486FA2;
}
div#corpo {
float: right;
width: 570px;
background: #C7D6E7;
font: 8.5pt/14pt Arial;
color: #000;
text-align: left;
}
div#corpo h1 {
font: 18pt "Arial Black";
color: #4870A3;
margin: 0px 15px 6px 0px;
text-align: right;
}
div#corpo h2 {
font: bold 14pt Arial;
color: #4870A3;
margin: 5px 0px 6px 0px;
}
div#corpo img {
border: 6px solid #fff;
float: right;
margin: 5px;
}
div#corpo a {
color: #4870A3;
text-decoration: none;
}
div#corpo a:hover {
color: #4870A3;
text-decoration: underline;
}
div#boxdestro {
float: left;
width: 170px;
font: 10pt Arial;
text-align: left;
background: url(imgs/box_dx_back.jpg) repeat-y left;
}
div#boxdestro a {
font-weight: bold;
color: #fff;
border-bottom: 1px dashed #fff;
text-decoration: none;
}
div#boxdestro a:hover {
font-weight: bold;
color: #fff;
border-bottom: 1px solid #fff;
}
div#menudxtitolo {
width: 170px;
height: 60px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
div#newstitolo {
width: 170px;
height: 60px;
border-bottom: 5px solid #fff;
}
div#footer {
clear: both;
width: 740px;
background: #698FBE url(imgs/menu_back.jpg) repeat-x bottom;
font: 9pt arial;
color: #fff;
text-align: center;
border-left: 5px solid #fff;
}
div#footer a, a:hover {
color: #fff;
text-decoration: underline;
}
l'immagineè quella che deve posizionarsi sempre al bottom del div del menu, in modo da chiudere.codice:[img]imgs/giras_menu.gif[/img]
grazie mille!
dunque, all'interno di "boxdestro" va inserita un'immagine (quella in flash) poi una "piccola descrizione"...ciò per 2 volte, dopodichè l'immagine finale che chiude il tutto giusto?
non vedo il motivo di crearti ogni volta uno div style con i vari attributi, probabilmente t sfugge l'utilizzo delle classi...
puoi mantenere il tuo menù sinistro e al suo interno puoi utilizzare una serie di box che fungono da contenitori per le cose che dovrai inserire..perciò io farei così:
nel css crei:
.box-img {
width: 170px;
height: 60px;
margin: 0px;
padding: 0px;
}
(box destinato all'immagine flash)
.box-descrizione {
width: 170px;
margin: 0px;
padding: 10px 10px 0px 10px;
}
(box per le "piccole descrizioni, nota che ho impostato padding-bottom a 0 px sennò poi si distanzierà il box d chiusura contenente l'immagine)
.box-chiusura {
width: 170px;
margin: 0px;
padding: opx;
}
Nell'html:
<div id="boxdestro" >
<div class="box-img">
<object type="application/x-shockwave-flash" data="menutitolo.swf" width="170" height="60">
<param name="movie" value="menutitolo.swf">
<param name="quality" value="high">
</object></div>
<div class="box-descrizione">
<h1>Titolo</h1>
piccola descrizione</p>
</div>
<div class="box-chiusura">
[img]imgs/giras_menu.gif[/img]</div>
</div>
In questo modo non dovresti avere problemi..ovviamente nel codice html io ho ripetuto solo una volta i div contenenti immagine e breve descrizione mentre nel tuo si ripete per 2 volte dopodichè viene inserita l'immagine di chiusura.
ovviamente h1 e p, se li utilizzerai sono personalizzabili sempre tramite le classi (ad esempio puoi utilizzare una classe dove metti i parametri che scegli, tipo .box-descrizione, ed abbinarla al paragrafo così: <p class="box-descrizione">bla bla</p>, ed adirittura abbinare + d una classe alla volta: <p class="box-descrizione box-img>bla bla</p>
prova e fammi sapere se e quali problemi avrai ancora
ciao catadiottro,
ho inserito quei div style perché il programmatore mi ha "ordinato" così, ha delle esigenze particolari e comunque prima della consegna della bozza vedremo di trovare una linea comune!
il mio problema è che vorrei che l'altezza del div "box-destro" si adattasse a quella (variabile) del div "corpo", e che l'immagine girasoli si posizionasse sempre al bottom del div "menù", in relazione alla sua altezza!
non so proprio dove mettere le mani!
eh daccordo ma se non puoi modificare il codice come fai a trovare una soluzione?
cerca un po nel forum le hack o metti important come ricerca e troverai le soluzioni per adattare menù e corpo (altezza minima larghezza minima ecc..)
presuppongo che il menù debba essere sempre della stessa lunghezza quindi dovrai applicare al corpo un'altezza minima che sarà la stessa del menù...in questo caso è il corpo che si adatta al menù e non viceversa...come pensi di adattare un menù se nel corpo hai poco o tanto contenuto?
cmq per il problema immagine alla fine non vedo quali difficoltà puoi riscontrare se la inserisci in un div a lei dedicato dopo il div che contiene "breve descrizione" ma dento al div del menù
si! il problema è proprio questo! non riesco a trovare una soluzione.
in parole povere quello che mi serve è: due div (corpo e menu), che si adattino l'uno all'altro in base ai contenuti, e in più una immagine che vada a posizionarsi esattamente al bottom del div menu. (quindi se il menu e il corpo saranno alti, chessssssò, 600, 700, 1500 pixel, l'immagine stia sempre sotto, a mo di chiusura.
ora cerco un po' le hack vedfiamo cosa riesco a tirar fuori!
grazie mille!
Permessi di invio
Rispondi quotando