Toon posts:

[HTML/CSS] Ruimte tussen div's in Opera

Pagina: 1
Acties:

donderdag 20 november 2003 12:13

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 14:07

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Ik heb een raar probleem met de ruimte tussen div's in Opera. Mozilla en Internet Explorer werken prima.

Voordat je begint te roepen dat een margin: 0; en padding: 0; het kan oplossen, niet dus :). Kom ik zo op terug

Een plaatje van het probleem om het te verduidelijkingen:
Afbeeldingslocatie: http://www.planet.nl/~terps407/marginprobleem.JPG

Opera is dus de bovenste en Mozilla/IE de onderste.

De code die ik gebruik:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="titlediv1">
Vereiste&nbsp;gegevens
</div>

<div class="regrowdiv">
<div class="regleftdiv">
<div class="texregleft">
Woei!
</div>
</div>
<div class="regrightdiv">
<input class="regbox" type="text" name="username" />
</div>
</div>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

.titlediv1          {
                    width: 740px;
                    height: 15px;
                    font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
                    background-color: #D9D9D9;
                    border-bottom: 1px solid black;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    font-size: 11px;
                    text-align: left;
                    }

.regrowdiv          {
                    width: 740px;
                    height: 700px;
                    border-right: 1px solid black;
                    border-left: 1px solid black;
                    border-bottom: 1px solid black;
                    }

.regleftdiv         {
                    float: left;
                    display: table-cell;
                    width: 200px;
                    height: 25px;
                    border: 2px solid white;
                    background-color: #F2F2F2; /* tegenhanger voor post #E3E3E3; */
                    padding: 0px;
                    margin: 0px;
                    }

.texregleft         {
                    margin-top: 5px;
                    font-size: 11px;
                    text-align: left;
                    font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
                    vertical-align: middle;
                    text-align: middle;
                    float: left;
                    display: table-cell;
                    }

.regrightdiv        {
                    float: left;
                    display: table-cell;
                    font-family: Verdana, Trebuchet MS, Arial, Helvetica, sans-serif;
                    text-align: left;
                    width: 532px;
                    height: 25px;
                    font-size: 11px;
                    border: 2px solid white;
                    background-color: #F2F2F2;
                    padding: 0px;
                    margin: 0px;
                    }


Ik heb dus geprobeerd met een margin en padding de ruimte tussen de divjes te verkleinen, maar helaas geen succes. Ook dacht ik dat het misschien aan de border kon liggen, want heb wel vaker ruzie gehad met borders en Opera. Dit is niet het geval, want als ik de border weg haal, dan blijft de ruimte tussen de divs bestaan. Deze 2 dingen was het enige wat ik kon bedenken, maar beide geen effect

Ik ben niet de enige met dit probleem, want in dit topic is het ook al een keertje besproken. Helaas geen oplossing in het topic, kortom, bij deze een nieuwe en hopelijk wel een oplossing :).

Kleine toevoeging:
Ik gebruik een strict doctype en wil geen tabellen gebruiken :)
HTML:
1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[ Voor 13% gewijzigd door We Are Borg op 20-11-2003 12:17 ]

donderdag 20 november 2003 12:16

Acties:

Verwijderd

Welke doctype gebruik je? xhtml 1.1 strict? of 4.01 strict? of misschien toch xhtml 1.0 strict

[ Voor 58% gewijzigd door Verwijderd op 20-11-2003 12:16 ]

donderdag 20 november 2003 12:17

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 14:07

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Verwijderd schreef op 20 november 2003 @ 12:16:
Welke doctype gebruik je? xhtml 1.1 strict? of 4.01 strict? of misschien toch xhtml 1.0 strict
Heb het er nu bij gezet :)

donderdag 20 november 2003 12:41

Acties:

Verwijderd

Zit naar alle waarschijnlijk heid in de doctype, heb nu even geen tijd, maar ik zal er na de lunch even naar kijken

donderdag 20 november 2003 12:51

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 14:07

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Als ik de doctype compleet weghaal, blijft er een tussenruimte :). Maar goed, bedankt alvast voor het kijken.

donderdag 20 november 2003 13:11

Acties:
  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

Waarom niet:
code:
1
2
3
4
5
6
7

<fieldset>
    <legend>vereiste gegevens</legend>
    <div>
        <label for="username">woei!</label>
        <input type="text" name="username" id="username" />
    </div>
</fieldset>

donderdag 20 november 2003 13:36

Acties:
  • Pat Pitiee
  • Registratie: November 2003
  • Laatst online: 28-06 21:16

Pat Pitiee

Headphone Kriminal

Je gebruikt display: table-cell; om je divs naast elkaar te zetten.

Als je dat doet maakt opera van de div een cel met de bijbehorende (lastige) eigenschappen nl cellpadding en cellspacing die default op 2 staan iirc.

Als je table-cell gebruikt moet je eigenlijk de parent div (regrowdiv of nog een nieveau hoger) op display : table zetten.
Dan kan je de cellpadding en cellspacing op tableniveau aanpassen mbv border-collapse:separate; .

Let op, je div's gaan zich nu heel table-achtig gedragen, zo zullen bvb regleftdiv en regrightdiv alle beschikbare ruimte in de parent gaan opvullen, maw ze worden even hoog als de "table".

Je zou natuurlijk ook float kunnen gebruiken, waarbij je de regrightdiv op "float: right;" zet.

donderdag 20 november 2003 13:48

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 14:07

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
creative8500 schreef op 20 november 2003 @ 13:11:
Waarom niet:
code:
1
2
3
4
5
6
7

<fieldset>
    <legend>vereiste gegevens</legend>
    <div>
        <label for="username">woei!</label>
        <input type="text" name="username" id="username" />
    </div>
</fieldset>
Vind ik niet mooi persoonlijk :)
Pat Pitiee schreef op 20 november 2003 @ 13:36:
Je gebruikt display: table-cell; om je divs naast elkaar te zetten.
Klopt. Omdat je hieronder ook de nadelen ervan beschrijft; is er ook een andere manier om de tabellendivjes (zo lang tabellen gebruikt merk je af en toe :P ) naast elkaar te krijgen?
Als je dat doet maakt opera van de div een cel met de bijbehorende (lastige) eigenschappen nl cellpadding en cellspacing die default op 2 staan iirc.

Als je table-cell gebruikt moet je eigenlijk de parent div (regrowdiv of nog een nieveau hoger) op display : table zetten.
Dan kan je de cellpadding en cellspacing op tableniveau aanpassen mbv border-collapse:separate; .

Let op, je div's gaan zich nu heel table-achtig gedragen, zo zullen bvb regleftdiv en regrightdiv alle beschikbare ruimte in de parent gaan opvullen, maw ze worden even hoog als de "table".

Je zou natuurlijk ook float kunnen gebruiken, waarbij je de regrightdiv op "float: right;" zet.
Klinkt goed. Ga er na school ff naar kijken. Bedankt alvast :)



Ik zie trouwens dat als ik meer regels toevoegen dat opera het compleet verkeerd gooit en alles achter elkaar zet. Kortom, mijn manier van DIVjes plaatsen is gewoon fout.

Afbeeldingslocatie: http://www.planet.nl/~terps407/layoutpaint.JPG

Ik heb even in paint gezet wat ik nu precies wil. Een rode overall header met daaronder steeds een blauw divje (30% groot) en een groen divje (70%) groot naast elkaar en op elke regel weer een nieuw blauw divje en groen divje. De witte stukjes heb ik er tussengelaten om te laten zien dat het steeds een nieuwe regel is en niet een 1 grote blauwe div en 1 grote groene div. De manier waarop ik dit doe staat in de startpost. Is er niet een effecientere en betere manier om dit te doen? Ik begin namelijk een beetje te twijfelen of dit wel de manier is om de divjes naast elkaar te zetten en dit design te krijgen :)

[ Voor 53% gewijzigd door We Are Borg op 20-11-2003 14:10 ]

donderdag 20 november 2003 14:09

Acties:
  • Pat Pitiee
  • Registratie: November 2003
  • Laatst online: 28-06 21:16

Pat Pitiee

Headphone Kriminal

We Are Borg schreef op 20 november 2003 @ 13:48:
Is er ook een andere manier om de tabellendivjes (zo lang tabellen gebruikt merk je af en toe :P ) naast elkaar te krijgen?
Yup, zoals ik op het einde zeg: float: right gebruiken. Daarmee kan je een child div naar de rechterkant (float: left voor de linkerkant) laten "drijven", andere content in de parent div zal dan niet onder de child liggen maar mooi opzij gaan.

Op http://www.w3.org/TR/REC-CSS2/visuren.html#floats vind je meer uitleg en mooie beeldjes :) .

donderdag 20 november 2003 14:20

Acties:
  • Pat Pitiee
  • Registratie: November 2003
  • Laatst online: 28-06 21:16

Pat Pitiee

Headphone Kriminal

Je wilt dus een echte tabel als ik het goed zie :) . Er is niks mis met het gebruik van tables voor tabellen imo.

Lijkt me dus een ideale structuur voor tabellen, die je met css mooi opmaakt (Of je maakt toch gebruik van die display: table tags).

donderdag 20 november 2003 19:13

Acties:
  • kleautviool
  • Registratie: Mei 2003
  • Laatst online: 20-08 11:04

kleautviool

We Are Borg schreef op 20 november 2003 @ 13:48:
[...]


Vind ik niet mooi persoonlijk :)

[...]
Maar het is wel makkelijker. Scheelt je een hoop geklooi met die divs. En met css kun je gewoon die rand verwijderen en aanpassen naar je eigen wensen :)

donderdag 20 november 2003 20:00

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 14:07

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Pat Pitiee schreef op 20 november 2003 @ 14:20:
Je wilt dus een echte tabel als ik het goed zie :) . Er is niks mis met het gebruik van tables voor tabellen imo.
Het "probleem" is dat ik dan tabellen gebruik voor layout opmaak wat door een hoop mensen wordt afgekeurd :)

donderdag 20 november 2003 20:10

Acties:

Verwijderd

Nee, je gebruikt dan tabellen voor tabellen. Het is toch de bedoeling dat de rode en blauwe velden als een tabel worden gerangschikt? Daar zijn tabellen dus voor bedoeld.

Ik zal je een ander voorbeeld geven: denk je dat de frontpage van GoT (niet van tweakers.net, maar de 'list categories' pagina) een tabel is, of gaat het om lay-out? Antwoord: het is natuurlijk een tabel; als je de naast elkaar liggende cellen bijvoorbeeld onder elkaar zou zetten dan slaat die hele frontpage nergens meer op. Het is essentieel voor de functie van deze pagina dat de verschillende onderdelen in een matrix-vorm, dus als een tabel, worden weergegeven. Idem dito voor jouw voorbeeld (voor zover dat uit een paint plaatje kan worden geconcludeerd), hoewel het in jouw geval maar om twee kolommen gaat.

[ Voor 6% gewijzigd door Verwijderd op 20-11-2003 20:11 ]

donderdag 20 november 2003 20:11

Acties:
  • Harm
  • Registratie: Mei 2002
  • Niet online

Harm

We Are Borg schreef op 20 november 2003 @ 20:00:
[...]

Het "probleem" is dat ik dan tabellen gebruik voor layout opmaak wat door een hoop mensen wordt afgekeurd :)
Dat is niet wat afgekeurd wordt hoor. Het niet juist gebruiken van tags, dat is wat afgekeurd wordt. Een <table>-tag is niet bedoeld om de complete lay-out van een site mee te doen, dat kan met behulp van CSS veel beter en flexibeler gebeuren. Gebruik een <table>-tag voor het weergeven van gegevens in een tabel en dan doe je het goed. Hetzelfde geldt voor de andere tags, maar dan komen we weer uit op het standaardverhaaltje ;).

[edit]
Verwijderd schreef op 20 november 2003 @ 20:10:
Nee, je gebruikt dan tabellen voor tabellen. Het is toch de bedoeling dat de rode en blauwe velden als een tabel worden gerangschikt? Daar zijn tabellen dus voor bedoeld.
Nope, dat is niet waar je een tabel voor hoort te gebruiken. Een tabel is voor het weergeven van data (meer niet, echt niet) en niet voor het doen van opmaak. Voor dat laatste heb je andere tags.

[ Voor 27% gewijzigd door Harm op 20-11-2003 20:12 . Reden: BTW ]

donderdag 20 november 2003 20:17

Acties:
  • Sendy
  • Registratie: September 2001
  • Niet online

Sendy

Verwijderd schreef op 20 november 2003 @ 20:10:
[...]
Ik zal je een ander voorbeeld geven: denk je dat de frontpage van GoT (niet van tweakers.net, maar de 'list categories' pagina) een tabel is, of gaat het om lay-out? Antwoord: het is natuurlijk een tabel; als je de naast elkaar liggende cellen bijvoorbeeld onder elkaar zou zetten dan slaat die hele frontpage nergens meer op. Het is essentieel voor de functie van deze pagina dat de verschillende onderdelen in een matrix-vorm, dus als een tabel, worden weergegeven. Idem dito voor jouw voorbeeld (voor zover dat uit een paint plaatje kan worden geconcludeerd), hoewel het in jouw geval maar om twee kolommen gaat.
Natuurlijk niet! Een lijstje items onder elkaar is geen tabel! Ook al staat er een getalletje voor en een getalletje achter! Een lijstje items is een <ul>. Als je in de <li>'s <div>'s zet met float: left en float: right heb je bijna direct de layout die er is gebruikt (... zou gebruikt moeten zijn)

[ Voor 5% gewijzigd door Sendy op 20-11-2003 20:18 ]

donderdag 20 november 2003 20:18

Acties:

Verwijderd

Harm schreef op 20 november 2003 @ 20:11:
Nope, dat is niet waar je een tabel voor hoort te gebruiken. Een tabel is voor het weergeven van data (meer niet, echt niet) en niet voor het doen van opmaak. Voor dat laatste heb je andere tags.
Dat is volgens mij precies wat de TS van plan is: weergeven van data in tabelvorm. Ook al wordt één van de velden als inputformulier gebruikt. Een spreadsheet met invulvelden is ook een tabel!

donderdag 20 november 2003 20:18

Acties:
  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

Een eigen mening hebben kan nooit kwaad :)

Tabellen voor forms zijn namelijk niet écht 'not done'. Bij simpele forms zoals het commentaar-form van een weblog kan het doel makkelijk bereikt worden met div's, fieldsets, etcetera. Maar bij geavanceerdere formulieren krijgt men toch al snel problemen, en stappen ze over op tabellen.

Dus: omdat er nog geen goed alternatief is gevonden op tabellen voor uitgebreidere forms, kun je ze schaamteloos gebruiken. Tabellen gebruiken voor een website-layout is het natuurlijk een héél andere zaak, omdat het daar wel beter kan.

En wanneer je denkt dat div's altijd beter zijn: jou ontgaat de essentie van het hele 'anti-tables'-verhaal. Het gaat erom dat je semantic gebruik maakt van de mark-up-taal: wanneer je een woord wil benadrukken gebruik je de em-tags (emphasize), niet de i-tags (italic). Breder gesteld: gebruik de tags waar ze voor zijn, en gebruik de tags die er zijn.

donderdag 20 november 2003 20:20

Acties:

Verwijderd

Sendy schreef op 20 november 2003 @ 20:17:
Natuurlijk niet! Een lijstje items onder elkaar is geen tabel! Ook al staat er een getalletje voor en een getalletje achter! Een lijstje items is een <ul>. Als je in de <li>'s <div>'s zet met float: left en float: right heb je bijna direct de layout die er is gebruikt (... zou gebruikt moeten zijn)
Ja, daar zou je gelijk in kunnen hebben, afhankelijk van de precieze invulling van die groene en blauwe velden in het paintwerkje van de TS. Ik zie je punt wel, en zoals jij het bekijkt is hier wellicht meer sprake van een specifieke lay-out dan van een tabelvormig formulier. Alleen gaat dit voorbeeld al mank op het moment dat er meerdere invulvelden op één regel nodig zouden zijn:

code:
1
2
3
4

Tekst:  [invulveld]    Tekst: [invulveld]   Tekst: [invulveld]
Tekst:  [invulveld]    Tekst: [invulveld]   Tekst: [invulveld]
Tekst:  [invulveld]    Tekst: [invulveld]   Tekst: [invulveld]
Tekst:  [invulveld]    Tekst: [invulveld]   Tekst: [invulveld]


Persoonlijk zie ik daar meer een spreadsheet in (dus een tabel) dan een drie (of zes)-koloms lay-out of een lijstje met items. Het voorbeeld van de topicstarter heeft wat mij betreft veel weg van een tweekoloms-spreadsheet, dus een tabel.

Maar goed, er zijn alternatieven mogelijk, daar heb je gelijk in. Ik ken zelfs mensen die hier een definition list zouden gebruiken, maar ook dat is nogal dubieus, omdat het niet echt om definities gaat. Maar als je de W3C specs er vervolgens op na slaat, blijkt een definition list ook helemaal niet uitsluitend voor definities bedoeld te zijn. Waarmee ik maar wil aangeven dat de keuze voor divs of lijsten of tabellen ook weer niet al te dogmatisch benaderd moet worden.

Ik geloof in elk geval niet het gebruik van tabellen hier werkelijk zou neerkomen op het misbruiken van de <table> tag.

[ Voor 70% gewijzigd door Verwijderd op 20-11-2003 20:32 . Reden: Een stuk uitgebreid en verduidelijkt (hopelijk) ]

donderdag 20 november 2003 21:06

Acties:
  • Sendy
  • Registratie: September 2001
  • Niet online

Sendy

> Mora
Ik begrijp jouw punt ook; je moet niet doorschieten in het gebruik van css v.s. tabellen. Zo'n tabel met vragen als jij beschrijft is natuurlijk een tabel. Echter de meeste papieren formulieren hebben niet zo'n drukke/dichte layout. Dus dit kan je ook oplossen door beter na te denken over de presentatie. (En natuurlijk, een spreadsheet is heel anders.)

> creative8500
Ik weet niet op wie jij reageerd, maar als het op mij is kan je zien dat ik <ul> en <li> gebruikt. Unnumbered List en List Element. De speciale betekenis van zo'n tijdsaanduiding en het getallen achter de lijst kan ik niet echt vertalen in html elementen. ;)
>

donderdag 20 november 2003 21:24

Acties:
  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

Sendy schreef op 20 november 2003 @ 21:06:
> creative8500
Ik weet niet op wie jij reageerdt, maar als het op mij is kan je zien dat ik <ul> en <li> gebruikt. Unnumbered List en List Element Item. De speciale betekenis van zo'n tijdsaanduiding en het getallen achter de lijst kan ik niet echt vertalen in html elementen. ;)
>
Zoals jij werkt kun je alles zien als een list Laat me raden: voor een lijstje van vier opeenvolgende paragrafen gebruik jij:
code:
1
2
3
4
5
6

<ol>
    <li><p>paragraaf 1...</p></li>
    <li><p>paragraaf 2...</p></li>
    <li><p>paragraaf 3...</p></li>
    <li><p>paragraaf 4...</p></li>
</ol>

Wanneer bovenstaande niet gebruikt volg jij niet consequent je eigen regels.

Bovendien, wanneer ik zou ingaan op je redenatie dat de frontpage van GoT geen tabel is, zou ik gehakt van je maken. Je ziet toch zelf ook wel de table-headers 'topics', 'posts' en 'moderator' staan? Hoeveel duidelijker kan een tabel zich presenteren?

Jij mag ook wel eens gaan nadenken over: "Een eigen mening hebben kan nooit kwaad."
Met deze uitspraak wilde ik tevens zeggen: "Denk zelf na over issues waarover anderen een mening hebben, en gebruik hun manieren slechts wanneer je ze zelf begrijpt." Jij hebt nog veel duidelijker de essentie van bepaalde discussies gemist dan We Are Borg, waarvan ik het idee heb dan hij er weinig aan kan doen doordat hij de outcome van eerdergenoemde discussies van derden heeft, en de discussies zélf niet heeft gevolgd.

donderdag 20 november 2003 21:43

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 14:07

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
Topicstarter
Ik zie dat hier een intressante discussie uitvloeit en omdat mijn paint tekening niet echt duidelijk was, een plaatje van hoe het eruit ziet. Lees eerst mijn uitleg onder het plaatje voordat je een reactie neergooit :P

Afbeeldingslocatie: http://www.planet.nl/~terps407/layouttables.JPG

Goed, wat gegevens wat je hier ziet:

- Doctype is strict
- Gebruik gemaakt van tabellen
- Opmaak van tabellen is allemaal verhuist naar CSS (moet ook wel met strict).

Nu is duidelijk wat ik bedoelde met mijn paint tekening en wat ik wil bereiken. Anders blijft het gissen en dit maakt de discussie wat makkelijker. Nu zal er weinig op of aanmerkingen zijn over mijn CSS gebruik en doctype, want vind zelf dat dat prima is. Alleen die tabellen voor opmaak.

Daarom ben ik nu aan de gang gegaan met divjes, omdat ik denk dat "de experts" (mensen die zich in HTML verdiept hebben) mijn gebruik van tabellen afkeuren in dit geval.

Algemene mening over dit verhaaltje wordt gewaardeerd :)
creative8500 schreef op 20 november 2003 @ 20:18:
Een eigen mening hebben kan nooit kwaad :)

Tabellen voor forms zijn namelijk niet écht 'not done'. Bij simpele forms zoals het commentaar-form van een weblog kan het doel makkelijk bereikt worden met div's, fieldsets, etcetera. Maar bij geavanceerdere formulieren krijgt men toch al snel problemen, en stappen ze over op tabellen.

Dus: omdat er nog geen goed alternatief is gevonden op tabellen voor uitgebreidere forms, kun je ze schaamteloos gebruiken. Tabellen gebruiken voor een website-layout is het natuurlijk een héél andere zaak, omdat het daar wel beter kan.

En wanneer je denkt dat div's altijd beter zijn: jou ontgaat de essentie van het hele 'anti-tables'-verhaal. Het gaat erom dat je semantic gebruik maakt van de mark-up-taal: wanneer je een woord wil benadrukken gebruik je de em-tags (emphasize), niet de i-tags (italic). Breder gesteld: gebruik de tags waar ze voor zijn, en gebruik de tags die er zijn.
Ja, daar heb ik idd wat gemist en vind het ook lastig om dingen te interpeteren. Je verhaal is wel duidelijk en snap nu ook hoe het ECHT zit met 'tabellen zijn vies' verhaal.

Maar om mijn voorbeeld te pakken, het plaatje. Ik geef geen gegevens weer die in een tabel horen. Aan de andere kant denk ik, er zit wel een duidelijk structuur in.

- Een titel
- Beschrijving links
- Invoerveld rechts

Dan denk ik meteen aan een tabel. Al denk ik dat je het daar niet met me eens bent :)

[ Voor 66% gewijzigd door We Are Borg op 20-11-2003 22:06 ]

donderdag 20 november 2003 22:46

Acties:
  • Sendy
  • Registratie: September 2001
  • Niet online

Sendy

[dubbelpost]

[ Voor 110% gewijzigd door Sendy op 21-11-2003 00:04 ]

donderdag 20 november 2003 23:49

Acties:
  • Sendy
  • Registratie: September 2001
  • Niet online

Sendy

> creative8500
Overdrijven is ook een vak. Er is niemand die boek een lijst van paragrafen noemt (ook al is dat het misschien wel). In boekvorm zou ik wel degelijk zoiets verwachten:
  • Het nieuws van vandaag:
  • Bomaanslagen in Turkije
  • Michael Jackson geeft zich over
  • ...
Een beetje opmaak maakt dat niet anders. Maar goed, hier kan je meerdere meningen over hebben en je moet vooral je eigen mening opmaken.

Maar goed; ik ben niet uit op een flamewar. Ik respecteer jouw mening.

-- edit
En om dan nog iets constructiefs te doen. Een eerste poging zou dit hier kunnen zijn. Misschien heeft de TS er iets aan.

Ik ben er niet helemaal tevreden over.
• De absoluut gepositioneerde div is onhandig.
• Het is een beetje geklooi met de borders
• De <li>'s zijn niet heel praktisch, want ik lijk de "marker" voor de tekst niet te kunnen sturen. (En ik gebruik de nieuwste Mozilla :?)
• De nummering is nu een beetje gek. Als hij gewoon zou doortellen zou het enorm praktisch zijn.
• Oh! En niet getest in Opera en Internet Explorer.

offtopic:
En wat is er nu weer met deze post gebeurt? Het wordt laat en de knopjes lijken op elkaar, zullen we maar zeggen...
En hersteld (hoop ik)

[ Voor 31% gewijzigd door Sendy op 21-11-2003 00:05 ]

vrijdag 21 november 2003 12:25

Acties:
  • Pat Pitiee
  • Registratie: November 2003
  • Laatst online: 28-06 21:16

Pat Pitiee

Headphone Kriminal

Ik zou dus label idd gebruiken en dan evt ook list (semantics ;)).

een zeer drafty vbtje van label +float css staat hier

vrijdag 21 november 2003 15:38

Acties:

Verwijderd

In een poging een leuke openingspost op dit forum te maken heb ik het volgende in elkaar gezet:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
 <title>Test</title>
 <style type="text/css">
  body{
   margin:0;
   padding:0;
    font:80%/150% Arial,sans-serif;
  }
  form{
   margin:0;
   padding:0;
   width:800px;
   background:green;
  }
  fieldset{
   margin:0;
   padding:0;
   border:0;
  }
  legend{
   margin:0;
   padding:5px;
   border:0;
   display:block;
   color:#fff;
   background-color:red;
  }
  p{
   margin:0;
   padding:5px;
  }
  label{
   margin:0;
   padding:0;
   display:block;
   float:left;
   width:15em;
   cursor:pointer;
  }
  input{
   margin:0;
   padding:0;
  }
 </style>
</head>
<body>
<form action="" method="post">
 <fieldset>
 <legend>vereiste gegevens</legend>
  <p>
   <label for="username">Gebruikersnaam</label>
   <input type="text" name="username" id="username"/>
  </p>
  <p>
   <label for="wwoord">Wachtwoord</label>
   <input type="text" name="wwoord" id="wwoord"/>
  </p>
  <p>
   <label for="wwoord2">Wachtwoord (nogmaals)</label>
   <input type="text" name="wwoord2" id="wwoord2"/>
  </p>
 </fieldset>
</form>
</body>
</html>
Ik vroeg me af waarom het legend niet de gehele breedte zou kunnen 'overbruggen'. Het moet toch mogelijk zijn lijkt me, daarnaast is het de meest semantisch perfecte optie. (<p/> ipv <div/> gebruikt, vanwege layout in oudere browsers, daarnaast maakt het niet zo heel veel uit).
Pagina: 1
Reageer