Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Vervelend div probleem

Drewster
5 antwoorden
  • Nog niet zo lang geleden ben ik websites beginnen opbouwen met divs in plaats van tables. Een super leuk en boeiend systeem als je het mij vraagt, maar af en toe bots ik echter op een onduidelijkheidje. Het volgende probleem doet zich voor:

    http://members.lycos.nl/bellewaerdeboy/test.html

    Zoals je ziet heb ik twee div's gemaakt waarbij de achtergrond verschillend is (strooklicht en strookdonker). Dit zorgt voor een leuke opeensomming van elementen onder elkaar. Het probleem is echter dat de tekst niet in de divs wil staan en dat ze een eigen leventje gaat leiden. Ik denk dat het iets met position te maken moet hebben, maar tot nu toe is er echt nog niets gelukt… Let wel: met IE blijkt dit min of meer goed te werken, maar ik ben echter een die-hard FF gebruiker… Hieronder mijn css en html:

    [code:1:ec42c2cf93]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    .strookdonker{
    width: 385px;
    background-color: #000;
    color: #033;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding-bottom: 5px;
    }

    .strooklicht{
    width: 385px;
    background-color: #fff;
    color: #033;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding-bottom: 5px;
    }

    .veldlabel{
    width: 200px;
    float: left;
    display: inline;
    font-weight: bold;
    padding-bottom: 5px;}

    .veldwaarde{
    width: 185px;
    float: left;
    display: inline;
    padding-bottom: 5px;
    }

    .stroken{
    width: 385px;
    background-color: #333;
    }

    </style>

    </head>

    <body>

    <div class="stroken">
    <div class="strookdonker">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strooklicht">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strookdonker">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strooklicht">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strookdonker">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strooklicht">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strookdonker">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    <div class="strooklicht">
    <div class="veldlabel">test</div>
    <div class="veldwaarde">test</div>
    </div>
    </div>

    </body>
    </html>[/code:1:ec42c2cf93]

    Kan iemand mij hierbij helpen? Mijn baas en ik bedanken u :wink:

    Edit: het oorspronkelijke probleem komt hier vandaan:
    [img:ec42c2cf93]http://members.lycos.nl/bellewaerdeboy/test.jpg[/img:ec42c2cf93]

    Zoals je ziet wil ik een rangschikking maken met de velden van een pand die te koop staat. De div's doen enkel tegen draad en ik weet er geen weg mee :?
  • Komt door die floats, om het te laten werken moet je ook die divs waar die "veldlabel" en "veldwaarde" in staat laten floaten. Ik weet niet waarom dat zo is, het is gewoon zo…
  • Even los van je huidige probleem: ik zie in je aanpak de neiging om tabellen na te bouwen met divs. Bedenk dat dit niet de bedoeling is! Op deze manier maak je het alleen maar lastig voor jezelf, probeer liever om het geheel niet als een samenraapsel van vakjes te zien, maar probeer het te benaderen vanuit de normale "document flow".

    Ik kan het even niet goed omschrijven, maar als je jezelf gaat aanleren tabellen na te bouwen dan moet je straks weer jezelf een hoop dingen afleren, dat zou zonde zijn.

    - Bas
  • strookdonker en licht ook left laten floaten. Als je dingen in een div float weet hij niet hoe hoog het is. Als je de parent div ook float dan pakt hij automatisch de hoogte mee.
    Of je kan een vaste hoogte opgeven (wat niet de bedoeling is van dynamisch content) of je kan na elke regel een clear meegeven. :wink:
  • [quote:d90af7490d="Drewster"]Komt door die floats, om het te laten werken moet je ook die divs waar die "veldlabel" en "veldwaarde" in staat laten floaten.[/quote:d90af7490d]Dat hoeft niet per se, twee methoden die m.i. nog net wat netter zijn:
    1) 'clear: both' op het eerstvolgende block-level element na de float.
    2) 'oveflow: hidden' op het element waarin de float zich bevindt (m.a.w. op de parent).

    Verder ben ik het geheel met Bas eens dat de huidige werkwijze zeker niet beter is dan werken met tabellen. Een div dient niet ter vervanging van een tabelcel. Het is ook helemaal niet fout een tabel te gebruiken; het is slechts onjuist om een tabel te gebruiken voor de paginalayout. Maar om diezelfde reden is het onjuist om tientallen divs te gebruiken voor paginalayout. De bedoeling is nou juist, om [i:d90af7490d]slechts de elementen te gebruiken die nodig zijn om de [b:d90af7490d]tekstuele inhoud[/b:d90af7490d] te structureren[/i:d90af7490d]. Je zou in principe bij het gebruik van HTML-elementen dus vanuit de tekststructuur moeten denken, niet vanuit de layout. De layout komt later, die regel je achteraf met CSS.

    Concreet: is het een kop? Dan gebruik ik een heading-element (h1). Is het een paragraafkop? Dan een h2 (of lager niveau paragraaf: h3, etc.). Is het een alinea? Dan gebruik ik een p. Is het een lijst (bijv. een lijst met links)? Dan gebruik ik een list.

    In het concrete geval van jou zie ik dat je eigenschappen van een huis op een rij zet. Dat is gewoon data, dus dat kan in een tabel. Want data hoort in een tabel. (Vergeet niet het table-heading-element te gebruiken). Het kan ook als een definition list, want je geeft een onderwerp en een bijbehorende uitleg erbij. Maar een berg divs? Nee, dat zeker niet.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.