Center Table i xhtml v. Opera

lav en div udenom:
<div style="text-align:center">
  <table .... </table>
</div>

tror det er:

<div style="text-align:center;">

<table>....

</div>

Hono

nå, for langsom :/

jakoba>Det har jeg skam også og det virker også fint i andre browsere bare ikke Opera.

hono>Nej du var ikke for langsom. Blot forkert svar.

schulze >> Så var jeg både for langsom, og gav et forkert svar ;). Er det  Opera6 du snakker om?

Hono

hono>Ja 6.01

Samme problem her, og jeg har prøvet alt jeg kunne komme i tanke om. Desuden centrerer den heller ikke i eks. Mozilla. At smide et id på tabellen og derefter text-align: center virker heller ikke.

n0rmality>Nej, det har jeg også prøvet. Der må da være en løsning.

Tja, det ser ikke helt nemt ud... Afhængigt af hvor vigtigt det er for dig, kunne det vel lade sig gøre med et lille script. Du kunne gøre sådan:

1. Lav en "grundtabel" der fylder hele siden, med en række med tre celler.
2. I den miderste celle placerer du den tabel du vil have centreret.
3. Grundtabellens to andre cellers width, bestemmes udfra følgende via java script:
("vinduets bredde" - "den tabel du vil have centrerets bredde")/2

Langt ude, men vil det ikke virke?

Hono

hono : Problemet er, at JS'et vil være et helvede at lave så eks. opera forstår det på samme måde som IE, NS, Konqueror, Mozilla osv. :)

kan det være den <div skal have en width:100%; ?

Her engang oplevet at hvis det der skulle centreres havde en margin angivelse ville den ikke.

jakoba>kan det være den <div skal have en width:100%; ?

Nope prøvede jeg lige.

Hvad med:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin:0px; padding:0px;}

#Content {
    position:absolute;
    left:50%;
    width:500px;
    margin-top:50px;
    margin-left:-266px;
    padding:15px;
    text-align:center;
}
</style>
</head>
<body>
<div id="Content">
<table width="500" style="background-color:#CCCCCC">
<tr>
<td>Dette er en centreret tabel</td>
</tr>
</table>
</div>
</body>
</html>

pelkjaer >> Det forudsætter vel, at tabellen har en fast bredde...

Hono

Den rigtige måde at gøre det på er flg.:
<div style="width: 300px; height: 300px; margin-left: auto; margin-right: auto">, det understøtter Netscape 6/Mozilla samt Opera.

Men desværre følger IE ikke standarden her, så man må bruge noget workaround.
http://bluerobot.com/web/css/center1.html

hono>>Næ :)

pelkjaer>Nope kan jeg ikke bruge til noget desværre.

Pelkjaer >> Er den her centreret ved dig?:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin:0px; padding:0px;}

#Content {
    position:absolute;
    left:50%;
    width:500px;
    margin-top:50px;
    margin-left:-266px;
    padding:15px;
    text-align:center;
}
</style>
</head>
<body>
<div id="Content">
<table width="30%" style="background-color:#CCCCCC">
<tr>
<td>Dette er en centreret tabel</td>
</tr>
</table>
</div>
</body>
</html>

knudgert>Gider du uddybe?

knudgert>Det holder altså ikke nu er tabellen helt til højre.

hono>>Ja i IE :)

Alright ikke i Opera kan jeg nu se.

Men bortset fra det forstår jeg ikke hvorfor tabeller er ønskværdigt i xhtml strict.

Hvad er det der ikke kan laves med divs?

Jamen det er jo fint. så smæk en text-align:center ind oveni til IE at adlyde.

schulze >> Hvorfor var det egentligt at du ikke kunne bruge pelkjaers bud?

Hono

hono>Det virker ikke.

schulze>> Det holder altså ikke nu er tabellen helt til højre.

Til venstre i IE mender du vel, men det er jo også det jeg skriver, at IE ikke følger standarden og derfor ikke viser margin: auto efter det den er tiltænkt og kommer sp med et link, hvor der står, hvordan det kan laves.

knudgert>Nej til højre i opera

schulze >> Det virker hos mig. Hvis din tabel har en bestemt bredde kan du da sagtens bruge pelkjaers metode!

Hono

hono>Jo, men jeg for vel problemer med IE så.

Lad os lige holde helt klart. der er en <div udenom (min og hono's) som kan centrere i IE

og så en anden <div indeni (knudgers) som centrerer sigselv i opera6 og mozilla

<div style="text-align:center">
  <div style="width: 300px; height: 300px; margin-left: auto; margin-right: auto">
    <table .... </table>
  </div>
</div>

mon ikke det er sådan vi skal se på det?

schulze>>Hvilke problemer?

Ingen her hverken i NS6, IE6 eller Opera 6 - vel og mærke med fast bredde.

pelkjaer>Jeg kigger lige på det igen. Læg lige et svar i tilfælde af at det virker.

schulze >> Pelkjaers virker, dog ikke i Netscape 4.07 - men hvad så...

Hono

hmm hvad nu hvis min table width="750" hvad skal så ændres?

jeg har aldrig hørt om folk, som vil have en enkelt centret table, men jeg har hørt om dem som laver en stor, med flere under tabeler...

schulze:

så skal det være:

#Content {
    position:absolute;
    left:50%;
    width:500px;
    margin-top:50px;
    margin-left:-390px;
    padding:15px;
    text-align:center;
}

aspprogram>Ja det er også det jeg prøver på at få til at virke i Opera.

Det var da vist ikke et svar hva?

hono>Tak, men hvordan er det lige du kommer frem til det?

marginleft skal være den negative værdi af halvdelen af tabellens bredde, så den placeres i midten. Dog skal der hensyn til paddingen på 15. Dermed skal margin-left være 15 mindre. Altså:

-750/2 - 15 = -390

Hono

(750+15+15)/2 giver 390  så den skal forskubbes 390 px til-venstre for den midte der bliver sat med left:50%

men ærlig talt. alt det fnadder fordi det ikke må være tilladt at bruge <center>...</center> ?

Kunne man forsestille sig at der sidder folk i W3's standard kommite med det ene formål at sabotere arbejdet? Det er sguda FOR tåbeligt.

mvh JakobA

hono>Eksemplet virker fint nok i IE, meeeeen i opera vises det hele i højre side.

Det skal lige bemærkes at jeg har underliggende tabeller med en width på 100%. Måske er det det det spiller ind.

Det skal også lige siges at tabellen kun skal centreres horisontalt ikke vertikalt.

hmm. Et lille tankeeksperiment. Erstat margin-left:-390px; med margin-right:390px; ....????

Hono

hono>Næh så kom de bare længere mod højre.... findes der en alternativ løsning...?

Hmm, jeg deserterer og slutter mig til jakobas terrororganisation, med det erklærede mål, at gøre det af med sadistiske og kodesyge W3-folk...

Hono

lol

velkommen Broder. :-)

Dvs. Det ikke kan lade sig gøre....

Tak :-). Vi må hellere finde et navne, hvis vi skal fremstå seriøst. Hvad med:
t.o.r.s.k - Terrorister Obstruerende Røv Sindsyge Kodestandarder :)

Hono

schulze >> N0rmality siger jo han også har kæmpet med det så... Hvis jeg var dig ville jeg nok falde for fristelsen til <center></center>.

med hensyn til det med at det ikke virker i Opera. Dt gør det nu ved mig. Så det må være noget med de andre tabeller. Kunne man se koden, eller en tilsvarende?

Hono

Hmm... hvad med:

  Humane Terrorister Mod Lovforplumring

Ups. sætningen ovenfor skulle have været centreret, men jeg kan ikke hitte u' a'et :-)

hehe, ja H.T.M.L. vil være bedre :)

Hono

hono>
<div class="c1">
<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="4"
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="2">
<tr>
<td valign="top">
</td>


osv...
afslutter med div.

problemet er for mig at se, at opera af en eller anden grund vælger ikke at gøre tabellen 750 px. bred når der er tabller med width på 100% inde i. Hvis du derimod sætter deres width til 750 (hvilket jo ikke burde gøre nogen forskel), så virker det hos mig.

Hono

hono>Oki det prøver jeg lige.

men skolen skal jo også passes :) Så jeg smutter nu så jeg kan få lavet lektier før jeg skal i seng. Godnat.

Hono

k, så venter jeg lige 2 sekunder.

I opera smider den stadig siden 10 meter til højre.

faark. Det fatter jeg ikke. Men jeg må smutte nu. Kigger videre på det i morgen. Godnat.

Hono

hmmm hvis jeg sætter:
left:10%;

Så virker det i opera, men ikke i IE.

hmm jeg aner det ikke så schulze desværre?

Jakoba >> Tillykke med at have passeret det 100.000 points :)

Hono

hono>Tja, ved 1.000.000 nulstilles ens point og man starter fra nul. Det er sket 2 gange for mig nu.

haha, schulze. Så er det sgu mærkeligt at Jakoba har 100.300 points :D

Hono

hono>Jeg skrev 1.000.000

ahh, på den måde. Det er sq ikke så dårligt!

Hono

Tak for jeres forsøg, men det funker ikke.