Citat:
|
Ursprungligen postat av grinditwp
Citat:
Originally posted by -Lindahl@Oct 15 2008, 17:34
Bredbandsbolagets lösning har jag kört tidigare, men i en simplare variant. Det är väl egentligen inte så revolutionerande, men jag har inte sett den användas i två dimensioner tidigare.
Förenklat kan man göra såhär:
Antag att du alltid har fast bredd på din box.
Kod:
<div>
* *<div class='box_top'>Content</div>
* *<div class='box_bottom'></div>
</div>
Sätt bakgrundsbilden på box_top.
Sätt höjden på box_bottom till något litet (10 pixlar eller så), och lägg in samma bild här, men denna gång med position (0,100%), alltså med utgångspunkt nere till vänster.
Eftersom den nedre div:en bara är 10 px hög kommer endast de 10 nedersta pixlarna av bilden att visas, och i den övre div:en visas det av bilden som får plats (detta förutsätter alltså en större bild än själva boxen).
Vad bredbandsbolaget har gjort är att de utökat lösningen till ytterigare en dimension, men principen är densamma, det kräver bara två till div:ar.
Lätt som en plätt.
|
Tack för ditt svar. Det förklarade en del. Inte vidare svårt alltså.
Citat:
|
Ursprungligen postat av Hjalmarsson
1 bild, sunkig markup och en seg jävla sida.. inget att rekommendera.
Att spamma ut massa extra divs för att underlätta (är ju egentligen helt fel ord här^^) är ju bara idiotiskt, då kan vi lika gärna gå tillbaka till tabeller a la rutnäts tänket.
|
Hur tycker du att man ska lösa det då?
Varför skulle det vara segt? man laddar bara in en bild istället för flera. En laddning istället för 8-9?
|
Självklart använder jag en lite större bild i min dagliga kodning men diggar inte alls tanken med en universal lösning för att få till runda hörn.
Låt säga vi har en kolumn som är en lista.. (kan låta en wrapper div gå igenom här, allt ska ju ha betydelse till sidan och markupen formad där efter)
Som sagt beror ju helt på hur designen är uppbyggd för att koda så optimalt som möjligt, men principen iaf.
<div>
<ul>[*]
<h2></h2>
</p>[*][/list]</div>
Bam!! 5 block-level element behövs det något mer? (visst paragrafen kan vi räkna bort, men ändå.. 4 element = 4 bilder (4 olika positioneringar av samma bild syftar jag ju då på))