Torgny > CSSuppgifter
Tillverka bakgrundsbilden till denna sida i Photoshop. Bilden skall vara en stående rektangel med måtten 20 x 100 pixlar. Vänstra halvan avbilden skall innehålla en toning från grönt (#02cb00) till brunt (#04cb00). Högra delen tonas från rött (#ff0000) till samma bruna nyans. Som du ser upprepas bilen endast i x-led. Resten av bakgrunden skall ha den bruna färgen.
Bodytagens html-kod skall se ut så här:
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nisl sit amet quam porta dapibus. In in odio ut purus iaculis congue. Fusce id felis at magna fringilla rhoncus. </p>
</body>
Marginalerna för p-tagen är 20px. För body-tagen är de 20px i överkant och auto på sidorna. Som du ser skall p-tagens bakgrundsfärg vara grön.
fig 1
Utgå från bilderna ovan och skapa inramade png-bilder med röda ramar så som det ser ut på fig 2 nedan. Använd Illustrator. Rektangelmått: 55x55 mm, hörnradie 10mm, linjetjocklek 4, roströd färg. För att maska av ett foto med en rktangel använder du kommandot Objekt/Urklippsmask/Skapa i Illustrator. Spara bilderna för webben och välj formatet 24-bitars png. Då blir bildernas kanter transparenta.
Efter upmärkning med H1 och p-tagar skall sidan se ut som på fig 3.
Använd denna struktur för sidans div-tagar:
<div id="container"> <div id="branding"> </div> <div id="content"> </div> <div id="footer"> </div> </div>
Centrera sidan genom att sätta bredden på body-tagen till 400px och ge den sidomarginalvärden auto. Lägg äventill en marginal på ovansidan.
Använd absolut positionering när du placerar bilderna i förhållande till diven branding.
fig 2
fig 3
De fyra sportikonerna i figur 6 består av vita png-bilder med genomskinliga partier som blir synliga när de visas mot en färgad bakgrund. Bakgrundsfärgen på sidan är grå (#333). Bilderna är omgivna av a-tagar och deras bakgrundsfärg är en ljusare grå nyans (#666). Den röda färgen skall visas när musen förs över en bild. Då byts bakgrundsfärgen ut mot #f00.
Hjälp: om du lägger bilderna och a-tagarna i en p-tag med id=imgSportikoner kan du komma åt samtliga bilder med CSS-selektorerna:
p#imgSportikoner a img p#imgSportikoner a:hover img
Bilderna som ju blir helt vita mot en vit bakgrund finns innanför de streckade ramarna i figur 5-8.
fig 4
fig 5-8
Htmlkoden för nedanstående sajt ser ut så här:
<body>
<div id="feature">
<img src="../img2/barcelona.jpg" alt="Barcelona" width="500" height="375" />
<div id="featurecontent">
<h1>kryddigt. exotiskt. <a href="#">Läs mer >></a></h1></div>
</div>
</body>
Det ljusbruna bandet skall du skapa med en transparent png-bild som du lägger som bakgrund till diven featurecontent. Gör bilden i Photoshop. Den har färgen #ff9933 och dess genomskinlighet är 70%.
Utför sätt centrerande marginaler för bodytagen.
Placera featurecontent med hjälp av absolut positionering. Det kan du även göra med tagarna h1 och a.
Några mått:
fig 9
fig 10
Tyvärr fungerar inte png-bilders genomskinlighet i IE6. På figur 11 ser du att bilderna får grå kanter där de skulle vara transparenta. Microsoft har gjort en bugfix för detta problem. De har skapat en filter för detta i Javascript Filtret heter DXImageTransform.Microsoft.AlphaImageLoader.
I filen fixBirgitPng.js ser du kod som kan användas för att fixa bilderna på sidan.
Microsoft har även implementerat s. k. villkorskommentarer som du kan använda för att lägga in ett anrop till javascriptet. I den här speciella villkorskommentaren anges att koden inuti kommentartagen endast skall läsas av IE med vrsion 6 eller lägre. Andra webbläsare än IE förstår inte villkorskommentaren över huvud taget, och hoppar därför över dess innehåll som vore den en vanlig html-kommentar.
<!--[if lte IE 6]>
<script type="text/javascript" src="js/fixBirgitPng.js"></script>
<![endif] -->
Ordna nu din webbsida med Jussi och Birgit så att du får transparens även i IE6.
(Tyvärr har någon klåfingrig person kommenterat bort en rad i javaskriptet. Du måste återställa den raden och även ändra ett av argumenten i dess funktionsanrop för att inte bara Birgit utan även Jussi skall se ut som han bör.)
Januari 2009
Torgny