Jesper T Medlem sedan nov. 2001 7 144 inlägg Frågan 24 mars 2004 12:48 #1 Jag har gjort ett litet test som verkar funka. Men flundrar på om det är "rätt". (ser ok ut i fler webbläsare än I.E?)
<style type="text/css">
<!--
.container{ width:145px;background:URL(middle.gif) repeat-y;
font-family:tahoma,verdana,arial;font-size:11px;
line-height:16px;
}
.container_top{position:absolute;width:145px;height:8px;background:URL(top.gif) no-repeat;}
.container_middle{padding:8px 0 0 8px;}
.container_bottom{position:absolute;width:145px;height:8px;background:URL(bottom.gif) no-repeat;}
-->
</style>
<div class="container">
<div class="container_top"></div>
<div class="container_middle">
Rad ett<br>
Rad två<br>
Rad tre<br>
Rad fyra<br>
Rad fem<br>
Rad sex<br>
Rad sju<br>
Rad åtta<br>
</div>
<div class="container_bottom"></div>
</div>
Flashes Medlem sedan jan. 2003 282 inlägg Snyggt,
Sedan om det är bästa/enda sättet att göra vet jag inte
Mvh
J jarvklo Medlem sedan juli 2001 3 378 inlägg Hmm...
Din exempelfil funkar i MSIE4, MSIE5, MSIE5.5, Firefox och opera7 också...
Snyggt jobbat :birp
Men du skall få några små tips ändå:
Egentligen får man inte ha med understreck i klassnamn i CSS enligt standard - men bindestreck går bra, så döp om klasserna tilll .container-middle osv.
Behövs verkligen position:absolute?
Repeteringarna sköter sig själv... Du behöver inte klura på no-repeat och repeat-y när bakgrundsbilden är exakt lika bred som div:en den ligger i (om du inte vill) ;)
De "inre div:arna" tar hela bredden av den yttre - så du behöver inte lägga width:145px på allihop om du inte vill...
Du kan alltså reducera din CSS till det här
.container{
width:145px;font-family:tahoma,verdana,arial;
font-size:11px; line-height:16px;
background:url(middle.gif);
}
.container-top{height:8px;background:url(top.gif);}
.container-middle{padding:8px 0 0 8px;}
.container-bottom{height:8px;background:url(bottom.gif);}
... om du t.e.x vill spara bandbredd eller så (jag sa väl att detta var smådetaljer ? ;) ) :birp
Jesper T Medlem sedan nov. 2001 7 144 inlägg
Du kan alltså reducera din CSS till det här
Tack för hjälpen, men i I.E. så ser der inte bra ut med förenklingen du gjorde. Container-top/bottom:s bakgrunder hamnar fel.
J jarvklo Medlem sedan juli 2001 3 378 inlägg Ajdå - du har rätt...
Jag fick visst inte med alla detaljer :r
.container{
width:145px;font-family:tahoma,verdana,arial;
font-size:11px; line-height:16px;
background:url(middle.gif);
}
.container-top{height:8px;background:url(top.gif);[b]font-size:1px;line-height:1px;[/b]}
.container-middle{padding:8px 0 0 8px;}
.container-bottom{height:8px;background:url(bottom.gif);[b]font-size:1px;line-height:1px;[/b]}
Ursäkta en gammal förvirrad besserwisser :r
H Hansen Medlem sedan aug. 2000 374 inlägg Jesper T Medlem sedan nov. 2001 7 144 inlägg Jag ändrade även denna rad:
.container-middle{padding:0 0 0 8px;}
:)
funkar det i mac? osx & os9?
