/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Divs, tables, centrering, float
Fra : Trine


Dato : 09-08-06 16:22

http://www.gozza.dk/temp/pauser.html

Ovenstående URL viser et udkast til en side jeg er ved at lave. Jeg
ville oprindelig have lavet det uden så stor brug af tables som jeg er
endt med, men det gik helt galt for mig, så derfor endte jeg med et "old
school" table layout, som jeg mildt sagt ikke bryder mig ret meget om.

Mine primære problemer med det table løse design var/er:

1. De tre tabeller (formiddag, frokost, eftermiddag) groede udover min
omsluttende div hvis man ændrede størrelse på font i sin browser (f.eks.
CTRL+mousewheel i FF). Det betød at jeg mistede min centrering, samt at
border på div blev "skjult" bag de forvoksede tabeller.

2. Jeg havde float'et de tre tabeller for at få dem på række inde i den
centrerede div. Dette gjorde selvsagt at de lagde sig ud til venstre i
den omsluttende div, hvilket igen affødte forskellige centreringsmæssige
problemer når fontstørrelse ændrede sig. Hvis jeg f.eks. satte en border
og en fast width på den centrerede div (centreret med margin: 0px auto),
så så det fint ud på min Suse maskine, men på min Win XP så fyldte
tegnene en smule mere, og derved blev min ellers så fine border brudt.

Mit spørgsmål: Er det overhovedet muligt at lave ovenstående design uden
brug af tabellerne til layout? Eller er dette et af de tilfælde hvor man
må leve med at de "gode" gamle tables har fat i den lange ende?

Jeg vil forsøge at nå at sende et link, med min oprindelige kode, i
morgen. Kan være at det er helt hen i vejret det jeg har gjort....

Vh,
Trine

 
 
Ukendt (09-08-2006)
Kommentar
Fra : Ukendt


Dato : 09-08-06 17:08


"Trine" <trine@loecke.dk> skrev i en meddelelse
news:44d9fd9b$0$20328$edfadb0f@dread16.news.tele.dk...

> http://www.gozza.dk/temp/pauser.html

> 1. De tre tabeller (formiddag, frokost, eftermiddag) groede udover min
> omsluttende div hvis man ændrede størrelse på font i sin browser (f.eks.
> CTRL+mousewheel i FF). Det betød at jeg mistede min centrering, samt at
> border på div blev "skjult" bag de forvoksede tabeller.

Har du et link til siden med problemet?

> Mit spørgsmål: Er det overhovedet muligt at lave ovenstående design uden
> brug af tabellerne til layout? Eller er dette et af de tilfælde hvor man
> må leve med at de "gode" gamle tables har fat i den lange ende?

Det kan det sagtens. Og under alle omstændigheder kan det lade sig gøre uden
den omfattende brug af tabeller i tabeller


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Bertel Lund Hansen (09-08-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 09-08-06 17:43

CS skrev:

> Har du et link til siden med problemet?

Kik igen i indlægget - eller evt. i dit eget citat deraf.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Ukendt (09-08-2006)
Kommentar
Fra : Ukendt


Dato : 09-08-06 19:51


"Bertel Lund Hansen" <nospamfilius@lundhansen.dk> skrev i en meddelelse
news:44da1051$0$3480$ba624c82@nntp02.dk.telia.net...
> CS skrev:
>
>> Har du et link til siden med problemet?
>
> Kik igen i indlægget - eller evt. i dit eget citat deraf.

Ja problemet er bare at eneste link der findes i pågældende indlæg er til
tabellayout-eksemplet, som Trine ikke har problemer med. Der er derimod
intet link til den side som skaber problemer for hende.

Men også overflødigt nu, hvor Jørgen har vist hvordan man eksempelvis kan
løse problemet.


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Trine (10-08-2006)
Kommentar
Fra : Trine


Dato : 10-08-06 14:27

CS wrote:
> Ja problemet er bare at eneste link der findes i pågældende indlæg er til
> tabellayout-eksemplet, som Trine ikke har problemer med. Der er derimod
> intet link til den side som skaber problemer for hende.

Hej Carsten

Link til problem-side:
http://www.gozza.dk/temp/pauser1.html


Trine

Bertel Lund Hansen (10-08-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 10-08-06 14:40

Trine skrev:

> Link til problem-side:
> http://www.gozza.dk/temp/pauser1.html

Fra din CSS:

   table {
    border-spacing: 0px;
   }

Der er ikke noget der hedder "border-spacing".

Angående problemet.
Fjern de div'er der ligger uden om tabellerne. Giv i stedet
tabellerne hver sin id:

   <table id='formiddag'>

Det løser ikke noget, men det forenkler sagen.

Og så lad også den sidste floate left.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Trine (10-08-2006)
Kommentar
Fra : Trine


Dato : 10-08-06 15:16

Bertel Lund Hansen wrote:
> Der er ikke noget der hedder "border-spacing".

http://www.w3schools.com/css/css_reference.asp#table

> Angående problemet.
> Fjern de div'er der ligger uden om tabellerne. Giv i stedet
> tabellerne hver sin id:
>
>    <table id='formiddag'>
>
> Det løser ikke noget, men det forenkler sagen.

Forenkling er godt. Advice taken to heart.

> Og så lad også den sidste floate left.

Ja jeg tør ikke helt sige hvorfor jeg har floated den right - det blev
ikke helt gennemtænkt.


Trine

Kerim Ellentoft (10-08-2006)
Kommentar
Fra : Kerim Ellentoft


Dato : 10-08-06 17:19

Bertel Lund Hansen skrev:

>Fra din CSS:
>...
>    table {
>     border-spacing: 0px;
>    }
>
>Der er ikke noget der hedder "border-spacing".

Hvornår er det blevet fjernet fra css 2?

At IE, så ikke forstår det er en anden sag.
--
Kerim
Svar under det du citerer og citer kun det du svarer på - tak.
Støt flygtninge og sårede i Libanon!
Danish Muslim Aid - http://www.dm-aid.dk/

Bertel Lund Hansen (09-08-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 09-08-06 17:10

Trine skrev:

> Mine primære problemer med det table løse design var/er:

> 1. De tre tabeller (formiddag, frokost, eftermiddag) groede udover min
> omsluttende div hvis man ændrede størrelse på font i sin browser (f.eks.
> CTRL+mousewheel i FF). Det betød at jeg mistede min centrering, samt at
> border på div blev "skjult" bag de forvoksede tabeller.

Jeg vil lige slå fast at dine inderste tabeller er logiske uanset
om man vil bruge et 'tabelløst' design. Tabeller skal bruges når
det er relevant i forhold til data, men de er uegnede til design.

Det problem du omtaler, kan du også f.eks. her (en af mine
sider):

   http://bertel.lundhansen.dk/bridge/bridgeberegning.php

Hvis du gør browservinduet mindre (og ruller ned til tabellen),
vil du se at designet går helt i mos når vinduet bliver lille
nok. Det er bare ærgerligt.

Hvis jeg lagde en tabel udenom, ville selve tabellen jo alligevel
rage udenfor til højre. Den eneste forskel ville være at den
sorte kant også forsvandt ud til højre.

> 2. Jeg havde float'et de tre tabeller for at få dem på række inde i den
> centrerede div. Dette gjorde selvsagt at de lagde sig ud til venstre i
> den omsluttende div, hvilket igen affødte forskellige centreringsmæssige
> problemer når fontstørrelse ændrede sig.

Man kan ikke lave noget der ser pænt ud i en vilkårlig
fontstørrelse. Man kan lave noget der er brugbart i rigtig mange
fontstørrelser.

Jeg ville lave de tre små tabeller separat og floate dem til
venstre. Hvis der så er plads nok, vil de lægge sig som de ligger
nu. Hvis vinduet er smalt eller måske skriftstørrelsen stor, vil
de smutte ned under hinanden. Men det ødelægger jo ikke
funktionen.

Det gør det derimod hvis de forsvinder ud til højre. Vandret
rulning er møgirriterende.

> Hvis jeg f.eks. satte en border og en fast width på den
> centrerede div (centreret med margin: 0px auto), så så det
> fint ud på min Suse maskine

.... med din browser, med din opløsning, med din skriftstørrelse
og med din størrelse browservindue. Det er 'snæversynet' at binde
designet til så specifikt en opstilling.

Angiv bredden på det midterste felt i %, så tilpasser det sig
selv vinduets bredde hos brugeren.

> Mit spørgsmål: Er det overhovedet muligt at lave ovenstående design uden
> brug af tabellerne til layout?

Ja, men man kan ikke binde det på samme måde som tabeller gør
uden at man får de fleste af tabellernes ulemper med.

> Eller er dette et af de tilfælde hvor man
> må leve med at de "gode" gamle tables har fat i den lange ende?

Tabeller har *ikke* fat i den lange ende hvad design angår. Det
ville du vide hvis du havde prøvet at rette i et tabeldesign i
tre niveauer hvor der skulle tilføjes et nyt felt midt i.

Flydende design med relative størrelser er sagen.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Trine (10-08-2006)
Kommentar
Fra : Trine


Dato : 10-08-06 14:37

Bertel Lund Hansen wrote:
> Det gør det derimod hvis de forsvinder ud til højre. Vandret
> rulning er møgirriterende.

Helt enig for så vidt vandret rulning

> Flydende design med relative størrelser er sagen.

Godt råd modtaget og forstået. Tak!

Venlig hilsen
Trine


Jørgen Farum Jensen (09-08-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 09-08-06 18:12

Trine skrev:

> Mit spørgsmål: Er det overhovedet muligt at lave ovenstående design uden
> brug af tabellerne til layout? Eller er dette et af de tilfælde hvor man
> må leve med at de "gode" gamle tables har fat i den lange ende?

Svaret på dit spørgsmål er ja. Se et udkast her:
http://www.webdesign101.dk/x/usenet/trine.html

Bemærk, at ved at sætte bredden på de overordnede elementer
i em kan brugeren uden videre øge eller mindske
tekststørrelsen uden at layoutet går i stykker.

Du skal blot være påpasselig med at bruge absolutte
størrelser på indholdet af spalterne, det vil sige
dine formularfelter.


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

Trine (10-08-2006)
Kommentar
Fra : Trine


Dato : 10-08-06 15:11

Jørgen Farum Jensen wrote:
> Svaret på dit spørgsmål er ja. Se et udkast her:
> http://www.webdesign101.dk/x/usenet/trine.html
>
> Bemærk, at ved at sætte bredden på de overordnede elementer
> i em kan brugeren uden videre øge eller mindske tekststørrelsen uden at
> layoutet går i stykker.
>
> Du skal blot være påpasselig med at bruge absolutte størrelser på
> indholdet af spalterne, det vil sige
> dine formularfelter.

Hej Jørgen

Super hjælp, tusind tak

Et par spørgsmål:

1. Er width:100%; nødvendig i #main?

2. Er display:inline; nødvendig i .col og i #logo?

Jeg har stadig lidt svært ved at få vredet hovedet rundt om float og
display

Venlig hilsen
Trine

Jørgen Farum Jensen (10-08-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 10-08-06 15:47

Trine skrev:

> Et par spørgsmål:
>
> 1. Er width:100%; nødvendig i #main?

Den er ikke nødvendig. Jeg satte den
ind på et tidspunkt, hvor jeg ikke kunne få
det til at at gå op, og glemte at fjerne
den igen.

> 2. Er display:inline; nødvendig i .col og i #logo?

Ja absolut, men af en højst mærkelig grund.
Internet Explorer har det nemlig med at
fordoble en venstre margin på en venstre-
float'et element og en højre margin på et
højre-float'et element.

display:inline på det float'ede element fikser det
problem, som måske kan være årsag til dine tidligere
problemer.

> Jeg har stadig lidt svært ved at få vredet hovedet rundt om float og
> display

Det er heller ikke altid helt ligetil, især
hvis man ikke er opmærksom på diverse browseres
fortolkningsfejl.

Et råd, når du sidder og roder med det, er at
kolorere dine kasser, som jeg delvist har gjort.
Det øger overblikket, og kan jo siden fjernes.

BTW er der en lille fejl i mit forslag:
#logo-elementet skal have en højre margin på 1 em
for at flugte med højre margin af tredie kasse.



--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

Trine (11-08-2006)
Kommentar
Fra : Trine


Dato : 11-08-06 14:59

Jørgen Farum Jensen wrote:
> Den er ikke nødvendig. Jeg satte den
> ind på et tidspunkt, hvor jeg ikke kunne få
> det til at at gå op, og glemte at fjerne
> den igen.

Okay, jeg troede at det var mig der slet ikke forstod noget

> Et råd, når du sidder og roder med det, er at
> kolorere dine kasser, som jeg delvist har gjort.
> Det øger overblikket, og kan jo siden fjernes.

Godt råd. Det vil jeg absolut benytte mig af.



Trine

Johnny Winther Ronne~ (09-08-2006)
Kommentar
Fra : Johnny Winther Ronne~


Dato : 09-08-06 19:35

Trine wrote:
> http://www.gozza.dk/temp/pauser.html
>
> Ovenstående URL viser et udkast til en side jeg er ved at lave. Jeg
> ville oprindelig have lavet det uden så stor brug af tables som jeg er
> endt med, men det gik helt galt for mig, så derfor endte jeg med et
> "old school" table layout, som jeg mildt sagt ikke bryder mig ret
> meget om.
>
> Mine primære problemer med det table løse design var/er:
>
> 1. De tre tabeller (formiddag, frokost, eftermiddag) groede udover min
> omsluttende div hvis man ændrede størrelse på font i sin browser
> (f.eks. CTRL+mousewheel i FF). Det betød at jeg mistede min
> centrering, samt at border på div blev "skjult" bag de forvoksede
> tabeller.
>
> 2. Jeg havde float'et de tre tabeller for at få dem på række inde i
> den centrerede div. Dette gjorde selvsagt at de lagde sig ud til
> venstre i den omsluttende div, hvilket igen affødte forskellige
> centreringsmæssige problemer når fontstørrelse ændrede sig. Hvis jeg
> f.eks. satte en border og en fast width på den centrerede div
> (centreret med margin: 0px auto), så så det fint ud på min Suse
> maskine, men på min Win XP så fyldte tegnene en smule mere, og derved
> blev min ellers så fine border brudt.
>
> Mit spørgsmål: Er det overhovedet muligt at lave ovenstående design
> uden brug af tabellerne til layout? Eller er dette et af de tilfælde
> hvor man må leve med at de "gode" gamle tables har fat i den lange
> ende?
>
> Jeg vil forsøge at nå at sende et link, med min oprindelige kode, i
> morgen. Kan være at det er helt hen i vejret det jeg har gjort....
>

I forhold til den side du har vist os, er det du har gjort grundlæggende set
korrekt.

Hvis du bruger tabeller til layout så må du kun bruge en til den samlede
formatering af siden og det har du gjort.

De tre indlejrede tabeller er tabulære data i indholdet og skal læses hver
for sig for at give mening, om de står ved siden af hinanden, eller efter
hinanden er ligegyldigt i forhold til den information de indeholder.

Hvis jeg skulle have en anke mod brugen så er det, at det i virkeligheden er
tre sider, der er samlet i en.

Skærmlæser brugere vil få siden læst kolonne for kolonne og i en sigende
sammenhæng.. men de vil sikkert, lige som jeg gør, undre sig over hvad er
det de skal vælge og hvorfor og hvad er det man skal fortryde? Er det
meningen, at jeg mellem 10:45 og 10:50 skal fortryde, at jeg ikke har dusket
Katja Kean

Vælg dit navn, øv jeg er ikke på listen, hvordan skal jeg så vælge mit navn?

Med venlig hilsen
Johnny Winther Ronnenberg



Ukendt (09-08-2006)
Kommentar
Fra : Ukendt


Dato : 09-08-06 19:53


"Johnny Winther Ronnenberg" <johnny.winther@XYZtdcadsl.dk> skrev i en
meddelelse news:44da2acb$0$134$edfadb0f@dread11.news.tele.dk...

> Hvis du bruger tabeller til layout så må du kun bruge en til den samlede
> formatering af siden og det har du gjort.

Jeg kan nu se to


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Johnny Winther Ronne~ (10-08-2006)
Kommentar
Fra : Johnny Winther Ronne~


Dato : 10-08-06 19:50

CS wrote:
> "Johnny Winther Ronnenberg" <johnny.winther@XYZtdcadsl.dk> skrev i en
> meddelelse news:44da2acb$0$134$edfadb0f@dread11.news.tele.dk...
>
>> Hvis du bruger tabeller til layout så må du kun bruge en til den
>> samlede formatering af siden og det har du gjort.
>
> Jeg kan nu se to

Ja en layout tabel og en datatabel den sidste kunne godt tåle lidt mere
staffage, men det er fuldt funktionelt. Det er ikke altid at tabeller i
tabeller medfører en dødsdom for landsforrædderi Selv om det indrømmet
er standarden, min læge siger at jeg har fået ledgigt, efter at have slebet
øksen hver morgen. Jeg har ingen ide hvor han får det fra ;-(

Med venlig hilsen
Johnny Winther Ronnenberg



Trine (10-08-2006)
Kommentar
Fra : Trine


Dato : 10-08-06 16:13

Johnny Winther Ronnenberg wrote:
> Skærmlæser brugere vil få siden læst kolonne for kolonne og i en sigende
> sammenhæng.. men de vil sikkert, lige som jeg gør, undre sig over hvad er
> det de skal vælge og hvorfor og hvad er det man skal fortryde?

Helt enig, det er ikke specielt forklarende. Men målgruppen er en lille
lukket skare, for hvem det er super indlysende. Det er ikke et
offentligt dokument.

> Er det meningen, at jeg mellem 10:45 og 10:50 skal fortryde, at jeg ikke har dusket
> Katja Kean

Det var ikke lige det der var planen, men hvis der er noget man skal
fortryde, så kunne det da godt være det

Venlig hilsen
Trine

Trine (11-08-2006)
Kommentar
Fra : Trine


Dato : 11-08-06 15:52

Efter at have fået gode råd og vejledning fra alle I flinke folk
herinde, har jeg forsøgt mig med div'erne igen.

Det er der kommet dette ud af:

http://www.gozza.dk/temp/pauser2.html

Kom endelig med input hvis noget kan gøres bedre.


Trine

Jørgen Farum Jensen (11-08-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 11-08-06 16:19

Trine skrev:
> Efter at have fået gode råd og vejledning fra alle I flinke folk
> herinde, har jeg forsøgt mig med div'erne igen.
>
> Det er der kommet dette ud af:
>
> http://www.gozza.dk/temp/pauser2.html
>
> Kom endelig med input hvis noget kan gøres bedre.
>
>
> Trine

Alright!

Jeg ville nok satse på helt at fjerne tabellerne,
men det er nok bare mig. Formularer kan være lidt
tricky at formatere uden tabeller.

Det validerer ok og ser ordentligt ud, så det er det.

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

Erik Ginnerskov (12-08-2006)
Kommentar
Fra : Erik Ginnerskov


Dato : 12-08-06 23:01

Jørgen Farum Jensen wrote:

>> http://www.gozza.dk/temp/pauser2.html

> Jeg ville nok satse på helt at fjerne tabellerne,

Hvorfor dog det. De opstillinger der det da oplagt at lægge i tabeller.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/



Jørgen Farum Jensen (13-08-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 13-08-06 11:06

Erik Ginnerskov skrev:
> Jørgen Farum Jensen wrote:
>
>>> http://www.gozza.dk/temp/pauser2.html
>
>> Jeg ville nok satse på helt at fjerne tabellerne,
>
> Hvorfor dog det. De opstillinger der det da oplagt at lægge i tabeller.
>

Selvfølgelig, det var blot en tåbelig tanke.
Stoffet på den omhandlede side er jo
tabelmateriale.


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

Ukendt (12-08-2006)
Kommentar
Fra : Ukendt


Dato : 12-08-06 15:52


"Trine" <trine@loecke.dk> skrev i en meddelelse
news:44dc9988$0$20289$edfadb0f@dread16.news.tele.dk...
> Efter at have fået gode råd og vejledning fra alle I flinke folk
> herinde, har jeg forsøgt mig med div'erne igen.
>
> Det er der kommet dette ud af:
>
> http://www.gozza.dk/temp/pauser2.html

Det ser jo ud til at fungere


> Kom endelig med input hvis noget kan gøres bedre.

Har intet at gøre med tabellerne, men tekstafsnit bør markeres med <p></p>,
så jeg ville erstatte div id="text" med p


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Søg
Reklame
Statistik
Spørgsmål : 177559
Tips : 31968
Nyheder : 719565
Indlæg : 6408938
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste