Toon posts:

Fieldset CSS probleem

Pagina: 1
Acties:

Onderwerpen


Anoniem: 30961

Topicstarter
Ik heb de volgende XHTML-code:

HTML:
1
2
3
4
5
6
<fieldset>
<label for="bedrijfsnaam"><span>Bedrijfsnaam</span><input type="text" id="bedrijfsnaam" name="bedrijfsnaam" /></label>
<label for="adres"><span>Adres</span><input type="text" id="adres" name="adres" /></label>
<label for="pcwp"><span>Postcode/Plaats</span><input type="text" id="pcwp" name="pcwp" /></label>
<label for="additional"><span>Informatie</span><textarea id="additional" name="additional"></textarea></label>
</fieldset>


En de bijbehorende CSS:
Cascading Stylesheet:
1
2
3
4
5
label,label span{ display:block; padding-bottom:.25em; }
label{ float:left; width:100%; }
label span{ float:left; width:45%; text-align: right; }
fieldset{ border:none; }
fieldset input, fieldset textarea{ float:right; width:45%; text-align: left; border: 1px solid #AEAEAE; }


Nu ziet mijn uitvoer er als volgt uit:



Dus de vierde rij wordt iets naar beneden geschoven (het textarea), maar alleen in IE9.
Iemand al hetzelfde probleem gehad?

Please help me!

  • EricBruggema
  • Registratie: Maart 2007
  • Laatst online: 04-06 07:41
is dit alles CSS of heb je nog meer?

  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 30-03 14:15

OkkE

CSS influencer :+

Ik zou de <input> uit je <label> halen, eigenlijk alleen Checkbox en Radio zou ik daar in zetten.

Is het alleen in IE9, of in alle IE's? Je zou verder alle elementen eens een background-color kunnen geven, om te zien of ze wel precies doen wat je verwacht.

En welke DOCTYPE gebruik je?

[Voor 5% gewijzigd door OkkE op 18-05-2011 13:06]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 16-05 22:53
In plaats van floats kun je dit soort dingen beter met een absoluut gepositioneerd label doen en daar de input onder door duwen. Geen uitlijningsproblemen met floats die niet naast elkaar passen en geen gedoe met een clearfix.

Cascading Stylesheet:
1
2
3
4
5
label,label span{ display:block; padding-bottom:.25em; }
label{ width:100%; }
label span{ position: absolute; width:45%; text-align: right; }
fieldset{ border:none; }
fieldset input, fieldset textarea{ margin-left: auto; width: 45%; text-align: left; border: 1px solid #AEAEAE; }

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 13-01 10:59
En daarnaast, leer jezelf aan expliciete associatie te gebruiken met je labels, ipv impliciete.

M.a.w. gebruik het for-attribuut, ipv je form-element in je label te wrappen.

  • erwin85
  • Registratie: Juli 2002
  • Laatst online: 17:11
Wat ik zelf vaak doe bij formulieren is alles in een ul zetten. Dus dan krijg je zoiets.
code:
1
2
3
4
5
<ul>
    <li><label>naam</label>
    <input type='text' />
    </li>
</ul>

[Voor 3% gewijzigd door erwin85 op 19-05-2011 18:40]


  • RobIII
  • Registratie: December 2001
  • Laatst online: 02:24

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

erwin85 schreef op donderdag 19 mei 2011 @ 18:39:
Wat ik zelf vaak doe bij formulieren is alles in een ul zetten.
Semantiek anyone? ;) Dan kun je nog beter een dl/dt/dd gebruiken, en zelfs dat is al bron van vele discussies :P

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • erwin85
  • Registratie: Juli 2002
  • Laatst online: 17:11
RobIII schreef op donderdag 19 mei 2011 @ 18:43:
[...]

Semantiek anyone? ;) Dan kun je nog beter een dl/dt/dd gebruiken, en zelfs dat is al bron van vele discussies :P
Je kan het op heel veel manieren doen ja.

Acties:
  • 0Henk 'm!

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Nee, je bedoelt:
Je kan het op heel veel manieren fout doen ja.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Acties:
  • 0Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 13-01 10:59
Een UL (of liever een OL) lijkt me niks mis mee voor een formulier. Uiteindelijk gaat het om een lijst van elementen (die je bij voorkeur in vaste volgorde afwerkt). Het label geeft al de associatie aan tussen tekst en veld, dus daar ook nog eens een DL voor gebruiken is dubbelop.

Een table gebruiken lijkt fijn (die suggestie komt af en toe voorbij als semantisch correct), maar in de praktijk wordt een blinde daar niet blij van, aangezien je bij tabellen veel onnodige extra informatie toegespeeld krijgt. Een OL werkt in de praktijk het snelste voor hen.

Semantisch correct is in de praktijk niet altijd de meest toegankelijke oplossing.

[Voor 48% gewijzigd door Bosmonster op 20-05-2011 14:10]


  • Herko_ter_Horst
  • Registratie: November 2002
  • Niet online
Uiteindelijk is alles een lijst van elementen, alles staat namelijk achter elkaar in de HTML. Dat maakt nog niet dat alles zomaar list-semantiek heeft. ul/ol is daarom geen mooie semantische oplossing voor een formulier.

Tabel lijkt me ook niet correct. Ik kan me voorstellen dat je daar met database-tabellen in het achterhoofd (waar die form-data vast in terecht komt) op uit komt, maar een formulier vind ik geen goed voorbeeld van tabulaire data.

form, Fieldset, label, input zijn de juiste semantische elementen en deze bieden ook voldoende aanknopingspunten voor CSS om het goed te stylen.

[Voor 48% gewijzigd door Herko_ter_Horst op 21-05-2011 18:25]

"Any sufficiently advanced technology is indistinguishable from magic."

Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee