Layout - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.14

2020-10-31T13:14:16Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.14
Rad 50:		Rad 50:

	En enkel lösning kan vara att även sätta <code>[[float]]</code> på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen <code>clearfix</code> till de blockelement som kräver en fix så bör allt fungera bra.		En enkel lösning kan vara att även sätta <code>[[float]]</code> på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen <code>clearfix</code> till de blockelement som kräver en fix så bör allt fungera bra.
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.clearfix::after {		.clearfix::after {
Rad 58:		Rad 57:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.		Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.

PGJ: /* Påverkan på föräldraelementets storlek */

2019-01-11T21:48:21Z

Påverkan på föräldraelementets storlek

← Äldre version		Versionen från 11 januari 2019 kl. 21.48
Rad 50:		Rad 50:

	En enkel lösning kan vara att även sätta <code>[[float]]</code> på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen <code>clearfix</code> till de blockelement som kräver en fix så bör allt fungera bra.		En enkel lösning kan vara att även sätta <code>[[float]]</code> på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen <code>clearfix</code> till de blockelement som kräver en fix så bör allt fungera bra.
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.clearfix::after {		.clearfix::after {
Rad 57:		Rad 58:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.		Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.

PGJ: /* Problem med layoutflödet */

2019-01-08T21:02:22Z

Problem med layoutflödet

← Äldre version		Versionen från 8 januari 2019 kl. 21.02
Rad 43:		Rad 43:

	== Problem med layoutflödet ==		== Problem med layoutflödet ==
	=== Blandning av floatade/icke ~~<code>float</code>ade~~ element ===		=== Blandning av floatade/icke floatade element ===
	Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma en situation där element täcker över varandra. Oftast är det lösbart genom att använda sig av <code>[[clear]]</code>-egenskapen. Men man kanske inte alltid märker alla möjliga kombinationer som kan uppstå, speciellt om man gjort en webbsida som ska innehålla dynamiskt innehåll och därför förändrar sig då och då.		Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma en situation där element täcker över varandra. Oftast är det lösbart genom att använda sig av <code>[[clear]]</code>-egenskapen. Men man kanske inte alltid märker alla möjliga kombinationer som kan uppstå, speciellt om man gjort en webbsida som ska innehålla dynamiskt innehåll och därför förändrar sig då och då.

PGJ: /* Problem med layoutflödet */

2019-01-08T21:02:00Z

Problem med layoutflödet

← Äldre version		Versionen från 8 januari 2019 kl. 21.02
Rad 43:		Rad 43:

	== Problem med layoutflödet ==		== Problem med layoutflödet ==
	=== Blandning av floatade/icke ~~floatade~~ element ===		=== Blandning av floatade/icke <code>float</code>ade element ===
	Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma en situation där element täcker över varandra. Oftast är det lösbart genom att använda sig av <code>[[clear]]</code>-egenskapen. Men man kanske inte alltid märker alla möjliga kombinationer som kan uppstå, speciellt om man gjort en webbsida som ska innehålla dynamiskt innehåll och därför förändrar sig då och då.		Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma en situation där element täcker över varandra. Oftast är det lösbart genom att använda sig av <code>[[clear]]</code>-egenskapen. Men man kanske inte alltid märker alla möjliga kombinationer som kan uppstå, speciellt om man gjort en webbsida som ska innehålla dynamiskt innehåll och därför förändrar sig då och då.

PGJ: /* clear */

2019-01-08T20:59:43Z

clear

← Äldre version		Versionen från 8 januari 2019 kl. 20.59
Rad 28:		Rad 28:
	Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.		Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.

	Genom att lägga till en <code>clear</code> kan vi ~~få till~~ föregående exempel ~~på rätt sätt~~.		Genom att lägga till en <code>clear</code> kan vi fixa föregående exempel.
	<codepen pen="majPJQ" tab="css,result" height="250">		<codepen pen="majPJQ" tab="css,result" height="250">
	</codepen>		</codepen>
Rad 41:		Rad 41:
	==== <code>right</code> ====		==== <code>right</code> ====
	Precis som ovanstående, fast nu gällandes den högersidan.		Precis som ovanstående, fast nu gällandes den högersidan.

	~~=== Ett exempel ===~~
	~~I följande exempel skapar vi tre flytande element som ligger bredvid varandra, dock så puttar vi ner det tredje element på en egen rad med hjälp av <code>clear</code>.~~
	~~<codepen pen="rrRwoz" tab="css" height="300">~~
	~~</codepen>~~

	== Problem med layoutflödet ==		== Problem med layoutflödet ==

PGJ: /* clear */

2019-01-08T20:58:53Z

clear

← Äldre version		Versionen från 8 januari 2019 kl. 20.58
Rad 31:		Rad 31:
	<codepen pen="majPJQ" tab="css,result" height="250">		<codepen pen="majPJQ" tab="css,result" height="250">
	</codepen>		</codepen>


	=== <code>clear</code>-värden ===		=== <code>clear</code>-värden ===

PGJ: /* clear */

2019-01-08T20:58:32Z

clear

← Äldre version		Versionen från 8 januari 2019 kl. 20.58
Rad 27:		Rad 27:

	Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.		Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.

			Genom att lägga till en <code>clear</code> kan vi få till föregående exempel på rätt sätt.
	<codepen pen="majPJQ" tab="css,result" height="250">		<codepen pen="majPJQ" tab="css,result" height="250">
	</codepen>		</codepen>

			=== <code>clear</code>-värden ===
	Man kan ange följande värden för egenskapen.		Man kan ange följande värden för egenskapen.
	=== <code>both</code> ===		==== <code>both</code> ====
	Det får inte förekomma någonting flytande på någon sida av elementet. Elementet förflyttas så långt ner att det ligger "ensamt".		Det får inte förekomma någonting flytande på någon sida av elementet. Elementet förflyttas så långt ner att det ligger "ensamt".
	=== <code>left</code> ===		==== <code>left</code> ====
	Det får inte förekomma något flytande element på vänstra sidan. Elementet flyttas ned så långt att dess vänstra sida är "ren" ifrån andra flytande element.		Det får inte förekomma något flytande element på vänstra sidan. Elementet flyttas ned så långt att dess vänstra sida är "ren" ifrån andra flytande element.
	=== <code>right</code> ===		==== <code>right</code> ====
	Precis som ovanstående, fast nu gällandes den högersidan.		Precis som ovanstående, fast nu gällandes den högersidan.

PGJ: /* clear */

2019-01-08T20:53:45Z

clear

← Äldre version		Versionen från 8 januari 2019 kl. 20.53
Rad 25:		Rad 25:
	</codepen>		</codepen>
	Man skulle kunna manipulera de första två boxarnas bredd, så att de "puttar" ned efterföljande. Men det finns ett enklare och vettigare sätt att göra detta.		Man skulle kunna manipulera de första två boxarnas bredd, så att de "puttar" ned efterföljande. Men det finns ett enklare och vettigare sätt att göra detta.
	~~<codepen pen="ebjJwz" tab="css,result" height="250">~~
	~~</codepen>~~

	Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.		Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.
			<codepen pen="majPJQ" tab="css,result" height="250">
			</codepen>

	Man kan ange följande värden för egenskapen.		Man kan ange följande värden för egenskapen.

PGJ: /* clear */

2019-01-08T20:52:43Z

clear

← Äldre version		Versionen från 8 januari 2019 kl. 20.52
Rad 21:		Rad 21:

	== <code>clear</code> ==		== <code>clear</code> ==
	När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta samman på en rad, ~~men att den tredje~~ ska ~~hamna~~ under ~~dem~~. Om du enbart använder <code>[[float]]</code>		När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta samman på en rad, medan de efterföljande boxarna ska ligga på raden under. Om du enbart använder <code>[[float]]</code>, kommer det att bli svårt att få till och det kommer att se ut ungefär så här.
			<codepen pen="ebjJwz" tab="css,result" height="250">
			</codepen>
			Man skulle kunna manipulera de första två boxarnas bredd, så att de "puttar" ned efterföljande. Men det finns ett enklare och vettigare sätt att göra detta.
	<codepen pen="ebjJwz" tab="css,result" height="250">		<codepen pen="ebjJwz" tab="css,result" height="250">
	</codepen>		</codepen>
	~~Om du enbart använder <code>[[float]]</code> måste du manipulera de första två boxarnas bredd, så att de "puttar" ned den tredje. Men det finns ett enklare och vettigare sätt att göra detta.~~

	Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.		Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.

PGJ: /* clear */

2019-01-08T20:47:07Z

clear

← Äldre version		Versionen från 8 januari 2019 kl. 20.47
Rad 21:		Rad 21:

	== <code>clear</code> ==		== <code>clear</code> ==
	När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta samman på en rad, men att den tredje ska hamna under dem. Om du enbart använder <code>[[float]]</code> ~~måste du manipulera de första två boxarnas bredd, så att de "puttar" ned den tredje. Men det finns ett enklare och vettigare sätt att göra detta.~~		När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta samman på en rad, men att den tredje ska hamna under dem. Om du enbart använder <code>[[float]]</code>

	<codepen pen="ebjJwz" tab="css,result" height="250">		<codepen pen="ebjJwz" tab="css,result" height="250">
	</codepen>		</codepen>
			Om du enbart använder <code>[[float]]</code> måste du manipulera de första två boxarnas bredd, så att de "puttar" ned den tredje. Men det finns ett enklare och vettigare sätt att göra detta.

	Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.		Med hjälp av CSS-egenskapen <code>[[clear]]</code> kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder den på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element, den andra kanten kan dock fortfarande ligga mot ett flytande element.