[CSS/DIV] Border probleem - Softwareontwikkeling

vrijdag 9 april 2004 16:37

Acties:

Verwijderd

Topicstarter

Okey,

Ik ben overtuigt van CSS, nu moet ik er alleen nog even mee om leren gaan.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title></title>
    <script type="text/javascript"></script>
    <style type="text/css">

.column {
    float:left;
}

.row {
    clear: left;
}

.table {
    border: 1px solid black;
}

    </style>
  </head>
  <body>
    <div class="table">
      <div class="row">
        <div class="column">foo</div>
        <div class="column">foo</div>
      </div>
      <div class="row">
        <div class="column">foo</div>
        <div class="column">foo</div>
      </div>
      <div class="row">
        <div class="column">foo</div>
        <div class="column">foo</div>
      </div>
    </div>
  </body>
</html>

Beetje vage manier om een "tabel" te maken, maar jah, je moet toch ergens mee beginnen te prutsen. Ik snap alleen niet waarom die Border van selector table, tussen "row" 2 en 3 komt te staan...
Wat zie ik over het hoofd?

vrijdag 9 april 2004 16:41

Acties:

faabman

om tabellen en inhoud weer te geven heb je afaik gewoon display:table;

zie www.w3schools.com/css voor meer info...

daarnaast is het niet de bedoeling om uit divjes een tabel te maken... (daarvoor hebben we immers table

)

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

vrijdag 9 april 2004 16:45

Acties:

crisp

Devver

Pixelated

voor tabulaire data is er niets mis mee om een table te gebruiken; display:table en derivaten worden op dit moment enkel door Moz en Opera ondersteund, dus daar kan je verder weinig mee ben ik bang...

Intentionally left blank

vrijdag 9 april 2004 16:45

Acties:

Verwijderd

Topicstarter

Dat snap ik wel, 't gaat om het idee...

Waarom loopt die border er niet netjes omheen?

Je kan die code ook zien als een header, body en footer, waar je omheen een border wil hebben. Alleen loopt dan nu de border om de header en body...

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title></title>
    <script type="text/javascript"></script>
    <style type="text/css">

.column {
    float:left;
}

.row {
    clear: left;
}

.table {
    border: 1px solid black;
}

    </style>
  </head>
  <body>
    <div class="table">
      <div class="row">
        <div class="column">HEADER SITE</div>
      </div>
      <div class="row">
        <div class="column">BODY SITE</div>
      </div>
      <div class="row">
        <div class="column">FOOTER SITE</div>
      </div>
    </div>
  </body>
</html>

[ Voor 80% gewijzigd door Verwijderd op 09-04-2004 16:47 ]

vrijdag 9 april 2004 16:45

Acties:

Verwijderd

Je ziet denk ik over het hoofd dat er geen 'clear' meer komt na de laatste 'float'. Een parent kan de 'float' van child niet "ongedaan" maken, daar heb je een sibling voor nodig.

vrijdag 9 april 2004 16:45

Acties:

T-MOB

Alhoewel ik niet helemaal snap waarom je een tabel zou willen nameken in CSS (het is niet verboden om een Tabel te gebruiken als je een tabelstructuur nodig hebt).

Je probleem ligt in het gebruik van floats. Als je een float gebruikt wordt het object buiten de normale "flow" van elementen gerendered. Het "containing element" in jouw geval de div tabel wordt dus niet opgerekt door floatende kinderen. Tenzij er een clear volgt.
Aangezien je na de laatste rij geen clear meer gebruikt wordt zal je tabel-div niet verder worden opgerekt dan tot aan deze laatste rij.

Je kunt het oplossen door onder de laatste kolom een <br style="clear:both;"> toe te voegen...

Regeren is vooruitschuiven

vrijdag 9 april 2004 16:47

Acties:

Verwijderd

Topicstarter

Anne, bedankt!

iedereen maar reageren op het tabel-feit... 't ging om het principe

Het idee van CSS begint al iets helderder te worden...

[ Voor 24% gewijzigd door Verwijderd op 09-04-2004 16:49 ]

vrijdag 9 april 2004 16:49

Acties:

Verwijderd

(CSS3 krijgt trouwens een een property 'clear-after' zodat we geen overbodige elementen meer hoeven in te voegen, maar dat is alleen interessant voor mensen die dit topic over 5 jaar lezen

)

vrijdag 9 april 2004 16:52

Acties:

Verwijderd

Topicstarter

Dus bij CSS moet je soms onnodige Tag soep meesturen om de floats weer goed te zetten... vreemd

vrijdag 9 april 2004 16:53

Acties:

X-Lars

Just GoT it.

Dat zou je kunnen oplossen met een

Cascading Stylesheet:

1	<div class="row last">

Zodat je die property in ieder geval buiten je HMTL houdt.

[ Voor 9% gewijzigd door X-Lars op 09-04-2004 16:54 ]

dinsdag 13 april 2004 15:08

Acties:

Verwijderd

Verwijderd schreef op 09 april 2004 @ 16:52:
Dus bij CSS moet je soms onnodige Tag soep meesturen om de floats weer goed te zetten... vreemd

Eigenlijk niet, kwam ik net achter. De volgende combinatie is ook mogelijk:

code:

div#wrapper::after{ /* genereert dus een box net voor het einde (gelijk aan :last-child) */
 display:block;
 content:''; /* zonder inhoud bestaat deze niet */
 clear:both;
}

Voor de duidelijkheid, als je op een SPAN '::before' en '::after' gebruikt, ziet dat er zo uit:

code:

1	<span><::before/>inhoud<::after/></span>

Dus het zit _niet_ voor het element, maar voor de inhoud.

dinsdag 13 april 2004 15:36

Acties:

chris

Verwijderd schreef op 13 april 2004 @ 15:08:
[...]
Eigenlijk niet, kwam ik net achter. De volgende combinatie is ook mogelijk:
code:
1
2
3
4
5
div#wrapper::after{ /* genereert dus een box net voor het einde (gelijk aan :last-child) */
 display:block;
 content:''; /* zonder inhoud bestaat deze niet */
 clear:both;
}
Voor de duidelijkheid, als je op een SPAN '::before' en '::after' gebruikt, ziet dat er zo uit:
code:
1
<span><::before/>inhoud<::after/></span>
Dus het zit _niet_ voor het element, maar voor de inhoud.

En het leuke daarvan is dat het dan weer niet door IE ondersteund wordt. In ieder geval IE 6 wil je over het algemeen wel ondersteunen. En dus moet je onnodige tagsoup meesturen.

dinsdag 13 april 2004 15:37

Acties:

Verwijderd

O uiteraard, maar het ging me meer om aan te geven dat ze in CSS2/CSS2.1 nog wel ergens aan gedacht hadden

. Dat je voor IE hier en daar een extra elementje moet gebruiken is niet zo erg.