table to div

  • 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:


    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

  • 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;


    Dit was mijn spreekbeurt, zijn er nog vragen?

    Bewerkt één keer, laatst door M.Beers ().

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