Ciao a tutti!!
Il mio problema è sicuro già stato affrontato più volte ma dagli esempi che ho visto in giro
non sono riuscita e venirne fuori..please aiutatemi!!
Ho un immagine come bakground e altre due immagini di sfondo usate come bordo per il testo che è
posto al centro.
Il problema è adattare alla lunghezza delle pagine caricate le due immagini di sfondo usate come bordo (#left_border e #right_border).
Codice
/* CSS Document */
body {
padding: 0;
font-size: 12px;
background: #5f6064;
margin: 0px;
color: #666666;
font-family: Arial, sans-serif;
text-align: center;
line-height: 20px;
}
img {
border: 0;
margin: 0;
line-height: 0;
}
...
body {
background: #FFFFFF url(../images/background.jpg) top center no-repeat;
}
#footer, #footer a {
color:#333333;
cursorointer;
}
#left_border {
background: url(../images/shadow_left.png)repeat-y ;
border: 0;
padding: 0;
margin: 0;
width: 8px;
height: 100px;
float: left;
}
#right_border {
background: url(../images/shadow_right.png) repeat-y;
border: 0;
padding: 0;
margin: 0;
width: 8px;
height: 100px;
float: left;
}
#bottom_border {
background: url(../images/shadow_bottom.png) repeat-y;
width: 976px;
height: 13px;
border: 0;
padding: 0;
margin: 0;
clear: both;
}
Pagina html
..
<body>
<div id=wrapper>
<div id=left_border></div>
<div id=main_holder>
<div id=logo><a href="index.html">
[img]./images/logo.gif[/img]</a></div>
<div id=navigation>
<ul >
..[/list]
</div>
<div id=main_content>
<h1>titolo</h1>
<div id=content>
testo testo </p>
</div>
</div>
</div>
<div id=right_border></div>
<div id=bottom_border></div>
<div id=footer> ..</div>
</div>
</body>
in sostanza queste immagini shadow_right.png e shadow_left.png non si ripetono in verticale nemmeno se nel css metto height: auto;
Qualcuno mi può aiutare, intanto grazie mille!!!
Rispondi quotando
