Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Aantal kolommen afhankelijk van schermbreedte?

Anoniem
None
8 antwoorden
  • Hallo,

    Op mijn website staat zowel tekst als foto's (thumbnails). Nu heb ik het aantal kolommen vast ingesteld met Tables. Is het mogelijk om afhankelijk van de schermresolutie het aantal kolommen automatisch te bepalen en in te stellen. Dus als het scherm 800 breed is, dan heb je 3 kolommen, als het 1024 breed is dan 4, en breder dan 1024 dan 5.

    Groeten,
    Richard
  • Niet met tabellen, maar wel met css.
    http:/
    ealworldstyle.com/thumb_float.html
  • Of met een scripting-taal. Vraag de resolutie op en maak het aantal kolommen afhankelijk van die resolutie.
  • [quote:45c263e32c="lorem ipsum"]Of met een scripting-taal. Vraag de resolutie op en maak het aantal kolommen afhankelijk van die resolutie.[/quote:45c263e32c]

    Aan zoiets zat ik ook te denken. Ik weet hoe je de schermbreedte opvraagt in javascript. Maar moet je dan de hele pagina in Javascript zetten, of kun je die waarde ook terug in HTML gebruiken.
  • Ben niet zo thuis in Javascript. Met PHP is het simpelweg met een if-else voorwaarde of een Switch-functie de juiste tabel laten weergeven.
  • CSS is de makkelijkste [i:547fc7fe11]en[/i:547fc7fe11] de beste methode om dit probleem op te lossen. Je maakt gewoon een stijl voor een thumbnail aan en zorgt dat de div's naast elkaar komen d.m.v. float:left. Dat is alles. De browser doet de rest :D. Voorbeeldje:

    [code:1:547fc7fe11]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    <!–
    .thumb
    {
    width:100px;
    height:100px;
    background-color:#E0E0E0;
    margin:5px;
    float:left;
    }
    –>
    </style>
    </head>
    <body>

    <div class="thumb">
    <!– Plaatje hier –>
    </div>
    <div class="thumb">
    <!– Plaatje hier –>
    </div>
    <div class="thumb">
    <!– Plaatje hier –>
    </div>
    <div class="thumb">
    <!– Plaatje hier –>
    </div>
    <div class="thumb">
    <!– … enz… –>
    </div>
    <div class="thumb">
    </div>
    <div class="thumb">
    </div>
    <div class="thumb">
    </div>
    <div class="thumb">
    </div>

    </body>
    </html>[/code:1:547fc7fe11]
  • [quote:efad2e361e="SHARK"]CSS is de makkelijkste [i:efad2e361e]en[/i:efad2e361e] de beste methode …[/quote:efad2e361e]

    Geloof me… er is niet zoiets als DE beste methode, al ben ik het met je eens dat css wel juist hiervoor bedoeld is.
  • Allemaal bedankt voor de aangedragen oplossingen, maar het was niet helemaal wat ik wilde. Ik wilde namelijk dat het aantal thumbnails naast elkaar afhankelijk was van de schermbreedte, niet van het op dat moment geldende window breedte. Dus als het scherm 1024 breed is, dan 4 thumbnails naast elkaar, bij 1280 5 en bij 1400 of breder 6 thumbnails.
    Ik heb nu de volgende oplossing bedacht. Deze is wellicht niet zo fraai en overzichtelijk, maar het werkt wel en doet precies wat ik wil.

    [code:1:602732537c]
    <TABLE BORDER=0>
    <TR>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width < 1024) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width == 1024) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width == 1280) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width < 1024) {document.write('</TR><TR>');}</script>
    <script language=JavaScript>if (screen.width > 1280) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width == 1024) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width < 1024) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width == 1280) {document.write('</TR><TR>');}</script>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <TD><A HREF=..><IMG SRC=..></A></TD>
    <script language=JavaScript>if (screen.width < 1024) {document.write('</TR><TR>');}</script>
    <script language=JavaScript>if (screen.width == 1024) {document.write('</TR><TR>');}</script>
    <script language=JavaScript>if (screen.width > 1280) {document.write('</TR><TR>');}</script>
    </TR></TABLE>
    [/code:1:602732537c]

    Groeten,
    Richard

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.