achtergrond loop niet door...

Status
Niet open voor verdere reacties.
K

kimiez79

Gebruiker
Lid geworden
27 mrt 2011
Berichten
16
Hallo allemaal,

Ik zal me eerst even voorstellen, ik ben kim en nieuw op dit forum.. ben al een tijdje bezig met webdesign, maar loop nu tegen een probleem aan waar ik wat hulp bij kan gebruiken. Het is waarschijnlijk zeer eenvoudig, maar door vermoeidheid en frustratie zie ik het niet..

Ik zou graag willen dat de achtergrond van de div #content mee loopt met de hoogte van de div #tekst. De #content zit weer in de #container. Ik heb al diverse pogingen gedaan met de height, min-height etc.. maar het lukt niet. Zodra ik de height bij alles op 100@% zet, dan wordt de pagina veel langer dan de inhoud van #tekst.

Hierbij de url's, dat maakt het misschien wat duidelijker:

http://www.foodstepz.nl/index.php/contact
http://www.foodstepz.nl/templates/foodstepz/css/template.css

Alvast heel erg bedankt!
 
Laatst bewerkt:
Hoi Kim,
Welkom op het forum!
Het zit 'm niet in een op te geven hoogte van de #container of iets anders.
De oorzaak is het floaten van het submenu en de #tekst.

Bij een drijvend element verlaat dit namelijk de "normal flow", de normale stroom van de verticale opbouw van de elementen. Als er ruimte naast een drijvend element is, wordt dat opgevuld met het eerstvolgende element erna.
Maar als je niet ernaast maar eronder wilt doorgaan, en ook: als je de achtergrond eronder wilt laten doorlopen, moet de "float" eerst "gecleard" worden. Dat gaat met bv. een class="clearB" in de html, waarbij in de css staat:
Code: 
.clearB {
    clear: both;
    }
In jouw geval moet de hoogte van 100% van de #container er dus uit: want die laat de achtergrond stoppen op de hoogte van het scherm. En als je gaat scrollen, blijft het stop-punt op dezelfde hoogte, en gaat het eind van de achtergrondkleur dus mee omhoog.

Na de twee kolommen die ge-float zijn, moet de <div> met de clear-class erbij.

Verder mogen de floats ook niet een {position:absolute;} krijgen, want dat haalt de floats onherroepelijk uit de normal flow, en dan is eronder ook geen clear mogelijk.

Tenslotte kan je bij een float met iets ernaast ook het element ernaast zonder float laten, als dat maar een margin heeft ter breedte van de float. Als het submenu gefloat wordt, kan de #tekst dus zonder float blijven om die in een kolom ernaast te krijgen.

Al met al wordt het dan zoiets:

Met vriendelijke groet,
CSShunter
___________
PS: o ja, de <meta http-equiv="X-UA-Compatible" content="IE=7" /> moet binnen de <head> komen.
 
Laatst bewerkt:
Helemaal geweldig, het werkt!!

Ontzettend bedankt! (ook voor de snelle reactie, helemaal super!!)
 
Hallo CSShunter..

Daar ben ik weer.. Je hebt me de vorige keer perfect geholpen, alleen loop ik nu weer tegen hetzelfde probleem aan. Dit maal bij deze pagina: http://www.neipraktijkdestempel.nl/workshops

Ik heb jouw uitleg gevolgd, maar het lukt me niet. Als ik de hoogte weghaal bij het menu dan wordt de kolom nog kleiner, als ik de float weghaal bij de content dan verschuift deze helemaal naar links. Kortom ik doe iets niet goed, maar ik zie het niet..

Zou je me nog een keer willen helpen? Of iemand anders natuurlijk :)

Alvast bedankt!
 
Hoi kimiez79,
Het clearen gaat hier prima: de hoogste van "menu" of "content" bepaalt de hoogte van de pagina.
Maar de bruine background staat alleen in het menu, en dat houdt eerder op.
Oplossing:
  • Het bg-img uit het menu halen.
  • En één element hoger er in zetten, hier: in de <div id="groep">, want dat is de gezamenlijke box van menu en content.
Code: 
#groep {
   ...
   background: url(http://www.neipraktijkdestempel.nl/templates/alice/images/bg-menu.jpg) repeat-y;
   }
Nu loopt het bruin ook onder het menu door. :)

Met vriendelijke groet,
CSShunter
 
Wederom geweldig! Ik leer telkens weer meer (geef je toevallig ook cursussen :) )

Dank je wel!

Groetjes,

Kim
 
haha thanx!


ps: jammer dat je geen cursussen geeft, hoop dat ik je wel zo af en toe om advies mag vragen :D
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan