Torgny > CSSuppgifter
En sida innehåller tre nästlade div-tagar enligt:
<body>
<div id="container">
Text i div med id "container"
<div id="main">
Text i div med id "main"
<div id="left">
Text i div med id "left"
</div>
</div>
</div>
</body>
En metod för att sätta font-storleken när man viull använda måttenheten em är att först ange för body-tagen att font-storleken skall vara 62.5%. Eftersom defaultvärdet i alla webbläsare är 16px får man då ett nytt default-värde på 10px, eftersom 16 x 0.625 = 10. Nu blire det lätt att sätta specifika px-värden med hjälp av em. Om man anger att div-tagar skall ha storleken 1.6em ger det alltså 16px.
För varje nästlad div-tag ökas emellertid font-storleken med 1.6 och vår exempelsida kommer att se ut så här:
Skriv css-kod som använder den ovan beskrivna metoden, men där resultatet i stället blir som nedan, dvs 16px i alla div-tagarna. Du skall endast använda tre selektorer och ange ett fontstorleksvärde per selektor.
Du skall göra en sida som ser ut som skärmdumpen i figur 3.
Bakgrundsbilden på gubben skall vara centerad och fixerad. Den skall alltså inte röra sig när sidan scrollas. (Se figur 4).
Bakgrundsbilden hämtar du här.
Bakgrundsbilden till box-elementet med innehållet är en genomskinlig png-bild. Hämta en jpg-version av bilden och gör om den till genomskinlig png i Photoshop.
Textens storlek skall anges med hjälp av em. För H1 motsvarar den 48px. För övrig text 12px. Teckensnittet i rubriken är Arial. För övrig text Times New Roman. För H2 är textstorleken inte angiven. Eventuellt bör du göra det för att sidan skall se likadan ut i IE6.
Listan över Favoritlåtar är gjord med en tabell. Första raden i tabellen skall vara en header, så där måste du använda tagarna thead och th.
Bockarna i tabellen är gjorda med denna bild: 
Bakgrundsbilden till innehållet och en del tekniker är hämtade från webbplatsen för bandet Dirty Pretty Things.
Figur 3
Figur 4.
Skapa en sida som med gula boxare på röd bakgrund enligt illustrationen nedan. Boxarna med de runda hörnen skall du skapa med tekniken sliding doors, vilket tillämpat i detta exempel fungerar så att en bild med de övre runda hörnen och sidorna ligger som bakgrund i en div-tag. I en efterföljande div-tag ligger den nedre delen av ramen som bakgrundsbild. De bägge tagarna måste ligga intill varandra utgan skiljande marginaler.
Tillverka en bild med en ram i Illustartor och exportera för webben som genomskinlig png-bild. Ta in bilden i Photoshop och dela upp den i en övre och en undre del.
Bakgrunden till sidans body-tag består av en gul färg över vilken det ligger en genomskinlig bakgrundsbild med rosa stänk. Måtten på den bilden är 20x20 px och prickarnas färg är #e495a2.
Font-storleken är 1.2em utgående från en storlek i body-tagen på 62.5% (jämför uppgift 1).
Välj ett teckensnitt med fast bredd.
I den här uppgiften skall du använda dig av Douglas Bowmans artikel om Sliding Doors på webbplatsen A List Apart.
Börja med att följa Bowmans artikel. Gå sedan vidare och centrerara menyns ul-tag på sidan och lägg in menyns bakgrundsbild även i body-tagen. Du kan då behöva justera toppmarginalen på menyn för att få bakgrundslinjen att hamna på rätt position.
Här skall du göra en sida med gridlayout.
Sidan bygger på en förlaga av av Mark Boulton. Analysera förlagan och utgå från den.
Blandade tips:
Bilder:
Januari 2009
Torgny
