[CSS] div verdwijnt bij lage resoluties

Pagina: 1
Acties:

  • GewoonNico
  • Registratie: April 2003
  • Laatst online: 08:16
Het probleem is als volgt:
ik moet een site maken vaarvan het content gedeelte 550 px breed is. Hiernaast 'hangen' 3 menu-blokken.
het content gedeelte moet gecentreerd staan.
Dit werkt tot zover.
Maar, wanneer iemand een lage resolutie heeft vallen de menu blokken weg.
zie http://www.vastgoedinlimburg.be/new/

Is dit op de een of andere manier te voorkomen met behulp van css?

De html opbouw van de pagina ziet er als volgt uit:
HTML:
1
2
3
4
5
6
7
8
9
10
<body>
 <div id="body">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="content"></div>
  <div id="footer"></div>

  <div id="menublok"></div>
 </div>
</body>


Cascading Stylesheet:
1
2
#body { margin: 0px auto 0px auto; }
#menublok { position: absolute; top: 250px; margin-left: -230px; }

  • Zoefff
  • Registratie: September 2001
  • Laatst online: 16:26

Zoefff

❤ 

De browser gaat er (natuurlijk) van uit dat #body het 'eerste' element op de pagina is, omdat je #menublok absoluut (dus uit de flow) hebt gepositioneerd. Simpele oplossing is door #body een margin-left van 230px mee te geven. Het absoluut gepositioneerde element valt dan bínnen #body.

Overigens begrijp ik niet waarom je een aparte div met #body aanmaakt, daarvoor kan je natuurlijk net zo goed het body element zelf gebruiken ;)


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • GewoonNico
  • Registratie: April 2003
  • Laatst online: 08:16
thanx, zal het proberen.
Ik gebruik de body div om daar een achtergrond in te plaatsen en om deze te centreren.

als ik dat in de body tag zelf zou doen krijg ik achtergrond problemen.

  • Zoefff
  • Registratie: September 2001
  • Laatst online: 16:26

Zoefff

❤ 

Waarom?

Je hebt ook nog het html element om een achtergrond te geven, mocht dat nodig zijn :)


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • GewoonNico
  • Registratie: April 2003
  • Laatst online: 08:16
ik heb die body div ooit ergens voor nodig gehad en sindsdien gebruik ik m eigenlijk altijd.
Volgens mij was dat omdat ik toen 2 achtergronden had die over elkaar moesten lopen
en ik gebruik hem ook wanneer ik de content div 100% hoog wil hebben.

  • GewoonNico
  • Registratie: April 2003
  • Laatst online: 08:16
Zoefff schreef op dinsdag 27 juni 2006 @ 10:17:
Simpele oplossing is door #body een margin-left van 230px mee te geven. Het absoluut gepositioneerde element valt dan bínnen #body.
Het wilt toch niet helemaal lukken zoals ik in gedachten had.
ik heb #body al een margin left (auto) meegegeven en als ik daar 230px zet centreerd de pagina niet meer.

heb ook geprobeerd om de css code van #body in <body> te zetten en vervolgens #body een margin-left te geven maar dit verhielp het probleem ook niet.

[ Voor 3% gewijzigd door GewoonNico op 27-06-2006 11:51 ]


  • GewoonNico
  • Registratie: April 2003
  • Laatst online: 08:16
help?

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:49

crisp

Devver

Pixelated

Je body-element zelf een (min-)width geven

Intentionally left blank


  • GewoonNico
  • Registratie: April 2003
  • Laatst online: 08:16
min-width zal ook niet helpen aangezien het menu gewoon uit beeld schuift.
ik heb het probleem (deels) opgelost. ik heb <body> de volgende css code gegeven:

margin: 0px 225px 0px 225px;

die 225px aan de rechterkant moet ik geven om #content gecentreerd te laten. doe ik dit niet wordt alles gecentreerd.
maar met deze oplossing komt gelijk een nieuw probleem, wanneer iemand de resolutie 1024x768 heeft staat alles links gecentreerd. boven de 1024 gaat het centreren weer goed.
bij een resolutie van 800x600 zie je helaas een scrollbalk aan de onderkant.

Zijn deze 2 foutjes ook nog weg te werken op de een of andere manier?
Pagina: 1