CSS, lik høyde

gonzalez7 · 30. april 2008

Skulle gjerne hatt samme høyde på de to kolonnene, så jeg ikke får en større glippe på den ene, ned til footer. Er ferdig layout som jeg har tilpasset. Farger, design osv er kanskje ikke optimalt, men foreløpig er det bare menyen som er bankers, og kanskje den røde bakgrunnen.

http://bildr.no/view/191861

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(images/background.png);
}
li{list-style-type:none;}
a {color: #317486;	background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
#wrapper { 
margin: 0 auto;
width: 922px;

}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn { 
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding-right: 8px;
padding-bottom: 10px;
height: 350px;
width: 195px;
float: left;
}

#navigation {
width: 200px;
}

#navigation li a {
height: 32px;
  voice-family: "\"}\""; 
  voice-family: inherit;
  height: 24px;
text-decoration: none;
}	

#navigation li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}

#navigation li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#navigation li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}

#rightcolumn { 
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 678px;
display: inline;
}
#footer { 
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
text-align: center;
}

#design {
text-align:right;
margin-right: 180px;
font-size: 10px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="xxxx/>
<meta name="description" content="xxxxx." />
<meta name="keywords" content="" />	
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="main.css" type="text/css" />
<title>xxxx</title>
</head>

<body>

  <!-- Begin Wrapper -->
  <div id="wrapper">

	 <!-- Begin Header -->
	 <div id="header">

		   Logo
	 </div>
	 <!-- End Header -->

	 <!-- Begin Left Column -->
	 <div id="leftcolumn">

<div id="navigation">
	<ul>
		<li><a href="1.html" title="Meny 1">Meny 1</a></li>
		<li><a href="2.html" title="Meny 2">Meny 2</a></li>
		<li><a href="3.html" title="Meny 3">Meny 3</a></li>
		<li><a href="4.html" title="Meny 4">Meny 4</a></li>
		<li><a href="5.html" title="Meny 5">Meny 5</a></li>
		<li><a href="6.html" title="Meny 6">Meny 6</a></li>
	</ul>
</div>

	 </div>
	 <!-- End Left Column -->

	 <!-- Begin Right Column -->
	 <div id="rightcolumn">

				<p>
							Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
							Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
							</p>	 
				<p>
							Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
							Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
							</p>
				<p>
							Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
							Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
							</p>
				<p>
						   Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						   Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						   </p>
			   <p>
						  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						  Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						  </p>
			  <p>
						  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						  Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						  </p>
			  <p>
						  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
						  Tekst Tekst  Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst</p>

	 </div>
	 <!-- End Right Column -->

	 <!-- Begin Footer -->
	 <div id="footer">

		   © Copyright 2008

	 </div>
	 <!-- End Footer -->

  </div>
  <!-- End Wrapper -->

<div id="design">Designed by xxxx</div>

</body>
</html>

FrodeNilsen · 30. april 2008

Dette er en velkjent problemstilling som typisk forbigås i det stille da ingen ser ut til å ha en skikkelig løsning.

Definisjonen av floats gjør at det blir vanskelig å oppnå det du forsøker å oppnå. Ett flytende element påvirker ikke høyden til ett annet ikke flytende søsken-element og omvendt.

Det finnes en definisjon av tabell liknende elementer, men disse har jeg ikke fått klarhet i om er trygge å bruke eller om de er tilstrekkelig definerte.

http://www.w3.org/TR/CSS21/tables.html#table-display

Du kan da lage en div som fungerer som ett tabell element, en div som fungerer som ett rad element, og du kan benytte de elementene du har som hver sin celle. Du kan da etterlikne en tabell.

Med en slik struktur burde det gå ann å oppnå det du forsøker å oppnå.

Jesper Karsrud · 1. mai 2008

Hvis du skal bruke bakgrunnsbilder bak menyen og innholdsfeltet, kan du bruke Faux Columns til å "fake" lik høyde på elementene.

FrodeNilsen · 1. mai 2008

Hvis du skal bruke bakgrunnsbilder bak menyen og innholdsfeltet, kan du bruke Faux Columns til å "fake" lik høyde på elementene.

En interesant teknikk, men den forutsetter absolute posisjonering. Man kan like gjerne definere fast høyde på boksene, noe man må med absolute posisjonering uansett.

Hvis du har en boks med ett flytende element og ett fixed element, så er det kun det siste av disse, fixed, som vil bestemme høyden på foreldre elementet. Dette er det ikke gitt noen forklarende løsning på i denne artikkelen. Hva skjer når det flytende elementet er høyest?

Løsningen i linken er også ett "hack".

Haraldson · 4. mai 2008

Hvis du skal bruke bakgrunnsbilder bak menyen og innholdsfeltet, kan du bruke Faux Columns til å "fake" lik høyde på elementene.
En interesant teknikk, men den forutsetter absolute posisjonering. Man kan like gjerne definere fast høyde på boksene, noe man må med absolute posisjonering uansett.

Begynner å bli litt lei av at det meste du ytrer her inne, ikke har noen faglig forankring. Nei, det krever ikke absolutt posisjonering. Ja, det krever statisk bredde på elementene.

En benytter floats som vanlig, og har et container-element med bakgrunn som repeteres nedover. Så kan jo du, Frode, for eksempel lese deg opp på Containing floats (som ikke er en bug), og hvordan denne kan manipuleres om en vil det, slik som vist på siden jeg lenket til.

display: table; er dårlig støttet av blant annet IE6, og er egentlig ganske uaktuelt foreløpig. Regner også med at kommer mer latente metoder for å oppnå slike ting i fremtidige versjoner av CSS, og at en ikke må se seg nødt til å simulere en tabell.

FrodeNilsen · 4. mai 2008

Hvis du skal bruke bakgrunnsbilder bak menyen og innholdsfeltet, kan du bruke Faux Columns til å "fake" lik høyde på elementene.
En interesant teknikk, men den forutsetter absolute posisjonering. Man kan like gjerne definere fast høyde på boksene, noe man må med absolute posisjonering uansett.

Begynner å bli litt lei av at det meste du ytrer her inne, ikke har noen faglig forankring. Nei, det krever ikke absolutt posisjonering. Ja, det krever statisk bredde på elementene.

En benytter floats som vanlig, og har et container-element med bakgrunn som repeteres nedover. Så kan jo du, Frode, for eksempel lese deg opp på Containing floats (som ikke er en bug), og hvordan denne kan manipuleres om en vil det, slik som vist på siden jeg lenket til.

display: table; er dårlig støttet av blant annet IE6, og er egentlig ganske uaktuelt foreløpig. Regner også med at kommer mer latente metoder for å oppnå slike ting i fremtidige versjoner av CSS, og at en ikke må se seg nødt til å simulere en tabell.

Artikkelen du linker til gjør ett poeng ut av at ett flytende element vil skalere med sine barn noder hvis de også er flytende. Godt poeng. Det var jeg ikke klar over.

Kanskje Haraldson kan være så vennlig å forklare oss hvordan han mener dette skal benyttes for å bruke teknikken jeg har sagt at en annen artikkel ikke forteller oss hvordan vi gjør med floats. Det må jo også omskrives slik at det kan benyttes på det opprinnelige problemet i tråden, ikke på problemene i hodet på skribentene her.

Hva i all hverden har jeg ytret i denne tråden som ikke har faglig forankring? Hver gang jeg kommer med påstander du ikke liker blir du frekk. Hvis det jeg har skrevet er så ufaglig, så burde du ha ryggmarg til å påpeke hva som er faglig galt i det jeg skriver.

Jeg forstår ikke helt at denne teknikken er uten "bugs". Teknikken benytter da br-elementer utelukkende for formatering og ikke for å oppnå struktur eller gi innhold. Elementet benyttes etter en float for å tvinge containing block til å skalere, som var det opprinnelige problemet. Dette er ett hack, og i sammendraget i artikkelen omtales behovet for hack ved å benytte teknikken den omtaler. Hvorfor man i all hverden ikke benytter float i float isteden fatter jeg ikke, men det gidder jeg ikke forklare med adresse Haraldson. Trådstarter kan sende PM så skal jeg beskrive en elegant løsning med minimalt eller ingen hacks, på e-post.

Det vil bli særs vanskelig å få fagfolk til å skrive mer på ett forum der moderatorer er så ufine som Haraldson er her og har vært i fortiden. Jeg har i utalje tråder vist at jeg har kunnskaper som Haraldson mangler. Nivået er jo ikke akkurat skyhøyt her, ei heller på Haraldson sine innlegg, og mye som skrives er hacks og ikke i tråd med definisjonene.

Det er høyst diskutabelt om hacks er fagkunnskap.

Haraldson · 4. mai 2008

Kanskje Haraldson kan være så vennlig å forklare oss hvordan han mener dette skal benyttes for å bruke teknikken jeg har sagt at en annen artikkel ikke forteller oss hvordan vi gjør med floats. Det må jo også omskrives slik at det kan benyttes på det opprinnelige problemet i tråden, ikke på problemene i hodet på skribentene her.

En må kunne kombinere. En må også kunne være åpen for at det finnes flere aspekter ved en teknikk eller en teknologi (som CSS), når denne ikke fungerer rett ut av boksen. Nå er tilfeldigvis også Containing Floats-'problematikken' velkjent og veldokumentert.

Hva i all hverden har jeg ytret i denne tråden som ikke har faglig forankring? Hver gang jeg kommer med påstander du ikke liker blir du frekk. Hvis det jeg har skrevet er så ufaglig, så burde du ha ryggmarg til å påpeke hva som er faglig galt i det jeg skriver.

Absolutt posisjonering, kan like godt sette lik høyde (noe som for øvrig er horribelt, det er veldig få ting i en vanlig nettside en trenger å definere høyde på). Alt tatt rett ut av løse lufta, virker det som. Jeg vet ikke hva slags bakgrunn du har, men det virker som du avskriver veldig mye teknisk pga. dine egne begrensninger, istedenfor å godta at det finnes teknikker og metoder der ute du ikke selv vet om. Ta i det minste høyde for dette i innleggene dine, og legg vekk bastantheten. Jeg sier ikke at jeg er feilfri selv, og jeg har helt klart forbedringspotensiale, det jeg mener er at det går an å undersøke hvilke muligheter man har før man avskriver en teknikk helt.

Jeg forstår ikke helt at denne teknikken er uten "bugs". Teknikken benytter da br-elementer utelukkende for formatering og ikke for å oppnå struktur eller gi innhold. Elementet benyttes etter en float for å tvinge containing block til å skalere, som var det opprinnelige problemet. Dette er ett hack, og i sammendraget i artikkelen omtales behovet for hack ved å benytte teknikken den omtaler. Hvorfor man i all hverden ikke benytter float i float isteden fatter jeg ikke, men det gidder jeg ikke forklare med adresse Haraldson.

En bug er noe som gjør brukeropplevelsen forskjellig fra klient til klient eller plattform til plattform, en bug er ikke det samme som at en må gjøre noe ekstra i koden for å få det til å fungere slik en vil. Du kan like godt bruke et <hr>- eller <div>-element, det har ikke så mye å si. Og nei, hele poenget er vel at to kolonner skal være like høye, ikke at et ytre element skal strekke seg like langt som flytende innhold.

Det vil bli særs vanskelig å få fagfolk til å skrive mer på ett forum der moderatorer er så ufine som Haraldson er her og har vært i fortiden. Jeg har i utalje tråder vist at jeg har kunnskaper som Haraldson mangler. Nivået er jo ikke akkurat skyhøyt her, ei heller på Haraldson sine innlegg, og mye som skrives er hacks og ikke i tråd med definisjonene.

Tydeligvis godt nok nivå til å jobbe med relativt store kunder i norsk sammenheng. Jeg bryr meg ikke særlig mye om du er uenig. Du avskriver konstant gode svar i tråder og forteller ofte om tvilsomme, alternative framgangsmåter, og noen ganger må jeg få lov til å avskrive dine svar også.

Det er høyst diskutabelt om hacks er fagkunnskap.

Det er forskjell på hacks og teknikker for å få ting til å fungere. Å sette display: table; er ikke særlig logisk, det heller. Og jo, jeg syns absolutt at hacks er fagkunnskap. Noen ganger er hacks uungåelig. Noen ganger er det faktisk økonomiske aspektet høyst tilstedeværende, og forskjellene i tidsbruk for å implementere en 'hack' mot å gå den lange omveien for å gjøre noe på den 'rette' måten (som ofte innebærer å legge til mange flere elementer i HTML-en og skrive absurd, usemantisk CSS for å simulere oppførsel, blant annet) er utrolig store.

FrodeNilsen · 5. mai 2008

Kanskje Haraldson kan være så vennlig å forklare oss hvordan han mener dette skal benyttes for å bruke teknikken jeg har sagt at en annen artikkel ikke forteller oss hvordan vi gjør med floats. Det må jo også omskrives slik at det kan benyttes på det opprinnelige problemet i tråden, ikke på problemene i hodet på skribentene her.
En må kunne kombinere. En må også kunne være åpen for at det finnes flere aspekter ved en teknikk eller en teknologi (som CSS), når denne ikke fungerer rett ut av boksen. Nå er tilfeldigvis også Containing Floats-'problematikken' velkjent og veldokumentert.

Hva i all hverden har jeg ytret i denne tråden som ikke har faglig forankring? Hver gang jeg kommer med påstander du ikke liker blir du frekk. Hvis det jeg har skrevet er så ufaglig, så burde du ha ryggmarg til å påpeke hva som er faglig galt i det jeg skriver.
Absolutt posisjonering, kan like godt sette lik høyde (noe som for øvrig er horribelt, det er veldig få ting i en vanlig nettside en trenger å definere høyde på). Alt tatt rett ut av løse lufta, virker det som. Jeg vet ikke hva slags bakgrunn du har, men det virker som du avskriver veldig mye teknisk pga. dine egne begrensninger, istedenfor å godta at det finnes teknikker og metoder der ute du ikke selv vet om. Ta i det minste høyde for dette i innleggene dine, og legg vekk bastantheten. Jeg sier ikke at jeg er feilfri selv, og jeg har helt klart forbedringspotensiale, det jeg mener er at det går an å undersøke hvilke muligheter man har før man avskriver en teknikk helt.

Jeg forstår ikke helt at denne teknikken er uten "bugs". Teknikken benytter da br-elementer utelukkende for formatering og ikke for å oppnå struktur eller gi innhold. Elementet benyttes etter en float for å tvinge containing block til å skalere, som var det opprinnelige problemet. Dette er ett hack, og i sammendraget i artikkelen omtales behovet for hack ved å benytte teknikken den omtaler. Hvorfor man i all hverden ikke benytter float i float isteden fatter jeg ikke, men det gidder jeg ikke forklare med adresse Haraldson.
En bug er noe som gjør brukeropplevelsen forskjellig fra klient til klient eller plattform til plattform, en bug er ikke det samme som at en må gjøre noe ekstra i koden for å få det til å fungere slik en vil. Du kan like godt bruke et <hr>- eller <div>-element, det har ikke så mye å si. Og nei, hele poenget er vel at to kolonner skal være like høye, ikke at et ytre element skal strekke seg like langt som flytende innhold.

Det vil bli særs vanskelig å få fagfolk til å skrive mer på ett forum der moderatorer er så ufine som Haraldson er her og har vært i fortiden. Jeg har i utalje tråder vist at jeg har kunnskaper som Haraldson mangler. Nivået er jo ikke akkurat skyhøyt her, ei heller på Haraldson sine innlegg, og mye som skrives er hacks og ikke i tråd med definisjonene.
Tydeligvis godt nok nivå til å jobbe med relativt store kunder i norsk sammenheng. Jeg bryr meg ikke særlig mye om du er uenig. Du avskriver konstant gode svar i tråder og forteller ofte om tvilsomme, alternative framgangsmåter, og noen ganger må jeg få lov til å avskrive dine svar også.

Det er høyst diskutabelt om hacks er fagkunnskap.
Det er forskjell på hacks og teknikker for å få ting til å fungere. Å sette display: table; er ikke særlig logisk, det heller. Og jo, jeg syns absolutt at hacks er fagkunnskap. Noen ganger er hacks uungåelig. Noen ganger er det faktisk økonomiske aspektet høyst tilstedeværende, og forskjellene i tidsbruk for å implementere en 'hack' mot å gå den lange omveien for å gjøre noe på den 'rette' måten (som ofte innebærer å legge til mange flere elementer i HTML-en og skrive absurd, usemantisk CSS for å simulere oppførsel, blant annet) er utrolig store.

Dette er ett typisk innlegg fra deg. Hvis jeg svarer på punktene her så kommer tråden helt ut på viddene, og du utviser forrakt for andre som ikke mener det samme som deg. Du kommer med lite fag, men en masse postulater som lett kan starte en diskusjonskrig.

Haraldson, jeg bad deg komme med ett eksempel som har relevans for denne tråden. I stedenfor masse svada som dreier seg om at du ikke liker trynet mitt og hvor forferdelig ufaglært og udugelig jeg skal være, kan du ikke vise hva du duger til å komme opp med noe faglig relevant for denne tråden som ett konkret kodeeksempel?

Med din bakgrunn burde du også kunne forklare de designmessige aspektene rundt kodevalget ditt, så vi kan sette ting i kontekst og forstå argumentene dine utifra en faglig begrunnelse som har relevans for tråden.

Logg inn

CSS, lik høyde

Anbefalte innlegg

gonzalez7

Lenke til kommentar

Videoannonse

FrodeNilsen

Lenke til kommentar

Jesper Karsrud

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Haraldson

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Haraldson

Lenke til kommentar

FrodeNilsen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer