Toon posts:

Menu onderaan pagina (bottom, footer)

Pagina: 1
Acties:

Onderwerpen


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
Ik ben al een poosje bezig met een stukje css code. Nu ben ik wel wat gewend, maar deze keer lukt het niet. Ook niet na veel ge-google. Wellicht komt dat omdat ik verschillende divs in elkaar geschoven heb. Hoe dan ook, het probleem is als volgt:

Probleem :|
Het menu, met daarin allerlei divs moet naar de onderkant van de pagina. In principe heb ik dat al. Echter als de pagina minder tekst bevat gaat het menu (footer, bottom, met daarin de verschillende "submenu's" mee naar boven.

Het menu moet in dat geval naar de onderkant van het scherm, i.v.m. de layout.

Code :O
Cascading Stylesheet:
1
/* Knip */


CSS code
Pagina waar het om gaat

Hopelijk kan iemand me even op weg helpen, want ik zie het even niet meer 8)7 8)7 8)7

Alvast bedankt! _/-\o_ _/-\o_ _/-\o_

[Voor 84% gewijzigd door jgpost op 25-10-2010 13:19]


  • MoietyMe
  • Registratie: juli 2003
  • Laatst online: 21-09 10:12

MoietyMe

zij/haar

Wat heb je zelf al geprobeerd? Heb je een testcase?

  • NMe
  • Registratie: februari 2004
  • Laatst online: 13:16

NMe

Quia Ego Sic Dico.

Ik heb je code weggehaald. We hebben meer dan genoeg aan alleen het relevante stukje, daar hebben we geen 300+ regels voor nodig. Zoek dus uit wat het relevante stukje code is en post dat maar opnieuw in je topicstart. ;) En inderdaad, een testcase zou handig zijn. :)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
NMe schreef op maandag 25 oktober 2010 @ 12:44:
Ik heb je code weggehaald. We hebben meer dan genoeg aan alleen het relevante stukje, daar hebben we geen 300+ regels voor nodig. Zoek dus uit wat het relevante stukje code is en post dat maar opnieuw in je topicstart. ;) En inderdaad, een testcase zou handig zijn. :)
Ik heb het aangepast door de betreffende urls te plaatsen. Wellicht verduidelijkt dat een en ander.

  • Ssander
  • Registratie: december 2009
  • Laatst online: 17-01 20:41
Je hebt het aangepast door nogmaals de 300 regels aan CSS te posten, en daarbij ook nog eens 200 regels aan HTML. Handig.

Voordat dit topic waarschijnlijk gesloten wordt: google eens naar CSS 100% height.

  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
Je zet netjes de woorden "bottom" en "footer" in je topic title. Maar als je daar op zoekt in dit forum krijg je bergen oplossing.

  • NMe
  • Registratie: februari 2004
  • Laatst online: 13:16

NMe

Quia Ego Sic Dico.

Post nou eens gewoon alleen de relevante CSS. We hebben niks aan alle CSS, dan moeten we eerst nog eens gaan uitzoeken wat relevant is en waarom. Dus nogmaals: doe even alleen die CSS die relevant is voor je probleem, anders gaan we je niet kunnen helpen.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
NMe schreef op maandag 25 oktober 2010 @ 13:54:
Post nou eens gewoon alleen de relevante CSS. We hebben niks aan alle CSS, dan moeten we eerst nog eens gaan uitzoeken wat relevant is en waarom. Dus nogmaals: doe even alleen die CSS die relevant is voor je probleem, anders gaan we je niet kunnen helpen.
Het gaat vooral om dit gedeelte:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#footer {
    position: relative;
    width: 100%;
    bottom: 0xp;
    clear: both;
    margin: 0 auto;
    padding: 0;
}

#bottom {
    width: 800px;
    height: 192px;
    margin: 0 auto;
    color: #FFFFFF;
    z-index: 101;
}


als ik bottom op 0px zet bij #bottom, dan staat ie ineens onder de header.

De header heb ik position absolute staan.
content position op relative, in content zit menu (float left) en tekst (float right)
footer en bottom (zoals hierboven)

  • Ssander
  • Registratie: december 2009
  • Laatst online: 17-01 20:41
Heb je ook gekeken naar Bosmonster zijn post en die van mij? We komen beide met een oplossing.

  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
Ssander schreef op maandag 25 oktober 2010 @ 14:26:
Heb je ook gekeken naar Bosmonster zijn post en die van mij? We komen beide met een oplossing.
Ik stel hier geen vraag voordat ik gezocht heb. Zowel op dit forum aangedragen oplossingen heb ik diverse van geprobeerd. Evenals ge-googlede oplossingen (zie mijn beginpost).

  • Tjeemp
  • Registratie: januari 2005
  • Laatst online: 03-01-2015

Tjeemp

BEER N TEA

er staat sowieso "bottom: 0xp" ipv "bottom: 0px"...

Volgens mij heb ik in bij een soortgelijk probleem een afzonderlijke clear div toegevoegd aan het eind van mijn content container. (height = hoogte van je footer)
Cascading Stylesheet:
1
2
height: 100px;
clear: both;

De container had hier ook een negatieve marge die even hoog is als de footer. De footer had ik buiten de container div geplaatst.

Moet wel zeggen dat ik dit toen wel heb kunnen uitvogelen met wat Google werk... Waarschijnlijk is het probleem nog niet helemaal opgelost met mijn input, maar hopelijk lost het een punt op wat je misschien over het hoofd zag. Verder verwijs ik je toch naar Google of je moet even in de code kijken van www.beerntea.com (de website waarin het zit) lekker mijn website pluggen hier ;) moet wel zeggen dat de css een beetje een rommeltje is geworden in de loop der tijd, maar misschien haal je er toch iets nuttigs uit.

www.timovanderzanden.nl | Beer 'n' Tea


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
Tjeemp schreef op maandag 25 oktober 2010 @ 14:42:
er staat sowieso "bottom: 0xp" ipv "bottom: 0px"...
opgelost, komt doordat ik daar een paar keer mee gespeeld heb... 8)7
Volgens mij heb ik in bij een soortgelijk probleem een afzonderlijke clear div toegevoegd aan het eind van mijn content container. (height = hoogte van je footer)
Cascading Stylesheet:
1
2
height: 100px;
clear: both;

De container had hier ook een negatieve marge die even hoog is als de footer. De footer had ik buiten de container div geplaatst.
Zojuist weer geprobeerd, maar komt niet goed uit bij mij. Dan komt de blauwe lijn helemaal onder het scherm uit.
Moet wel zeggen dat ik dit toen wel heb kunnen uitvogelen met wat Google werk... Waarschijnlijk is het probleem nog niet helemaal opgelost met mijn input, maar hopelijk lost het een punt op wat je misschien over het hoofd zag. Verder verwijs ik je toch naar Google of je moet even in de code kijken van www.beerntea.com (de website waarin het zit) lekker mijn website pluggen hier ;) moet wel zeggen dat de css een beetje een rommeltje is geworden in de loop der tijd, maar misschien haal je er toch iets nuttigs uit.
Ik zal es kijken op je website.

  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
Ik heb het opgelost. ;)

Oplossing
#footer buiten container gezet, wat ik ook al meerdere malen geprobeerd had. Echter gebruikt ik per abuis padding-bottom en dan hoogte in px, terwijl ik margin-bottom moest gebruiken. 8)7 |:( O-)
Nu is het gelukt en alles werkt nu prima.

Iedereen bedank voor het meedenken. _/-\o_

Greetzz. ;w

  • glimbeek
  • Registratie: april 2009
  • Laatst online: 13-09 17:44
Geen idee of het van belang is voor jgpost, maar je site werkt niet goed in IE6 en IE7. De opmaak laat dan nogal te wensen over. Nou kan je ondersteuning voor IE6 laten vallen... maar IE7 lijkt me toch redelijk belangrijk?

  • Realityweb
  • Registratie: september 2009
  • Laatst online: 19-08 14:11
In Google Chrome op Mac is hij in ieder geval ook niet goed, de tekst in de content gaat over de footer heen, de footer wordt dus niet naar onderen 'gedrukt'.

isthistheshitorwhat


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
glimbeek schreef op woensdag 27 oktober 2010 @ 16:20:
Geen idee of het van belang is voor jgpost, maar je site werkt niet goed in IE6 en IE7. De opmaak laat dan nogal te wensen over. Nou kan je ondersteuning voor IE6 laten vallen... maar IE7 lijkt me toch redelijk belangrijk?
Klopt in IE7, op de windhoos *dat OS heet Windows* machine werkt het niet. Het gaat ook niet helemaal goed in Safari op de Macs. |:(

In FireFox werkt het wel goed.

Weet iemand voor mij een negative margin fix ?? Ik zoek me suf, en heb al allerlei fixes geprobeerd, echter zonder resultaat.

Een andere, mogelijke oplossing, is ook van harte welkom!

N.B. Ik heb eerst de rest maar afgewerkt, vandaar dat de vraag ook wat later komt.

Iedereen alvast bedankt voor het meedenken _/-\o_

[Voor 5% gewijzigd door RobIII op 05-11-2010 12:02]


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
Het gaat vooral om deze code:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
#container {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    position: relative;
    width: 100%;
    margin-bottom: -140px;  
}


Met name de margin-bottom met zijn negatieve waarde.

In FireFox werkt het prima. In andere browsers werkt het niet altijd naar behoren. 8)7

Weet iemand een bepaalde oplossing?

  • NMe
  • Registratie: februari 2004
  • Laatst online: 13:16

NMe

Quia Ego Sic Dico.

Je overschrijft je eigen height en gebruikt negatieve margins. Vooral dat laatste is vragen om problemen als je niet goed weet wat je aan het doen bent.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • jgpost
  • Registratie: augustus 2005
  • Laatst online: 17-04-2020
NMe schreef op vrijdag 05 november 2010 @ 12:35:
Je overschrijft je eigen height en gebruikt negatieve margins. Vooral dat laatste is vragen om problemen als je niet goed weet wat je aan het doen bent.
Wat bedoel je met "overschrijf je eigen height"?
de height 100% en auto is bedoeld voor IE en FF die daar verschillend mee omgaan.

Weet je misschien een oplossing?
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee