I denne oppgaven skulle vi plassere de tre taggene fra en vertikal plassering til en horisontal plassering.  Vi skulle først sette bredde på >div-id>tag og <p> taggene.  #header 700 px

<p>: 200 px.

Vi skulle bruke de samme egenskapene som vi la inn i forrige oppgave.  Hver kolonne ble derfor: 200 px + padding 10 px (5 x 2) + margin 30 px (15 x 2) + border 2 px (1 x 2) = 242 px.  Da 242 px x 3= 726 px og headeren er 700 px lot jeg boksene være 200 px totalt med padding og margin trukket fra den totale bredden av boksen.  Derfor satt jeg boks breddene til 158 px  (158 + 10 + 30 + 2 = 200 px)

Jeg syntes dette var forvirrende, før jeg forsto at når man bruker position relative, så forholder elementet seg til elementet over. Så om du setter boks B til relative og top:50, så plasserer den seg 50 px fra bunnen av boksen over  (A) og mot x-aksen.  Den forholder seg ikke til toppen av dokumentet eller containeren.  Med position Absolute, forholder den seg til x-aksen, så om du setter boks B til Absolute og Top:50, så plasserer den seg 50 pixler fra x-aksen.

Fortsatt litt forvirrende, men det blir vel mer forståelig etterhvert.  Uansett her er de forskjellige settingen jeg prøvde ut:

Her er boksene plassert horisontalt ved siden av hverandre.  Jeg har brukt disse verdiene:

B:  Relativ, Top:-235  Left:242

C: Absolute  Top:75  Left:484

B: Relative  Top:-50  Left:200

C:  Relative  Top:-150  Left:350

Alle boksene er nå totalt 242 px (boks + margin + padding)

B: Relative  Top:-50  Left:200

 

C:  Relative  Top:-150  Left:484

B: Relative  Top: -235  Left:242

B:  Relative  Top:75  Left:242

B:  Absolute  Top:75  Left:242

Advertisements