Disposizione DIV

[mtugnoli]

Vorrei creare un Box per la mia HOME page (vedi immagine allegata),
il Box non ha una larghezza fissa,
e quindi ho pensato di utilizzare 3 DIV.

DIV 1 = barra colorata con titolo che si adatta alla larghezza del box

DIV 2 = Icona di larghezza e altezza fissi

DIV 3 = Area di testo


Ho provato in vari modi ma non sono riuscito a ricreare l'effetto desiderato,

chi mi aiuta ?


Grazie

Z@C

[codencode]

Io farei un HTML del genere

<div id="contenitore">
     <h1>Titolo</h1>
     

Testo</p>
     [img]...[/img]
</div>

ed un css così

div#contenitore {
     position: relative;
     width: quello che serve;
}

div#contenitore h1 {
     width:100%;
     height: quello che serve;
     font-size: quello che serve;
     background: il colore che vuoi;
}

div#contenitore p {
     width:lunhgezza, fissa o in percentuale, tale da non toccare l'immagine;
}

div#contenitore img {
     position: absolute;
     top: 0; /*o un valore più grande per staccarla dal bordo*/
     right: 0; /*o un valore più grande per staccarla dal bordo*/
}

[bellofresco]

la div2 in realtà dovrebbe essere la prima che insersci nel codice html.
Poi nel css usi la proprietà
float:right
come backround imposti l'icona ma col photoshop te la prepari in modo che abbia
la striscia verde di sfondo

Nel codice html inserisci poi la div1 e nel css imposti come background
di questa div una piccola "fetta" della barra di sfondo con la proprietà
repeat-x
La larghezza della div se la vuoi dinamica la imposti in percentuale,
l'altezza fissa in modo che lo sfondo coincida con quello della div2

Infine metti nel coice html la div 3 e nei css la imposti con
larghezza percentuale identica a quella della div1 e altezza fissa uguale alla
differenza tra l'altezza della div2 e quella della div1...

ovviamenet tuti i bordi e margini uguali a zero

di scriverti il codice non ho tempo, anche perchè si dovrebbe preparare la gif per la div2, ma così dovrebe andare

[bellofresco]

sei un medico?

[codencode]

Sconsiglio l'uso di tutti quei div. Un codice così non è semantico. Non c'è bisogno di div che in realtà non servono. Un struttura minimalista con tag appropriati è da preferire.

[bellofresco]

ma credo che il problema di mtugnoli sia di avere la barra verde scuro/marrone che sottolinea il titolo che si allarghi e si stringa, mentre l'icona deve restare fissa. con una div sola non credo si riesca aottenere l'effetto.
In effetti si può forse unire quella del titolo e del testo....

[mtugnoli]

Grazie codencode,

con il tuo sorgente si ottiene l'effetto desiderato..
anche ingrandendo il box il risultato e' lo stesso.

PS. No non sono un medico, ho solo preso spunto da un box trovato on-line.


Grazie a tutti


Z@C