3.3 CSS – Position

Med filen som du opprettet i forrige aktivitet skal du nå plassere de 3 <p> tagene fra en vertikal plassering til en horisontal plassering. Før du starter må du sette på bredde på <div-id> tag og <p> tagene. Du skal øve på plassering ved bruk av følgende egenskaper og verdier;
– position:Absolute
– position: Relative
– float: right

Først laget jeg et nytt HTML dokument og fylte inn samme informasjon som i forrige aktivitet, men byttet ut tittel og innhold i tekst. Deretter åpnet jeg det samme CSS dokumentet. Dobbelklikket på .p i CSS panelet til høyre, og fylte inn plassering, position og float. Resultatet ble at teksten gikk nedover, men kun i et felt når jeg brukte position: Absolute. Ved position: Relative ble hele tekst feltet flyttet helt til høyre i bildet, så store forskjellen ble det ikke i mitt tilfelle. Kanskje trenger jeg flere elementer å jobbe med, eller så gjorde jeg en feil i forrige oppgave ved å lage class av <p> tagene. Uansett har jeg lært mye mer om hvor viktig plassering av elementer er, samt egenskapene margin, border og padding. Under vises printscreen av HTML dokumentet, CSS dokumentet, resultatet i vist i Dreamweaver, samt resultatet i nettleseren.

– Annette B. D.

Advertisements

One thought on “3.3 CSS – Position

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s