Vill du vara del av diskussionerna i forumet, ställa frågor eller hjälpa andra? Registrera dig här!
Trädvy Permalänk
Medlem
Registrerad
Feb 2020

!DOCTYPE html/css

Jag har precis börjat att plugga kursen webbutveckling 1, där jag ska börja bygga upp en hemsida.
Ska inte alls påstå att jag har någon vidare koll på kodning osv!

Jag har dock insett nu att när jag började leta runt efter html grunderna så måste jag stött på någon som skrivit enbart <!DOCTYPE> i sin html kod istället för <!DOCTYPE html> vilket jag insåg nu när jag är klar med sidan att jag också hade gjort.

Men när jag nu ska ändra till <!DOCTYPE html> istället så försvinner det mesta av min css?
Alla färger, boxar, padding osv.

Tar jag bort min doctype helt får jag samma resultat som jag vill ha, så jag antar att min tagg inte gjort någon skillnad alls.

Hur ska jag gå tillväga för att det ska funka? Vill inte behöva göra om allting?

Trädvy Permalänk
Medlem
Plats
stockholm
Registrerad
Aug 2005

@ssoffipropp: Hur ser hela koden ut?

Trädvy Permalänk
Medlem
Plats
SweClockers forum
Registrerad
Aug 2012

Du måste skicka med exempelkod när du ställer sådana här frågor, annars kan du bara få svar av de som sett exakt samma sak och känner igen det, vilket mycket väl kan vara 0% av de som besöker tråden.

Guide: Roota din HTC - BB-Kod-knappar på Prisjakt

              Min burk - Kvävekyld till 80%
8700K@stock
1070 Ti@stock

Ibland har jag fel, men då är det någon annans fel.

Trädvy Permalänk
Hedersmedlem
Plats
Stockholm
Registrerad
Jul 2017

Min gissning är att din webbläsare hamnar i Quirks mode eftersom det saknas en korrekt doctype. När du har en korrekt doctype på plats så går webbläsaren in i ett läge där den förväntar sig mer korrekt kod, och därmed så kanske den inte alls lyckas tolka resten av din kod på grund av något fel.

Detta är dock en vild gissning, det är som andra skrivit i tråden svårt att veta utan att se koden.

Jag hade börjat med att använda W3C:s HTML-validator för att testa efter fel i koden.

  1. Gå till https://validator.w3.org/#validate_by_input

  2. Klistra in koden i fältet.

  3. Klicka på Check, och åtgärda eventuella fel som den hittar.

Om det inte löser ditt problem, återkom hit med din källkod här i forumtråden. När du postar din kod, börja med [code] och sluta med [/code]. Det gör koden mer läsbar här på forumet.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013

Behöver se kod för att förstå vad som ger dig fel.

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Feb 2020

@LemonIllusion @ZalamanderRelic @zaibuf :

HÄR ÄR MIN HTML KOD: <!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <div id="wrapper"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </div> <div id="toppen"></div> </head> <body> </body> </html>

Trädvy Permalänk
Medlem
Registrerad
Feb 2020

@pv2b: Då kanske det är det som är problemet. Verkar var väldigt mycket fel när jag söker efter fel i koden. hehe..

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <div id="wrapper"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </div> <div id="toppen"></div> </head> <body> </body> </html>

Trädvy Permalänk
Hedersmedlem
Plats
Stockholm
Registrerad
Jul 2017

Jo precis, börja med att fixa felen i HTML-koden (och även i CSS-koden med W3C:s CSS-validator! https://jigsaw.w3.org/css-validator/)

Du kanske då ser direkt vad som är fel, men källkod som inte har några kända "formfel" är ju alltid en bra utgångspunkt. Finns för många smågrejer att gå igenom rad för rad.

Trädvy Permalänk
Medlem
Registrerad
Feb 2020

@pv2b: Tack snälla!
Har lite svårt ändå att förstå felen med vad dom skriver när jag kollar den..
</head> ska vara fel och
</div> taggen efter min stylesheet. ( stray end tag) vet inte riktigt vad det betyder?
och <body> "Start tag body seen but an element of the same type was already open." ??

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </div> <div id="toppen"></div> </head> <body> <div id="wrapper">

Trädvy Permalänk
Medlem
Registrerad
Okt 2003
Skrivet av ssoffipropp:

@pv2b: Tack snälla!
Har lite svårt ändå att förstå felen med vad dom skriver när jag kollar den..
</head> ska vara fel och
</div> taggen efter min stylesheet. ( stray end tag) vet inte riktigt vad det betyder?
och <body> "Start tag body seen but an element of the same type was already open." ??

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </div> <div id="toppen"></div> </head> <body> <div id="wrapper">

Har för mig att det inte funkar så bra med <DIV> taggar i <HEAD> och inte bra att starta med en sluttagg..kanske skulle se ut så här istället:

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="toppen"></div> </div>

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013

Inga divs innanför head.

En kommentar i mitten av dokumentet är felaktigt formaterad angående film.

Noterade en <h3 div class> strax under, också felaktig markup.

Dina CSS fel beror på att din html är invalid, så fixar du all markup så bör det fungera. Rekommenderar att du använder t.ex. VSCode, där får du mer hjälp om du skrivit något felaktigt.

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Mar 2015

Har skummat igenom tråden lite och jag skulle verkligen rekommendera dig att använda en bra editor som hjälper dig att hålla reda på start, resp. slut-taggar.

Precis som @bacardi_avt skriver så hör inte <div> taggar hemma i <head>, Det kan fungera ibland för vissa användare och webbläsare, men generellt leder det till buggar.

*Edit*
Jag har kört med bland annat Atom som är gratis med insticksmodulen Prettier som hjälper till att hålla koll på koden. Nu var det något år sen jag kodade aktivt för webben så det finns säkert bättre program!

Main || Intel Core i9-9900k @ 5.0 GHz || Asus Rog Strix Z390-E || G.Skill TridentZ RGB 2x16GB @ 3200 MHz || Asus GeForce GTX 1080 Ti Strix Gaming OC || Asus Rog Ryujin 360mm || M.2 Samsung 970 EVO 1TB || CableMod PRO ModMesh || Corsair RM750x v2 || Fractal Design Define R6 TG Gunmetal || Ekwb Vardar RGB 120 mm x 6 st ||
Laptop || MSI GS63VR 6RF Stealth Pro ||

Trädvy Permalänk
Medlem
Registrerad
Feb 2006

Jag brukar använda Sublime Text 3, också gratis.
Väldigt bra program, så fort du sparar något som .html och .css så får du diverse färger osv. Med tabs får du rätt formatering på texten.

Och har du t.ex

<body>
<div>
och sedan här skriver du </ och då lägger programmet automatiskt till </div>, dvs den har koll på
vilken tagg som skall stängas. Går otroligt mycket fortare att skriva kod.

Ett annat tips i just Sublime, välj view -> columns (2) så kan du ha html i en kolumn och css i den andra. Och sedan ctrl + s så sparar du.

Asus z270 Maximus Extreme | Intel i7 7700K | EVGA GTX 1080 FTW | 1TB WB Blue | 240GB Samsung 650 nvme | Fractal Design R6 | Corsair HX 1000W | Kingston 32GB DDR4 | Asus Swift PG278Q

Trädvy Permalänk
Medlem
Registrerad
Feb 2020
Skrivet av zaibuf:

Inga divs innanför head.

En kommentar i mitten av dokumentet är felaktigt formaterad angående film.

Noterade en <h3 div class> strax under, också felaktig markup.

Dina CSS fel beror på att din html är invalid, så fixar du all markup så bör det fungera. Rekommenderar att du använder t.ex. VSCode, där får du mer hjälp om du skrivit något felaktigt.

Skickades från m.sweclockers.com

Skrivet av wilda:

Har skummat igenom tråden lite och jag skulle verkligen rekommendera dig att använda en bra editor som hjälper dig att hålla reda på start, resp. slut-taggar.

Precis som @bacardi_avt skriver så hör inte <div> taggar hemma i <head>, Det kan fungera ibland för vissa användare och webbläsare, men generellt leder det till buggar.

*Edit*
Jag har kört med bland annat Atom som är gratis med insticksmodulen Prettier som hjälper till att hålla koll på koden. Nu var det något år sen jag kodade aktivt för webben så det finns säkert bättre program!

Skrivet av kwame:

Jag brukar använda Sublime Text 3, också gratis.
Väldigt bra program, så fort du sparar något som .html och .css så får du diverse färger osv. Med tabs får du rätt formatering på texten.

Och har du t.ex

<body>
<div>
och sedan här skriver du </ och då lägger programmet automatiskt till </div>, dvs den har koll på
vilken tagg som skall stängas. Går otroligt mycket fortare att skriva kod.

Ett annat tips i just Sublime, välj view -> columns (2) så kan du ha html i en kolumn och css i den andra. Och sedan ctrl + s så sparar du.

Tack för alla tips!
Jag blev rekommenderad att använda Brackets, så det är det jag använder mig av.
Det verkar dock som att många får upp alla ''grundtaggar" när dom skriver in <!doctype html> men det får inte jag? Vet inte om det är några inställningar?

Utöver det så har jag nu inga fel i när jag söker i min html kod, men den ser ändå ut som den gjorde innan? Att färgerna osv inte syns. När jag felsöker i min css mall är det bara min @charset "utf-8"; som anses som fel...
Den säger:
- Consider adding a lang attribute to the html start tag to declare the language of this document.
- Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
- Element head is missing a required instance of child element title.
Förstår inte?

Sen läste jag också att det inte räcker med att bara lägga in @charset "utf-8"; i css mallen, utan att jag också i början av formatmallen – måste spara min formatmall i teckenkodningen UTF-8. Men jag tror jag har det för under mina koder står det att jag har utf-8 som encoding?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av ssoffipropp:

Tack för alla tips!
Jag blev rekommenderad att använda Brackets, så det är det jag använder mig av.
Det verkar dock som att många får upp alla ''grundtaggar" när dom skriver in <!doctype html> men det får inte jag? Vet inte om det är några inställningar?

Utöver det så har jag nu inga fel i när jag söker i min html kod, men den ser ändå ut som den gjorde innan? Att färgerna osv inte syns. När jag felsöker i min css mall är det bara min @charset "utf-8"; som anses som fel...
Den säger:
- Consider adding a lang attribute to the html start tag to declare the language of this document.
- Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
- Element head is missing a required instance of child element title.
Förstår inte?

Sen läste jag också att det inte räcker med att bara lägga in @charset "utf-8"; i css mallen, utan att jag också i början av formatmallen – måste spara min formatmall i teckenkodningen UTF-8. Men jag tror jag har det för under mina koder står det att jag har utf-8 som encoding?

Tror inte du fixat alla fel då. Jag har kopierat din HTML och körde det i valideringen, har åtgärdat alla fel i din markup nu. Var några divs i <head> som spökade, samt lite felaktig markup <h3 div class=""> samt <font color="">.

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <!-- bokmärken --> <div class="lankar"> <a href="#betyg">Betygsmål</a> <a href="#serier">Serier och filmer</a> <a href="#citat">Favoritcitat</a> <a href="#foto">Fotografier</a> </div> <!-- rubrik --> <h1>Välkommen hit!</h1> <div class="box1"> <!-- underrubrik 1 --> <div class="stycke"> <h2> Vem är jag?</h2> <!-- stycke --> <p> massa text </p><br> <!-- underrubrik 2 --> <h2 id="betyg">Mitt mål med denna kurs?</h2> <p>massa text </p> <p class="betyg"> Mitt betygsmål?</p><br> <!-- favoritserier --> <h2 id="serier">Serier och filmer</h2> <p>lite text </p><br> <div class="serie"> <table> <tr> <th>Serier</th> <th>Filmer</th> </tr> <tr><td>Power</td><td>Dirty Dancing</td></tr> <tr><td>Peaky Blinders</td><td>A walk to remember </td></tr> <tr><td>Arrow</td><td>The holiday</td></tr> <tr><td>Innan vi dör</td><td>Safe heaven</td></tr> <tr><td>Greys anatomy</td><td>Blood and bone</td></tr> <tr><td>Game of thrones</td><td>Columbiana</td></tr> <tr><td>The 100</td><td>En oväntad vänskap</td></tr> <tr><td>Lethal weapon</td><td>Walk the line</td></tr> <tr><td>Hamilton</td><td>Five feet apart</td></tr> <tr><td>Bodyguard</td><td>The hard way</td></tr> </table></div> <br> <!-- Favoritciat --> <h2 id="citat">Favoritcitat från serier/filmer</h2> <q> You were like coming up for fresh air. It's like I was drowning and you saved me</q><br> - Derek Shepherd, Greys anatomy <br> <br> <q>If two people were meant to be together,eventually they'll find their way back</q> <br> - Chuck Bass, Gossip girl <br> <br> <q>Never let the fear of striking out, keep you from playing the game</q><br> - A cinderella story <br><br> <q>I like getting older, I feel like I'm finally aging into my personality</q><br> - Nick Miller, New girl <br><br> <!--- fotografier --> <h2 id="foto">Fotografier</h2> <img src="cross1.jpg" alt="crossbild" width="670"/><br> <br> <img src="cross2.jpg" alt="crossbild" width="670" height="460"/> <br><br> <img src="mage.jpg" alt="bild på gravidmage" width="670"/><br><br> <img src="edwin.jpg" alt="bild på gravidmage" width="670"/><br> <br> <img src="are.jpg" alt="bild på gravidmage" width="670"/> <br> <br> <img src="vm.jpg" alt="bild på gravidmage" width="670"/> <br> <br> <img src="student.jpg" alt="bild på gravidmage" width="670"/> <br> <br> </div></div></div> <br> <div class="box2"><h3><a href="#toppen">Tillbaka till toppen</a></h3></div> </body> </html>

Trädvy Permalänk
Medlem
Registrerad
Feb 2020
Skrivet av zaibuf:

Tror inte du fixat alla fel då. Jag har kopierat din HTML och körde det i valideringen, har åtgärdat alla fel i din markup nu. Var några divs i <head> som spökade, samt lite felaktig markup <h3 div class=""> samt <font color="">.

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Sofies sida</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <!-- bokmärken --> <div class="lankar"> <a href="#betyg">Betygsmål</a> <a href="#serier">Serier och filmer</a> <a href="#citat">Favoritcitat</a> <a href="#foto">Fotografier</a> </div> <!-- rubrik --> <h1>Välkommen hit!</h1> <div class="box1"> <!-- underrubrik 1 --> <div class="stycke"> <h2> Vem är jag?</h2> <!-- stycke --> <p> massa text </p><br> <!-- underrubrik 2 --> <h2 id="betyg">Mitt mål med denna kurs?</h2> <p>massa text </p> <p class="betyg"> Mitt betygsmål?</p><br> <!-- favoritserier --> <h2 id="serier">Serier och filmer</h2> <p>lite text </p><br> <div class="serie"> <table> <tr> <th>Serier</th> <th>Filmer</th> </tr> <tr><td>Power</td><td>Dirty Dancing</td></tr> <tr><td>Peaky Blinders</td><td>A walk to remember </td></tr> <tr><td>Arrow</td><td>The holiday</td></tr> <tr><td>Innan vi dör</td><td>Safe heaven</td></tr> <tr><td>Greys anatomy</td><td>Blood and bone</td></tr> <tr><td>Game of thrones</td><td>Columbiana</td></tr> <tr><td>The 100</td><td>En oväntad vänskap</td></tr> <tr><td>Lethal weapon</td><td>Walk the line</td></tr> <tr><td>Hamilton</td><td>Five feet apart</td></tr> <tr><td>Bodyguard</td><td>The hard way</td></tr> </table></div> <br> <!-- Favoritciat --> <h2 id="citat">Favoritcitat från serier/filmer</h2> <q> You were like coming up for fresh air. It's like I was drowning and you saved me</q><br> - Derek Shepherd, Greys anatomy <br> <br> <q>If two people were meant to be together,eventually they'll find their way back</q> <br> - Chuck Bass, Gossip girl <br> <br> <q>Never let the fear of striking out, keep you from playing the game</q><br> - A cinderella story <br><br> <q>I like getting older, I feel like I'm finally aging into my personality</q><br> - Nick Miller, New girl <br><br> <!--- fotografier --> <h2 id="foto">Fotografier</h2> <img src="cross1.jpg" alt="crossbild" width="670"/><br> <br> <img src="cross2.jpg" alt="crossbild" width="670" height="460"/> <br><br> <img src="mage.jpg" alt="bild på gravidmage" width="670"/><br><br> <img src="edwin.jpg" alt="bild på gravidmage" width="670"/><br> <br> <img src="are.jpg" alt="bild på gravidmage" width="670"/> <br> <br> <img src="vm.jpg" alt="bild på gravidmage" width="670"/> <br> <br> <img src="student.jpg" alt="bild på gravidmage" width="670"/> <br> <br> </div></div></div> <br> <div class="box2"><h3><a href="#toppen">Tillbaka till toppen</a></h3></div> </body> </html>

Jag har också kört min html nu och det står att den är helt complete, No errors or warnings to show.
Ända som är tokigt är som sagt min @charset i min css..

Trädvy Permalänk
Medlem
Registrerad
Feb 2006

@charset "utf-8";

Denna behöver du inte i din CSS. Det den gör är att du kan använda å-ä-ö i några
av dina CSS properties. Dock bra att ha i din html (vilket du har.)

När du ska göra en hemsida, börja med denna layouten, här får du med allt grundligt som behövs.
meta name="viewport" -> denna tar bort mobiltelefoner/surfplattors automatiska skalning.
I slutändan ska du skapa hemsidor som blir responsiva, och ser bra ut oavsett skärm.
Och utan den så kommer dina inställningar för mobil/surfplattor ej gälla.

Ta bort alla <br> i din kod. Radbrytning ska se automatiskt, med hjälp av de inställningar
du valt. Annars kommer det se väldigt konstigt ut beroende på vilken typ av skärm du
använder.

I övrigt försök använda semantiska taggar istället för massa divs. De fungerar likadant MEN
de har en betydelse - gör koden enklare att förstå. En normal hemsida kan ha denna layouten.
Notera strukturen - gör det väldigt enkelt att veta vilka taggar som stänger vilka och så vidare.

<DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Hej</title> <link rel="stylesheet" href="styles.css" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <!-- Innehåll för allt som har med header/navigationsbaren att göra --> <header> </header> <!-- Huvudinnehållet på hemsidan--> <main> <!-- Massa artiklar som är en del av huvudinnehållet --> <article> </article> </main> <!-- T.ex reklamartiklar som ligger till höger/vänster om main--> <aside> </aside> <!-- Footern, självförklarande.. --> <footer> </footer> </body> </html>

Asus z270 Maximus Extreme | Intel i7 7700K | EVGA GTX 1080 FTW | 1TB WB Blue | 240GB Samsung 650 nvme | Fractal Design R6 | Corsair HX 1000W | Kingston 32GB DDR4 | Asus Swift PG278Q

Trädvy Permalänk
Medlem
Registrerad
Apr 2004
Skrivet av ssoffipropp:

Jag har också kört min html nu och det står att den är helt complete, No errors or warnings to show.
Ända som är tokigt är som sagt min @charset i min css..

Som sagt så behöver du inte ha med @charset i CSS'en

Anledningen till att färgerna inte visas som du vill beror på ett fel i CSS'en.
Du har glömt att ange # före flera färgvärden

Till exempel:

/*underrubriker*/ h2{ background-color: EEDDC4; font-family: georgia; font-size: 30; }

Skall vara background-color: #EEDDC4;

Du har med det på andra ställen så det är en detalj som är lätt att missa när man skriver.

Herman

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2007

Du behöver installera emmet-pluginet i brackets och sublime om du vill få en del hjälpmedel har jag för mig.

Dock rekommenderar jag dig att byta till Visual Studio Code, riktigt fin editor. Där kan du skapa valfri .html fil och skriva ett utropstecken och tabba, så får du nödvändig basic markup.

[7700K 4.5Ghz] - [PRIME Z270-A] - [16Gb 3200Mhz] - Asus ROG Strix GeForce GTX 1080] - [970 M2 500GB] - [FD 800W Newton R3 Platinum] - [Noctua D14] - [Define R3] - [S27A950D @120hz]

Trädvy Permalänk
Medlem
Registrerad
Feb 2020
Skrivet av sworst:

Som sagt så behöver du inte ha med @charset i CSS'en

Anledningen till att färgerna inte visas som du vill beror på ett fel i CSS'en.
Du har glömt att ange # före flera färgvärden

Till exempel:

/*underrubriker*/ h2{ background-color: EEDDC4; font-family: georgia; font-size: 30; }

Skall vara background-color: #EEDDC4;

Du har med det på andra ställen så det är en detalj som är lätt att missa när man skriver.

Hoppsan! Nu fick jag dit lite färg. Tack!

Men det verkar fortfarande som att något krånglar, jag kan tex. inte ändra storlek på huvudrubriken eller underrubrikerna? Inte heller ändra bakgrundsfärg i min wrapper? När jag felsöker så verkar det bara vara min body det är fel på?

body{ background-color: #A7895D; } /*box till sidan*/ .box1{ width: 700px; height: auto; background-color: #FFFFFF; padding: 10; border: 1px solid #000000; margin: auto; } /*Huvudrubrik*/ h1{ font-size: 70; font-family: janetta silloam; text-align: center; font-style: normal; } /*underrubriker*/ h2{ background-color: #EEDDC4; font-family: georgia; font-size: 20; } /*text*/ .stycke{ text-align: center; font-family: georgia; font-size: 14; } p { font-size: 14px; } /*LÄNKARNA*/ .lankar{ text-align: center; text-decoration: none; font-family: georgia; margin-top: 20px; } a { background-color: #9F9484; text-decoration: none; padding: 3px; } a:link { color: #000000; } a:visited { color: #000000; } a:active { color: saddlebrown} .betyg{ font-size: 20; font-family: cursive } /*Tabell med serier och filmer*/ table, td, th{ border-collapse: collapse; border: 1px solid black; padding: 4px; text-align: center; } table{ margin: auto;} th{ background-color: #A7895D; } /*WRAPPER*/ #wrapper { width: 730px; margin: auto; border: 4px solid #A7895D; padding: 5; background-color: #EEDDC4; } h3 { text-align: center}

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2013

@ssoffipropp: Glöm inte sätta px efter storlekarna.

i7 4790k | Asus Z97M-Plus | 16gb ram | Asus Strix 980 | Phanteks PH-TC12DX | Samsung 850 Evo 250gb | Corsair Force GS 120gb | Fractal Design Integra M 650w | Fractal Design Define Mini C

https://my-homepage-43a9e.firebaseapp.com/

Trädvy Permalänk
Medlem
Plats
NördCentrum
Registrerad
Jun 2011
Skrivet av ssoffipropp:

Hoppsan! Nu fick jag dit lite färg. Tack!

Men det verkar fortfarande som att något krånglar, jag kan tex. inte ändra storlek på huvudrubriken eller underrubrikerna? Inte heller ändra bakgrundsfärg i min wrapper? När jag felsöker så verkar det bara vara min body det är fel på?

body{ background-color: #A7895D; } /*box till sidan*/ .box1{ width: 700px; height: auto; background-color: #FFFFFF; padding: 10; border: 1px solid #000000; margin: auto; } /*Huvudrubrik*/ h1{ font-size: 70; font-family: janetta silloam; text-align: center; font-style: normal; } /*underrubriker*/ h2{ background-color: #EEDDC4; font-family: georgia; font-size: 20; } /*text*/ .stycke{ text-align: center; font-family: georgia; font-size: 14; } p { font-size: 14px; } /*LÄNKARNA*/ .lankar{ text-align: center; text-decoration: none; font-family: georgia; margin-top: 20px; } a { background-color: #9F9484; text-decoration: none; padding: 3px; } a:link { color: #000000; } a:visited { color: #000000; } a:active { color: saddlebrown} .betyg{ font-size: 20; font-family: cursive } /*Tabell med serier och filmer*/ table, td, th{ border-collapse: collapse; border: 1px solid black; padding: 4px; text-align: center; } table{ margin: auto;} th{ background-color: #A7895D; } /*WRAPPER*/ #wrapper { width: 730px; margin: auto; border: 4px solid #A7895D; padding: 5; background-color: #EEDDC4; } h3 { text-align: center}

Väldigt många egenskaper i CSS kräver att du anger enhet på dina nummer. Vad betyder egentligen fontstorlek 70 -- är det 70 sekunder? 70 äpplen? 70 pixlar? Om du är osäker på vad en property gör, chansa inte, utan kolla upp vad dokumentationen säger. Alternativt, börja från början och chansa med ett värde i taget, så att du med uteslutningsmetoden enkelt kan hitta vad det är som går fel.

Vi kan sitta här och agera kompilator åt dig fram och tillbaka hela veckan ut i den här takten. Jag tvivlar starkt på att detta är det mest effektiva sättet för dig att lära dig HTML/CSS och det mest värdefulla bruket av vår tid. Jag rekommenderar att du sätter dig med kursboken och börjar från början, så att du lär dig allting från grunden ordentligt. Det här är inte rimligt.

Gibb: Win10 - Ryzen 5 3600 - RX 580 - 16G 3000MHz DDR4
Server: Arch - 2 * Xeon X5570 - R9 280X - 32G DDR3 ECC

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013

Kör din CSS genom denna --> https://jigsaw.w3.org/css-validator/validator

Du har många unit fel på dina storlekar, du måste ange vilken unit det ska vara. T.ex. em, rem, vh, % eller px.

För font-family så måste alla fonts som har white-space ligga innanför citationstecken.
font-family : janetta silloam är inte valid. Måste vara "janetta silloam".

Trädvy Permalänk
Medlem
Registrerad
Feb 2020
Skrivet av kwame:

@charset "utf-8";

Denna behöver du inte i din CSS. Det den gör är att du kan använda å-ä-ö i några
av dina CSS properties. Dock bra att ha i din html (vilket du har.)

När du ska göra en hemsida, börja med denna layouten, här får du med allt grundligt som behövs.
meta name="viewport" -> denna tar bort mobiltelefoner/surfplattors automatiska skalning.
I slutändan ska du skapa hemsidor som blir responsiva, och ser bra ut oavsett skärm.
Och utan den så kommer dina inställningar för mobil/surfplattor ej gälla.

Ta bort alla <br> i din kod. Radbrytning ska se automatiskt, med hjälp av de inställningar
du valt. Annars kommer det se väldigt konstigt ut beroende på vilken typ av skärm du
använder.

I övrigt försök använda semantiska taggar istället för massa divs. De fungerar likadant MEN
de har en betydelse - gör koden enklare att förstå. En normal hemsida kan ha denna layouten.
Notera strukturen - gör det väldigt enkelt att veta vilka taggar som stänger vilka och så vidare.

<DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>Hej</title> <link rel="stylesheet" href="styles.css" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <!-- Innehåll för allt som har med header/navigationsbaren att göra --> <header> </header> <!-- Huvudinnehållet på hemsidan--> <main> <!-- Massa artiklar som är en del av huvudinnehållet --> <article> </article> </main> <!-- T.ex reklamartiklar som ligger till höger/vänster om main--> <aside> </aside> <!-- Footern, självförklarande.. --> <footer> </footer> </body> </html>

Tack så mycket!
Radbytningen sker dock inte automatiskt.. Ska det egentligen bara funka att hoppa ner några rader i dokumentet utan att skriva <br>?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av ssoffipropp:

Tack så mycket!
Radbytningen sker dock inte automatiskt.. Ska det egentligen bara funka att hoppa ner några rader i dokumentet utan att skriva <br>?

Skriver du din text innanför <p> så kommer den göra radbrytingar automatiskt beroende på hur stor boxen som texten ligger inom är.

Vill du ha mellanrum mellan olika block så bör du använda margin eller padding, då du vill styra detta med styling och inte leta runt efter massa <br> taggar i din HTML markup. Det du efterfrågar är word-wrap: break-word, exempel

Trädvy Permalänk
Medlem
Registrerad
Feb 2020
Skrivet av Snorlena:

@ssoffipropp: Glöm inte sätta px efter storlekarna.

Juste tack!!
Så givet, har bara gått för fort för att det funkade så bra innan jag skrev dit doctype koden.

Trädvy Permalänk
Medlem
Plats
NördCentrum
Registrerad
Jun 2011
Skrivet av zaibuf:

Kör din CSS genom denna --> https://jigsaw.w3.org/css-validator/validator

Du har många unit fel på dina storlekar, du måste ange vilken unit det ska vara. T.ex. em, rem, vh, % eller px.

För font-family så måste alla fonts som har white-space ligga innanför citationstecken.
font-family : janetta silloam är inte valid. Måste vara "janetta silloam".

Den där grejen verkar inte funka så bra. Fick massa fel på saker som är helt rätt -- framförallt verkar den inte alls förstå variabler. E.g.

:root { --foo: 13px; } body { font-size: var(--foo); }

Gibb: Win10 - Ryzen 5 3600 - RX 580 - 16G 3000MHz DDR4
Server: Arch - 2 * Xeon X5570 - R9 280X - 32G DDR3 ECC

Trädvy Permalänk
Medlem
Registrerad
Feb 2020
Skrivet av zaibuf:

Skriver du din text innanför <p> så kommer den göra radbrytingar automatiskt beroende på hur stor boxen som texten ligger inom är.

Vill du ha mellanrum mellan olika block så bör du använda margin eller padding, då du vill styra detta med styling och inte leta runt efter massa <br> taggar i din HTML markup.

Okej förstår.
Ville ha mellanrum mellan bilderna jag la upp, så dom satte jag <br> mellan. Men då kan fixa det i min css.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Bryal:

Den där grejen verkar inte funka så bra. Fick massa fel på saker som är helt rätt -- framförallt verkar den inte alls förstå variabler. E.g.

:root { --foo: 13px; } body { font-size: var(--foo); }

Du har rätt, den verkar inte hänga med i alla ändringar som gjorts inom CSS.
Däremot är det väl inte vanligt att skriva variabler i sin CSS? Har man det behovet så skulle jag föredra SASS.

Trädvy Permalänk
Medlem
Plats
NördCentrum
Registrerad
Jun 2011
Skrivet av zaibuf:

Du har rätt, den verkar inte hänga med i alla ändringar som gjorts inom CSS.
Däremot är det väl inte vanligt att skriva variabler i sin CSS? Har man det behovet så skulle jag föredra SASS.

Variabler i allmänhet är ju väldigt trevligt. Smidigt när man mobilanpassar sidan att bara behöva ändra på ett par variabler för de vanliga bredderna istället för att behöva modifiera vart och vartannat element.

Hurvida SASS är bättre kan jag inte direkt uttala mig om då jag aldrig använt det, men spontant känns det ju överlägset att inte vara beroende av ett byggsystem / ett kompileringssteg för att styla sin enkla hemsida. Vad tjänar man på att använda det mer komplexa SASS vs. att bara skriva ren CSS? Känns lite som när man drar in onödigt beroende på jQuery för att lösa problem där lika många rader Javascript hade kunna göra samma sak.

Gibb: Win10 - Ryzen 5 3600 - RX 580 - 16G 3000MHz DDR4
Server: Arch - 2 * Xeon X5570 - R9 280X - 32G DDR3 ECC