Avatar billede madsens90 Praktikant
31. januar 2008 - 08:19 Der er 25 kommentarer og
1 løsning

En tabel på 100%, med 3 kolonner, hvori den midterste har brede.

Det er svært at forklarer i titelen, men jeg har en tabel hvori jeg har 3 kolonner.

den midterste kolonne skal være centreret på siden, men en brede på ca 600 px..

De 2 andre kolonner skal bare have "width 100%"..

Hvordan laver jeg det i css? :/
Har lavet det så det virker til IE, men ikke til FF.

Se eksempel her: www.shax.dk/v2/
Avatar billede fennec Nybegynder
31. januar 2008 - 08:26 #1
Du kunne starte med at angive en doctype. Elles kan den da slet ikke finde ud af det. Alle dine dokumenter skal starte på denne måde:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled</title>
</head>
<body>
...
</body>
</html>

Hvis du vel og mærke koder efter HTML 4 standarden.
Avatar billede fennec Nybegynder
31. januar 2008 - 08:29 #2
Men er der en grund til at du vil have de yderste kolonner?? Hvis det bare er fordi du vil have siden centreret er der bedre måder.
Avatar billede madsens90 Praktikant
31. januar 2008 - 08:35 #3
Jah.. Der er en grund til jeg vil have de yderste kolonner, da der er "noget" i dem.

Ehm.. Ang. doctype.. Har brugt lang tid på at få min side til at fungerer med det, men jeg kan ikke lave height 100% på min tabel hvis det er på. :/
Avatar billede fennec Nybegynder
31. januar 2008 - 09:24 #4
Det kan du nu sagtens. Det er bare at følge standarden :o)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
html, body{height:100%;padding:0;margin:0;}
</style>
</head>

<body>

<table width="100%" border="1" cellspacing="0" cellpadding="2" style="height:100%;">
<tr>
    <td>Tabel på 100% height</td>
</tr>
</table>

</body>
</html>

Standarden siger at 100% height får sin højde fra parent elementet. Da html og body er parent til alle elementer skal de sættes til 100% height for at dine underelementer også kan fylde det hele.
Avatar billede madsens90 Praktikant
31. januar 2008 - 11:13 #5
Wow.. :O

Det er mange andre herinde der ikke har kunne hjælpe mig, fordi alle har sagt at jeg bare skulle sætte body til height: 100%;

men ingen har sagt noget om body.

Nu har den lavet tabellen 100% høj, men hvorfor har den gjort de celler højere som allerede har fået en højde, i stedet for kun dem som ikke har?
Avatar billede madsens90 Praktikant
31. januar 2008 - 11:15 #6
Men der er ikke height 100% på min tabel i firefox nu? :/
Avatar billede madsens90 Praktikant
31. januar 2008 - 11:19 #7
forresten.. mente:

ingen har sagt noget om at jeg skulle sætte 'html' til height 100%.. :/
Avatar billede fennec Nybegynder
31. januar 2008 - 16:29 #8
Jeg har lavet en kopi af din side her:
http://henriknygaard.dk/experten/817361/index.html

Den ser ens ud i FF2 og IE7. Af en eller anden grund kan IE ikke finde ud af det hvis DTD'en er på, så den har jeg undladt.
Avatar billede madsens90 Praktikant
31. januar 2008 - 17:01 #9
Det ser lækkert ud man.. :)

Har også bare fjernet den der DTD nu. :)

Kom med et svar og få dine fuldt fortjente point! :D

Kan du i øvrigt forklarer hvorfor man skal lave mellemrum i alle sine celler før det virker?
Avatar billede olebole Juniormester
31. januar 2008 - 23:52 #10
<ole>

I må endelig ikke fjerne DTD'en! Brug i stedet en fuld DTD, så opfylder IE også CSS-standarden:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

/mvh
</bole>
Avatar billede olebole Juniormester
31. januar 2008 - 23:54 #11
Avatar billede fennec Nybegynder
01. februar 2008 - 09:27 #12
Olebole >>
Jeg vil til hver en tid være enig med dig (og havde også DTD'en på først), men IE fejler så snart den komme på. FF håndtere det fint. Jeg vurderede derfor at det var bedre at fjerne DTD'en for at få siden til at se ordentlig ud.

Det er som om at IE ikke kan finde ud af at styre 100% højde sammen med specifike højder.
Avatar billede fennec Nybegynder
01. februar 2008 - 09:28 #13
.o) <-- One Eyed Jack
Avatar billede madsens90 Praktikant
01. februar 2008 - 11:03 #14
Olebole.. Blev også rudet til af alle i starten at lave det med DTD, men så virker siden bare ikke rigtigt i både IE og FF.

fennec.. Kunne du forklarer hvorfor du har indsat mellemrum i alle cellerne? :)
Avatar billede madsens90 Praktikant
01. februar 2008 - 11:13 #15
rådet*

Hvorfor er det i øvrigt så vigtigt at DTD'en er med?
Avatar billede fennec Nybegynder
01. februar 2008 - 11:33 #16
Kan ikke huske om det er IE eller FF (sikketr Ie) der har problemer med breder hvis der ikke er noget data i cellerne. Derfor har jeg indsat et mellemrum.
Avatar billede madsens90 Praktikant
01. februar 2008 - 11:55 #17
Okay.. For det hjalp nemmelig at sætte mellemrum ind. Men det har ikke nogen betydning for designet så?
Avatar billede fennec Nybegynder
01. februar 2008 - 12:18 #18
Nope, og så alligevel.

IE (igen) har nemlig en bug som gør at elementer ikke kan være lavere end font størrelsen. Hvis du derfor har en række som skal være mindre end fontstørrelsen, skal både height og font-size sættes. Normalt sætter jeg font-size til 1px i sådan en situation.
Avatar billede madsens90 Praktikant
01. februar 2008 - 13:37 #19
smart. ;) Derfor der er mellemrum i designet ved kanterne?
Avatar billede olebole Juniormester
02. februar 2008 - 17:59 #20
madsens90 >> Grunden til, at du ikke kan få IE og FF til at vise siderne ens, når du bruger en fuld DTD, er forkert CSS. Læs teksten bag linket, jeg lagde i (31/01-2008 23:54:33) ... så vil du forstå, hvorfor. DTD'en er en _absolut_ nødvendighed. Uden den er der i virkeligheden slet ikke tale om et HTML-dokument  ;o)
Avatar billede fennec Nybegynder
04. februar 2008 - 08:34 #21
OleBole >>
Kan du så forklare mig hvor fejlen er i denne kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
html, body{height:100%;pading:0px;margin:0px;}
.mainTable{height:100%;width:100%;}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2" class="mainTable">
<tr>
    <td style="height:100px;">Header</td>
</tr>
<tr>
    <td>Data</td>
</tr>
</table>
</body>
</html>

Kan også ses her:
http://henriknygaard.dk/experten/817361/index1.html

Jeg ville her forvente en højde på 100px i Header, hvilket den også har i FF, men IE vises det ikke rigtig. Fjerner jeg DTD'en ser det ens ud i begge.

Jeg kan ikke få dette simple eks til at virke med DTD, og jeg synes jeg har prøvet meget :(
Avatar billede madsens90 Praktikant
04. februar 2008 - 13:05 #22
Jeg har det samme problem med DTD'en... :/

Bliver nød til at droppe den, hvis jeg vil have mit design til at fungerer. :S
Avatar billede olebole Juniormester
04. februar 2008 - 20:09 #23
fennec >> Den kode er der ikke noget galt med. Forskellen skyldes, at når IE overholder CSS-standarden, fordeler den ikke højderne, som du formodentlig tror, den burde (og som FF gør det) ... det er ikke en detalje, der er defineret i CSS.
Ved tabulerede data, som tabellen strengt taget er beregnet til, er der ikke den slags problemer, da højden af rækkerne i den slags situationer vil være være lige høje - og/eller tilpasse sig indholdets højde

madsens90 >> "Bliver nød til at droppe den, hvis jeg vil have mit design til at fungerer" >> Nej, tværtimod! Hvis du vil have CSS til at fungere, er pisket nødt til at bruge den  :)

Det er stadig voldsomt ukogt at slette DTD'en. Det _kan_ ikke andet end at gove problemer - det vidner i hundredevis (hvis ikke de efterhånden tælles i tusindvis) af spørgsmål om på Eksperten.

Prøv disse to eksempler i FF og IE. De viser mad al ønskelig tydelighed, hvor vigtig DTD'en er (udover, at der som sagt slet ikke er tale om et HTML-dokument, hvis den ikke er der):

<html>
<head>
    <title>Uden DTD - og CSS-understøttelse</title>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    background: yellow;
}
.withBorder {
    border: 50px solid red;
}
</style>
</head>
<body>

<div>&nbsp;</div>

<div class="withBorder">&nbsp;</div>

</body>
</html>

- og:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Med DTD - og CSS-understøttelse</title>
<style type="text/css">
div {
    width: 200px;
    height: 200px;
    background: yellow;
}
.withBorder {
    border: 50px solid red;
}
</style>
</head>
<body>

<div>&nbsp;</div>

<div class="withBorder">&nbsp;</div>

</body>
</html>

Om man - når man er blevet gjort det klart, at man skyder sig selv i foden med skodkode af svær kaliber - stadig insisterer på at undlade DTD'en, kan jeg naturligvis ikke gøre noget ved ... men nu ved I det i hvertfald  ;o)
Avatar billede madsens90 Praktikant
05. februar 2008 - 00:18 #24
Jeg kan godt se dens vigtighed. :)

Men hvis ens side fungerer som man vil have det uden, hvorfor så ikke bare undlade den?

Medmindre man selvfølgelig er bange for fejl på siden senere hen?
Avatar billede olebole Juniormester
05. februar 2008 - 00:33 #25
En webside bør kunne ændres/udvides/rettes/udvikles uden bøvl og besvær og bør derfor skrives til gældende standarder.
At en webside uden DTD overhovedet kan vises i en browser, er i virkeligheden et tilfælde.

- og så virker det faktisk også at køre i venstre side af motorvejen. Sålænge de modkørende overhovedet har en jordisk chance for vige for dig, vil de gøre det ... men forvent ikke, det varer evigt. At noget virker betyder ikke nødvendigvis, det er klogt  ;o)
Avatar billede madsens90 Praktikant
05. februar 2008 - 08:57 #26
hehe. :) Jeg forstår. :)

Så må jeg jo lige få det til at virke senere. :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester