divjes onder elkaar..

[Verwijderd]

Ik heb in een website 3 divjes naast elkaar staan:
Hier staat tekst in.. Wanneer het scherm smaller wordt (mobiele telefoon ofzo) blijft de achtergrond van de div dezelfde kleur houden maar div blijft ook net zo groot! Terwijl de tekst er dan niet meer in past:-(

Ik wil nu een minimale breedte voor de footblocks aanhouden. Als het scherm te smal wordt, zullen de divjes door de float: left, onder elkaar terechtkomen in plaats van te smal naast elkaar.
Dus de div een minimale breedte. gaat het scherm verder gaan ze onder elkaar. Scherm nog smaller komt er een horizontale schuifbalk..

het idee is leuk maar euh.. HOE?


Wie kan mij daarin opweg helpen?

HTML:

<div class="footblock">
   contact gegevens
</div>
<div class="footblock">
  openingstijden
</div>
<div class="footblock">
  ander tekst
</div>

Cascading Stylesheet:

.footblock {
 float: left;
 width: 28%;
 padding: 2%;
 margin-right: 2%;
 background: #69BD31;
 border-radius:10px;
 height: 158px;
 font color: black;
}

.footblock:last-child {
    margin-right: 0;
    }

[ Voor 12% gewijzigd door Verwijderd op 27-08-2013 16:32 ]

[Bosmonster]

min-width

[LamSchaap]

Cascading Stylesheet:

@media only screen and (max-width : 960px) {
  // hier css voor mobile site
}

[ Voor 19% gewijzigd door LamSchaap op 27-08-2013 17:09 ]

[Verwijderd]

en een fixed width ipv een percentage.

[Bosmonster]

Verwijderd schreef op dinsdag 27 augustus 2013 @ 17:09:
en een fixed width ipv een percentage.

Fixed widths zijn niet echt meer van deze tijd, zeker niet in responsive design. Normaliter zou je hem voor kleinere schermen ontdoen van de float: left en op width: 100% zetten.

[RM-rf]

De eenvoudigste manier is een standaard Grid-framework te gebruik...

Bootstrap of Unsemantic (gebaseerd op GS960) ..
http://getbootstrap.com/css/#grid of http://unsemantic.com/

die zijn meestal gebaseerd op een 12 kolommensysteem met gutters ertussen, maar je kunt voor drie gelijk brede kolommen dan aangeven dat je elementen 4 kolommen overspannen..

het reageren op de schermbreedte laat je dan over aan het framework en zelf houd je je gewoon bezig met de sytling van de elementen

[Verwijderd]

Bosmonster schreef op dinsdag 27 augustus 2013 @ 17:15:
[...]


Fixed widths zijn niet echt meer van deze tijd, zeker niet in responsive design. Normaliter zou je hem voor kleinere schermen ontdoen van de float: left en op width: 100% zetten.

Of dat... maar als je de width: 28% laat staan vraag je om problemen... *imho*

[Munki]

Side note, :last-child wordt niet door alle browsers ondersteund. Gebruik :first-child en draai je margins om. Dus margin-left ipv margin-right en dus ook op je :first-child een margin-left ipv margin-right.

[Spinal]

Munki schreef op dinsdag 27 augustus 2013 @ 21:38:
Side note, :last-child wordt niet door alle browsers ondersteund. Gebruik :first-child en draai je margins om. Dus margin-left ipv margin-right en dus ook op je :first-child een margin-left ipv margin-right.

Mwa, alleen IE8 ondersteund geen :last-child, dus als je die niet hoeft te ondersteunen kan het prima Maar de marges omdraaien werkt ook natuurlijk.

[Niet Henk]

Je kan helemaal experimenteel gaan doen en display:flex-box; gaan gebruiken. Sommige telefoons zullen het ondersteunen, zeker als je ook een versie met de -moz , -ms en -webkit prefix erbij zet, dan heb je eigenlijk alle nodige support van Windows Phone 8, veel android versies, en iOS.

Oh, hier is het uitgebreide W3 document erover. Dit is precies wat je zoekt volgens mij, maar nog wat experimenteel.

[ Voor 24% gewijzigd door Niet Henk op 04-09-2013 13:55 ]