Header loopt niet mee
Ik heb een vraag: ik wil mijn header mee laten schuiven op het moment dat ik mn pagina kleiner maak. Hij loopt een stuk maar, maar daarna kapt ie het af. Iemand een idee?
Waar is je width, height en alt?
Kun je niet gewoon met JS de resolutie van je gebruiker uitlezen, en aan de hand daarvan de width en height invullen?
Code (php)
1
2
3
4
2
3
4
header {
padding: 10px 10px;
width: 100%;
}
padding: 10px 10px;
width: 100%;
}
Deze combinatie maakt dat je altijd een scrollbar hebt. De header is dan altijd 100% + 20px groot. Dus 20px over op de scrollbar.
Als je die width: 100%; gewoon weg haalt, is het al veel beter.
----
Maar verder, wat is het probleem precies?
Hoe wil je dat het wordt? Verduidelijk eens "mee laten schuiven".
Wat ik zie: het logo heeft float: left; de knoppen floaten aan de rechter kant.
- Dit zorgt er uiteraard voor dat de knoppen onder het logo komen, eens het scherm te klein wordt.
- Dit zorgt er uiteraard voor dat de knoppen buiten het rechthoek van de header zullen komen. Met float: left; gaat de container niet meegroeien in de height.
Wat wil je dan wel?
---
Code (php)
1
2
3
4
2
3
4
section {
max-width: 90%;
min-width: 900px;
}
max-width: 90%;
min-width: 900px;
}
Wel, om te beginnen, je zal moeten kiezen tussen 1 van de twee.
Maar meer nog: je hebt dus een min-width van 900px; Wat gebeurt er met de rest van de pagina?
Misschien kan je die min-width beter zetten op <body>. Maar wederom, eerst moet het nog wat duidelijker worden wat precies de bedoelig is.
Gewijzigd op 19/06/2013 13:35:38 door Kris Peeters
http://i41.tinypic.com/kooow.gif
Trouwens, in IE geeft dat iets heel vies.
Kris Peeters op 19/06/2013 14:20:27:
Vreemd, bij mij doet dit zich niet voor. Zowel met Chrome en FF is de balk gespreid over de volledige breedte.
Trouwens, in IE geeft dat iets heel vies.
Trouwens, in IE geeft dat iets heel vies.
Ik heb het probleem in IE en Chrome... En wat bedoel je met 'vies' ?
max-height: 75px;
}
Dit werkt niet voor oudere IE versies.
Ik denk dat ik hier IE7 en 8 heb staan. Dus dat logo wordt dan op ware grootte getoond, zijnde > 4000 pixel breed.
Het zou trouwens sowieso een goed idee zijn om dat logo op te slaan met een kleinere resolutie.
Iemand de oplossing voor mn andere probleem?
Dit komt door je #container: https://dyp.im/lqHYNVIzbS
Gewijzigd op 23/06/2013 03:38:59 door Rogier de Vries