Menu naast content
http://jsfiddle.net/gpxeF/1908/
Ik heb deze fiddle gemaakt en het lukt mij niet om de menu naast het content te krijgen.
De menu heeft een vaste waarde/breedte en het content is responsive. Ik heb het al met position: absolute geprobeert maar dan overlapt de footer het menu.
Wie weet een oplossing?
Ik heb deze fiddle gemaakt en het lukt mij niet om de menu naast het content te krijgen.
De menu heeft een vaste waarde/breedte en het content is responsive. Ik heb het al met position: absolute geprobeert maar dan overlapt de footer het menu.
Wie weet een oplossing?
Gewijzigd op 03/08/2015 08:46:04 door Ferdi R
Zoiets: http://jsfiddle.net/kpouhnbr/
Ik heb er display table en table-cell van gemaakt, dit geeft straks heel veel voordelen in tegenstelling tot float
Ik heb er display table en table-cell van gemaakt, dit geeft straks heel veel voordelen in tegenstelling tot float
Jah zoiets, maar hoe krijg ik het menu nou aan de linkerkant zonder de HTML te veranderen?
Is dat belangrijk?
Want dit werkt gewoon:
Want dit werkt gewoon:
Dat is belangrijk want voor mobile weergave moet het content boven de zijmenu weergegeven worden.
Je kan met javascript de elementen van volgorde laten wijzigen.
Of je plaatst het menu 2 keer. de ene laat je op mobiel zien, de andere niet.
Of je plaatst het menu 2 keer. de ene laat je op mobiel zien, de andere niet.
en als je menu een width geeft van 50%, content een width 50% en content laat floaten naar rechts?
http://jsfiddle.net/sulanum/64hucbmh/
http://jsfiddle.net/sulanum/64hucbmh/
Gewijzigd op 03/08/2015 10:19:34 door Marco Eilander
als je je menu naast je content wilt floaten kun je ook je content een breedte geven aan de hand van overgebleven pixels en allebei alsnog naar links laten floaten.
Voorbeeld:
Dat zou de truc moeten doen, op mobiel geef je ze allebei een breedte van 100% mee en eventueel een display:block; zodat ze onder elkaar komen te staan.
Voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.zijmenu {
width: 200px; // vaste breedte
float:left;
}
.content {
float:left;
width: calc(100% - 200px); // hier is de 200px weer de breedte van het menu. INCLUSIEF padding, margins en borders.
}
width: 200px; // vaste breedte
float:left;
}
.content {
float:left;
width: calc(100% - 200px); // hier is de 200px weer de breedte van het menu. INCLUSIEF padding, margins en borders.
}
Dat zou de truc moeten doen, op mobiel geef je ze allebei een breedte van 100% mee en eventueel een display:block; zodat ze onder elkaar komen te staan.
Gewijzigd op 03/08/2015 11:22:52 door Eschwin Moerkerken
http://jsfiddle.net/gpxeF/1916/
Dit is het enigste manier dat ik het voor elkaar krijg alleen de tweede content en de footer schieten hierdoor naar boven.
Dit is het enigste manier dat ik het voor elkaar krijg alleen de tweede content en de footer schieten hierdoor naar boven.
http://jsfiddle.net/gpxeF/1918/
Kijk, wil je meer weten over flexbox kun je het beste even hier kijken:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Je was veel moeilijker bezig dan dat het is. Ik heb inline commentaar bijgeschreven voor wat wat is. Wel raad ik je aan om van te voren na te denken over de structuur van je website en wat bij elkaar hoort.
Tegenwoordig doe je dat met <header></header> tags, maar ik heb voor de duidelijkheid nog even <div> elementen gebruikt met ID's.
Toevoeging op 03/08/2015 13:26:58:
Wat een nog betere oplossing is:
Zet wat je links wilt laten zien als tweede in de html structuur en laat dit op de desktop links floaten.
Voor de mobiele versie haal je de float weg en komt deze er dus onder te staan.
Kijk, wil je meer weten over flexbox kun je het beste even hier kijken:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Je was veel moeilijker bezig dan dat het is. Ik heb inline commentaar bijgeschreven voor wat wat is. Wel raad ik je aan om van te voren na te denken over de structuur van je website en wat bij elkaar hoort.
Tegenwoordig doe je dat met <header></header> tags, maar ik heb voor de duidelijkheid nog even <div> elementen gebruikt met ID's.
Toevoeging op 03/08/2015 13:26:58:
Robert Wazzaa op 03/08/2015 09:07:26:
Je kan met javascript de elementen van volgorde laten wijzigen.
Of je plaatst het menu 2 keer. de ene laat je op mobiel zien, de andere niet.
Of je plaatst het menu 2 keer. de ene laat je op mobiel zien, de andere niet.
Wat een nog betere oplossing is:
Zet wat je links wilt laten zien als tweede in de html structuur en laat dit op de desktop links floaten.
Voor de mobiele versie haal je de float weg en komt deze er dus onder te staan.
Gewijzigd op 03/08/2015 12:48:39 door Eschwin Moerkerken
Ik heb je opmaak gebruikt en een beetje aangepast hoe ik het wil hebben, ik heb het menu en content omgedraaid met flex-direction: row-reverse;
http://jsfiddle.net/gpxeF/1920/
http://jsfiddle.net/gpxeF/1920/
Gewijzigd op 03/08/2015 14:38:21 door Ferdi R
Je wilt hem waarschijnlijk op een mobiele variant onder de content hebben, dan is dit een uitstekende oplossing natuurlijk! :)




