Ciao a tutti,
Volevo sapere se è possibile realizzare la seguente cosa (uso dreamweaver cs4):
Un DIV contenitore, con all'interno degli altri div, che si adatta in altezza in base al contenuto.
Avrei poi bisogno di applicare un bordo di 20 px INTERNO al div, senza che questo comporti lo spostamento degli elementi al suo interno, è possibile tramite le funzioni z-index dei CSS?
Grazie mille
Se a un div non specifichi l'altezza, si adatta normalmente al suo contenuto.
Per il bordo, se specifichi una larghezza devi tenere presente anche il bordo. Cioè, se un div senza bordo lo vuoi largo 400px, applicandoci il bordo di 20px per lato, devi fare 400px -40px e devi vedere se poi il tuo contenuto interno ci sta. Ammettendo che ci stia, giochi coi margini e lo posizioni come vuoi tu. I z-index non mi pare ti servano.
Innanzitutto grazie mille, per quanto riguarda l'altezza ho risolto...
Il problema ora è il seguente:
Il DIV contenitore è largo 915 px, che con un bordo di 40px ho quindi ridotto, come suggerito, a 875 px.
dentro questo DIV devono essercene, nella parte alta e affiancati, altri due:
quello di sinistra è largo 267px, ha il float impostato su left e i parametri position:relative left:-20 top:-20,
e si posiziona correttamente dove deve stare, in alto a sinistra "mangiando" il bordo del div contenitore.
quello di destra, che deve essere allineato in alto alla destra del precedente, è largo 648 px (648+267=915 che è la misura del DIV senza la sottrazione del bordo)
Il fatto è che non riesco a impostare i parametri per far sì che questo div stia dove deve stare, cioè alla destra del primo o, se vogliamo, in alto a destra del div contenitore. Mi sballa andando sotto al primo div, anziché alla sua destra...
beh mi pare di capire che non hai assegnato il position:relative anche a quello a destra.
In alternativa puoi impostare a position:relative il contenitore grande mentre i due interni li puoi mettere a position:absolute. Quello a sx avrà :top:0 left:0 mentre quello a dx avrà top:0, right:0
Sai qual è il guaio? Che lo avevo fatto, e infatti il div si mette dove deve stare, se metto position:relative a quello di destra.
Solo che nell'anteprima nel browser tutto si rispagina...
In visualizzazione progettazione di DW si vede bene, nel browser no...
prova con l'opzione "relative" a quello grande e i due dentro absolute
Allora, purtroppo ho provato ma niente, si crea un disastro con tutto ammucchiato in alto a sinistra...
Provo a riassumere la situazione in modo più chiaro, con tutte le specifiche CSS dei 3 DIV
DIV contenitore (centrato nella pagina indipendentemente dalla larghezza di essa):
width: 875px;
float: none;
background-image: url(img/pattern.gif);
border: 20px solid #FFF;
margin-right: auto;
margin-left: auto;
DIV in alto a sinistra:
float: left;
height: 443px;
width: 267px;
position: relative;
left: -20px; (per "mangiare il bordo del contenitore)
top: -20px;
DIV in alto a destra:
height: 312px;
width: 648px;
position: relative;
float: none;
left: -20px;
top: -20px;
allora questa è la versione coi relative non con gli absolute; cmq, togli il float in quello a sx.
se metto il float su "none" a quello di sinistra, quello alla sua immediata destra si spagina e gli va sotto...
allora metti float anche a quello a dx
Permessi di invio
