Kolommen naast elkaar bij breed beeld, onder elkaar bij klein beeld

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Onbekend onbekend

onbekend onbekend

30/01/2010 15:06:00
Quote Anchor link
Hi,

Ik wil graag optimaal gebruik maken van het scherm. Wanneer iemand gebruik maakt van breedbeeld (of een breed genoeg beeld) dan wil ik 2 of meerdere kolommen naast elkaar tonen. Bijvoorbeeld voor een formulier.

Wanneer iemand op een kleiner scherm werkt, of de browser wat kleiner maakt, dan wil ik dat de meest rechter kolom naar onder verhuist.

Is zoiets mogelijk?

Groet,

Op verzoek van TS naam en eventuele contact gegevens verwijderd.[/modedit]
Gewijzigd op 06/08/2013 18:08:58 door Bas IJzelendoorn
 
PHP hulp

PHP hulp

18/12/2024 09:12:19
 
P Lekensteyn

P Lekensteyn

30/01/2010 15:16:00
Quote Anchor link
Dat kan met Javascript:
<script>
if(screen.availWidth < 1280){//als schermresolutie kleiner is als 1280pixels
//ligt aan toepassing wat voor code hier komt
}
</script>

Je zou in een formulier ook zoiets kunnen zetten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<form action="..." onsubmit="breedte.value=screen.availWidth">
<input type="hidden" name="breedte" value="" />
</form>


En op de server kun je dan uitrekenen hoeveel kolommen je kunt hebben.
 
J V

J V

30/01/2010 15:38:00
Quote Anchor link
Dat kan ook zonder javascript.

Je neemt 2 div's met een vaste breedte en geeft die een float: left; mee.
Zodra er genoeg ruimte is, komen de 2 div's naast elkaar.

Zodra er geen ruimte voor is, komen ze onder elkaar aan de linkerkant van het scherm.

Zo is je probleem opgelost denk ik?
 
Onbekend onbekend

onbekend onbekend

30/01/2010 15:39:00
Quote Anchor link
Dat ziet er mooi uit. Alleen wil ik het graag dynamisch hebben. Wanneer iemand een resize doet van z'n browser bijvoorbeeld, wil ik zo lang mogelijk uitstellen dat er een horizontale scrollbar komt.
 
Onbekend onbekend

onbekend onbekend

30/01/2010 15:44:00
Quote Anchor link
Flugeltje89 schreef op 30.01.2010 15:38:
Dat kan ook zonder javascript.

Je neemt 2 div's met een vaste breedte en geeft die een float: left; mee.
Zodra er genoeg ruimte is, komen de 2 div's naast elkaar.

Zodra er geen ruimte voor is, komen ze onder elkaar aan de linkerkant van het scherm.

Zo is je probleem opgelost denk ik?


Ja!
 
J V

J V

30/01/2010 15:48:00
Quote Anchor link
**** schreef op 30.01.2010 15:39:
Dat ziet er mooi uit. Alleen wil ik het graag dynamisch hebben. Wanneer iemand een resize doet van z'n browser bijvoorbeeld, wil ik zo lang mogelijk uitstellen dat er een horizontale scrollbar komt.


Dat kan wel, maar ik snap er de bedoeling niet helemaal van.

Niemand krijg in principe een horizontale scrollbar, alleen als ze een scherm van 800x600 hebben en de breedte van jou div, meer is als 800px.

Als je zorgt dat jou div een breedte heeft van 780px, dan krijgt niemand een horizontale scrollbar, alleen als je je browser achterlijk klein gaat resizen, wat niemand doet.

Met 2 div's naast elkaar van elk 780px breed, kom je al op een breedte van 1560px, wat behoorlijk breed is.

De meeste mensen hebben geen scherm meer van 800x600, dus je kunt ook een grootte aanhouden van 1000px, wat neerkomt op een totale breedte van 200px. Dat is op een groot scherm goed te doen en op een normaal scherm is dat evengoed nog te zien zonder horizontale scrollbalk.

Ik hoop dat het duidelijk over komt, anders hoor ik het wel.
Gewijzigd op 06/08/2013 18:09:22 door Bas IJzelendoorn
 
Yorick17

yorick17

30/01/2010 15:56:00
Quote Anchor link
800x600 uhh, ja ik heb er nog een!
 
J V

J V

30/01/2010 15:58:00
Quote Anchor link
yorick17 schreef op 30.01.2010 15:56:
800x600 uhh, ja ik heb er nog een!


Ga met de tijd mee ;). De meeste websites ondersteunen dat niet meer, net als Internet Explorer 6.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.