Permalänk

!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?

Permalänk

@ssoffipropp: Hur ser hela koden ut?

Permalänk
Medlem

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.

Visa signatur

Spela Swemantle! Du vet att du vill.

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

Permalänk
Hedersmedlem

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.

Permalänk
Medlem

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

Skickades från m.sweclockers.com

Permalänk

@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>

Permalänk

@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>

Permalänk
Hedersmedlem

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.

Permalänk

@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">

Permalänk
Medlem
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>

Permalänk
Medlem

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

Permalänk
Medlem

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!

Visa signatur

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

Permalänk
Medlem

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.

Visa signatur

10700K | NVIDIA RTX 3080

Permalänk
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?

Permalänk
Medlem
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>

Permalänk
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..

Permalänk
Medlem

@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>

Visa signatur

10700K | NVIDIA RTX 3080

Permalänk
Medlem
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.

Visa signatur

Herman

Permalänk
Medlem

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.

Permalänk
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}

Permalänk
Medlem

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

Visa signatur

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

Permalänk
Medlem
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.

Visa signatur

Arbets- / Spelstation: Arch Linux - Ryzen 5 3600 - RX 7900 XT - 32G DDR4
Server: Arch Linux - Core i5-10400F - 16G DDR4

Permalänk
Medlem

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".

Permalänk
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>?

Permalänk
Medlem
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

Permalänk
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.

Permalänk
Medlem
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); }

Visa signatur

Arbets- / Spelstation: Arch Linux - Ryzen 5 3600 - RX 7900 XT - 32G DDR4
Server: Arch Linux - Core i5-10400F - 16G DDR4

Permalänk
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.

Permalänk
Medlem
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.

Permalänk
Medlem
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.

Visa signatur

Arbets- / Spelstation: Arch Linux - Ryzen 5 3600 - RX 7900 XT - 32G DDR4
Server: Arch Linux - Core i5-10400F - 16G DDR4