3 tabellen naast elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dimi meulman

dimi meulman

12/10/2012 08:08:27
Quote Anchor link
Ik heb een probleem, ik heb 3 tabellen met opsomming van gegevens uit mijn database.
nu wilde ik door middel van style="float: ;" alle drie naast elkaar zetten maar dit lukt niet.
Met 2 tabellen lukt het wel (left en center of left en right) maar met 3 (left, center en right) lukt het niet.
Is dit niet mogelijk?
 
PHP hulp

PHP hulp

18/12/2024 23:59:43
 
Ozzie PHP

Ozzie PHP

12/10/2012 08:15:10
Quote Anchor link
Als je nou ook even je code post dan kunnen we er misschien iets zinnigs over zeggen.
 
Dimi meulman

dimi meulman

12/10/2012 08:21:05
Quote Anchor link
Ja ik wil dat wel doen, maar het zijn eigenlijk gewoon 3 tabellen waar er een opsomming gebeurt van gegevens
<html>
<table cellpadding="3" cellspacing="10" border="0" style="float: center;">
</html>
in die tabel staat er nu center bij float en bij de andere zet ik dan left en right
 
Ward van der Put
Moderator

Ward van der Put

12/10/2012 08:21:41
Quote Anchor link
Geef drie div's een breedte met width en stel ze alledrie in op float:left, bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div style="width:600px;">
  <div style="float:left;width:200px;">Links</div>
  <div style="float:left;width:200px;">Midden</div>
  <div style="float:left;width:200px;">Rechts</div>
  <br style="clear:left;" />
</div>
 
Ozzie PHP

Ozzie PHP

12/10/2012 08:23:42
Quote Anchor link
Float center bestaat niet. Zoals Ward zegt... alles op float left zetten.

Let wel, het is beter om al je css in een apart bestand te zetten in plaats van (inline) tussen de html!
 
Dimi meulman

dimi meulman

12/10/2012 08:36:54
Quote Anchor link
ik werk inderdaad met css in een apart bestand maar, hoe moet ik dat dan noteren in mijn css, want die 3 div zitten eigenlijk in 1 en zou niet weten hoe u dat moet doen in mijn css
 
Ward van der Put
Moderator

Ward van der Put

12/10/2012 08:42:38
Quote Anchor link
In CSS defineer je bijvoorbeeld een klasse:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.linkerkolom {
  float: left;
  width: 200px;
}


Daarna gebruik je de in CSS gedefinieerde klasse linkerkolom in (X)HTML met:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="linkerkolom">...</div>


Aangezien de drie div's hier alledrie dezelfde CSS-instellingen gebruiken, kun je ook één algemene klasse definiëren en die drie keer toepassen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
.zwevendeKolom {
  float: left;
  width: 200px;
}


En daarna in HTML:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div class="zwevendeKolom">Links</div>
<div class="zwevendeKolom">Midden</div>
<div class="zwevendeKolom">Rechts</div>
Gewijzigd op 12/10/2012 08:47:45 door Ward van der Put
 
Dimi meulman

dimi meulman

12/10/2012 08:47:05
Quote Anchor link
ja, dat weet ik wel maar, u hebt eerst een div met jou totale width en dan IN die div heb je 3 andere (links, midden en rechts). En het is dit dat ik niet weet hoe het moet
 
Ward van der Put
Moderator

Ward van der Put

12/10/2012 08:53:39
Quote Anchor link
Dan geef je de hoofdcontainer een unieke id en maak je de andere div's afhankelijk. In CSS eerst:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
div#drieKolommen{
  width: 600px;
}
div#drieKolommen div{
  float: left;
  width: 200px;
}

Nu geldt de definitie div#drieKolommen div voor elke geneste div in de hoofdcontainer #drieKolommen en gebruik je in HTML:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div id="drieKolommen">
  <div>Links</div>
  <div>Midden</div>
  <div>Rechts</div>
  <br style="clear:left" />
</div>
 
Dimi meulman

dimi meulman

12/10/2012 09:06:41
Quote Anchor link
a ok bedankt


Toevoeging op 12/10/2012 11:59:07:

Ok, ik heb dat allemaal gedaan en met chrome werkt dit prefect maar niet met allemaal. Is er mss nog een aanpassing mogelijk of een andere manier?

Toevoeging op 12/10/2012 19:18:59:

ah, dit is inorde. Heb het probleem gevonden
 



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.