Problema visualizzazione immagine

[simeone82]

Problema visualizzazione immagine

Ciao a tutti, stavo realizzando un template per uso personale, ma sto avendo difficoltà nel visualizzare un'immagine con i css.
Ecco il codice:

body{ 
    padding:0; 
    margin: 0 auto; 
    text-align: center;
    background-image:url(../images/bkg.png);
}

h1 { font: 2.5em bold Arial, Trebuchet MS, Arial; color: #FFF; padding: 0; margin: 0; }

h1 a { color: #45A8C8; }

h1 .white { color:; }

tr, p, div {

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height: 1.5em;
    color:#000000;
}

.container {
    margin: 0 auto;
    width: 800px;
}

.header {
    width: 800px;
    height: 72px;
    margin-top: 15px;
    background-image:url(../images/header.png);

}

.content {
    width: 800px;
    height: 600px;
    background-image:url(../images/bkg_cont.png);
}

.footer {
    clear:both;
    width: 800px;
    height: 68px;
    background-image:url(../images/footer.png);
}

.left_box {
    width: 120px;
    float: left;
    text-align: left; 
}

.right_box {
    width: 520px;
    float: right;
    text-align: left;
}

E questo è il codice della pagina html

[HTML]
<div class="container">

<div class="header"></div>
<div class="content">
<div class="left_box">ciao</div>
<div class="right_box">
"Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."' 
</div>
</div>


<div class="footer"></div>

</div>
[/HTML]

Allora se nel css nella class "content" inserisco "height" riesco a visualizzare lo sfondo, mentre se lo tolgo non vedo nessuna immagine.
Io non vorrei usare un'altezza fissa, ma vorrei che che "content" si adatti in base alla lunghezza del contenuto.
Ho anche provato a mettere "repeat-y" ma niente da fare, non capisco come potrei fare.

Spero di essere stato chiaro, ringrazio anticipatamente.
Davide

[meryk]

Ciao Simenone82, e benvenuto sul formuGT

[html]<div class="container">

<div class="header"></div>
<div class="content">
<div class="left_box">ciao</div>
<div class="right_box">
"Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."' 
</div>
<div style="clear:both"></div> <!-- inserisci questo -->
</div>


<div class="footer"></div>

</div>[/html]Aggiungi al tuo html un div vuoto con il clear:both. In questo modo il browser "ricalcola" l'altezza del contenitore.

Buon lavoro

Meryk.

[simeone82]

Ti ringrazio per il benvenuto, spero di trovarmi bene in questo sito.:)

Con la tua dritta adesso funziona perfettamente, però andando avanti ho incontrato un altro problema.

Questo è il pezzo di codice della pagina html interessato
[HTML]
<div class="left_box">
<div class="left_box_title"></div>
<div class="left_box_content">link</div>
</div>
[/HTML]

Questo è il codice CSS

.left_box {
    padding:0;
    width:254px;
    float: left;
    margin-top: 15px;
}

.left_box_title {
    padding:0;
    width: 254px;
    height: 11px;
    background-image: url(../images/menu1_top.png);
    background-repeat: no-repeat;

}

.left_box_content {
        padding:0;
    background-image:url(../images/menu1_body.png);
    background-repeat:repeat-y;
    width: 254px;
}

Tra il "left_box_title" e "left_box_content" rimane un piccolo spazio che io non ho messo. Vorrei che le due immagini siano unite, su Firefox si vede bene mentre su IE si nota questo difetto.

Scusate se approfitto della vostra bontà.
Grazie ancora.
Davide