[CSS] Probleem met labels een vaste breedte geven - Softwareontwikkeling

donderdag 28 februari 2008 10:36

Acties:

Topicstarter

Volgens mij heb ik best een simpel probleem te pakken maar ondanks zoekwerk kom ik er niet uit dus probeer ik het hier. Ik heb een formulier op een site:

code:

<html>
<head>
<style type="text/css">
<!--
.form-row
{
  border: solid;
}

form label
{
  width: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-right: 20px;
  text-align: right; 
}

form input
{
  width: 150px; 
}

.feedbackfield
{
  display: inline;
}
-->
</style>
</head>
<body>

<form 0="id" 1="FormRegister" method="post" action="/register">    
<fieldset>
 <div class="form-row">
   <label for="nickname">Nickname:</label>
   <input type="text" name="nickname" id="nickname" value="" />
   <div id="nicknamestatus" class="feedbackfield" display="none"></div>
 </div>  
 <div class="form-row">
   <label for="firstname">First name:</label>
   <input type="text" name="firstname" id="firstname" value="" />
 </div>
 <div class="form-row">
   <label for="lastname">Last name:</label>
   <input type="text" name="lastname" id="lastname" value="" />
 </div>
 <div class="form-row">
   <label for="organization">Your organization:</label>
   <input type="text" name="organization" id="organization" value="" />      
 </div>
  </fieldset>
  <input type="submit" name="commit" value="Register" />
</form>
</body>
<html>

... hier heb ik voor de overzichtelijkheid wat velden geknipt!

Nu wil ik dat dit formulier er natuurlijk netjes uit komt te zien dus ik wil dat de labels allemaal een gelijke breedte krijgen. Hiervoor had ik de CSS geschreven zoals hierboven te zien.

Toch, als ik de pagina genereer, zie ik dat de "width" voor het label genegeerd wordt, terwijl het toekennen van "width" voor de input wel werkt. Het zal vast iets simpels zijn maar ik zie het even niet. Wie helpt?

/edit:
Het probleem treedt op in de laatste versie van FF. In IE7 werkt het wel.
Code even samengevoegd zodat je het makkelijker kan testen.

[ Voor 21% gewijzigd door Toink op 28-02-2008 10:43 ]

donderdag 28 februari 2008 10:55

Acties:

gertvdijk

Toink schreef op donderdag 28 februari 2008 @ 10:36:
Het probleem treedt op in de laatste versie van FF. In IE7 werkt het wel.

Het is meer een probleem van IE hier, omdat het mij best logisch lijkt dat je een niet-block-level element ook niet kan voorzien van een breedte. Je kan bijvoorbeeld ook een <a>-element niet van een breedte voorzien.
Helaas krijg je bij toekenning van display:block wat ongewenste effecten erbij die horen bij display:block.
Misschien dat er een trucje is met negatieve marges en paddings ofzo...

[ Voor 10% gewijzigd door gertvdijk op 28-02-2008 10:57 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

donderdag 28 februari 2008 11:03

Acties:

Toink

Topicstarter

http://www.webmasterworld.com/forum83/4895.htm

Hier staat inderdaad iets dat je inline elementen niet van een vaste breedte kan voorzien dus dat zal het zijn. Maar op één of andere manier wil ik al die dingen wel op één regel kunnen krijgen, netjes onder elkaar. Tables hebben niet echt de voorkeur en zodra ik met floats aan de slag ga dan vallen de elementen in FF uit de form-row-div waardoor het formulier een zooitje wordt.

Het liefste gebruik ik over heel de site dezelfde technieken dus vandaar dat ik het graag op één of andere "nette" manier oplos.

donderdag 28 februari 2008 11:17

Acties:

RAJH

Kijk eens of je iets kunt met "display: block" en "float: left"

donderdag 28 februari 2008 11:31

Acties:

Toink

Topicstarter

Die had ik inderdaad geprobeerd omdat dat het meest logisch leek, maar FF gaat daar niet lekker mee om want als je dat toepast op het voorbeeld hierboven dan vallen teksten buiten de border van de form-row en dan gooit ie (kort gezegd) alles door elkaar en ik begrijp echt niet waarom.

donderdag 28 februari 2008 11:40

Acties:

reddevil

Tis misschien niet de beste oplossing, maar je kan er tabellen voor gebruiken... wordt nog vaak gedaan voor een formulier.

donderdag 28 februari 2008 11:45

Acties:

erikvdv1

Ik ben ook al eerder op dit probleem gestuit. Deze oplossing werkte voor mij.

code:

.inline-block
{
    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;
}

Een combinatie van een block-level en een inline-level element. Nu kan je wel een breedte aangeven op een inline element.

[ Voor 24% gewijzigd door erikvdv1 op 28-02-2008 11:46 ]

donderdag 28 februari 2008 11:46

Acties:

Reinier

\o/

Heb je hier niet wat aan?
[CSS] input velden tov elkaar gelijk uitlijnen
http://www.quirksmode.org/css/forms.html

donderdag 28 februari 2008 11:55

Acties:

gertvdijk

Toink schreef op donderdag 28 februari 2008 @ 11:31:
Die had ik inderdaad geprobeerd omdat dat het meest logisch leek, maar FF gaat daar niet lekker mee om want als je dat toepast op het voorbeeld hierboven dan vallen teksten buiten de border van de form-row en dan gooit ie (kort gezegd) alles door elkaar en ik begrijp echt niet waarom.

Dan heb je niet begrepen hoe float werkt. Je moet namelijk ook al je floats weer netjes 'clearen'. Wat jij gezien hebt waarschijnlijk is een heel geneste opeenvolging van floats.

Wat erikvdv1 aandraagt vind ik wel interessant, maar het werkt hier nog niet direct.
Een inline-block zou je inderdaad wel willen, maar tot nu toe gedraagt het zich nog wat anders dan je zou verwachten. werkt, als je -moz-inline-box gebruikt, wat zich hetzelfde gedraagt als inline-block onder IE.

[ Voor 6% gewijzigd door gertvdijk op 28-02-2008 11:57 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

donderdag 28 februari 2008 12:01

Acties:

Toink

Topicstarter

Reinier schreef op donderdag 28 februari 2008 @ 11:46:
Heb je hier niet wat aan?
[CSS] input velden tov elkaar gelijk uitlijnen
http://www.quirksmode.org/css/forms.html

Dat met die tables had ik hier inderdaad ook al maar om bepaalde redenen maak ik daar geen gebruik van. Grappige is dat ik op die tweede link al geweest was maar niet bij forms en wat daar staat is de oplossing. Het clearen is inderdaad het probleem... ik wist niet eens dat dat moest.

Dus Gert, je hebt gelijk. Bedankt voor de hulp!

.

[ Voor 4% gewijzigd door Toink op 28-02-2008 12:01 ]

donderdag 28 februari 2008 13:30

Acties:

Reinier

\o/

Ik bedoelde niet die oplossing met tables, maar whatever.

donderdag 28 februari 2008 14:13

Acties:

gertvdijk

Toink schreef op donderdag 28 februari 2008 @ 12:01:
Dus Gert, je hebt gelijk. Bedankt voor de hulp! .

Je moet eigenlijk erikvdv1 bedanken.

Het heeft mij in elk geval weer op een idee gebracht voor een webprojectje die ik noodgedwongen in tables ben gestart, die ik dus nu weer kan omzetten.

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

dinsdag 4 maart 2008 11:55

Acties:

Toink

Topicstarter

Er zal vast nog eens iemand naar dit verhaal zoeken. Als je dit met floats op gaat lossen dan staat hier ook nog goede uitleg over clearing (en symptomen van een verkeerde aanpak):

http://www.positioniseverything.net/easyclearing.html