Mogelijk een float : left of block oorzaak
Deze is HIER te vinden
Zoals we daar heb ik hier een Nieuws 1 - Project 1 - Project 2 blokken met onderaan de footer. Nieuws 1 hoort over de volle breedte te gaan dat doet hij ook. Hier heb ik een float : left; aan mee gegeven zodat de volgende blok er onder kan komen.
Nu zien we daar ook Project 1 en 2 staan. Deze heb ik een width: 475px; mee gegeven.
Even eens als een float : left; omdat er een volgende Project blok er naast moet komen en ook ruimte voor is. Dit is overigens niet goed te zien in het voorbeeld op JSFiddle, maar hij past er wel naast daar is ruimte genoeg voor.
Nu het probleem:
Zoals we zien hebben we onderaan de footer. Maar de Project blokken lopen achter de footer langs. Vervang ik de Project blokken door Nieuws blokken dan loopt deze wel zoals het hoort. Dus ik vermoed dat ik iets over het hoofd zie kwa float op de Project blokken
Wie ziet het probleem?
Dit heeft wel iets geholpen. Hij laat nu wel meer van de Project blokken zien dan eerst. Alleen Hij lijkt dan de margin-bottom van de content niet helemaal mee te pakken.
Toevoeging op 26/06/2012 12:49:36:
Iemand nog een idee?
Bedankt voor je input, alleen ik zie niet in mijn code dat ik op .content_1 een z-index heb van -1. Wel heeft de section#main_content een z-index: -1; maar dit is er voor om de content achter de header te laten scrollen indien de content langer is.
EDIT:
Heb even gespeeld met de z-index van section#main_content, alleen dit heeft niks uit gehaald. Wel bij het spelen met clear : both; zie ik enige verschil optreden.
Als ik clear: both; op footer#main_footer zet dan verspring het geheel wel iets naar onder. Ik krijg dan meer tekst te zien van Project 1 2e blok.
Link zonder clear: both; Klik
Link met clear: both; Klik
Gewijzigd op 29/06/2012 11:03:19 door Frank WD
En wat is het probleem nu als je clear: both; gebruikt? Dat je een heel klein stukje van de footer mist bij project 1? Dan moet je die footer position: relative; weghalen.
Nog wat andere coding tips:
- Gebruik class namen die logisch zijn en verwoorden wat het is. Dus niet .content_1 en .content_2 maar, zoals je hier al aangeeft .news en .project.
- Je doet heel vaak section#main_content en dat soort dingen. Dit is fout en langzaam, een id komt maar 1 keer voor een daarom moet je section weglaten. Een browser leest selectors namelijk van recht naar links. Dus hij zoekt eerst een element met id=main_content en vervolgens moet hij nog helemaal controleren of dat element ook een section element is.
- JSfiddle, bedankt voor deze info dat wist ik namelijk niet. Voor de volgende keer zal ik hier even rekening mee gaan houden.
- Ik kreeg hier boven een tip om clear: both; te gebruiken op mijn main_footer. Dit heb ik dus gedaan en enige verandering die ik zag was dat hij wel meer van mijn Project blok liet zien. Ik heb op jou aangeven de position: relative; weg gehaalt. Nu zie ik wel compleet mijn Project blok omdat de footer als ware er achter komt te zitten nu.
- Het daadwerkelijke probleem is.
Ik heb op mijn section#main_content nu nog een padding-bottom: 125px; staan. Dit is de hoogte van mijn footer zodat de content niet aan de footer geplakt zal worden. En die padding-bottom: 125px; is dus het probleem. Zodra ik de project blok in de content zet lijkt hij die padding niet te pakken. Haal ik die project blok nu weg, dan pakt hij die 125px wel weer mee.
- De overige puntjes die je aangeeft voor in mijn CSS ga ik aanpassen.
Bedankt voor deze tip, ik ga hier dus nog even mee aan het werk.
Gewijzigd op 29/06/2012 16:49:59 door Frank WD