Ga terug   Computer Idee Forum > Internet > Websites maken

Antwoord
 
Discussietools Weergave
Oud 3 June 2010, 14:35   #1
anoniem33906
Guest
 
Berichten: n/a
Standaard tabellen naast elkaar

hey allemaal, ik heb dus meerdere tabellen met laten we zeggen een breedt en hoogte van 100px*100px

ik wil deze naast elkaar hebben staan, in plaats van eronder wat er nu gebeurt, Ik hoef geen reacties waarin staat dat ik opmaak beter met css of zonder tabellen moet doen, want dit wil ik iets anders.

het idee is dar er op een scherm met breedte 780px zeven rijen komen te staan en op een scherm van 800px acht rijen, dit zal dan automatisch door de browser ondersteund worden, wat dus betekent dat de site er zelfs zonder javascript css en images goed uit ziet.

Help is gevraagd
  Met citaat antwoorden
Oud 3 June 2010, 16:07   #2
anoniem14945
Guest
 
Berichten: n/a
Standaard

Zonder css gaat niet werken, want dat heb je keihard nodig om die tabellen naast elkaar te krijgen opdat ze zich aanpassen aan de breedte van het scherm.

Wat je doet is het volgende:
- Zet iedere tabel in een <div>
- Geef die divs het stijlkenmerk float: left; mee.
De tabellen gaan dan allemaal naast elkaar zitten en op het moment dat een rij vol is gaat 'ie naar de volgende.

Dus bijvoorbeeld:
HTML-code:
<div style="float:left;"><table><!-- inhoud van tabel --></table></div>
Mogelijk moet je het hele zaakje nog in een overkoepelende div zetten die je een width van 100% meegeeft.


Het alternatief is alle tabellen in een overkoepelende tabel zetten, maar dan ben je dus gebonden aan een vooraf bepaalde hoeveelheid kolommen, dus niet wat je zoekt.
  Met citaat antwoorden
Oud 3 June 2010, 19:50   #3
anoniem15124
Guest
 
Berichten: n/a
Standaard

Citaat:
Oorspronkelijk geplaatst door raoel2cool Bekijk bericht
het idee is dar er op een scherm met breedte 780px zeven rijen komen te staan en op een scherm van 800px acht rijen, dit zal dan automatisch door de browser ondersteund worden, wat dus betekent dat de site er zelfs zonder javascript css en images goed uit ziet.
Je wilt dus met een variabel aantal rijen (en kolommen?) gaan werken. De vraag is hoe je de afmetingen gaat opvragen en dan bepaalt hoeveel rijen/kolommen je gaat gebruiken. Daarvoor zal gerekend moeten worden; zonder javascript en/of php zie ik dat niet lukken.
  Met citaat antwoorden
Oud 3 June 2010, 19:55   #4
anoniem14945
Guest
 
Berichten: n/a
Standaard

Citaat:
Oorspronkelijk geplaatst door Obelix71 Bekijk bericht
Daarvoor zal gerekend moeten worden; zonder javascript en/of php zie ik dat niet lukken.
Probeer dit maar eens:

HTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

</head>
<body>

<div style="float:left; width:100px; height:100px; background-color:#06C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0FC;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#66C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6FC;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#60C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F0C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F6C;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#06F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0FF;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#66F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6FF;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#60F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F0F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F6F;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#066;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0F6;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#666;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6F6;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#606;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F06;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F66;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#060;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#0F0;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#660;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#6F0;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#600;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F00;">&nbsp;</div>
<div style="float:left; width:100px; height:100px; background-color:#F60;">&nbsp;</div>

</body>
</html>
Werkt perfect, zonder gereken.
  Met citaat antwoorden
Oud 3 June 2010, 20:53   #5
anoniem15124
Guest
 
Berichten: n/a
Standaard

@FooBar: dat dat prima werkt, geloof ik direct.
TS geeft echter aan dat het aantal rijen (en kolommen?) afhankelijk is van de beeldschermbreedte (/-hoogte). Een variabel aantal dus. Gaat jouw code dan ook werken?
  Met citaat antwoorden
Oud 3 June 2010, 21:14   #6
anoniem14945
Guest
 
Berichten: n/a
Standaard

Ja, probeer het maar. Als je het browservenster kleiner maakt schuift alles direct door. En weer terug als je het venster weer vergroot.
  Met citaat antwoorden
Antwoord

Discussietools
Weergave

Regels voor berichten
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Aan
Smileys zijn Aan
[IMG]-code is Aan
HTML-code is Uit

Forumnavigatie


Alle tijden zijn GMT +1. Het is nu 09:37.


Powered by vBulletin Version 3.8.6
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.