Projektarbete 2C by Matilda Rönnlund

Snabbskiss

matilda_ronnlund0171 — 2017-09-24 14:35:19 UTC

En snabbskiss över hemsidan. En meny antingen högst upp eller till vänster nedanför rubriken. Innehållet (faktan+bilderna) osv ska vara indelade i "boxar" med rundade kanter. Allt innehåll ska vara centrerat på hemsidan.

Boxar och ändring i HTML

matilda_ronnlund0171 — 2017-09-25 09:55:32 UTC

För att få in allt och dela upp innehållet i "boxar" var jag tvungen att lägga till section-id:n i HTML-filen vilket jag inte hade innan. Det är först nu jag har förstått varför man delar in innehållet i sections redan i HTML.
Jag fick även flytta på

elementet då jag hade missuppfattat det lite, vilket visade sig tydligare i CSS än i HTML. Det huvudsakliga innehållet är allt på sidan och inte bara det första textstycket. När jag flyttade

kunde jag även centrera innehållet på min sida så som jag ville ha det.

Bilder

matilda_ronnlund0171 — 2017-09-25 10:01:08 UTC

Eftersom vissa bilder har en vit bakgrund och vissa bilder har egen fotobakgrund, fick jag lägga till classer på bilderna i HTML-filen för att skilja dessa bilder åt så att det skulle se snyggt ut beroende på om bilderna ligger i de vita boxarna eller utanför. Jag la även till "clearfix" vid en bild i HTML-filen för att den skulle kunna smälta in i texten samt inte hamna utanför boxen.
Bilden som ligger här nedanför, på katten, flyttade jag in i Härstamning-section för att det såg bättre ut än att den låg utanför då bilden har vit bakgrund. Flyttade därmed ner section-ändtaggen i HTML-filen till nedanför bilden istället för ovanför.

Navigationsmeny

matilda_ronnlund0171 — 2017-09-25 10:08:58 UTC

Mitt största problem har varit att få till navigationsmenyn. Jag får det varken att fungera som en vertikal eller horisontell meny.. Jag har endast fått bort "prickarna" i listan. Jobbar vidare med denna fråga och försöker lösa det.

Navigationsmeny + Bilder

matilda_ronnlund0171 — 2017-09-28 15:45:34 UTC

Navigationsmenyn blev tillslut som jag ville! Genom att läsa på w3schools kom jag på hur jag skulle koda för att få den horisontell. Jag hade kodat på fel ställe helt enkelt.
Gjorde även om bilderna då båda bilderna skulle läggas till via CSS. La alltså in en bild i headern och en i bakgrunden, istället för att ha en liten bild i texten. Det såg bättre ut att ta bort position: fixed; på bakgrunden så att bilden bara syns längst ner och inte längs hela sidan när man scrollar. Jag tyckte det såg lite "för mycket" ut när bilden på tassavtrycken syntes bredvid headerbilden. Bilderna är hämtade från Pixabay.
Fick även lägga till en radbrytning mellan hedern och navigationsmenyn så att dessa inte skulle "sitta ihop".