Ik denk dat je sowieso al een typo hebt gemaakt want waarom staat dit in je HEAD ?
<div id="rodebalk">
Omdat mijn browser auto. divs repareert krijg je nu het effect van een website in een website door deze typo.
Check je website eens.
http://validator.w3.org/
Zodra dat opgelost is zal je denk ik de Twitter Widget geen vaste breedte in pixels moeten geven maar 100% of een x.aantal % van de Sidebar breedte.
Ja die stond daar inderdaad een beetje verdwaald, is nu opgelost! En geeft een stuk minder foutmeldingen bij de validator, thanks.
Maar als ik Twitter een percentage opgeef i.p.v. een vaste breedte gaat het nog steeds mis. Bij de footer gebeurd hetzelfde, en die vier footer kolommen hebben allemaal een breedte in %. De menubalk heeft wel een vaste breedte, en daar gaat het wel goed…
Dat de Sidebar onder de content komt te staan is speciaal gemaakt voor mobiele telefoons. Dit heet Responsive design en dat ga je steeds meer en meer zien in de toekomst. Het moet voorkomen dat je op kleinere schermen horizontale scrollers krijgt. Iets dat gewoon Note Done is omdat scrollen horizontaal een frustratie is als je iets wilt lezen en je steeds het scherm moet bewegen om de zin te kunnen lezen.
Dat zou ik er dus niet uithalen.
Aha, ja dat is inderdaad wel handig om het zo te laten dan. Maar ik zie bij het originele Twenty Eleven template dat dat inderdaad ook gebeurd, maar dat de info van de sidebar in het vlak van de body komt te staan. En dan ziet het er nog wel netjes uit. Bij mij komt het eronder te staan.
Heb je enig idee hoe dat dan toch in het witte vlak terecht zou kunnen komen?
Er schalen meerdere dingen niet goed mee. Wil je de site echt meeschalend hebben? Ik zou in jouw geval zeggen, laat het tot de resolutie 1024 goed werken.
Wat werkt nu niet goed / nog aan te passen:
– Menu schaalt niet
– Twitter valt er onder..is dan rode tekst op rode achtergrond, kan minder leesbaar zijn voor sommigen
– De footer widgets vallen onder elkaar buiten het rode vlak. De vaste hoogte van 200px moet je even weghalen.
Is te overzien 😉
Er gaat redelijk veel fout in dit thema en volgens mij zijn dit ook niet de Default Twenty Eleven Media Queries.
Ik heb even een paar kleine aanpassingen gedaan maar het Menu moet je zelf toch echt even oplossen want dat staat op dit moment als een probleem op zichzelf.
Wat ik heb gedaan is een stapje in de Footer gemaakt zodat als het scherm kleiner wordt er max. 3 Footer-Widgets naast elkaar komen de nummer 4 (Search Widget) Clear is zodat deze op een eigen regel komt te staan en volledige breedte krijgt waardoor mensen eenvoudiger kunnen zoeken.
Ook heb ik de border weggehaald die rechts naast de content stond zodra het scherm kleiner wordt.
En als laatste heb ik de Sidebar 100% breed gemaakt zodat deze beter te lezen is en hij het zelfde als de content (witte gedeelte) wordt afgehandeld!
Zo zou het er dan uit moeten zien op een iPad en iPhone.
* alleen het menu verkracht de layout nu een beetje normaal zou de content gewoon over de hele breedte van het device staan.
http://i49.tinypic.com/auw0hh.png
http://i48.tinypic.com/313lylg.png
De stylesheet. (style.css)
http://speedy.sh/F3QzX/style.css
*** Maak wel even een back-up van de huidige stylesheet zodat je altijd terug kunt naar je eigen werk en mijn aanpassingen ongedaan kunt maken mocht je het niet goed vinden. ***