Torgny > CSSuppgifter

CSS-uppgifter

Uppgift 1

Bodytagen på en webbbsida innehåller följande kod:

<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>

Skriv CSS-kod så att innehållet visas så här:

Uppgift 2

Gör ensida högerställd bild en ram och en bildtext enligt illustrationen.

Bild:

Uppgift 3

HTML-koden på denna sida skall vara:

<ul>
   <li><a href="#">Lorem</a></li>
   <li><a href="#">Ipsum</a></li>
   <li><a href="#">Dolor</a></li>
   <li><a href="#">Sit</a></li>
</ul>

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam pretium quam. 
   In lectus. Nunc ac mi fringilla quam facilisis fringilla. Integer rhoncus, neque eget 
   ultricies scelerisque, ligula pede accumsan sapien, at commodo massa elit ac diam. 
   Phasellus in nulla at nisi tempor lacinia.
</p>

Skapa en liggande meny som ser ut som illustrationen.

Här följer några specifikationer. Dock ej alla - en del får du gissa dig till med hjälp av bilden.

• Teckensnitt: Verdana 11px
• Menyvalen får bakgrundsfärgen #FF9999 när musen flyttas över dem
• Observera att du får dubbla kantlinjer mellan li-elementen om du sätter border runt om dem. Du kan använda dig av pseudoelementet :first-child för att lösa detta problem.

Uppgift 4

(Obs: denna sida fungerar inte i IE6)

Body-tagen till denna sida innehåller endast denna kod:

<p class="one">Text i nederkant</p>
<p class="two">Text uppe till höger</p>

Fälten skall ligga kvar uppe till höger och i nederkant oavsett om storleken på fönstret ändras.

Tips: positionera med fixed.

Uppgift 5

Uppgift med en tabell. Koden ser ut så här:

<table>
    <tr>
        <td>Sven</td>
        <td>Hedin</td>
    </tr>
    <tr class="coll">
        <td>Sture</td>
        <td>Allén</td>
    </tr>
    <tr>
        <td>Otto</td>
        <td>Nordensköld</td>
    </tr>
</table>

Lägg märke till att en av tabellens rader inte visas. Du kan ta bort den om du sätter dess värde för visibility till collapse.

Notera även att det endast skall vara enkla kantlinjer mellan cellerna. För tagen table finns det en egenskap som heter border-collapse. Den bör du använda för att få till tunna kantlinjer.

Uppgift 6

Nedanstående sida skall ha en flexibel bredd som fyller upp hela webbläsaren.

Kolumnen med bilden skall ha en fast bredd (160px), medan den högra spaltens bredd är flexibel.

Se den länkade textfilen för sidtruktur, texter och css-hjälp.

Bild:

Uppgift 7

Filen shakespeare.xml inehåller samma data som html-filen i föregående uppgift. Formatera xml-filen med hjälp av CSS så att den blir lik sidan i Uppgift 6. Här är det viktigt att du tänker vilka element som skall vara box respektive inline.

Tips: på w3schhols.org kan du se hur du länkar CSS till XML.

Uppgift 8

Gör en sida efter förlagan.

Layouten är baserad på exemplet med tvåspaltig formgivning, som Anton hade inför klassen. Använd gärna den som hjälp.

Div-tagen som omsluter innehållet har en fast bredd på 750 px och är centrerad med flexibla marginaler.

Menyerna, både den i överkant och den till vänster skall använda sig av listor, dvs kodas med ul- och li-tagar.

Lägg märke att det är luft kring bilden.

Försök få måttsättning och färger så lika förlagan som möjligt. Ta gärna in förlagan i Photshop. Där är det lätt att mäta avstånd och ta reda på färgkoder.

Texten är genomgående Verdana, 11px.

Bilder:

2010

Torgny