Span- och div-element - Versionshistorik

PGJ: /* Att utelämna width och/eller height */

2019-04-12T07:02:57Z

Att utelämna width och/eller height

← Äldre version		Versionen från 12 april 2019 kl. 07.02
Rad 45:		Rad 45:
	* För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. Detta kan dock påverkas av inställningar i föräldraelementet, t.ex. så kan <code>padding</code> göra att inte all yta kan utnyttjas.		* För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. Detta kan dock påverkas av inställningar i föräldraelementet, t.ex. så kan <code>padding</code> göra att inte all yta kan utnyttjas.

	* För höjd så försöker webbläsaren räkna ut hur mycket ~~area~~ som behövs för att täcka allt innehåll. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.		* För höjd så försöker webbläsaren räkna ut hur mycket plats som behövs för att täcka allt innehåll inuti elementet. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.

	== Block är grunden till layout ==		== Block är grunden till layout ==

PGJ: /* Att utelämna width och/eller height */

2019-04-12T07:02:30Z

Att utelämna width och/eller height

← Äldre version		Versionen från 12 april 2019 kl. 07.02
Rad 43:		Rad 43:
	Om man inte anger någon höjd eller bredd kommer webbläsaren att använda ett par specifika förval:		Om man inte anger någon höjd eller bredd kommer webbläsaren att använda ett par specifika förval:

	* För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. ~~Dessa värden~~ kan påverkas av inställningar i ~~föräldra-elementet~~, t.ex. så kan <code>padding</code> göra att inte all yta kan utnyttjas.		* För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. Detta kan dock påverkas av inställningar i föräldraelementet, t.ex. så kan <code>padding</code> göra att inte all yta kan utnyttjas.

	* För höjd så försöker webbläsaren räkna ut hur mycket area som behövs för att täcka allt innehåll. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.		* För höjd så försöker webbläsaren räkna ut hur mycket area som behövs för att täcka allt innehåll. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.

	== Block är grunden till layout ==		== Block är grunden till layout ==

PGJ: /* Att utelämna width och/eller height */

2019-04-12T07:01:57Z

Att utelämna width och/eller height

← Äldre version		Versionen från 12 april 2019 kl. 07.01
Rad 41:		Rad 41:

	=== Att utelämna <code>[[width]]</code> och/eller <code>[[height]]</code> ===		=== Att utelämna <code>[[width]]</code> och/eller <code>[[height]]</code> ===
	Om man inte anger någon höjd eller bredd kommer webbläsaren att använda ett par specifika förval. För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. För höjd så försöker webbläsaren räkna ut hur mycket area som behövs för att täcka allt innehåll. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.		Om man inte anger någon höjd eller bredd kommer webbläsaren att använda ett par specifika förval:

			* För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. Dessa värden kan påverkas av inställningar i föräldra-elementet, t.ex. så kan <code>padding</code> göra att inte all yta kan utnyttjas.

			* För höjd så försöker webbläsaren räkna ut hur mycket area som behövs för att täcka allt innehåll. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.

			== Block är grunden till layout ==
	Det vi just nu gått igenom, ligger till grund för all layout med [[CSS]]. Vi kommer dock att behöva lite mer kunskap om CSS-egenskaper innan vi kan åstadkomma något snyggare än detta...		Det vi just nu gått igenom, ligger till grund för all layout med [[CSS]]. Vi kommer dock att behöva lite mer kunskap om CSS-egenskaper innan vi kan åstadkomma något snyggare än detta...

PGJ: /* <div> */

2019-04-12T06:59:33Z

<div>

← Äldre version		Versionen från 12 april 2019 kl. 06.59
Rad 33:		Rad 33:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Ovanstående [[CSS-regel]] kommer att skapa en enkel layout för de [[element]] som använder sig av ”<code>låda</code>”-klassen. I detta fall kommer vi att ändra på höjd och bredd, samt att vi sätter ~~så väl~~ förgrunds- som bakgrundsfärg. Detta gör att det kommer att se ut som en egen liten ”låda” eller box (hur det här fungerar kallas för "boxmodellen" och vi återkommer straxt till det).		Ovanstående [[CSS-regel]] kommer att skapa en enkel layout för de [[element]] som använder sig av ”<code>låda</code>”-klassen. I detta fall kommer vi att ändra på höjd och bredd, samt att vi sätter såväl förgrunds- som bakgrundsfärg. Detta gör att det kommer att se ut som en egen liten ”låda” eller box (hur det här fungerar kallas för "boxmodellen" och vi återkommer straxt till det).

	=== Att ange <code>[[width]]</code> och/eller <code>[[height]]</code> ===		=== Att ange <code>[[width]]</code> och/eller <code>[[height]]</code> ===

PGJ: /* <div> */

2019-04-12T06:58:44Z

<div>

← Äldre version		Versionen från 12 april 2019 kl. 06.58
Rad 17:		Rad 17:

	Ett enkelt exempel:		Ett enkelt exempel:
	<codepen pen="~~eNjGqO~~" tab="html,result" height="200">		<codepen pen="QPgqdN" tab="html,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<div class="låda"><p>En egen liten låda.</p></div>		<div class="låda"><p>En egen liten låda.</p></div>

PGJ: /* <div> */

2019-04-12T06:58:13Z

<div>

← Äldre version		Versionen från 12 april 2019 kl. 06.58
Rad 17:		Rad 17:

	Ett enkelt exempel:		Ett enkelt exempel:
	<codepen pen="eNjGqO" tab="html" height="200">		<codepen pen="eNjGqO" tab="html,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<div class="låda"><p>En egen liten låda.</p></div>		<div class="låda"><p>En egen liten låda.</p></div>

PGJ: /* <div> */

2019-04-12T06:57:35Z

<div>

← Äldre version		Versionen från 12 april 2019 kl. 06.57
Rad 22:		Rad 22:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Detta skapar en eget blockelement, som innehåller ett <code>[[p]]</code>-element, som i sin tur har textinnehållet ”<code>En egen liten låda</code>”. <code>[[~~Div~~]]</code>-elementet tilldelas även [[class\|klass]]en ”<code>låda</code>”, vilket gör att vi enkelt kan påverka dess utseende med hjälp av lite [[CSS]]:		Detta skapar en eget blockelement, som innehåller ett <code>[[p]]</code>-element, som i sin tur har textinnehållet ”<code>En egen liten låda</code>”. <code>[[div]]</code>-elementet tilldelas även [[class\|klass]]en ”<code>låda</code>”, vilket gör att vi enkelt kan påverka dess utseende med hjälp av lite [[CSS]]:
	<codepen pen="eNjGqO" tab="css,result" height="200">		<codepen pen="eNjGqO" tab="css,result" height="200">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">

PGJ: /* <span> */

2019-04-12T06:57:16Z

<span>

← Äldre version		Versionen från 12 april 2019 kl. 06.57
Rad 6:		Rad 6:
	Ett exempel på användningen:		Ett exempel på användningen:
	<codepen pen="jPpGJX" tab="html" height="150">		<codepen pen="jPpGJX" tab="html" height="150">
	~~<syntaxhighlight lang="html5">~~
	~~<p>Denna text är <span class=”green”>grön</span>.</p>~~
	~~</syntaxhighlight>~~
	</codepen>		</codepen>
	Här skapar vi ett <code>[[span]]</code>-element med textinnehållet ~~”grön”~~. Vi kopplar även elementet till en [[class\|klass]], som heter ~~”green”~~. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig [[semantik\|semantisk]] betydelse.		Här skapar vi ett <code>[[span]]</code>-element med textinnehållet ”vit”. Vi kopplar även elementet till en [[class\|klass]], som heter ”vit”. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig [[semantik\|semantisk]] betydelse.

	Med hjälp av denna klasskoppling kan vi sedan skriva en [[CSS-regel]] som ställer om färgen, t.ex.:		Med hjälp av denna klasskoppling kan vi sedan skriva en [[CSS-regel]] som ställer om färgen, t.ex.:
	<codepen pen="jPpGJX" tab="css,result" height="175">		<codepen pen="jPpGJX" tab="css,result" height="175">
	~~<syntaxhighlight lang="html5">~~
	~~.green {~~
	~~color: green;~~
	}
	~~</syntaxhighlight>~~
	</codepen>		</codepen>

PGJ: /* <span> */

2019-02-12T13:19:23Z

<span>

← Äldre version		Versionen från 12 februari 2019 kl. 13.19
Rad 20:		Rad 20:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	~~Tryck på "Result"-fliken för att se hur exemplet blir att se ut i slutändan.~~

	== <code><[[div]]></code> ==		== <code><[[div]]></code> ==

PGJ: /* <span> */

2019-01-29T07:35:25Z

<span>

← Äldre version		Versionen från 29 januari 2019 kl. 07.35
Rad 5:		Rad 5:

	Ett exempel på användningen:		Ett exempel på användningen:
	<codepen pen="jPpGJX" tab="html," height="150">		<codepen pen="jPpGJX" tab="html" height="150">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<p>Denna text är <span class=”green”>grön</span>.</p>		<p>Denna text är <span class=”green”>grön</span>.</p>