Skum rubrik? =) i _princip_ borde du kunna använda css2 propertyn min-width, i praktiken är det tveksamt om det funkar.. Nej, det gick åt helvete, som vi säger där jag kommer ifrån. Får kanske fundera lite mer på hur jag bör göra... Nåt sånt här?Förminskningsbar rubrikbild
Jag försöker slippa fast bredd på en sida, och hade därför tänkt mig ett upplägg i stil med att man har en "rubrikbild" som en bakgrundsbild.
Men samtidigt vill jag ha en minsta storlek på rubriken (och sidan).
Det jag då tänkte var två divs, en med fast bredd, och en med bredd 100%, som ligger bredvid varandra, med var sin del av rubrikbilden. Så här:
<code="html">
<html>
<head>
<style type="text/css">
body {background: RGB(255,245,235) }
div.outer {width: 80%; position: relative; left: 60px; background: RGB(255,255,150); border=1px
solid}
div.x1 {background-image: url("x1.gif"); float:left;
width: 200px; height: 150px; padding: 0px; margin:0px;}
div.x2 {background-image: url("x2.gif"); background-repeat: no-repeat; height: 150px; position:
relative; left:-3px; top:0px; width:100%; padding: 0px; margin:0px;}
</style>
</head>
<body>
Före diven
<div class="outer">
i outer
<div class="x1">
</div>
<div class="x2">
</div>
i outer
</div>
Efter diven
</body>
</html>
</code>
Problemet med detta är att jag (åtminstone i IE, vilket är det enda jag har möjlighet att använda just nu) ger ett glapp mellan dem. Bör jag använda något annat istället för floaten om jag vill uppnå detta?
Jag kan fixa glappet med left=-3px, men det känns ju inte så kul...
Oavsett så dyker det upp en annan tråkig effekt. När man förminskar fönstret till samma storlek som bilden med den fasta storleken så hoppar den andra div:en ner, och man ser den under den första. Jag vill inte det, bara tvinga den yttre diven att ha en minimistorlek.
Något förslag?
Kanske är dum metod från första början?Sv: Förminskningsbar rubrikbild
Sv: Förminskningsbar rubrikbild
Sv: Förminskningsbar rubrikbild
<html>
<head>
<style type="text/css">
#x1 {
background-image:url("x1.gif");
height: 100px;
width:100%;
}
#x2 {
background-image:url("x2.gif");
height: 100px;
width:50px;
margin:0 0 0 auto;
}
</style>
</head>
<body>
<div id="x1"><div id="x2"></div></div>
</body>
</html>