[html] tabel centreren probleem - Softwareontwikkeling

donderdag 30 juni 2005 20:28

Acties:

Topicstarter

Ik heb over de achtergrond, als tweede laag een header in een tabel geplaats.
Het tabel is net zo groot als de header, 1000 x 127 pixels.
Ik heb zowel de header als het tabel gecentreerd.
Echter als ik de browser kleiner schuif of als ik een kleinere scherm-resolutie doe dan schuift de header
geheel naar links.
Hoe kan ik de header, ongeacht wat het schermresolutie is in het midden houden?
Misschien is de tabel overbodig maar ik had gehoopt dat daar het probleem mee was opgelost
maar helaas dat werkte niet.

om te zien wat ik bedoel is hier de pagina waar het omgaat.

donderdag 30 juni 2005 20:33

Acties:

André

Analytics dude

Zet de tabel op position: absolute, left: 50% en margin-left op -500px, daarna op de body een margin-top:127px om de content omlaag te schuiven en dan moet je al een heel eind zijn.

donderdag 30 juni 2005 20:40

Acties:

Eusebius

Je bedoelt dat je bij een kleiner venster rechts heel veel groen krijgt?

==
hoi

donderdag 30 juni 2005 20:40

Acties:

Verwijderd

Horizontaal centreren doen we bij voorkeur niet met left: 50%; omdat er dan content links uit beeld kan schuiven, waar je met geen mogelijkheid meer naartoe kunt scrollen.

Horizontaal centreren van een block-level element doe je met margin-left: auto; margin-right: auto;. Dat werkt in de moderne browsers. Voor de oudere browsers, en quirks mode in IE, kun je de parent element text-align: center; meegeven, en indien nodig het element zelf: text-align: left;.

Zo komen er keurig scrollbars als de content te breed is, je ziet dan alleen de linkerkant van het element, maar kunt nog wel prima naar rechts scrollen.

[ Voor 3% gewijzigd door Verwijderd op 01-07-2005 09:34 . Reden: crisp :* ]

donderdag 30 juni 2005 21:09

Acties:

Artwido

Topicstarter

Eusebius schreef op donderdag 30 juni 2005 @ 20:40:
Je bedoelt dat je bij een kleiner venster rechts heel veel groen krijgt?

Ja dat bedoel ik.

@ Cheatah

ik ga ermee aan de slag.

vrijdag 1 juli 2005 00:01

Acties:

crisp

Devver

Pixelated

correctie op Cheatah: margin-left en margin-right ipv padding

Intentionally left blank

vrijdag 1 juli 2005 07:37

Acties:

Artwido

Topicstarter

ga ik ook proberen, want met padding-left auto; ging het niet. maar dat kan ook misschien komen omdat ik niet weet waar ik het moet plaatsen.
Als ik het namelijk voor <table.. zet dan krijg ik de code in beeld.
ik neem aan dat je padding en marging code niet hoeft af te sluiten met / ?

waar moet ik dan de code plaatsen?

vrijdag 1 juli 2005 08:04

Acties:

TwoR

Gekleurde stippen

je moet het ook in een style voor CSS zetten dit kan in een extern bestand of in de code zelf.

code:

1 2	<table style="margin-left: aantalpx; position: absolute;"> </table>

Je kan de stijl ook in een extern bestand defineren:

code:

.hoofdtabel{
  margin-left: aantal px;
  position: absolute;
}

sla deze op als style.css en dan in je code

code:

1
2
3

<link rel="stylesheet" type="text/css" href="./style.css">
<table class="hoofdtabel">
</table>

[ Voor 17% gewijzigd door TwoR op 01-07-2005 08:05 ]

vrijdag 1 juli 2005 09:33

Acties:

Verwijderd

crisp schreef op vrijdag 01 juli 2005 @ 00:01:
correctie op Cheatah: margin-left en margin-right ipv padding

d0h

vrijdag 1 juli 2005 09:43

Acties:

Verwijderd

TwoR schreef op vrijdag 01 juli 2005 @ 08:04:
je moet het ook in een style voor CSS zetten dit kan in een extern bestand of in de code zelf.
code:
1
2
<table style="margin-left: aantalpx; position: absolute;">
</table>
Je kan de stijl ook in een extern bestand defineren:
code:
1
2
3
4
.hoofdtabel{
  margin-left: aantal px;
  position: absolute;
}
sla deze op als style.css en dan in je code
code:
1
2
3
<link rel="stylesheet" type="text/css" href="./style.css">
<table class="hoofdtabel">
</table>

absoluut positioneren lijkt me niet handig, dan kom je allicht in de knoei met de flow van de content na je tabel.

een classe hoofdtabel lijkt me ook niet handig. Als dit het default gedrag moet worden voor al je tabellen, kan je beter gewoon het element als selector pakken en voor speciale andere tabellen een classe maken:

Cascading Stylesheet:

1
2
3

table {
  margin: 1em auto;
}

en that's it. Heb even 1em gedaan voor marge boven en onder, maar dat kan natuurlijk ook anders

vrijdag 1 juli 2005 16:27

Acties:

Ma_rK

^{*Ma_rK in de hoek ga je schamen (javascript bepaald resolutie, breedte tabel / 2 en dat via PHP in een css plaatsen)}
Absolute neerzetten is soms gewoon nodig. Ook is margin-left: auto; margin-right: auto; lang niet altijd te gebruiken. Ik vind dit, left:50%; margin-left: - (contentbreedte/ 2)px;, over het algemeen (bv bij meerdere z indexen) de beste optie.

vrijdag 1 juli 2005 18:05

Acties:

Verwijderd

Ma_rK schreef op vrijdag 01 juli 2005 @ 16:27:
^{*Ma_rK in de hoek ga je schamen (javascript bepaald resolutie, breedte tabel / 2 en dat via PHP in een css plaatsen)}
Absolute neerzetten is soms gewoon nodig. Ook is margin-left: auto; margin-right: auto; lang niet altijd te gebruiken. Ik vind dit, left:50%; margin-left: - (contentbreedte/ 2)px;, over het algemeen (bv bij meerdere z indexen) de beste optie.

En waarom is dat een betere optie dan margin-left en margin-right op auto zetten? Zoals ik al zei kun je met de door jou geprefereerde methode problemen krijgen als het venster te smal wordt. Met de margins methode kan het zijn dat het in achterlopende browsers niet werkt, maar centreren is over het algemeen niet noodzakelijk voor het juist functioneren van de website.

Dus als jij even wat voorbeelden wilt geven waarom horizontaal (!) centreren soms noodzakelijk is, graag. De er ook gelijk een lijstje met gebruikerspercentages bij, van browsers die de door mij genoemde methode niet ondersteunen.

vrijdag 1 juli 2005 20:45

Acties:

Verwijderd

'min-width', really. 'margin:0 auto' heeft namelijk (theoretisch) hetzelfde probleem bij een te smal venster.

vrijdag 1 juli 2005 21:54

Acties:

HyperioN

Verwijderd schreef op vrijdag 01 juli 2005 @ 20:45:
'min-width', really. 'margin:0 auto' heeft namelijk (theoretisch) hetzelfde probleem bij een te smal venster.

min-width is IE-only afaik.

vrijdag 1 juli 2005 21:56

Acties:

Verwijderd

HyperioN. schreef op vrijdag 01 juli 2005 @ 21:54:

min-width is IE-only afaik.

In IE geldt de width property min of meer als min-width. Een echte width en max-width bestaan niet voor Internet Explorer.

zaterdag 2 juli 2005 11:09

Acties:

Verwijderd

Verwijderd schreef op vrijdag 01 juli 2005 @ 20:45:
'min-width', really. 'margin:0 auto' heeft namelijk (theoretisch) hetzelfde probleem bij een te smal venster.

da's niet helemaal waar als ik dit goed begrijp

If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.

ergo margin:0 auto; wordt behandeld als margin: 0; als de container te klein wordt.

dit:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

geldt dus alleen maar als de container groter is dan het block

Verder heb je position: absolute vast wel eens nodig, maar voor tabellen lijk je me dan de complete flow van je tekst verneuken, je gaat p's toch ook vrijwel nooit absoluut positioneren?

[ Voor 21% gewijzigd door Verwijderd op 02-07-2005 11:11 ]

zaterdag 2 juli 2005 11:46

Acties:

Verwijderd

Voor moderene browsers gebruik margin: 0 auto; and voor IE gebruik text-align: center; raar maar waar

zaterdag 2 juli 2005 11:54

Acties:

Verwijderd

O ja das waar. In nieuwere versies van CSS 2 is het gewijzigd om IE te volgen. (Net zoals Mozilla's implementatie is gewijzigd.)

zaterdag 2 juli 2005 12:08

Acties:

rimave

Ik heb op mijn eigen site (link hieronder) de tabel ook precies in het midden staan. Ik heb dit voor mekaar gekregen door eerst een grote table te maken met width en height 100% en daarin de tabel van de site zelf. Zo blijft deze tabel qua grote gelijk, ongeacht de resolutie van het scherm.

The only thing better than a cow, is a human. Unless you need milk. Then you really need a cow.

zaterdag 2 juli 2005 12:09

Acties:

Verwijderd

we hebben het hier natuurlijk niet over tabellen voor opmaak