• Login
  • Register
  • Zoeken
Dit topic
  • Overal
  • Dit topic
  • Dit forum
  • Artikelen
  • Pagina's
  • Forum
  • Filebase-item
  • 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. 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
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. (X)HTML + XML + CSS

Forum

  • [PROJECT] Gamekeuring.nl - Hét onafhankelijke keuringsplatform voor maffiagames & RPG's!

    frio 22 september 2026 om 16:40
  • Ictscripters / Koen

    Aaron 22 september 2026 om 15:07
  • 🚀 WE ZOEKEN TESTERS! 🚀

    Lijno 19 september 2026 om 19:37
  • Kweekrijk - van stekje tot Imperium

    Lijno 14 september 2026 om 23:00
  • Crimora.nl

    Jeffrey.Hoekman 8 september 2026 om 18:49
  • Programmeren geocht die samen met mij maffiaskrill.com

    Dennii 2 september 2026 om 11:15
  • Gezocht mafiasnextkill

    mrsenati 1 september 2026 om 17:38
  • nieuwe game

    tigermaffia 27 augustus 2026 om 18:02

Marktplaats

  • [TE KOOP] CloutClubRPG.nl – Complete Maffia Rap & Street Clout RPG (Kant-en-klaar concept)

    frio 26 september 2026 om 15:50
  • Straatbaas.eu – complete Nederlandstalige en Engelstalige online maffia-RPG

    Syntax 25 september 2026 om 14:05
  • 402 Nieuwe Domeinnamen Augustus 2026

    shiga 19 september 2026 om 13:53

table to div

  • Tieske
  • 3 december 2013 om 12:35
  • Tieske
    Lormans Design
    Ontvangen likes
    11
    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

  • L.Kok
    Elite members
    Ontvangen likes
    35
    Berichten
    1.117
    Filebase-items
    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
    YoungVision

  • M.Beers
    Elite members
    Ontvangen likes
    31
    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
    Ontvangen likes
    11
    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

Participate now!

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

Nu registreren Aanmelden

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

Gebruikers die dit topic bekijken

  • 1 Gasten
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacyverklaring
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen | Beste Zetes eid kaartlezer webshop
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design