Goedendag,
Ik heb een klein probleem..
Momenteel heb ik een div gemaakt met als width 100%.
In deze div zitten 5 div's van 20% width (maken samen 100%).
Dit resultaat zie je als je de website full screen hebt.
Op het moment dat je de webbrowser verkleint dan verkleint de width ook van de div's.
Nu is mijn vraag:
Ik wil graag width 100% met daarin 5 vakken, deze vakken moeten de hele width vullen.
Maar als de browser verkleint wordt blijven die vakken hun width houden, en moet de browser indien de vakken niet passen deze een regel naar beneden gooien.
Weet iemand hoe dit moet?
- Width 100% en daarin kolommen die dezelfde width blijven behouden.
-
04-12-2013, 10:07 #1
- Berichten
- 71
- Lid sinds
- 15 Jaar
Width 100% en daarin kolommen die dezelfde width blijven behouden.
-
04-12-2013, 10:12 #2
- Berichten
- 1.191
- Lid sinds
- 13 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
float left meegeven?
-
04-12-2013, 10:17 #3
- Berichten
- 108
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
daar zijn meerdere oplossingen voor, bv responsive maken of
en das meest eenvoudige de divs een min-width geven van bv 200px
wordt het scherm smaller dan zullen ze onder elkaar komen te staan,
-
04-12-2013, 10:17 #4
- Berichten
- 71
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Dit is mijn code;
.s2, .s4, .s6, .s8, .s10, .s12, .s14, .s16{ background: #475F77;
height: 296px;
float: left;
width: 20%; }
.s3, .s5, .s7, .s9, .s11, .s13, .s15
{ background: #354B5E;
height: 296px;
float: left;
width: 20%; }
Ik kan wel een vaste width meegeven, maar dan krijg ik ze nooit 100% breed..
-
04-12-2013, 10:21 #5
- Berichten
- 71
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Denk dat ik met het geven van een min-width niks kan..
-
04-12-2013, 10:44 #6
- Berichten
- 108
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Maar omdat width: 20% meekrijgt verkleint hij de div's altijd tot 20% van het beeld.
Ik kan wel een vaste width meegeven, maar dan krijg ik ze nooit 100% breed..
vraag maar wat ook zou kunnen werken voor je ?,
min-width :20%
max-wdth:100%;
verder zou je je css aan kunnen passen naar schermgrootte das wellicht beter,.
-
04-12-2013, 11:38 #7
- Berichten
- 71
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Ik probeer het beter uit te leggen:
De container om deze div's heen is 100% breed.
En hebben een hoogte in px.
Op full screen ziet het er zo uit:
Wanneer ik mijn browser verklein gaat het er zo uit zien:
De breedte verkleint zich nu, terwijl ik die standaard op 1 grootte wil houden.
Op het moment dat de browser verkleint moet hij dus de vakken even groot houden als full screen, en indien het dus niet meer past moet dit naar onder verschuiven.
Voorbeeld:
http://www.elegantthemes.com/demo/?theme=Origin
Op full screen heb je 4 foto's op een rij, maar wanneer je hem verkleint past die de regels aan naar 3.
-
04-12-2013, 11:49 #8
- Berichten
- 108
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
kun je dan de divs geen vaste pixels breedte geven ?
-
04-12-2013, 11:57 #9
- Berichten
- 71
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Dat kan ik wel, maar hoe krijg ik dan mijn div's tot de volle 100%?
Want als ik ze nu een breede geef laat zeggen 200, dan is de totale breedte 1000px.
Als iemand 2000px breed beeld heb hou ik 1000px vrije ruimte over..
-
04-12-2013, 12:27 #10
- Berichten
- 108
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
das waar, maar wat wil je precies dan ?
beeld 1000px 5 X 200
beeld 2000px 5 X 400
dus toch vergroten en verkleinen ?
dan is 20% wel juist en zou je probleem zitten in de hoogte van de divs niet niet meegaan bij resizen is dat het ?
-
04-12-2013, 12:42 #11
- Berichten
- 71
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Het probleem is als volgt;
Beeld 1000 px, vakken van 20% (200px).
Bij full screen is die dan volledig 1000px.
Maar wanneer ik hem resize (de webbrowser) naar b.v 800 px, zijn de vakken in de breedte kleiner. (20%, 160px)
Ik wil dat de vakken dan eigenlijk de eerste groote aanhouden, en hierdoor valt 1 vak dan naar regel 2 (eronder).
Hoop dat dit duidelijk is.
-
04-12-2013, 13:37 #12
- Berichten
- 451
- Lid sinds
- 13 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
jQuery CSS (fixed width) via $( document ).width() zou een oplossing kunnen zijn? Bij herladen van de pagina gaat dit uiteraard verloren.
EDIT: Ik heb zojuist je voorbeeld bekeken en zeg ook: width:20%; en min-width ic.m. float:left;Laatst aangepast door Marcel van Vrouwerf : 04-12-2013 om 13:46
-
04-12-2013, 14:30 #13
- Berichten
- 108
- Lid sinds
- 15 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
ja dan is width:200px; wat je wilt gok ik ?. alleen je probleem zou dan worden
dat bij resize 1 eronder valt en de resterende 3 niet de 100% opvullen wat vreemd lijkt denk ik,
dan misschien dit proberen :
min-width:200px;
eventueel dan :
max-width:100%;
en geen width specificeren, of width:auto; maar dat kan de zaak ook weer vernaggelen -),.
-
05-12-2013, 00:09 #14
- Berichten
- 451
- Lid sinds
- 13 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
ik heb wat met jQuery liggen stoeien...
kijk voor het resultaat op www.kaylinn.nl
-
05-12-2013, 08:48 #15
- Berichten
- 1.465
- Lid sinds
- 14 Jaar
Re: Width 100% en daarin kolommen die dezelfde width blijven behouden.
Zoals ik het begrijp wil je dat de vakken altijd dezelfde breedte hebben, dus dan gebruik je op de divs voor de vakken gewoon een fixed width, bijvoorbeeld {width: 200px;}. Hoe breder het scherm, hoe meer vakken er naast elkaar zullen komen.
Als je wilt dat er maximaal 5 vakken naast elkaar komen geef je container een width van 100% en een max-width van 1000px.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic