[CSS] Box che non aderisce ad img o testo

[pcf]

1) Non riesco a far combaciare la cornice blu (base sotto) alla foto come potete vedere qui
Esiste un sistema ?

2) Se il testo (Chiese di Palese-macchie ) presente nella colonna grigia di sinistra supera l'altezza di 130 px, lo sfondo bianco (Zona Franca ..) non arriva alla stessa sua altezza ossia all'ultimo trova la chiesa creando il brutto effetto estetico che potete vedere sempre qui

Vorrei che si allungasse tutto alla stessa altezza in maniera elastica se il testo fosse più estesto (trova la chiesa .. trova la chiesa ..) come nell'esempio

Ho provato a dare height:100%; al contenitore generale "sheader_gen " o allo sfondo bianco "cornice_sheader_bia " , o a tutti e due ma niente

Non è sempre facile spiegarvi quello che vorrei, spero di esserci riuscito
Qualcuno di buona volontà può aiutarmi capire come fare ?

Grazie anticipate

* Schema Html

<DIV class=cornice_sheader_gen>
<DIV class=cornice_sheader_img_gr>
[img]img/jpg[/img]</DIV>
<DIV class=cornice_sheader_bia>
[img]img/gif width=[/img]testo</DIV>
<DIV class=cornice_sheader_sf_gr>testo</DIV
<div class=testo_sheader>testo</div>
</DIV>

* CSS
.cornice_sheader_gen {
width: 593px;
height:130px
border: 0px solid black;
BACKGROUND-COLOR: #e7e7e7;
padding: 0px;
margin-bottom: 1px;
margin-left: 0px;
}

.cornice_sheader_img_gr {
float: left;
border: 1px solid #667bb4;
padding: 0px;
margin-left: 3px;
margin-right: 0px;
margin-top: 18px;
margin-bottom: 16px;
}

.cornice_sheader_sf_gr {
float: right;
width: 145px;
border: 0px solid black;
padding: 0px;
margin-top: 6px;
margin-bottom: 0px;
margin-left: 6px;
padding-right: 5px;
}

.cornice_sheader_bia {
float: right;
width: 303px;
height:100%
border: 0px solid black;
background: white;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}

[Francis87]

<DIV class=cornice_sheader_img_gr> [img]img/__1128168.jpg[/img] 
    </DIV>

non andare a capo nè lasciare spazi tra quegli elementi:
<div><img></div>

[pcf]

Grazie..

Per il testo che allunga la cornice grigia rispetto allo spazio bianco adiacente, quanlcuno può aiutarmi ?

[pcf]

[antos]

1)per l'immagine non facevi prima ad asegnargli il bordo con i css?
2)un possibile devi racchiudere in un div con lo sfondo violetto l'immagine e il testo,mentre dove ora lo sfondo è violetto dlo fai bianco
3) prima di chiudre la cornice del sito aggiungi <div style="clear:both;"> </div>

[pcf]

Caro Antos lo sò ... sono il solito rompiscatole

>> 1) per l'immagine non facevi prima ad asegnargli il bordo con i css?
Veramente alla fine ho utilizzato il border del tag IMG ma il contorno è nero e non blu come voglio.
Scusa la mia inesperienza ho provato ad inserire l'img in una cornice blu ma senza successo esiste un'altra possibilità con i css ?

2) Scusami ma non mi è chiaro cosa vuoi dirmi (devi racchiudere in un div con lo sfondo violetto l'immagine e il testo,mentre dove ora lo sfondo è violetto dlo fai bianco )

Spero tu non possa perdere molto tempo a spiegarmelo .. scusa ancora la mia inesperienza

[pcf]

..

[antos]

Originariamente inviato da pcf
...
Veramente alla fine ho utilizzato il border del tag IMG ma il contorno è nero e non blu come voglio.
Scusa la mia inesperienza ho provato ad inserire l'img in una cornice blu ma senza successo esiste un'altra possibilità con i css ?

la maggior parte delle propietà dei css si possono applicare a tutti gli elementi e i bordi non fanno differenza quindi se per esempio fai
immagine{border:1px solid #00F;}
[img]..[/img]
vedsrai il bordo blu

2) Scusami ma non mi è chiaro cosa vuoi dirmi (devi racchiudere in un div con lo sfondo violetto l'immagine e il testo,mentre dove ora lo sfondo è violetto dlo fai bianco )

Spero tu non possa perdere molto tempo a spiegarmelo .. scusa ancora la mia inesperienza

allora non ho capito bene i nomi delle classi cmq a partire da sotto all'header fai uan cosa del genere

<div id="#container" >
  <div class="sfondovioletto">
    [img]...[/img]
    <div class="testo">
      il testo
    </div>
  </div>
  <div id="zonafranca">
    [img]zonafranca.jpg[/img]
    ..... 
  </div>
</div>

[pcf]

Grazie Antos ancora per la tua pazienza ma non penso che il tuo suggerimento possa aiutarmi; non ho capito con sfondo violetto cosa tu voglia dire.. non ho nulla di violetto.

Questo è in sintesi quello che ho fatto

<div cornice generale>
<div cornice grigia>
<div cornice blu per img>img120x90</div>
<div testo>testo</div>
</div>
<div zona franca>img zona franca</div>
</div>

Il testo in <div testo> se supera una certa lunghezza crea questo

Spero di essere stato chiaro.. mi dispiace farvi perdere troppo tempo

Grazie Francis87, quel benedetto spazio era di impiccio, ho finalmente il mio bordo blu.

[pcf]

.. chi può .. ma quanto rompo !!!