Kandu.dk - centrere tabel på siden


/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg

Glemt dit kodeord?

Brugernavn*

Kodeord *

Husk mig

Brugerservice

Kom godt i gang

Bliv medlem

Seneste indlæg

Find en bruger

Stil et spørgsmål

Skriv et tip

Fortæl en ven

Pointsystemet

Kontakt Kandu.dk

Emnevisning

Kategorier

Alfabetisk

Karriere

Interesser

Teknologi

Reklame

Top 10 brugere

HTML

#	Navn	Point
1	molokyle	11184
2	Klaudi	5506
3	bentjuul	3377
4	severino	2040
5	smorch	1950
6	strarup	1525
7	natmaden	1396
8	scootergr..	1320
9	e.c	1150
10	miritdk	1110

centrere tabel på siden
Fra : Inger

Dato : 11-10-05 21:28

Hejsa...

Jeg har lavet mig et lille visitkort på nettet. www.ilddrage.dk
Det er helt enkelt en tabel med en css ramme på.

Jeg kunne virkelig godt tænke mig at centrere den tabel både lodret og
vandret og ikke kun, som nu, vandret. Det skal være sådan at tabellen er
centreret uanset hvilken opløsning man ser siden i.

Hvordan kan jeg gøre det? Helst med css eller html hvis det er muligt.
Ellers med javascript eller hvad der nu kan bruges...

Håber nogen kan hjælpe Glad

Hilsen Inger

Knud Gert Ellentoft (11-10-2005)

Kommentar
Fra : Knud Gert Ellentoft

Dato : 11-10-05 22:20

Inger skrev:

>Jeg kunne virkelig godt tænke mig at centrere den tabel både lodret og
>vandret og ikke kun, som nu, vandret. Det skal være sådan at tabellen er
> centreret uanset hvilken opløsning man ser siden i.

Det er ikke umiddelbart en god ide, men såfremt indholdet ikke
kommer til at ftlde mere i højden end det gør nu, så kan du bruge
løsningen på
http://ellentoft.1go.dk/centrer/

Se i kildekoden.

Princippet er at du skal kende højden (og bredden) på indholdet i
den <div>, som du skal smide sidens indhold ind i og så sætter
negativ margin på.

Se i koldekoden, om det er et billede (som i eksemplet) eller
noget indhold er ligegyldigt.

Og meget vigitgt:

Du angiver ikke nogen doctype på dine sider, det skal der være.

Så sæt

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

allerøverst på alle dine sider.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Knud Gert Ellentoft (11-10-2005)

Kommentar
Fra : Knud Gert Ellentoft

Dato : 11-10-05 22:41

Knud Gert Ellentoft skrev:

>Det er ikke umiddelbart en god ide,

Grunden til at det ikke er en god ide, er at hvis indholdet
fylder for meget, så vil indholdet ikke længere være centreret i
små browservinduer.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Inger (12-10-2005)

Kommentar
Fra : Inger

Dato : 12-10-05 18:45

Knud Gert Ellentoft wrote:
> Inger skrev:
>
>
>>Jeg kunne virkelig godt tænke mig at centrere den tabel både lodret og
>>vandret og ikke kun, som nu, vandret. Det skal være sådan at tabellen er
>> centreret uanset hvilken opløsning man ser siden i.
>
>
> Det er ikke umiddelbart en god ide, men såfremt indholdet ikke
> kommer til at ftlde mere i højden end det gør nu, så kan du bruge
> løsningen på
> http://ellentoft.1go.dk/centrer/
>
> Se i kildekoden.

Det er lige præcis hvad jeg søger.Siden kommer ikke til at fylde mere i
sin nuværende designmæssige udgave, så jeg vil tro at det går.

> Princippet er at du skal kende højden (og bredden) på indholdet i
> den <div>, som du skal smide sidens indhold ind i og så sætter
> negativ margin på.
>
> Se i koldekoden, om det er et billede (som i eksemplet) eller
> noget indhold er ligegyldigt.

Mange tak. Jeg tænkte nok at det kunne lade sig gøre med css, men jeg
kunne ikke rigtig liiige få det til at gøre som jeg gerne ville...

>
> Og meget vigitgt:
>
> Du angiver ikke nogen doctype på dine sider, det skal der være.
>
> Så sæt
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
>
> allerøverst på alle dine sider.

Det er muligvis et dumt spørgsmål, men... Hvorfor er det så vigtigt?
Jeg bruger Dreamweaver og den opretter også den linje kode (eller noget
der minder om). Men jeg har haft nogle problemer med ting der ikke ville
virke. Hvis man så slettede disse linjer, så virkede det. Det har fået
mig til at slette dem for at undgå problemet. En af de ting jeg havde
problemer med var farvet scroll.

Jeg har testet denne side i Mozilla og IE og den virker fint i begge...

Mvh. Inger

Knud Gert Ellentoft (12-10-2005)

Kommentar
Fra : Knud Gert Ellentoft

Dato : 12-10-05 19:58

Inger skrev:

>Det er muligvis et dumt spørgsmål, men... Hvorfor er det så vigtigt?
>Jeg bruger Dreamweaver og den opretter også den linje kode (eller noget
>der minder om). Men jeg har haft nogle problemer med ting der ikke ville
>virke. Hvis man så slettede disse linjer, så virkede det. Det har fået
>mig til at slette dem for at undgå problemet. En af de ting jeg havde
>problemer med var farvet scroll.

For at få det til at virke, så skal IE sættes i standardmode og
dermed stort set overholder html- og cssstandarderne.

Hvis du vil bruge farvede scrollbar (som ikke er valid CSS) med
korrekt doctype, så skal definitionerne sættes på html og ikke
body.

html {
scrollbar-3d-light-color:blue;
scrollbar-arrow-color:red;
scrollbar-base-color:black;
scrollbar-dark-shadow-color:green;
scrollbar-face-color:yellow;
scrollbar-highlight-color:red;
scrollbar-shadow-color:blue
}

f.eks.

Er der andre ting, der driller, så er det sikkert også noget der
kan rettes.

Samtidig sikrer du at siderne vises så godt som ens i forskellige
browsere, hvor det ellers kan variere.

Se gerne http://www.hintzmann.dk/articles/doctype/
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Inger (13-10-2005)

Kommentar
Fra : Inger

Dato : 13-10-05 05:24

Knud Gert Ellentoft wrote:
> Inger skrev:
>
>
>>Det er muligvis et dumt spørgsmål, men... Hvorfor er det så vigtigt?
>>Jeg bruger Dreamweaver og den opretter også den linje kode (eller noget
>>der minder om). Men jeg har haft nogle problemer med ting der ikke ville
>>virke. Hvis man så slettede disse linjer, så virkede det. Det har fået
>>mig til at slette dem for at undgå problemet. En af de ting jeg havde
>>problemer med var farvet scroll.
>
>
> For at få det til at virke, så skal IE sættes i standardmode og
> dermed stort set overholder html- og cssstandarderne.
>
> Hvis du vil bruge farvede scrollbar (som ikke er valid CSS) med
> korrekt doctype, så skal definitionerne sættes på html og ikke
> body.
>

Okay, det vidste jeg så ikke at man kunne... Men jeg skal da prøve at
kigge på det Glad

Meeen jeg er nu stadig ikke helt overbevist om at det
er så vigtigt... Hvorfor er det det?

Inger

Inger (12-10-2005)

Kommentar
Fra : Inger

Dato : 12-10-05 19:00

Knud Gert Ellentoft wrote:

> Princippet er at du skal kende højden (og bredden) på indholdet i
> den <div>, som du skal smide sidens indhold ind i og så sætter
> negativ margin på.
>

Jeg har nu smidt den style ind i mit allerede eksisterende stylesheet
(eksternt). Det er faktisk ikke nødvendigt at bruge et <div>. Jeg havde
allerede en class til min ramme omkring tabellen og den fik så blot lidt
flere atributter (hedder det dét?) på class'en og så hoppede den pænt
ned. Så glad er jeg Glad

Men den placerer sig ikke helt i midten. Jeg går ud fra at det er fordi
jeg ikke har gjort noget ved de negative værdier du har angivet og min
tabel er større end dit billede var. Men jeg kan ikke helt gennemskue
hvordan du er kommmet frem til værdierne?

Min class ser lige nu sådan ud:

..ramme {

   border: thin solid #000000;
   position : absolute;
   top : 50% ;
   left : 50% ;
   width : 472px ;
   height : 296px ;
   margin-top : -181px ;
   margin-left : -268px ;
   margin-right : auto ;
   margin-bottom : auto ;
   padding : 0;

}

Hvordan regner jeg ud hvad jeg skal sætte margin-top og margin-left til?
Eller er problemet et helt andet?

Mvh. Inger

Knud Gert Ellentoft (12-10-2005)

Kommentar
Fra : Knud Gert Ellentoft

Dato : 12-10-05 20:04

Inger skrev:

>.ramme {
>
>   border: thin solid #000000;
>   position : absolute;
>    top : 50% ;
>    left : 50% ;
>    width : 472px ;
>    height : 296px ;
>    margin-top : -181px ;
>    margin-left : -268px ;
>    margin-right : auto ;
>    margin-bottom : auto ;
>    padding : 0;
>
>}
>
>Hvordan regner jeg ud hvad jeg skal sætte margin-top og margin-left til?

margin-top skal være det halve af højden.
så når højden er 296 pixels, så
margin-top: -148px;

margin-left skal være det halve af bredden,
så når bredden er 472 pixels, så
margin-left: -236px;

OK, hvis du så havde sat bredden til 473px, så er du nødt til at
vise det en pixels forkert (man kan ikke lave halve pixels), men
det er så lidt, at det ikke har nogen praktisk betydning, man vil
ikke kunne se det.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Inger (13-10-2005)

Kommentar
Fra : Inger

Dato : 13-10-05 05:26

Knud Gert Ellentoft wrote:
> Inger skrev:
>
>
>>.ramme {
>>
>>   border: thin solid #000000;
>>   position : absolute;
>>    top : 50% ;
>>    left : 50% ;
>>    width : 472px ;
>>    height : 296px ;
>>    margin-top : -181px ;
>>    margin-left : -268px ;
>>    margin-right : auto ;
>>    margin-bottom : auto ;
>>    padding : 0;
>>
>>}
>>
>>Hvordan regner jeg ud hvad jeg skal sætte margin-top og margin-left til?
>
>
> margin-top skal være det halve af højden.
> så når højden er 296 pixels, så
> margin-top: -148px;
>
> margin-left skal være det halve af bredden,
> så når bredden er 472 pixels, så
> margin-left: -236px;
>
> OK, hvis du så havde sat bredden til 473px, så er du nødt til at
> vise det en pixels forkert (man kan ikke lave halve pixels), men
> det er så lidt, at det ikke har nogen praktisk betydning, man vil
> ikke kunne se det.

Aha.... Det er sådan det hænger sammen... Jeg er ikke sikker på at jeg
forstår det, men nu ved jeg det ihvertfald Glad

Tuuuusind tak Glad

Mvh. Inger

Knud Gert Ellentoft (13-10-2005)

Kommentar
Fra : Knud Gert Ellentoft

Dato : 13-10-05 14:39

Inger skrev:

>Aha.... Det er sådan det hænger sammen... Jeg er ikke sikker på at jeg
>forstår det, men nu ved jeg det ihvertfald Glad

Når man sætter top og left til 50% så centrerer man sidens
indhold fra midten, hvor siden så vil blive vist.

Dvs, det er sidens øverste venstre hjørne, der er centreret, ikke
selve indholdet.

For så at kunne »skubbe det på plads«, så indholdet bliver
centreret, så man man flytte halvdelen af indholdet henholdsvis
op og til venstre, det er så det den negative margin bruges til.
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Inger (13-10-2005)

Kommentar
Fra : Inger

Dato : 13-10-05 18:24

Knud Gert Ellentoft wrote:
> Inger skrev:
>
>
>>Aha.... Det er sådan det hænger sammen... Jeg er ikke sikker på at jeg
>>forstår det, men nu ved jeg det ihvertfald Glad

>
>
> Når man sætter top og left til 50% så centrerer man sidens
> indhold fra midten, hvor siden så vil blive vist.
>
> Dvs, det er sidens øverste venstre hjørne, der er centreret, ikke
> selve indholdet.
>
> For så at kunne »skubbe det på plads«, så indholdet bliver
> centreret, så man man flytte halvdelen af indholdet henholdsvis
> op og til venstre, det er så det den negative margin bruges til.

Oohhh... NU forstår jeg det!!! Tak for den gode forklaring Glad

Mvh. Inger

Jens Gyldenkærne Cla~ (13-10-2005)

Kommentar
Fra : Jens Gyldenkærne Cla~

Dato : 13-10-05 12:42

Inger skrev:

[om doctype-erklæringen]

> Meeen jeg er nu stadig ikke helt overbevist om at det
> er så vigtigt... Hvorfor er det det?

Selve doctype-erklæringen er egentlig ikke vigtig - men det er
vigtigt at man bruger html og css korrekt på sine sider. Årsagen
til det er at der findes mange forskellige programmer der fortolker
websider.

Der er to ting der bruges til at udvikle programmer af denne type -
først og fremmest webstandarderne, der fortæller hvad et program
(typisk en browser) skal gøre ved en given html- eller css-kode, og
dernæst "gængs praksis" - der fortæller hvordan andre browsere
håndtere samme stykke kode.

Webstanderne er ret enkle at gå til (for en programudvikler) - her
kan man se præcise regler for hvordan html og css kan sættes sammen
og hvordan sammensætningen skal fortolkes.

"Gængs praksis" er til gengæld ikke nær så let at definere - man
kan kigge på hvordan udbredte programmer har fortolket bestemte
stykker kode, men da der utallige måder at sammensætte html-
og css-stykker på er det umuligt at lave en fuldstændig
implementering af "gængs praksis".

Når man udvikler hjemmesider (og ikke browsere), er det praktisk at
holde sig til de standarder som browserne er udviklet til. Ved at
bruge standardoverholdende kode, giver man alle browsere mulighed
for at fortolke den efter et veldefineret regelsæt. Alternativet er
at man lader browseren om at "gætte sig til" hvordan en kode skal
fortolkes - og det kan nemt resultere i vidt forskellige visninger
i forskellige programmer.

Man kan så argumentere for at "når det virker hos mig, så virker
det vel også for alle andre". Det er bare ikke sikkert - folk
bruger forskellige browsere, forskellige styresystemer og
forskellige skærmstørrelser - og der er ingen grund til at nøjes
med at lave sider til folk der bruger samme konstellation som en
selv.

Hvis du nu gerne vil lave standardoverholdende websider, *så*
bliver doctype-erklæringen vigtig. Det bliver den af to grunde -
dels er den nødvendig for at kunne validere siden automatisk, og
dels er den nødvendig til at sætte siden i standardmode i nyere
browsere - det sikrer at browserne vægter vedtagne standarder
højere end tidligere tiders "gængs praksis".

På <http://www.hintzmann.dk/articles/doctype/> kan du læse en del
om doctype.

Artiklen "Jamen det virker jo i MSIE" <http://html-faq.dk/2021.asp>
fra gruppens faq-side, kan også være relevant.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Inger (13-10-2005)

Kommentar
Fra : Inger

Dato : 13-10-05 18:11

Jens Gyldenkærne Clausen wrote:
> Inger skrev:
>
> [om doctype-erklæringen]
>
>
>>Meeen jeg er nu stadig ikke helt overbevist om at det
>>er så vigtigt... Hvorfor er det det?
>
>
> Selve doctype-erklæringen er egentlig ikke vigtig - men det er
> vigtigt at man bruger html og css korrekt på sine sider. Årsagen
> til det er at der findes mange forskellige programmer der fortolker
> websider.
>
[snip]

Mange tak for forklaringen. Jeg er blevet klogere og kan nu bedre forstå
hvorfor det er vigtigt at have den med.

Mvh. Inger

Søg

Reklame

Statistik

Spørgsmål :	177553
Tips :	31968
Nyheder :	719565
Indlæg :	6408849
Brugere :	218888

Månedens bedste

Årets bedste

Sidste års bedste