• Login
  • Register
  • Zoek
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • Filebase Entry
  • More Options

ICTscripters

Dé plek voor IT

Dé plek voor IT

Login

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

  • Developer Gezocht

    K.Rens 30 december 2025 om 12:32
  • Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

    Jeffrey.Hoekman 29 december 2025 om 17:20
  • Op zoek naar de legends

    Jeffrey.Hoekman 9 december 2025 om 09:41
  • [FREE] WeFact Hosting module

    Jeroen.G 13 oktober 2025 om 14:09
  • Help testers nodig voor android app Urgent

    urgentotservices 26 september 2025 om 10:21
  • Versio vervanger

    Jeroen.G 25 augustus 2025 om 15:56
  • Afspraken systeem met planbeperking

    Lijno 1 augustus 2025 om 23:04
  • Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

    NFT Art Designer 1 maart 2025 om 14:08

Marktplaats

  • Meerdere mafia game template te koop

    Syntax 28 december 2025 om 21:20
  • Van een pixelige afbeelding naar een strakke, moderne website

    Syntax 21 december 2025 om 17:05
  • 302 Nieuwe Domeinnamen November 2025

    shiga 1 december 2025 om 13:07

table to div

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

    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 Reacties
    35
    Berichten
    1.117
    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
    YoungVision

  • M.Beers
    Elite members
    Ontvangen Reacties
    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>
    Toon Meer

    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 Reacties
    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!

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

Maak een account aan Login

ICT Nieuws

  • Fijne feestdagen

    tcbhome 28 december 2025 om 13:55
  • Kritieke update voor Really Simple Security-plug-in

    K.Rens 16 november 2024 om 16:12
  • ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

    K.Rens 2 november 2024 om 16:09

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. Privacy Policy
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