Premiär! Fyndchans i SweClockers Månadens Drop
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

HTML/CSS och <!DOCTYPE html>

1
Skriv svar
Permalänk
Medlem
●

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;
}
Visa signatur

Desktop: Ryzen 9 3950x | RTX 2060 | 16Gb RAM | 512Gb + 256Gb SSD
NAS: HP Microserver Gen8 | 8GB Ram | 3x2Tb ZFS | FreeNAS
SRV: HP ML350p Gen8 | 64GB Ram | 2x E5-2630v2 | ESXI

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Senast redigerat
Visa signatur

Grubblare

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Gå till inlägget

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.

Visa signatur

Desktop: Ryzen 9 3950x | RTX 2060 | 16Gb RAM | 512Gb + 256Gb SSD
NAS: HP Microserver Gen8 | 8GB Ram | 3x2Tb ZFS | FreeNAS
SRV: HP ML350p Gen8 | 64GB Ram | 2x E5-2630v2 | ESXI

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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>
Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Florrpan:

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

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

Gå till inlägget

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

Visa signatur

Jobbdator: Macbook Pro 16" | M1 Pro | 32GB RAM | 1TB Lagring

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Florrpan:

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

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

Gå till inlägget

Tvärtom, den ska inte alls bort.

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

Visa signatur

5950X, 3090

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Hursom så saknas det saker.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Florrpan:

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

Hursom så saknas det saker.

Gå till inlägget

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

Visa signatur

Jobbdator: Macbook Pro 16" | M1 Pro | 32GB RAM | 1TB Lagring

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
Skrivet av Florrpan:

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

Gå till inlägget
Skrivet av backfeed:

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

Gå till inlägget

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

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

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Visa signatur

Desktop: Ryzen 9 3950x | RTX 2060 | 16Gb RAM | 512Gb + 256Gb SSD
NAS: HP Microserver Gen8 | 8GB Ram | 3x2Tb ZFS | FreeNAS
SRV: HP ML350p Gen8 | 64GB Ram | 2x E5-2630v2 | ESXI

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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>

...

Gå till inlägget

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

Visa signatur

5950X, 3090

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
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%.

Gå till inlägget

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.

Visa signatur

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara