13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)
  • Q:
    Bijdrager
    SUPERJORN

    Div duwt CSS footer naar beneden… Help?

    Het probleem in het kort:
    Ik heb een probleem dat de footer wordt beïnvloed door de divjes die ik in mijn “container” heb gezet. Ik denk dat het komt dat ik iets fout doe met de “position” waarde. Weet iemand hoe ik dit probleem kan oplossen?

    De pagina is hier te vinden: http://jornbovee.nl/gib/index.html
    CSS: http://jornbovee.nl/gib/css/stylesheet.css

    Alvast bedankt voor de reacties.:)

    Bijdrager
    oostie

    Wat is het probleem precies?

    Bijdrager
    jorisros

    Je class ‘.footer’ een position: absolute geven en een bottom: 0px; dan nog een beedte van de hele pagina ‘width: 100%’

    <br />
    .footer {<br />
    position: absolute;<br />
    margin-bottom: 0px;<br />
    background-color: #871A1D;<br />
    clear: both;<br />
    text-align: center;<br />
    font-family: Verdana, Geneva, sans-serif;<br />
    color: white;<br />
    font-size: 9px;<br />
    padding-top: 10px;<br />
    width: 100%;<br />
    bottom: 0px;<br />
    }<br />
     
    Bijdrager
    jorisros

    @oostie als de pagina kleiner word, verdwijnt de footer

    Bijdrager
    SUPERJORN

    Hmm ja, ik had het probleem wel iets duidelijker kunnen uitleggen.

    Dat de footer onder verdwijnt door de content van de pagina is wel de bedoeling. Maar als ik de div van het plaatje rechts groter maak, of een andere positie geef op de pagina, dan reageert de footer daar op… :/

    Hoe kan ik de div’s in de “container” die ik heb gemaakt, positioneren zonder dat dat effect heeft op de footer? Maar de footer mag wel naar beneden worden gedrukt door content zoals tekst.

    Bijdrager
    oostie

    Ik zie nog niet wat je bedoeld. wanneer ik de DIV hoger maak gaat hij op een gegeven moment zakken maar dat is logisch omdat de container ook hoger word.

    Wat me wel opvalt is dat je wel heel vaak position relative gebruikt, als je bijvoorbeeld de content en content rechts een float: left; geeft krijg je het zelfde resultaat:)

    Bijdrager
    Lifelogger

    De postion: relatives zijn het probleem niet. Dat is op zich wel goed hoor. Niets mis mee. Sterker zelfs, soms gaan browsers wel eens raar doen als je dat niet mee geeft en alleen maar float en veel lagen gebruikt bij complexere websites. Uit voorzorg neem ik het vaak ook mee. Het is niet per definitie fout wanneer je dat gebruikt. Hangt gewoon af van hoe je wilt dat je layers zich gedragen ten op zichtte van anderen.

    Maar je probleem dan. Het is logisch dat je footer naar onderen geduwd wordt. Je footer is zo geplaatst dat je container de hoogte bepaald en dat dus de container ook je footer naar onderen verplaatst. Als je dus iets binnen je container groter/hoger maakt, wordt je container ook hoger. Daardoor zakt je footer.

    Bijdrager
    SUPERJORN

    Hoezo wordt de container groter..? Ik heb nu het div’je wat rechts de afbeelding plaatst 400 pixels groot gemaakt, met een blauw achtergrond. Maar waar komt al die ruimte daar onder vandaan…? Onder dat blauwe blokje zeg maar. Want de push div is maar 40pixels hoog…

    http://jornbovee.nl/gib/index.html

    Bijdrager
    SUPERJORN

    @Lifelogger: Aha… De container telt dus de hoogte van alle div’s op? Hoe kan ik dat voorkomen? Ik ben gewend om met een ‘container’ te werken die vaste afmetingen heeft en dan kan ik daarin allemaal div’jes plaatsen, verschuiven, groter en kleiner maken.

    Bijdrager
    Lifelogger
    <br />
    #content {<br />
    	position:relative;<br />
    	float: left;<br />
    	left:100px;<br />
    	top: 20px;<br />
    	width:320px;<br />
    	height:auto; /* BELANGRIJK */<br />
    }<br />
    #content_rechts {<br />
    	position:relative;<br />
    	float:right;<br />
    	width:200px;<br />
    	height:400px;<br />
    	background-color: #00F;<br />
    }<br />
     

    Dit lost het probleem op als het goed is. Even code in je css vervangen door bovenstaande.

    Je zet wel een relative neer, maar je moet ze vervolgens wel floaten. Anders weet een browser nog niet wat hij er mee moet doen. Daardoor krijg je dat soort vreemde ruimtes, omdat de browser het dan zelf opvult.

    Bijdrager
    Lifelogger

    Zie dat de rechter div iets verspringt nu. Maar die kun je met margin-right nog even goed zetten. Je gebruikte hiervoor eerst left: 500px voor. Als je rechts float, kun je beter vanuit rechts uitlijnen. Float je links, dan vanaf links uitlijnen. Is iets logischer dan alles vanaf links te doen.

    Bijdrager
    SUPERJORN

    Oke.. Met het floaten kwam ik er niet helemaal mee uit. Maar ik heb nu wel voor elkaar gekregen dat de footer niet meer naar beneden wordt geduwd door een vreemde lege ruimte.

    Het enige probleem wat ik nu heb is dat de footer niet naar beneden wordt geduwd als de content van een div groter is dan het scherm. Volgens mij is het makkelijk op te lossen, maar ik kom er nog steeds niet uit…

    Rechter div heb ik 800px groot gemaakt, maar als je naar beneden scrollt gaat de balt niet mee. Volgens mij ligt het aan de push div die niet helemaal mee werkt…

    Zie voorbeeld:

    HTML: http://jornbovee.nl/gib/index.html
    CSS: http://jornbovee.nl/gib/css/stylesheet.css

    Bijdrager
    Lifelogger

    Klopt. Je “content_rechts” dit is absolute geplaatst. Een relative layer reageert niet op een absolute layer die daar binnen valt. Met andere woorden: je absolute div maakt je relative div niet groter. Als je “content_rechts” laat floaten en relative plaatst, wordt je container div wel weer groter.

13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.