[HTML/CSS] Tabel align probleem met scrolbalk

[We Are Borg]

Alleerst, de code die het probleem veroorzaakt

Cascading Stylesheet:

.table1 {
width: 742px;
font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #D9D9D9;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: auto;
margin-right: auto;
}

.table2 {
width: 742px;
font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #F2F2F2;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: auto;
margin-right: auto;
}

Dit zorgt ervoor dat 2 tabellen gecentreerd worden weergegeven. Naar mijn mening een betere oplossing dat div align="center" en zou het dus ook graag zo willen houden.

Nu kan het voorkomen dat de tabellen niet groter worden dan de pagina in lengte, dus geen scrollbalk aan de rechterkant.

Nu doet zich alleen een probleem voor wanneer er WEL een scrolbalk komt (pagina is groter dan scherm en dus scrolbalk).

Internet explorer geeft geen probleem, maar Mozilla en Opera wel. Zodra de scrolbalk verschijnt, verschuiven de tabellen een beetje naar links. Dit komt denk ik omdat die balk er voor zorgt dat hij de margin links en recht een klein beetje moet aanpassen naar links om de pagina netjes gecentreerd te houden.

Nu vraag ik me af hoe ik dit kan oplossen . Ik kan wel een vaste left margin geven, maar dan is het niet gecentreerd op elke resolutie.

_{Hoop dat mijn verhaal beetje duidelijk is.}

---

[rml]We Are Borg in "[ HTML/CSS] Tabel align probleem met scro..."[/rml]

Voor de complete source + extra uitleg

[ Voor 6% gewijzigd door We Are Borg op 05-11-2003 18:06 ]

[faabman]

je zou naar overflow:scroll kunnen kijken, deze zet de scrollbalk altijd aan (lelijk dus )

daarnaast kun je misschien met javascript (innerWidth??) de positie van je tabel zo aanpassen dat er bij mozilla e.d. al rekening wordt gehouden met een ruimte (17px??) aan de rechterkant

edit:
een derde oplossing is ervoor te zorgen dat je tabellen nooit groter worden dan de pagina, door een overflow:auto; op de tabellen toe te passen zal deze een scrollbar weergeven wanneer de inhoud te groot wordt...

[ Voor 29% gewijzigd door faabman op 05-11-2003 15:43 ]

[We Are Borg]

FvKnijff schreef op 05 november 2003 @ 15:42:
je zou naar overflow:scroll kunnen kijken, deze zet de scrollbalk altijd aan (lelijk dus )

Ik zat er al naar te zoeken met de search. Inderdaad een oplossing, maar wel een vieze .

Note:

Het valt me trouwens op dat GoT dit ook heeft. Hier op een resolutie van 1280x1024 zie ik bij de logout ook een scrollbalk, terwijl er niks te scrollen valt. Vraag me af of de template devvers toen ook dit probleem zo hebben opgelost.

Ook op andere fora (motor forum) zie ik die scrollbalk al is het niet nodig. Ben dus niet de enige die het probleem heeft

daarnaast kun je misschien met javascript (innerWidth??) de positie van je tabel zo aanpassen dat er bij mozilla e.d. al rekening wordt gehouden met een ruimte (17px??) aan de rechterkant

edit:
een derde oplossing is ervoor te zorgen dat je tabellen nooit groter worden dan de pagina, door een overflow:auto; op de tabellen toe te passen zal deze een scrollbar weergeven wanneer de inhoud te groot wordt...

Dit is dan misschien nog net iets beter

* We Are Borg wacht nog even wat andere antwoorden af.

Bedankt alvast voor je input!

[ Voor 9% gewijzigd door We Are Borg op 05-11-2003 15:51 ]

[disjfa]

kan je neit gewoon 2 divjes nemen ipv tables en die op hooght 100% zetten en de overflow. aanzetten.

_{of wachten tot je clay`s scriptje af is, dan kan je bottom ook in ie gebruiken}

[We Are Borg]

Ik wil alleen die overflow optie liever niet gebruiken. Beetje ranzinge oplossing al ben ik bang dat dat wel de oplossing wordt als ik zie dat ze het hier op GoT ook gebruiken.

offtopic:
Ik wou dat Mozilla en Opera dit nu wel hetzelfde zou doen als IE...helaas

[ Voor 57% gewijzigd door We Are Borg op 05-11-2003 15:59 ]

[disjfa]

We Are Borg schreef op 05 november 2003 @ 15:58:
[...]
Ik wil alleen die overflow optie liever niet gebruiken. Beetje ranzinge oplossing al ben ik bang dat dat wel de oplossing wordt

ehrm..... dat is een standaart xhtml methode, niets geks aan hoor werkt alleen niet op tables. vandaar dat er hier een een paar mensen zitten die niet erg van tables houden * disjfa included

edit:
en voor je edit zoek box-sizing

[ Voor 7% gewijzigd door disjfa op 05-11-2003 16:00 ]

[We Are Borg]

disjfa schreef op 05 november 2003 @ 15:59:
[...]

ehrm..... dat is een standaart xhtml methode, niets geks aan hoor werkt alleen niet op tables. vandaar dat er hier een een paar mensen zitten die niet erg van tables houden * disjfa included

edit:
en voor je edit zoek box-sizing

Ehm, dan snap ik je verkeerd . Kan je misschien een klein voorbeeldje geven?

Ik dacht namelijk dat je hetzelfde bedoelde als FvKnijff en dus de scrollbalk altijd toont en zo het probleem omzeilt (zoals hier @ GoT wordt gedaan )

[disjfa]

als je een divje maakt kan je m bijvoorbeeld de scrollbalk hidden maken, dan kan je met extra knopjes (of scrolwiel) als er text in staat laten scrollen. dan moet je even naar scrolltop kijken. was pas nog een topic over

[faabman]

We Are Borg schreef op 05 november 2003 @ 16:01:
[...]


Ehm, dan snap ik je verkeerd . Kan je misschien een klein voorbeeldje geven?

Ik dacht namelijk dat je hetzelfde bedoelde als FvKnijff en dus de scrollbalk altijd toont en zo het probleem omzeilt (zoals hier @ GoT wordt gedaan )

Dat heb ik niet alleen gezegd he... je kan je tabellen (ik zei eerst tabel, maar, nu ik lees dat je op een tabel geen overflow kan toepassen) ook in een div zetten waarop de height:100%; en overflow:auto; zijn toegepast

[ Voor 1% gewijzigd door faabman op 05-11-2003 16:05 . Reden: schrijven is een kunst ]

[Willem]

Waarom niet een container div maken met daarin de tabellen?

[We Are Borg]

FvKnijff schreef op 05 november 2003 @ 16:04:
[...]


Dat heb ik niet alleen gezegd he... je kan je tabellen (ik zei eerst tabel, maar, nu ik lees dat je op een tabel geen overflow kan toepassen) ook in een div zetten waarop de height:100%; en overflow:auto; zijn toegepast

Ik heb je verkeerd begrepen. Ik heb even opgezocht wat de overflow nu precies is, want nog niks mee te maken gehad

The overflow property sets what happens if the content of an element overflow its area.

---

visible -> The content is not clipped. It renders outside the element
hidden The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
scroll -> The content is clipped, but the browser displays a scroll-bar to see the rest of the content
auto -> If the content is clipped, the browser should display a scroll-bar to see the rest of the content

Wat ik dan begrijp is dat als je overflow op auto zet, de scrollbalk alleen tevoorschijn komt wanneer de elemeten niet op 1 pagina getoont kunnen worden (extra uitleg) Ik begrijp alleen niet hoe dit mijn probleem oplost . Ik denk ook dat ik je verkeerd begrijp

[faabman]

We Are Borg schreef op 05 november 2003 @ 16:21:
[...]


Ik heb je verkeerd begrepen. Ik heb even opgezocht wat de overflow nu precies is, want nog niks mee te maken gehad


[...]


Wat ik dan begrijp is dat als je overflow op auto zet, de scrollbalk alleen tevoorschijn komt wanneer de elemeten niet op 1 pagina getoont kunnen worden (extra uitleg) Ik begrijp alleen niet hoe dit mijn probleem oplost . Ik denk ook dat ik je verkeerd begrijp

probeer ff het volgende

- gooi je tabellen in een div waarop je toepast:
{
width: 742px;
font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #D9D9D9;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: auto;
margin-right: auto;
overflow:auto;
}

- zet daarnaast je body ff op overflow:hidden;

dat zou moeten werken...

[disjfa]

FvKnijff schreef op 05 november 2003 @ 16:43:
[...]
probeer ff het volgende

- gooi je tabellen in een div waarop je toepast:
{
width: 742px;
margin-left: auto;
margin-right: auto;
overflow:auto;
}

ff de rotzooi eruit gehaald en als ik nou een dingetje zou mogen vragen. hoe hoog is deze div? weet jij t weet ik t *einde tip*

[We Are Borg]

FvKnijff schreef op 05 november 2003 @ 16:43:
[...]


probeer ff het volgende

- gooi je tabellen in een div waarop je toepast:
{
width: 742px;
font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #D9D9D9;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: auto;
margin-right: auto;
overflow:auto;
}

- zet daarnaast je body ff op overflow:hidden;

dat zou moeten werken...

Je overflow in je body 'overstemt' (so to speak) de andere overflows. Als ik dus:

overflow: hidden

in de body zet, wordt een divje met daarin overflow: auto gewoon niet geaccepteerd en blijft de scrollbalk hidden

disjfa: Heb ook geprobeerd met een height van 100%. Wat opzich nog geen probleem kan opleveren zolang de overflow niet wordt gepakt in mijj divje

[ Voor 20% gewijzigd door We Are Borg op 05-11-2003 17:02 . Reden: kromme zin duidelijker gemaakt (poging tot) ]

[disjfa]

We Are Borg schreef op 05 november 2003 @ 17:00:
[...]
disjfa: Heb ook geprobeerd met een height van 100%. Het blijft een feit dat de overflow: hidden in de body er voor zorgt dat ik nergens de scrollbalk krijg. Ook niet als ik in een divje aangeef dat overflow: auto is

als je dat zegt wil ik sources zien

edit:
humz ik denk spontaan aan dat als je m idd 100% zet ie idd hoger word als de data erin ook weer verandert.....

[ Voor 15% gewijzigd door disjfa op 05-11-2003 17:03 ]

[We Are Borg]

* We Are Borg gaat even een source regelen want dat praat makkelijk

[EnsconcE]

ff nadat ik dit topic snel heb doorgelezen geef ik ook ff snel een antwoord
waarom geen vaste margins van boven, links, rechts en onder. het mooiste is procenten, dan ziet het er overal hetzelfde uit(geloof ik)

[We Are Borg]

Hier de code.

Even flink uitgekleed maar de orginele CSS gebruikt. De rest van de html was overbodig (+ erg veel) en zo is het probleem nog steeds aanwezig

http://www.planet.nl/~terps407/pagina.html

http://www.planet.nl/~terps407/pagina2.html <- de grote versie

http://www.planet.nl/~terps407/discussion.css

In IE doet dit het trouwens prima zie ik net, maar mozilla niet. Open dus in Mozilla en Opera wat IE heeft de problemen niet die ik omschrijf in mijn startpost

Voor de duidelijkheid:

div class naam is temp en ook terug te vinden in de css. Deze div zit net onder de comment "einde navigatie"


_{Hopelijk niet te veel commentaar op mijn html}

[ Voor 22% gewijzigd door We Are Borg op 05-11-2003 18:00 ]

[faabman]

oke, ff gauw naar je src gekeken, sluit eerst een normaal je body / html tags af en maak daarna ff deze structuur...
<body>
<div id="site_container">
hier je tabelmeuk
</div>
</body>

[We Are Borg]

Te snel uitgekleed Footer bevat de afsluit tag voor body en html en die stond er dus nog niet bij. Heb de div ook gelijk even verplaatst

Gelijk even het probleem wat ik in de topicstart beschrijf hier bijgevoegd.

http://www.planet.nl/~terps407/pagina.html

en

http://www.planet.nl/~terps407/pagina2.html

Open pagina.html met mozilla of opera. Open dan daarna pagina2.html door de url in je browser te veranderen. Zo zie je duidelijker dat de pagina verschuift

Alleen IE heeft hier geen last van

[ Voor 72% gewijzigd door We Are Borg op 05-11-2003 18:01 ]

[faabman]

dit http://www.fabianonline.nl/ is in ieder geval wat ik bedoel check de src voor meer info...

[We Are Borg]

FvKnijff schreef op 05 november 2003 @ 18:11:
dit http://www.fabianonline.nl/ is in ieder geval wat ik bedoel check de src voor meer info...

Nu snap ik ook wat je bedoelt

Bedankt maar niet helemaal wat ik wil. Ik zie trouwens dat hier @ GoT alleen in IE de scrollbalk altijd getoont wordt (IE feature die standaard aanstaat blijkt nu). Mozilla en Opera hebben precies hetzelfde probleem @ GoT. Ik laat het lekker zo en kijk wel op cheatah het meeneemt in de nieuwe templates als hij een oplossing kan verzinnen

[ Voor 59% gewijzigd door We Are Borg op 06-11-2003 22:56 ]