Container met CSS geeft scrollbalken

[Matthijs1982]

Ik heb onderstaande CSS. Met deze CSS verschijnt alles mooi in het midden. Mijn container is 785 pixels breed. Alleen krijg ik bij een resolutie van 1024x768 scrollablken.

Wie weet hoe ik dit kan oplossen?

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #000000;
overflow: hidden;
}

#container{
left: 50%;
margin-left: -392px;
text-align: left;
position: absolute;
}

[Rowanov]

Los van dit specifieke probleem zijn er betere manieren om te centreren:

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
}

Gooi die absolute positionering er gewoon lekker uit

Matthijs1982 schreef op vrijdag 19 mei 2006 @ 00:35:
Sorry, dit is de goede CSS.

Maakt voor mijn voorbeeld niet uit gelukkig Scrollbars ligt waarschijnlijk aan de overflow auto.

[ Voor 35% gewijzigd door Rowanov op 19-05-2006 00:40 ]

[Matthijs1982]

Sorry, dit is de goede CSS.

body, html {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #000000;
overflow: auto;
}

#container{
left: 50%;
margin-left: -392px;
text-align: left;
position: absolute;
}

[SanderTje!]

Is die site ook ergens te bekijken?

[Matthijs1982]

Ik kan de site helaas niet op internet zetten.
Ik krijg de scrollbalken eigenlijk al wanneer ik bovenstaande CSS gebruik.

Ik heb zowel aan de rechterkant als aan de onderkant witruimte. Dit hoort ook niet.
Aan de onderkant moet veel gerscrolld worden, terwijl er helemaal geen content meer is.

[ Voor 42% gewijzigd door Matthijs1982 op 19-05-2006 00:42 ]

[Rowanov]

Matthijs1982 schreef op vrijdag 19 mei 2006 @ 00:40:
Ik kan de site helaas niet op internet zetten.
Ik krijg de scrollbalken eigenlijk al wanneer ik bovenstaande CSS gebruik.

Ik heb zowel aan de rechterkant als aan de onderkant witruimte. Dit hoort ook niet.
Aan de onderkant moet veel gerscrolld worden, terwijl er helemaal geen content meer is.

Dit zie ik niet terug in je huidige css; als je de volledige website niet kan neerzetten, kan je dan bijvoorbeeld een testcase online zetten? Ik heb dus sterk het idee dat het ergens anders aan ligt; meer code zou handig zijn.

Los daarvan; heb je mijn oplossing geprobeerd te implementeren?

[Matthijs1982]

De horizontale scrollbalken zijn nu inderdaad weg, alleen staat de container nu links uitgelijnd i.p.v. in het midden. Onderstaand mijn volledige CSS.
Ik heb onderaan de pagina onder mijn laatste DIV een heleboel witruimte waardoor ik onnodig veel moet scrollen.

Wie kan me helpen?

code:

[snip]

BtM909: Post alleen relevante code (en desnoods een link online) aub

[ Voor 90% gewijzigd door BtM909 op 19-05-2006 11:20 ]

[Matthijs1982]

Ik hen de CSS van de container nog aangepast. Alles staat nu mooi gecentreerd. Alleen de scrollbalken verticall en horizontaal blijven onnodig lang.

#container {
width: 785px;
margin: 0 auto;
text-align: left;
}

[user109731]

Waarom positioneer je alles absolute? en waarom dan die floats?

Cascading Stylesheet:

#flash {
  width: 297px;
  height: 281px;
  margin-top: 517px;
  float: left;
  position: absolute;
}

Zit het niet hierin? De height en margin-top samen zijn al behoorlijk groot

[ Voor 6% gewijzigd door user109731 op 19-05-2006 09:38 ]

[T-MOB]

Matthijs1982 schreef op vrijdag 19 mei 2006 @ 00:35:
Sorry, dit is de goede CSS.

body, html {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #000000;
overflow: auto;
}

#container{
left: 50%;
margin-left: -392px;
text-align: left;
position: absolute;
}

In deze CSS ben je de breedte van de container vergeten op te geven. Als het alleen gaat om horizontaal centreren kun je overigens beter gewoon margin: 0 auto; voor je container gebruiken. Eventueel met text-align center op body voor IE<6. Voor horizontaal en verticaal centreren zit je redelijk vast aan trucs met absolute of relative positionering.