css, høyde på div.

Luta · 2. mai 2008

LØST

Endret 2. mai 2008 av kaoset

Thullball · 3. mai 2008

Fant du en god løsning? Hadde vært fint om du noterte noen få ord om hva du gjorde

Haraldson · 4. mai 2008

Han la vel en <div style="clear: both"></div> i bunnen av container-diven, tenker jeg. I alle fall er det den enkleste løsningen som innebærer minst stress.

lassejl · 5. mai 2008

Finnes det andre? Isåfall lyst til å dele?

Haraldson · 5. mai 2008

http://www.google.no/search?q=clearing+flo...lient=firefox-a

Uansett hazzle i veldig mange tilfeller, du skal i alle fall være rimelig sikker på at det indre innholder ikke er bredere enn beholderen.

funkyboy · 6. mai 2008

http://www.google.no/search?q=clearing+flo...lient=firefox-a

Uansett hazzle i veldig mange tilfeller, du skal i alle fall være rimelig sikker på at det indre innholder ikke er bredere enn beholderen.

Jøss. Rett og slett overflow: auto; Genialt. Aldri tenkt på den. Thanks for the link! :-)

FrodeNilsen · 6. mai 2008

http://www.google.no/search?q=clearing+flo...lient=firefox-a

Uansett hazzle i veldig mange tilfeller, du skal i alle fall være rimelig sikker på at det indre innholder ikke er bredere enn beholderen.

Jøss. Rett og slett overflow: auto; Genialt. Aldri tenkt på den. Thanks for the link! :-)

Overflow:auto er ganske løst definert i css spekken. Dette gjenspeiles også i implementasjonene i nettleserene.

Haraldson har også poengtert dette med bredden på innholdet som ikke gjør ting så fantastisk mye enklere det heller.

funkyboy · 6. mai 2008

http://www.google.no/search?q=clearing+flo...lient=firefox-a

Uansett hazzle i veldig mange tilfeller, du skal i alle fall være rimelig sikker på at det indre innholder ikke er bredere enn beholderen.

Jøss. Rett og slett overflow: auto; Genialt. Aldri tenkt på den. Thanks for the link! :-)

Overflow:auto er ganske løst definert i css spekken. Dette gjenspeiles også i implementasjonene i nettleserene.

Haraldson har også poengtert dette med bredden på innholdet som ikke gjør ting så fantastisk mye enklere det heller.

Dersom man fastsetter bredde på elementer, er nok neppe dette noe problem. :!:

FrodeNilsen · 6. mai 2008

Finnes det andre? Isåfall lyst til å dele?

Det finnes flere måter å løse dette på. Jeg har laget ett forslag til hvordan du kan gjøre dette med nøstede floats under.

Kommentarer finner du i koden.

Kode for nøstende floats

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <title>
	 Lag tabell med nøstede flytende elementer
  </title>
  <style type="text/css">

	/****
	Float
	* ***/

  		div.outer,
	div.outer div
	{
	float:left;
	}

	div.outer div div div
	{
	float: none;
	}

	/*****
	Margin
	******/

	*
	{
	margin:0;
	}

	div.outer div div
	{
	margin-left:5px;
	margin-right:5px;
	}		

	/******
	Padding
	*******/

	div,
	div.outer div div
	{
	padding:10px;
	}

	div.outer div
	{
	padding-left:5px;
	padding-right:5px;
	}		

	/****
	Width
	*****/

	div.outer
	{
	width:500px;
	}

	div.outer div
	{
	width:490px;
	}

	div.outer div.odd1 div,
	div.outer div.even1 div
	{
	width: 460px;
	}

	div.outer div.odd2 div,
	div.outer div.even2 div
	{
	width: 215px;
	}

	div.outer div.odd3 div,
	div.outer div.even3 div
	{
	width: 133px;
	}

	div.outer div.odd2 div div,
	div.outer div.even2 div div,
	div.outer div div div
	{
	width: auto;
	}

	/***************
	Background-color
	****************/

	div.outer
	{
	background-color:#ff0;
	}

	div.outer div.even1,
	div.outer div.even2,
	div.outer div.even3
	{
	background-color:#faf;
	}

	div.outer div.odd1,
	div.outer div.odd2,
	div.outer div.odd3
	{
	background-color:#afa;
	}

	div.outer div div
	{
	background-color:#aaf;
	}

	</style>
  </head>
  <body>
<div class="outer">
	<div class="odd2">
		<div>
			Dette er en ett eksempel på hvordan man kan benytte nøstede flytende
			elementer for å lage en tabell liknende struktur.
		</div>
		<div>
			Eksemplet er testet mot opera og IE7.  Det benyttes fast bredde som er
			oppgitt i px, noe som vil fungere rimelig stabilt med de fleste 
			nettlesere.  Det går ann å lage fungerende oppsett med bredde i %,
			men det er ikke planke å få disse til å fungere med Opera, langt
			mindre med IE7.
		</div>
	</div>
	<div class="even1">
		<div>
			Det benyttes ingen form for hacks i koden.  Ingen.  Det eneste som er
			tvilsomt er om det er smart å nøste altfor dypt.  Eksemplet nøster i
			tre nivåer, og om dette er bruk i tråd med w3c og industrien er litt
			uklart.
		</div>
	</div>
	<div class="odd2">
		<div>
			Det er ikke behov for å tenke kolonner da hver rad lever sitt eget liv.
			Tenk heller stilark og klasser, se kode.	
		</div>
		<div>
			Med det oppsettet jeg har satt opp trengs det ingen vanskelige
			matte formularer, det enkleste er egentlig bare å prøve seg
			frem med i trinn på for eksempel 5 som jeg har gjort.  Husk at
			du av og til må dele på 3, og da kan det fort gå litt surr.
		</div>
	</div>
	<div class="even1">
		<div>
			Hvordan noen kan kalle denne type kode for tungvindt eller omtale den 
			som semantisk korrupt er helt utenfor min fatteevne.  Det er snart
			bare IE som trenger odd/even klassene, noe som betyr at dette kan
			kan gjøres med kun en klasse og enda enklere css for moderne nettlesere.
		</div>
	</div>
	<div class="odd3">
		<div>
			De lekreste fargene er valgt kun for deg!	
		</div>
		<div>
			Som du ser så får ikke "kolonnene" i en rad lik høyde. height:100%;
			hjelper ikke en skit.
		</div>
		<div>
			Du kan simmulere fullhøyde kolonner ved å legge ett bakgrunnsbilde 
			i rad elementet og repetere bildet nedover.  Bakgrunnsbildet kan da
			tegne opp kolonne og vil skalere i henhold til det høyeste elementet
			 I raden.
		</div>
	</div>
	<div class="even1">
		<div>
			IE7 klarer ikke å gi cellene marg i bunn, så eksemplet benytter padding
			istedenfor.  Mulig det er flere bugs mot IE6 eller IE7, noe som ikke vil slå
			ned som noen bombe.
		</div>
	</div>
</div>	
  </body>
</html>

For å virkelig løse problemene med at kolonner på en rad ikke får samme høyde må du benytte display:table-cell. Se kommentarer i kode.

Det er enkelt å skrive litt om på disse eksemplene slik at de kan benytte samme html men forskjellig stilark og conditionals.

Table-cell kode eksempel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <title>Lag tabell med table-cell</title>
	<style type="text/css">

	/****
	Float
	* ***/

  		div
	{
	float:none;
	}

	/*****
	Border
	******/

	body div div
	{
	border-left: 2px solid #00f;
	}

	body div div div
	{
	border-left: 0;
	}

	/*****
	Margin
	******/

	*
	{
	margin:0;
	}

	/******
	Padding
	*******/

	div
	{
	padding:10px;
	}

	/****
	Table
	*****/

	body div div
	{
	display: table-cell;
	}		

	body div div div
	{
	display: block;
	}		

	/****
	Width
	*****/

	body div
	{
	width:520px;
	}

	body div.row1 div,
	body div.row3 div
	{
	width:239px;
	}

	body div.row2 div,
	body div.row4 div,
	body div.row6 div
	{
	width:499px;
	}

	body div.row5 div
	{
	width:152px;
	}

	body div div div
	{
	width:auto;
	}

	/***************
	Background-color
	****************/

	body div.row1,
	body div.row3,
	body div.row5
	{
	background-color:#ff0;
	}

	body div.row2,
	body div.row4,
	body div.row6
	{
	background-color:#0ff;
	}

	body div div
	{
	background-color:#f0f;
	}

	body div div div
	{
	background-color: transparent;
	}
	</style>
  </head>
  <body>
<div class="row1">
	<div>
		Dette er en ett eksempel på hvordan man kan benytte kun
		display:table-cell; for å oppnå lik høyde for kolonner.
	</div>
	<div>
		Eksemplet er testet mot opera, FF, og IE7.  IE7 støtter ikke
		denne teknikken, men siden er fult leslig.
		Nå er målet til MS å passere Acid2, og
		da må display:table-cell støttes.  Ved å benytte nøstende flytende
		elementer støttes uansett IE7 men jeg har ikke tested det mot IE6.
	</div>
</div>
<div class="row2">
	<div>
		Som for alle tabeller så har ikke celle-elementene marg.
	</div>
</div>
<div class="row3">
	<div>
		I dette eksemplet har jeg ikke benyttet moderne combinators,
		men kun det som i gamle dager ble kalt for rollover.  Dette
		vil si at jeg kun har benyttet desendant combinator i selector.
		Dette betyr at IE8 burde støtte denne koden.
	</div>
	<div>
		Teknikken benytter annonyme elementer og du bør lese avsnitt
		<a href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes">
			avsnitt 17.2.1 i CSS2.1 spekken.
		</a>
		I mange tilfeller vil du trenger ett foreldre element
		slik at den annonyme rekken som lages ikke blir ett søsken-element
		til ett tilsvarende anonymt søsken element.
	</div>
</div>
<div class="row4">
	<div>
		For n-te gang:  Hvordan noen kan kalle denne type kode for tungvindt
		eller omtale den som semantisk korrupt
		er helt utenfor min fatteevne.
		Det er uansett ett sylskarpt skille mellom formatering og innhold,
		og vedlikehold er vesentlig enklere enn alle andre alternativer.
	</div>
</div>
<div class="row5">
	<div>
		Nok en gang er de lekreste fargene valgt kun for deg!	
	</div>
	<div>
		Som du ser så får kolonnene i en rad lik høyde. Dette gjør at ting blir
		formatert slik de fleste forventer.
	</div>
	<div>
		:nth-child() og combinators er en del av acid3 og støtte for dette
		er like rundt hjørnet for FF, Opera, og Safari.
		"rowX" klassene blir da helt overflødige,
		og dette eksemplet gir en sterk indikasjon på
		hvordan fremtiden ser ut.
		Ingen vil ønske å gå tilbake når de forstår
		hvor enkelt dette er å jobbe med.
	</div>
</div>
<div class="row6">
	<div>
		Jeg har satt en border-left på cellene så du kan se hvor grensene går.
	</div>
</div>	
  </body>
</html>

Endret 7. mai 2008 av FrodeNilsen

Logg inn

css, høyde på div.

Anbefalte innlegg

Luta

Lenke til kommentar

Videoannonse

Thullball

Lenke til kommentar

Haraldson

Lenke til kommentar

lassejl

Lenke til kommentar

Haraldson

Lenke til kommentar

funkyboy

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

funkyboy

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer