Trädvy Permalänk
Medlem
Plats
Valbo
Registrerad
Aug 2002

HTML/CSS och <!DOCTYPE html>

Så jag håller på med en simpel sida och har börjat med min layout.

Det ska vara en "Header" 100% bred och 10% hög, sedan en vänster kolumn och en höger kolumn 20%/80% och 90% hög.

Det fungerar utmärkt att visualisera detta (i chrome) genom att ge mina 3 divs olika bakgrundsfärger. Men så fort jag lägger till <!DOCTYPE html> så ignoreras höjden och alla <div> element blir 1 rad hög. Varför?

HTML:

<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="base.css" media="all" /> <body> <div id="TOP">TOP</div> <div id="LEFT">LEFT</div> <div id="RIGHT">RIGHT</div> </body> </html>

CSS:

* { box-sizing: border-box; } /* margin, border and padding is included in width/height */ body { overflow: hidden; /* body will not scroll */ background: darkgrey; } #TOP { width: 100%; height: 10%; background: lightblue; } #LEFT { float: left; width: 20%; height: 90%; background: orange; } #RIGHT { float: right; width: 80%; height: 90%; background: green; }

Desktop: | Core i5-4690K | Zotac GTX 970 | 16Gb RAM | 256Gb Samsung 830 SSD
NAS: HP Microserver Gen8 | 12GB DDR2 Ram | 3x1.5Tb ZFS | FreeNAS

Trädvy Permalänk
Medlem
Plats
Arboga
Registrerad
Jan 2002

Prova sätt 100% height på både html och body också, höjden är relativt till föräldern till elementet.

Edit: Procentuell höjd är dock ingen bra idé, det kommer bli krångligt så snart ditt innehåll tar mer plats än vad som får plats på skärmen.

Skickades från m.sweclockers.com

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015

Testa att köra med detta

html, body { overflow: hidden; /* body will not scroll */ background: darkgrey; height: 100%; margin: 0; padding: 0; }

Sen behövs inte 'width: 100%' på din TOP-div, den blir det automagiskt!

Edit: Om du anger procent i något element så måste "parent"-elementet ha en storlek angiven.

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!

Trädvy Permalänk
Medlem
Plats
Valbo
Registrerad
Aug 2002

100% på HTML och BODY fungerar utmärkt

Skrivet av Zajin:

..
Edit: Procentuell höjd är dock ingen bra idé, det kommer bli krångligt så snart ditt innehåll tar mer plats än vad som får plats på skärmen.

Skickades från m.sweclockers.com

Procentuell höjd passar utmärkt för mitt ändamål. Sidan ska maximalt vara så stor så webläsaren aldrig scrollar, därför "overflow: hidden" på <body>. Men samtidigt så ska "storleken" på kolumn etc. följa webläsarens storlek.

Desktop: | Core i5-4690K | Zotac GTX 970 | 16Gb RAM | 256Gb Samsung 830 SSD
NAS: HP Microserver Gen8 | 12GB DDR2 Ram | 3x1.5Tb ZFS | FreeNAS

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Jadu.. ta bort <html> så blir det nog bra.

<!DOCTYPE html>
<html> <---- BORT

Trött som fan. Nej, inge fel med html taggen. Se inlägg nedanför istället.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Ser att du gjort mer fel.
Du har t.ex glömt <head></head>

Så här bör det se ut före dig.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="base.css" media="all" /> </head> <body> <div id="TOP">TOP</div> <div id="LEFT">LEFT</div> <div id="RIGHT">RIGHT</div> </body> </html>

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Registrerad
Dec 2012
Skrivet av Florrpan:

Jadu.. ta bort <html> så blir det nog bra.

<!DOCTYPE html>
<html> <---- BORT

Doctype beskriver bara vilken version av html dokumentet är skrivet i, det har inget med html taggen att göra.

Trädvy Permalänk
Medlem
Plats
Skellefteå
Registrerad
Okt 2008
Skrivet av Florrpan:

Jadu.. ta bort <html> så blir det nog bra.

<!DOCTYPE html>
<html> <---- BORT

Tvärtom, den ska inte alls bort.

Däremot har du rätt vad gäller head-elementet.

1800X, 2080 Ti, 4K

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

My bad, riktigt trött här. Råkade tro att hanh öppnade dubbla html taggar.

Hursom så saknas det saker.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Registrerad
Dec 2012
Skrivet av Florrpan:

My bad, riktigt trött här. Råkade tro att hanh öppnade dubbla html taggar.

Hursom så saknas det saker.

Inga problem men du har helt rätt med att css länkningen ska ligga inom <head></head>

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Om hemsidan alltid ska vara efter skärmens storlek så är det bättre att du använder dig av "vh" istället för %.

height: 100vh = 100% viewport height. Dvs, den kommer alltid vara exakt den höjden.
Exempel: (jag la även till 0 margin/padding)
https://jsfiddle.net/tuoj4u3n/

Anledningen till att din 90% höjd inte expanderar är för att.. det inte finns något innehåll som tar upp 90% av rutan.
Men det är fortfarande trixit. Vad händer när någon surfar på mobilen och lägger telefonen till landskapsläge?
10% höjd på en stor skärm fungerar, men är jäääävligt lite på en mobil enhet, för procenten är relativt till skärmens storlek. Därför fungerar inte det du vill göra så bra på små skärmar.

Så här kommer det se ut på en mobil...

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Forumledare
Registrerad
Okt 2002
Skrivet av Florrpan:

Ser att du gjort mer fel.
Du har t.ex glömt <head></head>

Skrivet av backfeed:

Däremot har du rätt vad gäller head-elementet.

<head> är en "valbar tagg" i HTML5, så den behövs generellt inte skrivas ut. Se HTML5 8.1.2.4 Optional tags.

Däremot är <title> obligatorisk om man ska vara petig, men jag tror inte någon webbläsare får några vidare problem ifall den saknas.

Följande är ett komplett och välformat HTML5-dokument:

<!doctype html> <title>Hello, world</title>

Med några tillägg, och ett insprängt DOM-quiz (!):

<!doctype html> <meta charset="utf-8"> <title>Hello, world</title> <link rel="stylesheet" href="css/main.css"> <script src="js/main.js"></script> <style> body { color: cyan; } p { color: black; } </style> <h1>Vi har i och med detta rubrikelement stängt head och öppnat body</h1> <p> Första paragrafen, som automatiskt stänger sig själv då paragrafer inte kan innehålla "block level"-element. <p> Andra paragrafen, som vi låter följas av en numrerad lista (fråga: är listan en del av denna paragraf?): <ol> <li>Punkt 1: stängning impliceras av att nästa punkt öppnas. <li>Punkt 2: stängning impliceras av att listan stängs. </ol> Till vilket element hör denna text? <p> På samma sätt kan vi "snåla" med taggarna i tabeller (fråga: är tabellen en del av denna paragraf?): <table> <tr> <td>Rad 1, cell 1: stängning impliceras av att nästa cell öppnas. <td>Rad 1, cell 2: stängning impliceras av att nästa rad öppnas. <tr> <td>Rad 2, cell 1: stängning impliceras av att nästa cell öppnas. <td>Rad 2, cell 2: stängning impliceras av att tabellen stängs. </table> <p> Om detta ser okonventionellt ut, så kan man lägga märke till att vi i ovanstående tabell även implicerat en tbody-tagg när vi öppnade första raden (som stängdes implicit när tabellen stängdes). Även om man tycker att man skriver "XHTML-likt" med explicit stängda taggar så finns det flera ställen där taggar impliceras, men det är sällan farligt. <hr> <p> Exempel på problem med att förlita sig på en alltför förenklad syn på regler om stängda taggar följer. <p style="color: green"> Här kommer en <p style="color: red">gåta</p>: vilken färg har → denna (1) ← text? Varför? </p> <p style="color: green"> Här kommer ytterligare en <span style="color: red">gåta</span>: vilken färg har → denna (2) ← text? Varför? <p style="color: green"> Här kommer ytterligare en <div style="color: red">gåta</div>: vilken färg har → denna (3) ← text? Varför? <hr> <p> Utifrån svaren på ovanstående gåtor: vilken/vilka av följande två länkkonstruktioner är giltiga? Varför? <h2><a href="//example.com">Länkad rubrik 1</a></h2> <a href="//example.com"><h2>Länkad rubrik 2</h2></a> <hr> <p> Vi behöver inte avsluta body- eller html-taggen: det impliceras av filslut.

Ladda ovanstående exempel i en webbläsare och spana på DOM-trädet i inspektionsläget om det känns märkligt. Det är väldigt bra att förstå och ha kontroll över renderingen av varje element i detta exempel för att inte behöva slita sitt hår över oväntade dokumenttolkningar — det finns tillräckligt många fällor ändå.


Äldre utläggning på samma tema.

Tog bort body-element som kom med av misstag — meningen var ju att visa kod _utan_ sådana element :-)

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Trädvy Permalänk
Medlem
Plats
Valbo
Registrerad
Aug 2002

ja <head> saknas men vad jag vet så behövs inte det längre, inte <html> heller egentligen.

height: 100vh måste jag prova. Fast det fungerar just nu med 100% när <html> och <body> fick 100% height i css.

"Web-appen" har mycket begränsad spridning och kommer inte användas på annat än PC och IE/Chrome.

Men om den nu ska byggas ut så finns möjligheten att ladda en annan CSS för små skärmar.

Desktop: | Core i5-4690K | Zotac GTX 970 | 16Gb RAM | 256Gb Samsung 830 SSD
NAS: HP Microserver Gen8 | 12GB DDR2 Ram | 3x1.5Tb ZFS | FreeNAS

Trädvy Permalänk
Medlem
Plats
Skellefteå
Registrerad
Okt 2008
Skrivet av phz:

<head> är en "valbar tagg" i HTML5, så den behövs generellt inte skrivas ut. Se HTML5 8.1.2.4 Optional tags.

Däremot är <title> obligatorisk om man ska vara petig, men jag tror inte någon webbläsare får några vidare problem ifall den saknas.

...

<p style="color: green"> Här kommer en <p style="color: red">gåta</p>: vilken färg har → denna (1) ← text? Varför? </p>

...

Ok, intressant. Mycket av exemplet ser extremt fel ut för mig som är van reglerna från uråldriga tider, men jag har helt enkelt inte hängt med.

Jag körde det utökade exemplet i ett par html-validatorer bara för att se, och samtliga anmärkte på att den sista

</p>

i urklippet ovan inte är ok dock, eftersom en paragraf inte kan innehålla en annan paragraf. Således är inte exemplet ett korrekt html5-dokument till 100%.

1800X, 2080 Ti, 4K

Trädvy Permalänk
Forumledare
Registrerad
Okt 2002
Skrivet av backfeed:

Ok, intressant. Mycket av exemplet ser extremt fel ut för mig som är van reglerna från uråldriga tider, men jag har helt enkelt inte hängt med.

Jag körde det utökade exemplet i ett par html-validatorer bara för att se, och samtliga anmärkte på att den sista

</p>

i urklippet ovan inte är ok dock, eftersom en paragraf inte kan innehålla en annan paragraf. Således är inte exemplet ett korrekt html5-dokument till 100%.

Ja, anledningen till att den konstruktionen inte är giltig är för att det inte finns någon <p>-tagg kvar att stänga där, vilket diaboliskt nog var den poäng jag försökte påvisa — taggen har implicit stängts av den tidigare <p>-taggen, så texten som skjuter över är en del av <body> (vilket man ser på den renderade textfärgen i en webbläsare), trots att det ser ut som att man har nästlat sina taggar rätt. Den enda funktion </p> har här är att förvirra en mänsklig läsare, vilket är en anledning till att jag anser att man som tumregel hellre bör snåla (och ha koll på vilka sluttaggar som är valbara, och varför!) än strössla med sluttaggar.

Alltså: det ställe i exemplet som egentligen ser "mest rätt" ut för den som tror hårt på att man behöver ha sluttaggar till allt, är det enda stället som inte är giltig uppmärkning. Lägg in ett "galen vetenskapsman"-skratt här.

Mitt andra bus ovan var exemplet med länken (inline-element) och <h2>-taggen (blockelement). Om man precis fått inpräntat att inline-element inte kan innehålla blocknivå-element så borde man dra slutsatsen att varianten <a><h2>…</h2></a> är ogiltig, men liksom de validatorer du testade påvisade så är det en giltig konstruktion — varför då? Meningen är att ha ett exempel som visar att reglerna inte alltid är så strikt enkla som man kan tro.

Kort sagt så är mantrat: HTML är inte XML. XHTML var ett illa mottaget försökt från W3C att skapa någon sorts hybrid (som kombinerade alla problem med båda approacherna, och adderade några egna…), men branschen valde att gå en annan väg.

Man kan också notera att de allra flesta av dessa implicita regler inte är några "nyheter" i HTML5 utan alltid har gällt vad gäller HTML, och redan tidigare har varit källor till förvirring för utvecklare.

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.