DIV i stedet for TABLE

[HDSoftware]

Niks. Testet i GOOGLE CHROME, som bruker mozilla, og samme resultat.

 

Kan du ta en skjermdump av resultatet slik det er hos deg så jeg får se at det virker. Jeg fatter ikke hvorfor dette ikek virker hos meg. Jeg prøver t.o.m. på forskjellige maskiner.

[Gjest]

Kjører linux.

Skjermdump:

 

Kan godt teste med XP også.

 

XP testet. Null problem

Endret 5. juni 2009 av Gjest

[HDSoftware]

sånn er det hos meg også, men ta vekk en av linjene så ser du at det ikek funker lenger

[HDSoftware]

Eller, for å si det på en annen måte: Får du til dette med DIV så er jeg fornøyd:

[Simon Aldra]

Denne tråden var feilpostet og flyttes til Web-design, HTML og CSS .

 

Dette innlegget skal ikke kommenteres i tråden.

[Christerm]

http://www.christerm.com/www/div

 

Noe sånt du tenkte på?

 

HTML-kode

<div id="wrapper">
 <div id="venstre">	</div>
 <div id="midt">		</div>
 <div id="høyre">		</div>
</div>

 

CSS-kode

DIV#wrapper {
width: 806px;
height: 202px;
border: solid #FF0000 1px;
}

DIV#venstre {
width: 200px;
height: 200px;
background: #999999;
float: left;
border: solid #FF0000 1px;
}

DIV#midt {
width: 400px;
height: 200px;
background: #FFFF00;
float: left;
border: solid #FF0000 1px;
}

DIV#høyre {
width: 200px;
height: 200px;
background: #00FFFF;
float: right;
border: solid #FF0000 1px;
}

Endret 6. juni 2009 av Christerm

[HDSoftware]

nei, for dette er statisk. Når man bruker TABLE så vil innholdet bestemme høyden. Bare putt en tillstrekklig tekst i venstrekolonne så ser du at hele designet endrer seg når det blir for mye tekst.

[Jonas]

nei, for dette er statisk. Når man bruker TABLE så vil innholdet bestemme høyden. Bare putt en tillstrekklig tekst i venstrekolonne så ser du at hele designet endrer seg når det blir for mye tekst.

Prøv å se på faux columns.

 

http://www.alistapart.com/articles/fauxcolumns/

[HDSoftware]

Hmmm. Utgangspunktet her var å bruke DIV i stedet for Table. Nå får jeg en følelse av at man gjør alt man kan for å unngå table, bare for å "klare" det. Er dette virkelig mer effektivt og "moderne" en å bruke en enkel TABLE med tre kolonner?

[Jonas]

La meg omformulere; ikke «prøv å se på» faux columns, men «bruk» faux columns. Det er ikke noe hokkus pokkus mega hack, det er bare en logisk teknikk og utrolig lett. Faux columns er på ingen måte noe som inngår i å gjøre alt for å unngå bruken av tables. Det er simpelthen bare en måte å visuelt simulere kolonner på.

Endret 9. juni 2009 av Jonas

[HDSoftware]

Men vil ikke denne metoden kreve at man har en IMAGE med et nøyaktig design? Tenker på bredde og slikt. Virker ikek veldig dynamisk på meg. Hvis jeg plutselig har behov for å ha en breiere kolonne så må jeg jo ha en annen image også. Virker noe klønete spør du meg, spesiellt siden en TABLE gjør dette helt automatisk uten problemer.

 

Jeg må nesten driste meg til å spørre igjen: Hvorfor er TABLE så dårlig alternativ? Den gjør jo alt dette uten å måtte bruke noen bakgrunner av noe slag. Hva er det jeg misser her?

[TRL]

Jeg fant ut når jeg skulle lære dette at man er for opptatt av å koble dette sammen med en tabell når det i bunn og grunn er noe helt annet. Det som ligner og oppfører seg mest likt som en div er faktisk bilder. En div flyter til høyre og venstre etter hvordan den er blitt fortalt det, og en div har gjerne(ikke nødvendigvis) en bestemt størrelse som et bilde.

Jeg ser alltid for meg div'er som bilder OG kontainere siden en div skal inneholde sidens innhold.

En av fordelene med å bruke div'er er etter min mening at en div er mye mer strenge enn en tabell. Dette er en fordel fordi man da vet mer om hvordan en side blir seende ut når det ikke er så stort spillerom for tolkninger som igjen har vært et problem med tabeller og spesielt ie vil mange si.

[HDSoftware]

Men det betyr jo igjen at en DIV ikke erstatter en TABLE. Da skjønner jeg ikke hvorfor folk sier "Dropp TABLE! Bruk DIV" Det er jo et prinsipp som sier "Bruk ting til det de er beregnet til" Å bruke DIV i stedet for TABLE i dette tilfellet er jo dermed å prøve å tilpasse en DIV med masse hacks bare for å slippe en TABLE. Skjønner ikke poenget...

Det er nettop startet en ny tråd her som spør om akkurat, eller nesten det samme. Ser ingen grunn til ikke å anbefale personen å slenge opp en TABLE.....

[Øsse]

For å si det veldig kort så hindrer table deg å totalt separere innholdet fra presentasjonen av innholdet. Hvis du bruker bare div'er vil det bli enklere å drastisk endre designet på siden din, f.eks. flytte menykolonnen over på andre siden av hovedinnholdet eller bytte til en horisontal meny. Enklere på den måten at det i det ideelle tilfellet er bare en fil å endre, uten å måtte gå inn i hver enkelt html-fil å forandre antall rader eller noe sånt. (Ja, det er også enklere å endre designet bare litt. Det trenger ikke være drastisk for at det skal lønne seg )

 

I tillegg vil presentasjonen bli sentralisert slik at den ikke å lastes ned på nytt for hver gang, og hver enkelt html-fil blir mindre, slik at bruken av båndbredde går ned (dette argumentet er jo ikke så treffende for en privatperson, men men).

 

Jeg er helt enig med deg at metodene som brukes for å lage like lange kolonner kan virke litt hackete, og at akkurat det punktet er en svakhet. Men husk at en div har ingen egenskaper i det hele tatt selv før du definerer de. Den "tenker ikke selv" slik som table gjør. Det er meningen at en hel del ting skal bestemmes for å få det slik du vil, og når du først har fått det slik du vil blir alt annet mye lettere.

 

Og det er ikke meningen at en div skal erstatte en table. 2-3-4 div'er alt ettersom skal i såfall erstatte en table. (Prinsipielt skal jo ikke en div erstatte en table i det hele tatt, men det driter vi i akkurat nå). En div kan derimot ta knekken på en drøss tr'er og td'er for deg.

 

Jeg tenkte å prøve å lage det du har lyst på, men akkurat nå må jeg jobbe

Endret 18. juni 2009 av øsse87

[HDSoftware]

Da gleder jeg meg til resultatet ;-)

[PHPdude]

Her er den egentlige måten å løse dette på med HTML og CSS:

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no">
<head>
  <title>Test</title>
  <style type="text/css">
  body {
 display:table-row;
  }
  body > * {
 display:table-cell;
  }
  #menu {
 background-color:yellow;
  }
  #info {
 background-color:blue;
  }
  #news {
 background-color:red;
  }
  </style>
</head>
<body>
  <div id="menu">
 <ul>
	<li>Link #1</li>
	<li>Link #2</li>
 </ul>
  </div>
  <div id="info">
 gdagdagsrbmwrklbnwrilewioøgj w4ijgw4igjnsdlnwdilvbwukøgbvklwbvweruoø
  </div>
  <div id="news">
 <p>Nyhet #1</p>
 <p>Nyhet #2</p>
 <p>Nyhet #3</p>
  </div>
</body>
</html>

Grunnen til at denne ikke er kommet opp for lengst og antagelig faktisk er ukjent for de fleste er at disse grunnleggende CSS-elementene ikke er støttet av IE6/IE7, men alle andre nettlesere har "alltid" støttet det og IE8 har også støtten.

 

Du kan jo vurdere å primært bruke denne metoden, og heller legge til et alternativt stilark for IE6/IE7 hvor du styler det så det ser akseptabelt ut selv om det ikke blir riktig. Ellers har jo andre her pekt på overkommelige hacks for å få det til rimelig riktig med kun IE6/7-funksjonalitetet.

 

"Div vs. tabeller" er et blindspor. Poenget er ikke at man ikke skal bruke tabeller, eller at man skal bruke div, men derimot at man skal bruke det elementet som best representerer innholdets struktur, uavhenging av hvordan innholdet er ment å skulle se ut.

Er det tabulære data, ja da bruker du table. Trenger du å separerere innhold i seksjoner, ja da bruker du div. Trenger du noe annet, ja da bruker du noen av de andre HTML-elementene.

Og så må man beherske CSS ganske så inn og ut for ikke å stange i veggen.

 

Rosenrødt? Nei, og sålenge man må forholde seg til IE og dens elendige standard-støtte kan det til tider være særdeles frustrerende, men når man har kommet over den drøyeste læringskurven, så flyter det egentlig, og etterhvert ser man også flere og flere grunner til at separering av innhold og presentasjon som HTML og CSS legger opp til, har mange store fordeler over å klæsje presentasjonen sammen med innholdet.

Endret 18. juni 2009 av PHPdude

[HDSoftware]

Jeg synes ikek dette løste noe som helst jeg :-S

 

Ligner ikke i det hele tatt på det jeg vil ha.

 

Men jeg ser at du er litt mere moderat til bruk av TABLE en mange andre her på forumet og sier det samme som jeg: "Man bruker det som er beregnet til å løse problemet" og i mitt tilfelle så virker det som at TABLE er det man skal og bør bruke. Fungerer i hvertfall veldig enkelt

[Jonas]

Men jeg ser at du er litt mere moderat til bruk av TABLE en mange andre her på forumet og sier det samme som jeg: "Man bruker det som er beregnet til å løse problemet" og i mitt tilfelle så virker det som at TABLE er det man skal og bør bruke. Fungerer i hvertfall veldig enkelt

Nei, der tar du fullstendig feil. Når han sier at man skal bruke tags til det det er ment for - så mener PHPDude at han er uenig med deg. Tables skal kun brukes til tabulær data, mens du ønsker å bruke det til sidestruktur - noe som er riv ruskende galt sett fra et semantisk ståsted.

[HDSoftware]

"Div vs. tabeller" er et blindspor. Poenget er ikke at man ikke skal bruke tabeller, eller at man skal bruke div, men derimot at man skal bruke det elementet som best representerer innholdets struktur

 

Kan ikke skjønne annet en at dette sier at man skal bruke de taggene som best representerer strukturen man er ute etter.

 

Uansett - ingen har hittil klart å lage/vise til noen måte å få til det jeg er ute etter med bruk av DIV. Så konklusjonen må være at inntil det lar seg gjøre så er TABLE den rette måten å gjøre det på

[Jonas]

Kan ikke skjønne annet en at dette sier at man skal bruke de taggene som best representerer strukturen man er ute etter.

Da foreslår jeg at du leser innlegget hans en gang til. La meg henvise til spesielt en setning.

 

Er det tabulære data, ja da bruker du table.

Du er ute etter en side med en tabell-lignende struktur i forhold til design, men ikke lur deg selv til å tro at det da er semantisk riktig å bruke tabeller for å oppnå dette. Design har aldri vært - og er fremdeles ikke - tabulær data.