[CSS] IE en FF, waarom is IE zo eigenwijs?

[Kaastosti]

Vandaag weer eens begonnen aan een nieuw ontwerp voor m'n site. Plaatjes bij elkaar geraapt, netjes afmeten, html er omheen en netjes maken. Aangezien alles in html zelf zo'n beetje depreciated is, maak ik zoveel mogelijk gebruik van css. Als fan van Firefox gebruik ik die natuurlijk als eerste referentie en daarin ging alles zoals ik het wilde hebben in één keer goed, het klopt gewoon.

Daarna natuurlijk het grote moment waarop dit stukje in IE getest moest worden. En zoals het een eigenwijze browser betaamd maakt hij er iets totaal anders van. Als ik erg lastige constructies had gebruikt, had ik daar begrip voor op kunnen brengen, maar ik wil iets heel simpels!

Ik heb een rij in een tabel die uit 2 delen bestaat. Deel 1 is voor de titel en moet zo breed worden als mogelijk, deel 2 is voor knopjes en is 100 pixels breed. De totale tabel staat nu nog qua breedte op 600, maar dat wil ik zonder veel problemen aan kunnen passen.

Mijn idee was dan ook om in de css voor deel 2 op te nemen: width: 100px; . Lijkt me redelijk recht-toe-recht-aan. Daarnaast moet binnen deze cel alles naar rechts worden uitgelijnd, dus dit staat er ook in: text-align: right; . Firefox begrijpt direct wat de bedoeling is en bouwt alles netjes op, terwijl IE.. nou ja.. kijk maar

Firefox: (zit ook een zwart lijntje in, maar door resize zie je'm niet)

Internet Explorer

Cascading Stylesheet:

td.logtitel{  (dit is dus Deel 1...)
    background-image: url('boven.jpg');
    font-family: Verdana, Arial;
    font-size: 18px;
    font-weight: bold;
    color: white;
}
td.logknopjes{   (...en dit Deel 2 van de rij)
    width: 100px;
    text-align: right;
    background-image: url('boven.jpg');
}

Ik heb een aantal topics door zitten bladeren en op google gekeken, maar men begint al heel snel met absolute positioning, floats en dergelijken. Zo iets ingewikkelds vraag ik 'm toch niet dacht ik zo... kan dit niet op een strakkere manier?

[ Voor 8% gewijzigd door Kaastosti op 19-03-2005 14:42 ]

[Not Pingu]

hm, kun je eens wat meer laten zien, en dan met name wat betreft de inhoud van die tabel?
cellen van een tabel worden nl. geresized naargelang de inhoud (nog een reden waarom tabellen niet voor structuur gebruikt moeten worden )

Misschien helpt dit: geeft dat "R" plaatje een id of class, en doe het volgende:

Cascading Stylesheet:

td.logknopjes
{
    position: relative;
}

img.knopje
{
    position: absolute;
    right: 4px;
}

of geef anders de td.logtitel eens een vaste breedte. is het de bedoeling dat ie moet stretchen?

[ Voor 43% gewijzigd door Not Pingu op 19-03-2005 14:51 ]

[Kaastosti]

Wat je ziet is de totale inhoud...

HTML:

<table class='logtable'>
    <tr>
        <td>[img]'links_boven.jpg'></td>
        <td[/img]Testtitel</td>
        <td class='logknopjes'>[img]'knopje_reply.jpg'[/img]</td>
        <td>[img]'rechts_boven.jpg'></td>
    </tr>
</table[/img]

Niet zo heel veel rare dingen dus

nog een reden waarom tabellen niet voor structuur gebruikt moeten worden

Tjah dat heb ik vaker gehoord, maar ik ben niet zo erg thuis in het gebruik van andere middelen. Een heleboel divjes kan natuurlijk ook, maar tabellen werken zo lekker makkelijk (althans, in het aanmaken). Ik weet precies wat ik neer moet zetten voor een bepaalde structuur aan rijen, kolommen, colspans, rowspans etc. Bij divjes zou ik al niet eens weten hoe ik aangeef dat ik naar een volgende rij wil

of geef anders de td.logtitel eens een vaste breedte. is het de bedoeling dat ie moet stretchen?

Ja dat is wel het idee ja. Ik kan zoals je zegt een vaste breedte aangeven, maar waarom zou ie zich daar wel aan houden en aan de huidige waarde niet? Mijn idee is zoveel mogelijk dynamisch, dus als ik toevallig wil dat de table een breedte van 800 krijgt, dat dan dat titelveld automatisch 200 pixeltjes meer pakt. (zoals dat ook netjes in firefox gebeurt)

[ Voor 88% gewijzigd door Kaastosti op 19-03-2005 14:54 ]

[Not Pingu]

dan zou dat andere met position: absolute en right: #px wel moeten werken, en je houdt je tabel stretchbaar want je kunt de rest gewoon laten zoals het is.

[simon]

ik wil niet veel zeggen, maar je kan je beter verdiepen in de mogelijkheden van echt positioneren, zonder tabellen dan dit oplossen. Scheelt je bakken met tijd, anders ben je nog eigenwijzer dan ie zelf.

[Kaastosti]

Ermm nope... totaal geen verandering in beide browsers.

Maar okee, ik sta open voor vernieuwing, wat wordt het meest (en best) gebruikt als alternatief voor tables? Toch die DIV's maar eens nader gaan bekijken?

[ Voor 59% gewijzigd door Kaastosti op 19-03-2005 15:02 ]

[Surkow]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:01:
Ermm nope... totaal geen verandering in beide browsers.

Maar okee, ik sta open voor vernieuwing, wat wordt het meest (en best) gebruikt als alternatief voor tables? Toch die DIV's maar eens nader gaan bekijken?

Division (DIV) betekent letterlijk indeling of verdeling. Tabellen zijn bedoeld voor de inhoud en dus niet voor het uiterlijk van de website. Tabellen zijn zelfs te vervangen door divisions. Je kunt het dus ook gebruiken in plaats van tabellen van tabellen én het gebruiken voor de layout (divisions in combinatie van CSS).

Effe een paar voorbeelden online gezet:

Met absolute positionering: http://jorik.zeepost.nl/bla/html/
Met relatieve positionering: http://mediatheek.thinkquest.nl/~lld530/css/

Edit: effe aangepast voor mensen die niet begrijpen wat ik bedoel.

[ Voor 49% gewijzigd door Surkow op 19-03-2005 15:55 ]

[Not Pingu]

Heb even je code getest, maar bij mij doet ie het perfect in IE (nouja de hoekplaatjes sluiten niet helemaal aan maar ik neem aan dat je dat in je CSS al geregeld had):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
    <style type="text/css">
    
        body,html
        {
            width: 100%;
            height: 100%;
        }
    
        table.logtable
        {
            border-collapse: collapse;
            width: 90%;
        }
        
            table.logtable td
            {
                margin: 0;
            }
    
        td.logtitel{
            background-image: url(boven.jpg);
            font-family: Verdana, Arial;
            font-size: 18px;
            font-weight: bold;
            color: white;
        }
        td.logknopjes{
            width: 100px;
            text-align: right;
            background-image: url(boven.jpg);
        }
    </style>
</head>

<body>

<table class='logtable'>
    <tr>
        <td>[img]'links_boven.jpg'></td>
[/img]Testtitel</td>
        <td class='logknopjes'>[img]'knopje_reply.jpg'[/img]</td>
        <td>[img]'rechts_boven.jpg'></td>
[/img]
</table>

</body></html>

[ Voor 15% gewijzigd door Not Pingu op 19-03-2005 15:38 ]

[Janoz]

De div is zeker geen opvolger van table. Table hoort gebruikt te worden voor tabulaire data. Waneer je nu divjes gaat gebruiken om een tabelletje met gegevens in elkaar te zetten heb je het niet helemaal goed begrepen.

[BtM909]

Surkow schreef op zaterdag 19 maart 2005 @ 15:26:
[...]


Division (DIV) betekent letterlijk indeling of verdeling. Tabellen zijn bedoeld voor de inhoud en dus niet voor het uiterlijk van de website. Tabellen zijn zelfs te vervangen door divisions.

Ik denk dat ook jij misschien iets meer moet inlezen in het gebruik van HTML.

Steekwoorden voor jou (en Kaastosti):
• Semantisch
• HTML

[Surkow]

Janoz schreef op zaterdag 19 maart 2005 @ 15:36:
De div is zeker geen opvolger van table. Table hoort gebruikt te worden voor tabulaire data. Waneer je nu divjes gaat gebruiken om een tabelletje met gegevens in elkaar te zetten heb je het niet helemaal goed begrepen.

Sorry? Wat heb Ik niet goed begrepen? Je "kunt" gebruik maken van divs voor de indeling van tabellen. Je moet dat toch niet?

BtM909 schreef op zaterdag 19 maart 2005 @ 15:36:
[...]

Ik denk dat ook jij misschien iets meer moet inlezen in het gebruik van HTML.

Steekwoorden voor jou (en Kaastosti):
• Semantisch
• HTML

Ik zie nog steeds niet waaruit blijkt dat ik het aan het verkeerde eind heb. Wel begrijp ik dat het niet de opvolger is. Echter heb ik wel degelijk verstand van zaken. En dat je divisions kunt gebruiken als tabellen (door het vele werk niet aan te raden) heb ik zelf niet bedacht ofzo.

Edit: Ik zie nu waarom er zo'n heisa over wordt gemaakt. Ik bedoel natuurlijk door middel van css het positioneren van de divisions!

[ Voor 53% gewijzigd door Surkow op 19-03-2005 15:53 ]

[Verwijderd]

als je divs gaat gebruiken om tabel data te representeren kan dat ja, maar dat is net zo fout als tabellen voor layout, dat kan namelijk ook, moet je ook niet

en bovendien is div echt niet zo'n hoer element als hier vaak gezegd wordt, het is primair bedoeld als container voor hoofdstukken en paragrafen, daarnaast kan het ook als structuurelement gebruikt worden
(spam)

@hieronder: div is dus niet voor opmaak

[ Voor 15% gewijzigd door Verwijderd op 19-03-2005 15:52 ]

[simon]

Surkow schreef op zaterdag 19 maart 2005 @ 15:39:
[...]


Sorry? Wat heb Ik niet goed begrepen? Je "kunt" gebruik maken van divs voor de indeling van tabellen. Je moet dat toch niet?
[...]


Ik zie nog steeds niet waaruit blijkt dat ik het aan het verkeerde eind heb. Wel begrijp ik dat het niet de opvolger is.

Als je semantisch correct wil werken moet je ervan uit gaan dat in een tabel tabulaire data komt en een div enkel voor opmaak is

[Kaastosti]

Het gaat er volgens mij dus meer om met welke reden jij een indeling wilt hebben. Als je gegevens in tabelvorm weer wilt geven, dan gebruik je daar mooi tabellen voor. Als je echter meer met het ontwerp bezig wilt gaan, dan zijn divjes mooier.

Tuurlijk zijn tabellen door divjes te vervangen, het hangt er alleen van af of dat handig en functioneel is of je dat ook echt wilt. In mijn geval is het wel degelijk handig.

Het enige waar ik nu nog tegenop loop is dat ik niet zie waar position: relative; vandaan komt. Bij absolute positioning geef ik exact op waar een div moet staan. Bij relative is dat dus relatief van een ander element... maar welk?

Aangezien ik alle divjes binnen 1 div wil gaat zetten en die dan vervolgens waar dan ook positioneren, dacht ik dat de eerste div (links boven) ook al relatief moest zijn. Bij absolute wordt deze namelijk buiten de 'omringende' div geplaatst.

Cascading Stylesheet:

div.links_boven{
    position: relative;
    left: 0px;
    top: 0px;
    width: 7px;
    height: 30px;
}
div.boven{
    position: relative;
    left: 7px;
    right: 7px;
    top: 0px;
    height: 30px;
    background-image: url('boven.jpg')
}

Deze twee moeten naast elkaar gaan komen, maar nu wordt de div.boven wel links naast div.links_boven geplaatst, maar er ook meteen onder. Dat is 'op te lossen' door top: -30px neer te zetten, maar dat is ranzig

[Surkow]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:47:
Het gaat er volgens mij dus meer om met welke reden jij een indeling wilt hebben. Als je gegevens in tabelvorm weer wilt geven, dan gebruik je daar mooi tabellen voor. Als je echter meer met het ontwerp bezig wilt gaan, dan zijn divjes mooier.

Tuurlijk zijn tabellen door divjes te vervangen, het hangt er alleen van af of dat handig en functioneel is of je dat ook echt wilt. In mijn geval is het wel degelijk handig.

Het enige waar ik nu nog tegenop loop is dat ik niet zie waar position: relative; vandaan komt. Bij absolute positioning geef ik exact op waar een div moet staan. Bij relative is dat dus relatief van een ander element... maar welk?

Aangezien ik alle divjes binnen 1 div wil gaat zetten en die dan vervolgens waar dan ook positioneren, dacht ik dat de eerste div (links boven) ook al relatief moest zijn. Bij absolute wordt deze namelijk buiten de 'omringende' div geplaatst.

Cascading Stylesheet:

div.links_boven{
    position: relative;
    left: 0px;
    top: 0px;
    width: 7px;
    height: 30px;
}
div.boven{
    position: relative;
    left: 7px;
    right: 7px;
    top: 0px;
    height: 30px;
    background-image: url('boven.jpg')
}

Deze twee moeten naast elkaar gaan komen, maar nu wordt de div.boven wel links naast div.links_boven geplaatst, maar er ook meteen onder. Dat is 'op te lossen' door top: -30px neer te zetten, maar dat is ranzig

Ten opzichte van de body natuurlijk. En daarna als het in een ander element zit, ten opzichte van dat element.

[ Voor 4% gewijzigd door Surkow op 19-03-2005 15:50 ]

[Verwijderd]

bij relatieve positionering leg je de positie vast ten opzichte van de plaats waar ie normaal zou komen te staan.

tabellen gebruik je niet als je je gegevens in tabelvorm wilt weergeven, maar als je gegevens tabulaire data zijn.

[Kaastosti]

Ten opzichte van de body natuurlijk

Dan zou bovenstaande configuratie toch netjes moeten werken?

tabulaire data

Het ligt het lekker in het gehoor ja die gaan we vaker in discussies gooien

[ Voor 34% gewijzigd door Kaastosti op 19-03-2005 15:52 ]

[Not Pingu]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:47:
Het enige waar ik nu nog tegenop loop is dat ik niet zie waar position: relative; vandaan komt. Bij absolute positioning geef ik exact op waar een div moet staan. Bij relative is dat dus relatief van een ander element... maar welk?

Relatief aan de positie die het element heeft gekregen door de document flow.
Een absoluut gepositioneerd element is relatief aan de body of de dichtstbijzijnde parent die relatief of absoluut gepositioneerd is.
En dat laatste is dus de reden waarom je daar position: relative moet gebruiken. Je zet het element gewoon op dezelfde positie, maar je kunt elementen daarbinnen wel absoluut positioneren binnen het parent element.

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:54:
Ander detail... ik zie bij iedereen '#' voor de benamingen in de styles staan. Als het een bestaand element is kun je die weglaten, je kan er bij eigen benamingen een '.' voor zetten.. waar is die '#' voor?

. geeft een class aan, # een id

code:

<div id="MijnId" class="MijnClass"></div>

div#MijnId
{
}

div.MijnClass
{
}

[ Voor 40% gewijzigd door Not Pingu op 19-03-2005 15:57 ]

[Kaastosti]

Ander detail... ik zie bij iedereen '#' voor de benamingen in de styles staan. Als het een bestaand element is kun je die weglaten, je kan er bij eigen benamingen een '.' voor zetten.. waar is die '#' voor?

[Blaxje]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:54:
Ander detail... ik zie bij iedereen '#' voor de benamingen in de styles staan. Als het een bestaand element is kun je die weglaten, je kan er bij eigen benamingen een '.' voor zetten.. waar is die '#' voor?

Puntje is voor een class.
'#' wordt gebruikt voor id's:

Cascading Stylesheet:

div#foo { background: red; }

HTML:

<div id="foo">Hoi</div>

[Erkens]

# gebruik je voor id's en een . voor classes, basic CSS stuff

[Kaastosti]

Aha.. ik gebruik inderdaad overal class='blaat' voor. Ik neem aan dat de werking niet anders is, alleen dat je id's ook in bijv. javascript kunt gebruiken?

basic CSS stuff

Yup redelijk wel, maar ik ben een aantal jaar css ingedoken, heb mezelf alles aangeleerd en eigenlijk op eigenschappen na nooit meer iets opgezocht op dat gebied. Vandaar dat ik dat soort details mis

[ Voor 51% gewijzigd door Kaastosti op 19-03-2005 15:59 ]

[Surkow]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:54:
Ander detail... ik zie bij iedereen '#' voor de benamingen in de styles staan. Als het een bestaand element is kun je die weglaten, je kan er bij eigen benamingen een '.' voor zetten.. waar is die '#' voor?

.class-naam { stijldeclaratie } --> bv div class="class-naam"
#id-waarde { stijldeclaratie } --> bv div id="id-waarde"

[Blaxje]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:58:
Aha.. ik gebruik inderdaad overal class='blaat' voor. Ik neem aan dat de werking niet anders is, alleen dat je id's ook in bijv. javascript kunt gebruiken?

Id's mag je maar een keer gebruiken. Classes daarentegen, zovaak als je wilt.

[Erkens]

Kaastosti schreef op zaterdag 19 maart 2005 @ 15:58:
Aha.. ik gebruik inderdaad overal class='blaat' voor. Ik neem aan dat de werking niet anders is, alleen dat je id's ook in bijv. javascript kunt gebruiken?

classen gebruik je voor een groep "objecten" en id's zeggen het al, die identificeren slechts 1 "object".

[simon]

Ik zou zeggen: tijd voor een w3schools tutorial...

Surkow schreef op zaterdag 19 maart 2005 @ 16:01:
[...]


Dit noem je een communicatie probleem. Divisions kun je door middel van CSS postioneren en gebruiken voor de indeling van de website.

jij begrijpt mij CSS is voor opmaak

[ Voor 76% gewijzigd door simon op 19-03-2005 16:07 ]

[Surkow]

Verwijderd schreef op zaterdag 19 maart 2005 @ 15:45:
div is dus niet voor opmaak

Dit noem je een communicatie probleem. Divisions kun je door middel van CSS postioneren en gebruiken voor de indeling van de website.

[Kaastosti]

Ik zou zeggen: tijd voor een w3schools tutorial...

I'm waaay ahead of ya

Dit topic gaat nu eigenlijk niet meer om het initiele probleem, genaamd IE, maar meer over DIVjes en CSS syntax. Die ga ik online vinden, dat moet goed komen. Iedereen bedankt voor de adviezen, ik heb weer een nieuwe bezigheid dit weekend, leren werken met DIVs.

[Verwijderd]

Surkow schreef op zaterdag 19 maart 2005 @ 16:01:
[...]


Dit noem je een communicatie probleem. Divisions kun je door middel van CSS postioneren en gebruiken voor de indeling van de website.

dat kan met elk element, div wordt er veel te vaak voor misbruikt imho

[BtM909]

Ik denk dat een aantal mensen in dit topic, wellicht kunnen beginnen met dit artikel
http://annevankesteren.nl/2004/11-structurering.nl.html

[Kaastosti]

Ik denk dat een aantal mensen in dit topic, wellicht kunnen beginnen met dit artikel

Mwah ik vond het nou niet echt heel erg informatief als ik heel eerlijk moet zijn. In ieder geval niet echt direct gerelateerd aan deze discussie. Ik wilde eigenlijk nog wel wat hints vragen voor het werken met divjes, maar daar start ik wel een nieuw topic voor, anders ben ik zometeen degene die off-topic gaat

[Verwijderd]

Kaastosti schreef op zondag 20 maart 2005 @ 15:30:

Ik wilde eigenlijk nog wel wat hints vragen voor het werken met divjes...

Nee, nee, nee, je snapt het punt niet. Een divje is niets bijzonders. Het is geen wondermiddel. Een divje is gewoon een lullig doosje waar je iets in kunt stoppen.

Nu kun je natuurlijk op het doosje zetten wat erin zit, maar toevallig zijn er standaard doosjes die geschikt zijn voor bepaalde doeleinden. Zo hebben we bijvoorbeeld de h1 (koektrommel), de ul (beschuitbus) en de p (diepvriesdoosjes). Daarvan kun je van een heel eind al zien wat er waarschijnlijk in zit.

Ja, je kunt natuurlijk alles in je tupperware doosjes stoppen, maar als je allemaal dezelfde doosjes hebt, moet je weer truuckjes gaan uithalen, zoals er stickers op plakken, of gekleurde deksels gebruiken.

Dan kun je beter voor de spritsen een koektrommel pakken, voor de bolletje beschuiten die prachtige beschuitbus, en voor de spinazie de diepvriesdoosjes.

Jij wilt alles in je tupperware stoppen, maar het gevolg is dat als er een keer een verjaardag is, en iemand helpt je met het bedienen van de visite, dat hij/zij eerst moet gaan zoeken naar de juiste doosjes, en er vervolgens zelf in moet kijken om te zien wat erin zit. Had je toch beter alles in handige "containers" kunnen stoppen, en op een logische plek kunnen wegzetten.

Moraal van het verhaal: div elementen zijn eigenlijk alleen geschikt als je niets beters tot je beschikking hebt. Misschien is het een plank waar je je beschuitbussen op kunt zetten, of een kast waar je een koektrommel in kunt zetten, of een diepvriezer. Ik mag hopen dat je spritsen nie t los in de kast en je beschuiten niet los op de plank liggen. Om het over je spinazie nog maar even niet te hebben

[crisp]

Verwijderd schreef op zondag 20 maart 2005 @ 15:44:
[...]

[BtM909]

Verwijderd schreef op zondag 20 maart 2005 @ 15:44:
[...]

Mooie verwoording

De vraag is alleen of tosti het zo wel snapt

[Verwijderd]

Niet te hard gaan schudden met je p- en h1-doosjes of je koekjes breken. Tenzij je er piepschuim tussen zet. Dat kan ook niet de bedoeling zijn.


Nee, geef mij maar de grondstoffen, ik bouw mijn eigen doosjes wel.

[Verwijderd]

Verwijderd schreef op zondag 20 maart 2005 @ 16:08:
Nee, geef mij maar de grondstoffen, ik bouw mijn eigen doosjes wel.

XML?

[Verwijderd]

div is helemaal niet alleen geschikt als je niks beters tot je beschikking hebt,

div heeft ook een functie, net als alle andere doosjes, primaire functie van div is het clusteren van hoofdstukken, secundaire functie het clusteren van algemene data, zoals ik al eerder aangaf

div is niet het tupperware doosje, div is de kast, noem span maar het tupperware doosje

[ Voor 15% gewijzigd door Verwijderd op 20-03-2005 16:19 ]

[Erkens]

Verwijderd schreef op zondag 20 maart 2005 @ 16:17:
div is helemaal niet alleen geschikt als je niks beters tot je beschikking hebt,

div heeft ook een functie, net als alle andere doosjes, primaire functie van div is het clusteren van hoofdstukken, secundaire functie het clusteren van algemene data, zoals ik al eerder aangaf

div is niet het tupperware doosje, div is de kast, noem span maar het tupperware doosje

divjes gebruik ik bij het groeperen van onderdelen.
hoofdstukken geef je aan met h1-6 en dan de inhoud in enkele p-doosjes

[BtM909]

Verwijderd schreef op zondag 20 maart 2005 @ 16:08:
Niet te hard gaan schudden met je p- en h1-doosjes of je koekjes breken. Tenzij je er piepschuim tussen zet. Dat kan ook niet de bedoeling zijn.


Nee, geef mij maar de grondstoffen, ik bouw mijn eigen doosjes wel.

Kan je dat even toelichten? Of heb je het nu over XML + XSLT?

[Janoz]

met h1-6 geef je alleen de hoofdstuktitel aan. Niet het hele hoofdstuk zelf.

[Verwijderd]

Erkens schreef op zondag 20 maart 2005 @ 16:23:
[...]

divjes gebruik ik bij het groeperen van onderdelen.
hoofdstukken geef je aan met h1-6 en dan de inhoud in enkele p-doosjes

code:

<div>
  <h1>
  <p>
  <p>
  <ul>
  <div>
    <h2>
    <p>
    <p>
  </div>
</div>

daar is div voor. voor wie dit niet snapt: lees die link die ik al eerder noemde maar eens door

[Kaastosti]

Ik vindt het een briljante post Maar misschien had ik m'n probleem ook anders moeten formuleren. Het neerplempen van containers is het probleem niet, het is eerder de positionering. Ondertussen heb ik verscheidene handleidingen doorgelezen met betrekking tot positioning, maar wat ik ook probeer, er gebeurt niet wat ik verwacht

Wat ik probeer te bereiken, en met mij vele anderen, is een rechthoekig schermpje. Dit schermpje heeft in elke hoek een plaatje en boven/onder en links/rechts een backgroundplaatje. Die hoeken zijn goed te positioneren, aangezien ze top en left 0px hebben, of bijv. bottom en right. Dat idee mag duidelijk zijn.

Wat me echter niet lukt is het goed positioneren van de gedeelten die een variabele hoogte hebben. Dat ik de breedte vast instel kan ik me nog in vinden, maar de hoogte is toch echt variabel. Er is een content div in het midden, die een vaste breedte heeft, maar height: auto, height: 100% etc. maakt allemaal niet uit, dat ding doet gewoon waar hij zelf zin in heeft en verzint er zomaar lengte bij, laat wat weg, of is ineens verdwenen.

Dat je verschillende containers hebt voor verschillende doeleinden snap ik, maar deze zijn puur bedoeld voor het grafische deeltje. Daar dacht ik dus mooi divs voor te kunnen gebruiken

[Erkens]

Verwijderd schreef op zondag 20 maart 2005 @ 16:28:
[...]

code:

<div>
  <h1>
  <p>
  <p>
  <ul>
  <div>
    <h2>
    <p>
    <p>
  </div>
</div>

daar is div voor. voor wie dit niet snapt: lees die link die ik al eerder noemde maar eens door

ehm, (buiten het feit dat je een verdwaalde ul hebt) is dit toch precies hetzelfde als wat ik zeg

[Verwijderd]

dan begreep ik je verkeerd die verdwaalde ul is bewust, zie het maar als pseudohtml. een p is ook geen paragraaf in het nederlands, meer alinea, div zou je kunnen aangeven met paragraaf (of hoofdstuk of subhoofdstuk)

in een paragraaf (div) heb je de titel van die paragraaf (hzoveel), een berg alinea's (p) en lijsten, tabellen en andere zooi

[ Voor 23% gewijzigd door Verwijderd op 20-03-2005 16:35 ]

[Verwijderd]

Verwijderd schreef op zondag 20 maart 2005 @ 16:28:

daar is div voor. voor wie dit niet snapt: lees die link die ik al eerder noemde maar eens door

Bij gebrek aan beter dus Het is niet voor niets dat in XHTML 2.0 er een section element met exact die functie is. Sinds HTML 4.01 en X(HT)ML geldt die denkwijze zo ongeveer. Pak wat het dichtst in de buurt komt. Zowel div als span staan het laagst op de lijst. Het zijn een beetje bij-gebrek-aan-beter elementen. Dat maakt ze niet ongewenst of onbruikbaar, ze hebben gewoon niet zo'n duidelijk doel. Zeker span niet. Uiteraard is dat mijn eigen interpretatie, maar volgens mij is die zeker niet verkeerd.

[Verwijderd]

in html 3.2 werd div ongeveer net zo gedefinieerd als section, in html 4 is het wat uitgebreid naar een wat algemener hoer element. imho heeft div dus zeker wel een duidelijk doel

[Verwijderd]

Verwijderd schreef op zondag 20 maart 2005 @ 16:37:
in html 3.2 werd div ongeveer net zo gedefinieerd als section, in html 4 is het wat uitgebreid naar een wat algemener hoer element. imho heeft div dus zeker wel een duidelijk doel

Zou je voor het groeperen van een navigatiestructuur kiezen voor een div element?

[Verwijderd]

ja, maar dergelijke (structurele) divs, geef ik aan met een class="structural".

overigens alleen maar als het nodig is, bijvoorbeeld als je navigatiestructuur bestaat uit meerdere ul's

imho heb je dus semantische divs die hoofdstukken en paragrafen aangeven en structurele divs om je document in te delen (die vervolgens ook kunnen dienen als css handvaten)

[Verwijderd]

En als ik je nou zeg dat ik voor navigatiestructuren bij voorkeur map elementen gebruik? Dat wordt (overigens niet heel erg duidelijk) voorgesteld in de HTML 4.01 specificatie, en de WCAG 1.0 richtlijnen. Het feit dat dat soort details wordt genoemd in dergelijke documenten geeft voor mij aan dat de volgende regel altijd geldt: kies altijd het meest geschikte element.

En ja, dat maakt die div en span elementen een beetje aparte dingen, en ze worden niet voor niets apart genoemd. Ze hebben geen duidelijke functie, behalve dan "groeperen", maar heel veel elementen hebben ook die functie, en méér.

Nogmaals: ik heb niets tegen div elementen, maar ze verdienen het in elk geval niet om opgehemeld te worden.

[Verwijderd]

Ik ben wel benieuwd wat jullie mening is over het toevoegen van DIV en SPAN elementen, puur om het toevoegen van opmaak via CSS mogelijk te maken. Bijvoorbeeld extra borders en dergelijke.

[Verwijderd]

map is een prima geschikt element voor navigatie idd, ik dacht dat je doelde op het groeperen van verschillende navigatiegroepen (hoofd en subnavigatie), je zou dan de volgende structuur hebben:

code:

<div id="navigation" class="structural">
  <map id="mainnavigation">
    <ul>
  </map>
  <map id="subnavigation">
    <ul>
  </map>
</div>

extra elementen voor layout zou eigenlijk niet hoeven, per css3 hoeft dat gelukkig ook niet meer (::outside), maar ik zie het probleem niet zo als je dat tot die tijd wel doet met div en span enzo

Ik ben het met cheatah eens dat div en span de meest nietszeggende elementen zijn, maar div heeft duidelijk toch wel een semantische functie (namelijk het aangeven van hoofdstukken/paragrafen), bijzonder jammer dat vrij weinig mensen het daarvoor gebruiken

[ Voor 57% gewijzigd door Verwijderd op 20-03-2005 17:57 . Reden: hoe kom ik nou weer bij ::inside 8)7 ]

[Surkow]

Verwijderd schreef op zondag 20 maart 2005 @ 17:05:
Ik ben wel benieuwd wat jullie mening is over het toevoegen van DIV en SPAN elementen, puur om het toevoegen van opmaak via CSS mogelijk te maken. Bijvoorbeeld extra borders en dergelijke.

Een DIV kan elementen van blokniveau bevatten en het element SPAN mag alleen inline inhoud bevatten. Als men zich hieraan houd zal het gebruik van CSS voor de opmaak geen probleem te zijn. Het lijkt mij juist logisch om deze elementen toe tevoegen als je ergens een stijl aan wilt toekennen.

Verwijderd schreef op zondag 20 maart 2005 @ 17:19:
...
Ik ben het met cheatah eens dat div en span de meest nietszeggende elementen zijn, maar div heeft duidelijk toch wel een semantische functie (namelijk het aangeven van hoofdstukken/paragrafen), bijzonder jammer dat vrij weinig mensen het daarvoor gebruiken

Het is toch de gewoonte om hoofdstukken enz aan te geven met het hx element? Waarom zou je hier een division voor willen gebruiken? Waar is een div dan op de eerste plaats volgens jou voor bedoeld?

[ Voor 34% gewijzigd door Surkow op 20-03-2005 17:32 ]

[Verwijderd]

lees je de draad wel? dat heb ik geloof ik wel duidelijk gemaakt.

[Surkow]

Verwijderd schreef op zondag 20 maart 2005 @ 17:45:
lees je de draad wel? dat heb ik geloof ik wel duidelijk gemaakt.

Wat ik wel weet is dat wat ik in het begin zei verkeerd werd begrepen. Ik begrijp heel goed waar je een DIV voor kunt mis/gebruiken. Ik weet echter niet waar deze op de eerste plaats voor is ontworpen.

Edit: Deze post heb ik gemist.

div heeft ook een functie, net als alle andere doosjes, primaire functie van div is het clusteren van hoofdstukken, secundaire functie het clusteren van algemene data, zoals ik al eerder aangaf

Bedankt voor het herhalen

[ Voor 28% gewijzigd door Surkow op 20-03-2005 17:53 ]

[Verwijderd]

ik blijf mezelf niet herhalen
http://www.rikkertkoppes.com/thoughts/about-div

[Kaastosti]

Okee het is me duidelijk dat je een element moet gebruiken wat het beste past bij wat je er in wil gaan gooien. Maar volgens mij is het gebruik van DIVs in dit geval dan wel geoorloofd. Dit wil ik maken:

De rode lijnen geven de DIVs aan dit ik aan heb gemaakt. Het geheel komt in z'n totaliteit weer in een omringende DIV, zodat ik het geheel als 1 makkelijk te kopieeren object kan plaatsen. Let niet op het knopje rechtsboven, da's een extra image.

Wat ik dus nu bijvoorbeeld heb aan css code is dit:

Cascading Stylesheet:

div#links_boven{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 7px;
    height: 30px;
    background-image: url('links_boven.jpg');
}
div#boven{
    position: absolute;
    left: 7px;
    right: 7px;
    top: 0px;
    width: 486px;
    height: 30px;
    background-image: url('boven.jpg')
}

Dat gedeelte werkt redelijk naar behoren en de plaatjes en divs komen ook op de plek waar ik ze bedoelt heb. Het probleem ontstaat op het moment dat ik een variabele hoogte heb, bij bijvoorbeeld de contents van het schermpje. Die kunnen 3 regels, maar ook 2 paragrafen zijn... de hoogte is dus variabel.

Een zijkant-div ziet er nu zo uit, gevolgd door de content-div:

Cascading Stylesheet:

div#links_zijkant{
    position: absolute;
    left: 0px;
    top: 30px;
    width: 7px;
    bottom: 3px;
    background-image: url('links_zijkant.jpg');
}
div#content{
    position: absolute;
    top: 30px;
    bottom: 3px;
    left: 7px;
    right: 7px;
    width: 486px;
    
    font-family: Trebuchet, Verdana, Arial;
    font-size: 14px;
    line-height: 180%;
    color: black;
}

Dit leek me helemaal kloppend. Toch wil IE de background verticaal niet tilen (herhalen), terwijl dit bij de bovenkant wel automatisch gebeurt. Ook wordt de hoogte van de onderste rij nu standaard een pixel of 20, terwijl ik die overal netjes op 3 heb staan. Ik krijg het idee dat ik verschillende eigenschappen door elkaar gooi. Toch gaat het grootste deel van het plaatsen goed in FF, op de variabele hoogte van de content-div na dan.

De hoogte van de omringende div staat op auto, zodat deze aangepast wordt aan de inhoud. Ook de hoogte van de content-div staat op die manier ingesteld. Ik kan me niet voorstellen dat ik de eerste ben die een dergelijk schermpje op probeert te zetten. Is er hier ergens een duidelijke handleiding voor? Want volgens mij is sowieso de interpretatie van positionering tussen IE en FF totaal verschillend. Mede daarom was ik al overgestapt naar DIVs, maar dat blijkt dus ook niet echt 'de' oplossing.

[ Voor 4% gewijzigd door Kaastosti op 20-03-2005 19:50 ]

[Verwijderd]

ik denk eigenlijk niet eens dat je al die elementen nodig hebt

dat ding daarboven, komt daar iets van een kop in toevallig? dan is het een hx
als het ding een vaste breedte heeft is het best makkelijk te doen

1 div waar alles in staat, met een achtergrondplaatje in de vorm van een U zeg maar, die je aan de onderkant uitlijnd en hoog genoeg maakt
dan begint de boel met een hx die zorgt voor die balk boven, je content bestaat uiteraard uit p's ul's etc

edit: ik kan eigenlijk niet goed zien of dat ding aan de zijkant nu een gradientje heeft: zo niet, dan heb je het al opgelost met een border

[ Voor 15% gewijzigd door Verwijderd op 20-03-2005 20:00 ]

[twanvl]

Ook wordt de hoogte van de onderste rij nu standaard een pixel of 20, terwijl ik die overal netjes op 3 heb staan.

In IE is de hoogte van een div minimaal 1 regel, je kan hem kleiner kreigen als de font-size:0; zet.

code:

div#links_zijkant{ 
    top: 30px;
    bottom: 3px;
}

Volgens mij ondersteunt IE geen top/bottom en left/right combinatie waarbij niet beide waarde 0 zijn. Je kan proberen iets met marges te klooien.

[Mischa_NL]

Hier een heleboel CSS-based lay-out voorbeelden!

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Gewoon ff de lay-out + css kopieren en beetje mee gaan proberen. Binnen no time snap je hoe het werkt!

[Kaastosti]

Is er uberhaupt een manier die zowel IE als FF accepteerd en hetzelfde begrijpt? Want op deze manier wordt het wel heel aantrekkelijk je hele site gewoon in flash te plempen (hoe een hekel ik daar ook aan heb) aangezien dat er altijd hetzelfde uitziet.

Het is wel weer duidelijk, het leven van een webdesigner gaat niet over rozen... het is een compatibiliteits-hel

[Not Pingu]

Wat is het probleem? Zolang je op de hoogte bent van de verschillen en daar rekening mee houdt, is het perfect mogelijk dingen in IE en FF hetzelfde te krijgen, zelfs zonder hacks.
* Not Pingu wijst naar sig.

De key is vaak om zoveel mogelijk properties (padding, margin en weetikwat) zelf in te stellen omdat renderverschillen vaak veroorzaakt worden door het feit dat beide browsers andere standaardwaarden hanteren.

[Kaastosti]

Het probleem ligt bij mij denk ik aan de containers die geen 'echte' inhoud hebben. Daarmee doel ik op de boven, onder en zijkanten die puur opgevuld worden door een background image. Zolang er geen content in zit wordt die dus ook niet opgerekt.

IE beperkt de container dan in ieder geval tot de kleinst mogelijke maten. In dit geval een height van 30, aangezien de width op auto staat. Dan zou ik er dus een transparant gifje of iets in die richting in moeten stoppen om dat ding ook echt de bedoelde afmetingen te laten krijgen.

[Mischa_NL]

Ik moet zeggen dat ik css in ie,opera,ff,mozilla beter compatible zijn als tabellen.
Met tabellen doet IE altijd moeilijk. Met css wil het allemaal heel goed!

[Verwijderd]

De truuk is natuurlijk om zo weinig mogelijk absoluut te positioneren of je moet je vakken ruim genoeg te maken. Als je alles absoluut maakt is het natuurlijk een eitje om het te laten werken in welke browser dan ook.

Komt er iemand op je site die de tekst groter heeft staan, om wat voor reden dan ook, en hij krijgt de helft van je tekst maar te lezen dan schiet het nog niet echt op. De vraag is natuurlijk hoeveel mensen er op die manier hun browser hebben ingesteld. Maar het gaat om het idee.

[ Voor 19% gewijzigd door Verwijderd op 21-03-2005 17:39 ]

[Kaastosti]

Als je alles absoluut maakt is het natuurlijk een eitje om het te laten werken in welke browser dan ook.

En zelfs dat lijkt onmogelijk, aangezien variabele breedte of hoogte dan of de een of andere manier niet mogelijk is met alleen een background er in. Okee, je zou een compleet plaatje kunnen paken van de breedte die het moet worden, maar da's toch gewoon zonde van de ruimte? Dan pak je 1 plaatje van 50k in plaats van 1 plaatje van een paar bytes van je 50 200 keer herhaalt...

Ik wil alles dolgraag relative zetten, maar op de een of andere manier reageren de browsers er dan allebei even raar op Wat ik wel heb gedaan is zoveel mogelijk eigenschappen ingesteld, om zo eventueel verschillende default waarden te overschrijven. Dan nog wil het niet zoals ik in m'n hoofd heb

[ Voor 24% gewijzigd door Kaastosti op 21-03-2005 16:49 ]

[Not Pingu]

Kaastosti schreef op maandag 21 maart 2005 @ 10:43:
Is er uberhaupt een manier die zowel IE als FF accepteerd en hetzelfde begrijpt? Want op deze manier wordt het wel heel aantrekkelijk je hele site gewoon in flash te plempen (hoe een hekel ik daar ook aan heb) aangezien dat er altijd hetzelfde uitziet.

Het is wel weer duidelijk, het leven van een webdesigner gaat niet over rozen... het is een compatibiliteits-hel

Je bedoelt de zijkanten neem ik aan? dat is idd niet mogelijk in CSS, tenminste als je het geheel nog steeds stretchbaar wilt houden. Zoniet dan kun je altijd nog de 3 divjes een geheel maken en die een achtergrondplaatje geven waar de zijbalkjes ook opstaan.

Maar ik heb dan ook niet gezegd dat je perse divjes moest gebruiken hiervoor dat kan in dit geval imho het best met tabellen.

[Verwijderd]

http://www.rikkertkoppes.com/troep/kaastosti.htm

hth, ben wel uitgegaan van een vaste breedte (anders heb je nog 1 element extra nodig)

[ Voor 19% gewijzigd door Verwijderd op 21-03-2005 19:32 ]

[Not Pingu]

Verrek ja, als je de content div gewoon wit maakt met als achtergrond het linkerrandje, en je stopt die in een div die een achtergrondje heeft van het rechterrandje, dan heb je idd een scalend geheel!
wtg mophor!

[Kaastosti]

Die suggestie was inderdaad eerder voorbij gekomen. Het werkt inderdaad wel mooi, bedankt voor het voorbeeld, maar erg netjes is het natuurlijk niet. De reden dat ik die indeling met 9 vakjes had gemaakt was zodat ik zoveel mogelijk background kon repeaten. Maar goed, het blijkt dus gewoon niet op een andere manier te kunnen helaas... so be it, dan doen we het op deze manier

Dat werkt een stuk makkelijker Maar nu dacht ik creatief te zijn door een apart gedeelte te maken voor de buttons. Dus de background van de H1 ingekort, een divje aangemaakt met een id (want het is niet interessant voor Google oid). Nu is het enige probleem nog dat dat divje niet naast die title wil komen te staan. Altijd er onder, links of rechts... zelfs als ik als het werkende script als voorbeeld gebruik.

[ Voor 36% gewijzigd door Kaastosti op 21-03-2005 23:05 ]

[Verwijderd]

ach, dat achtergrondje is 3,6 kb, daar zou ik me niet heel erg druk om maken.

wat betreft die knop: ik zou de h1 niet inkorten, maar gewoon hetzelfde laten (alleen dan zonder knop), waar je vervolgens die code voor die knop laat en hoe die eruit ziet (alleen een <img> of een <span> ofzo met achtergrond), hangt een beetje van de functie af denk ik, wat je kan doen is de grote div positioneren (als je dat al niet gedaan had) en dan dat knopje gewoon absoluut positioneren over die h1 heen.

maar de volgende zet met code mag je zelf doen

toch nog effe een edit over die functie:
als het een "to top" knop is ofzo kan het gewoon een plaatje zijn, tenzij je zonder styles dat plaatje niet wilt laten zien. Als het iets is om het kader te verbergen (iets wat dus layout georienteerd is), zou ik denk ik een span pakken ofzo die leeg is, of een text als "alleen beschikbaar icm stylesheets" en dan daar een achtergrondimg in stoppen en de tekst te hiden (door enorm te indenten bv)

edit: ik vergeet dat die knop ook wat moet doen: maak er maar een <a> van (dan kan je er ook heentabben, in het kader usability. Als het een knop is om het ding te verbergen ofzo zou ik overwegen dat hele element met javascript toe te voegen

over positioneren: lees anders ff het css hoofdstuk over positioning en het boxmodel door, dat zal wellicht verhelderend zijn

http://www.w3.org/TR/CSS21/box.html en
http://www.w3.org/TR/CSS21/visuren.html en
http://www.w3.org/TR/CSS21/visudet.html

[ Voor 62% gewijzigd door Verwijderd op 21-03-2005 23:49 ]

[Kaastosti]

Hehe graag Ik wil het erg graag leren, maar die positionering slaat af en toe echt helemaal op kaas In ieder geval genoeg te lezen. Die box models lijken me inderdaad wel verplichte kost. Bedankt voor de hulp, ik heb weer wat te doen

[ Voor 40% gewijzigd door Kaastosti op 21-03-2005 23:33 ]