CSS - Stretcha bakgrund i DIV med dynamisk storlek

Vad jag vet så går inte det.

Googlade lite snabbt, verkar funka. Oklart om den validerar, tveksamt.

<div style="width:500px;height:400px;">
<img src="bild.jpg" style="width:100%; height:100%;">
</div>

pause, fan de tänkte jag inte på. :D procent ska validera iaf.

Men då måste jag fortfarande sätta en height på DIVen, vilket jag inte kan göra, eftersom den har variabel höjd... eller, pressas DIVen på ett bra sätt om man fyller den för mycket kanske det fungerar... ska prova.

height ska man undvika så mycket det bara går. dock är ju bildens storlek alltid 100% av diven vilket borde göra så att den anpassar sig.

Hmm.. varför vill du göra det? Jag fattar inte meningen med det. Men du kan ju alltid göra ett lager med bilden i, lägga ett annat lager över (med texten i) och sen smacka ihop lite javascript som automatiskt läser av höjden på text-lagret (.offsetHeight) och sätter samma höjd på bilden.

Men som sagt, jag förstår inte syftet :)



Kul f.ö. att det dyker upp fler trådar om CSS på whoa, mer sånt!

etna

Eftersom jag inte satt någon height tar bilden heighten av hela sidan...


ordell

För att få en tonad bakgrund på menyknappar. Vad menyknapparna kommer ha för text kommer variera rätt mycket, och det måste vara så flexibelt att nya knappar ska kunna läggas till; och sidan ska också fungera på olika språk, så jag kan inte förutse knapparna alls knappt :)

Javascript skulle kunna gå, förstås... men jag vill inte att det ballar ur om man ändrar font-storleken i sin browser medan man surfar. Men det kan vara en lösning. Men det får inte se illa ut om man surfar med javascript avstängt eller vill ändra font-storleken medan man surfar (målgruppen är människor från hela europa, i åldrarna typ 30-50). Ska fundera på saken.

Vet du vad jag tycker? Gör en bakgrundsbild som är 3x400 pixlar (BxH) med den toning du vill använda, sen kör du repeat-x på den i background-repeat, det bör räcka för GANSKA långa texter. En menyknapp bör dock inte ha mer än två rader text för att vara användbar. Kan vara värt att tänka på ;)

Hm, 400 pixlar blir förstås lite högt, men jag är med på principen. Fast då den tonar till vitt (som är bakgrundsfärgen på sidan) gör jag nog så att den är hög nog för en rad, och placerar den i botten på knappen. Toningen blir för kort på två-raders-knappar, men det är kanske acceptabelt. Ska kolla med min AD :)

Knappen kan nog bli tre rader ibland, om man har på STORT typsnitt. Men annars ska det hålla sig på två rader.

Alltså...det känns som att din kodlösning är väldigt skum. Har du nåt exempel uppe som vi kan kolla på? En div för varje knapp är ju helt galet t.ex.

etna: Varför skulle en div för varje knapp vara galet? Jag hade nog löst det med en lista, eftersom det är en meny, men jag kan inte förstå varför det skulle vara galet att göra det på det sättet?

En lista är bra, det hade jag inte tänkt på. Jag har helt glömt bort listor. Men jag ser inte heller problemet med en DIV? Jag DIVar upp i stort sett all content, jag tycker att det är det enklaste elementet att arbeta med. 


HTML:

   <div class="menuitem">
    <a href="">European Network</a>
   </div>

CSS

.menuitem {
 position: relative; 
 font-weight: bold;
 border-bottom: solid 1px #E7CCAF;
 padding-top: 4px;
 padding-bottom: 4px;
 padding-left: 1px;
 padding-right: 1px;
}

listor är ju mer semantiskt korrekt än div'ar, som (tillsammans med span) är de helt semantiskt tomma elementen.

och ordells tips med en smal men hög bild som innehåller toningen och sen repeteras låter som den enklaste lösningen.