• Inloggen
  • Registreer
  • Zoeken
Dit topic
  • Overal
  • Dit topic
  • Dit forum
  • Artikelen
  • Pagina's
  • Forum
  • Downloads
  • Meer opties

ICTscripters

Dé plek voor IT

Dé plek voor IT

Aanmelden

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. (X)HTML + XML + CSS

Forum

  • nieuwe game

    frio 1 november 2026 om 14:08
  • Criminolz

    qevanto 31 oktober 2026 om 20:52
  • [Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

    frio 27 oktober 2026 om 12:22
  • Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

    Jeroen.G 26 oktober 2026 om 10:33
  • Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

    eeyk 22 oktober 2026 om 18:43
  • Crime Club volledig herschreven vanaf nul

    frio 19 oktober 2026 om 23:57
  • Malavita (nieuwe maffia game, van 0)

    jos 19 oktober 2026 om 23:18
  • Herkent deze Notion-structuurscan echte problemen?

    Jeroen.G 19 oktober 2026 om 15:09

Marktplaats

  • [Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

    frio 29 oktober 2026 om 18:17
  • [Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

    frio 27 oktober 2026 om 18:54
  • [TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

    Dpm_x 26 oktober 2026 om 00:22

table to div

  • Tieske
  • 3 december 2013 om 12:35
  • Tieske
    Lormans Design
    Berichten
    333
    • 3 december 2013 om 12:35
    • #1

    Beste ICT scripters,

    mijn DIV kennis is niet super uitgebreid en alweer iets wat verouderd.
    Voor mijn layouts werkte ik namelijk altijd met tables (shame on me, I know ;))

    echter ben ik nu bezig aan mijn bedrijf pagina en wil ik iets creëren wat ik in tables weet te doen, maar in divs niet (makkelijk, zoals ik het bedoel) kan terugvinden.

    ik wil namelijk een rowspan in een div terug laten komen, als ik hierna ga zoeken op google, krijg ik allemaal tabellen in divs gemaakt, maar dat is niet mijn bedoeling.
    Ik wil d.m.v. divs een bepaalde div achter twee andere plaatsen, waarbij die twee de zelfde hoogte hebben als de achterste div (fixed height)

    oftewel dit tabel omgezet in divs maar dan niet werkend met een <div class="table"> etc.

    Onderstaand tabel geeft de layout weer, en de id's komen overeen met de gewenste id's in de divs, verder de hoogte etc komt uiteindelijk uiteraard in de css te staan.

    PHP
    <table width="1000px" height="250px" border="1" id="home-services">
    <tr>
    	<td width="700" id="home-services-head">home services head</td>
    	<td width="300" id="home-services-img" rowspan="2">Home service IMG WxH 250 x 250</td>
    </tr>
    <tr>
    	<td width="700" id="home-services-text">home services text</td>
    </tr>
    </table>

    Zou iemand mij kunnen helpen?
    want ik kom niet verder dan 2 divs langs elkaar en dan eentje onder beide over de gehele lengte.

    Naar mijn verwachting zal
    home-services-head & home-services-text een float left krijgen en home-services-img een float right,

    de opzet zoals ik hem nu heb:

    PHP
    <style type="text/css">
    #services-columns{
    	width: 1000px;
    	position: relative;
    	border: 1px solid black;
    }
    #services-head {
    	float: left;
    	width: 700px;
    	height: 32px;
    	border: 1px solid black;
    }
    #services-text {
    	float: left;
    	width: 700px;
    	height: auto;
    	border: 1px solid black;
    }
    #services-img {
    	float: right;
    	width: 300px;
    	height: 200px;
    	border: 1px solid black;
    }
    </style>
    
    
    <div id="service-columns">
    	<div id="services-head">services head</div>
    	<div id="services-text">services text</div>
    	<div id="services-img">services img</div>
    </div>
    Meer tonen

    Echter wil dit niet helemaal werken zoals hierboven in het table gedeelte.

    Wie kan mij helpen & direct ook nog iets leren, zodat ik het de volgende keer zelf kan?

    Met vriendelijke groet,
    Mathijs Lormans

    Designer / Sustainability expert: Lormans Design
    Design, Engineering and Development
    Bouwkundig ontwerp, tekenwerk, advies en projectmanagement!
    3D modeling en 3D printing

  • Gast, wil je besparen op je domeinnamen? (ad)
  • L.Kok
    Elite members
    Berichten
    1.120
    Filebase Entries
    1
    • 3 december 2013 om 13:48
    • #2

    Is er een online voorbeeld? Dat is altijd iets makkelijker om te werken.

    Met vriendelijke groet,

    L.Kok

  • M.Beers
    Elite members
    Berichten
    460
    • 3 december 2013 om 14:04
    • #3

    Met divjes moet je vooral met floats werken om hetzelfde resultaat te krijgen en zal je structuur iets anders zijn...

    Onderstaand het voorbeeld in tables vs divjes :)

    Edit: Dezelfde oplossing kan overigens ook met een inline-block gemaakt worden :) dus waar je float left ziet staan kan je vervangen voor: display: inline-block;

    Code
    <table width="1000px" height="250px" border="1" id="home-services">
    <tr>
        <td width="700" id="home-services-head">home services head</td>
        <td width="300" id="home-services-img" rowspan="2">Home service IMG WxH 250 x 250</td>
    </tr>
    <tr>
        <td width="700" id="home-services-text">home services text</td>
    </tr>
    </table>
    
    
    <style>
    	/*Dit is om even een outline te tonen in de divs*/
    	div {
    		outline: 1px solid #000000;
    		margin: 0;
    		padding: 0;
    	}
    	
    	.wrapper {
    		margin: 10px auto; /* De 10px is alleen om ruimte te maken onder de tabel de auto om te centreren. */
    		width: 1000px;
    		height: 250px;
    	}
    	
    	.left-container {
    		float: left;
    		width: 700px;
    	}
    	
    	.right-container {
    		float: left; /* Kan float right zijn maar is nu niet nodig omdat er geen ruimte tussen moet komen */
    		width: 300px;
    	}
    	
    	.header,
    	.text {
    		height: 125px;
    	}
    	
    	.img { height: 250px; }
    </style>
    
    
    <div class="wrapper">
    	<div class="left-container">
    		<div class="header">Home head</div>
    		<div class="text">Home text</div>
    	</div>
    	<div class="right-container">
    		<div class="img">Img</div>
    	</div>
    </div>
    Meer tonen

    Dit was mijn spreekbeurt, zijn er nog vragen?

    Bewerkt één keer, laatst door M.Beers (3 december 2013 om 14:10).

  • Tieske
    Lormans Design
    Berichten
    333
    • 3 december 2013 om 15:37
    • #4

    Michael hartelijk dank,
    dankzij jou opzet heb ik het voor elkaar gekregen,
    het is/was een voor de hand liggende oplossing die ik zelf (had moeten/kunnen bedenken),

    Het resultaat is te zien op:
    http://www.lormansdesign.nl

    Moet hier de teksten uiteraard nog aanpassen, en de afbeeldingen zullen ook nog wisselen.
    De volgende opgave is om de tekst/afbeeldingen die hierin staan via het wordpress systeem te kunnen aanpassen i.p.v. hardcoded.
    maar dat is voor latere opgave aangezien ik voor de website een deadline van 10 december heb staan.

    Met vriendelijke groet,
    Mathijs Lormans

    Designer / Sustainability expert: Lormans Design
    Design, Engineering and Development
    Bouwkundig ontwerp, tekenwerk, advies en projectmanagement!
    3D modeling en 3D printing

Registratie

Nog geen account? Registreer je nu en word deel van onze community!

Nu registreren Aanmelden

ICT Nieuws

  • PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

    Aaron 22 oktober 2026 om 22:19

Blogs

  • Functioneel ontwerp

    Dees 28 december 2014 om 12:38
  • Access Control List implementatie in PHP/MySQL - deel 1/2

    FangorN 28 december 2018 om 12:35
  • Access Control List implementatie in PHP/MySQL - deel 2/2

    FangorN 29 december 2018 om 12:37
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacyverklaring
  10. Contact
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design