[CSS] Formulier verticaal uitlijnen

[anoniem]

Hallo mensen! Hoe komt het dat ik een stuk tekst en een teksbox niet verticaal uitgelijnd krijg? [code:1:6f024e9967] <p> <span style="vertical-align:middle;"> Gebruikersnaam*: <input style="position:absolute; left:140px;" type="textfield" name="loginnaam" value="" size="14" maxlength="100"> <span style="position:absolute; left:262px; font-weight:lighter; letter-spacing:0cm; font-size:8pt; color:#555555;"> gebruik alleen letters en cijfers </span> </span> [/code:1:6f024e9967] Sowieso vind k t niet zo'n mooie oplossing, zo'n geneste span..... Thanks! Jasper

[anoniem]

move to 'webprogrammeren'

[anoniem]

Waarom? is toch CSS????

[anoniem]

1. Je zit prima hier. Foutje van Dilbert neem ik aan. 2. Kijk is op het W3C bij <label>, is hier zeker handig. 3. Vertical align is voor inline elementen die ook line-height hebben ingesteld. 4. Geef iets meer code van de omliggende block-level elementen en leg wat exacter uit wat het precieze resultaat moet zijn. Die ongesloten <p> tag is/was daarvoor niet echt voldoende.

[anoniem]

Oh. ik dacht dat <p> elementen niet meer afgesloten hoeven te worden?? De volgende textbox is zeg maar een kopie, alles ingesloten door <form></form>. Dit is de eerste regel van een formulier. Alleen in die regel komen de elementen niet recht naast elkaar te liggen. Eerst krijg je de naamgeving van wat er ingevuld moet worden, dan een textbox en dan een toevoeging met tips over hoe de invoer eruit moet zien. Deze tips zijn wat kleiner van opmaak en zijn grijs gekleurd. Deze tips komen echter op een hele rare plaats uit, ze komen namelijk met hun bovenkant gelijk aan de bovenkant van de textbox, en ik wil ze graag in het midden hebben! Is dat mogelijk? De code is nu als volgt: [code:1:b341d03315] <p style="position:relative; left:4px;"> <label style="vertical-align:middle;"> Gebruikersnaam*: <input style="position:absolute; left:140px;" type="" name="loginnaam" value="" size="14" maxlength="100"> <span style="position:absolute; left:262px; font-weight:lighter; letter-spacing:0cm; font-size:8pt; color:#555555;"> gebruik alleen letters en cijfers </span> </label> [/code:1:b341d03315] Bedank!

[anoniem]

Volgens mij begin ik het te snappen. [code:1:7f65fd199b]<form method="post" action=""> <p> <label for="name">Gebruikersnaam*:</label> <input type="text" id="name" name="loginnaam" size="14" maxlength="100"> <span class="help">Gebruik alleen letters en cijfers</span> </p> </form>[/code:1:7f65fd199b] Zou al beter zijn ;-) CSS heb ik even het een en ander mee gedaan: [code:1:7f65fd199b] p{ margin:0; padding:4px; line-height:120%; } label{ display:block; cursor:pointer; float:left; width:10em; } span.help{ }[/code:1:7f65fd199b] Maar nog niet echt naar de oplossing toe. Zijn er nog andere dingen die al in je style sheet stonden?

[anoniem]

Het gaat helemaal niet om de stylesheet! Dat komt vanzelf wel!!! Maar ik wil die dingen allemaal gewoon centraal krijgen!!! Is dat zo lastig??? :-? :cry:

[anoniem]

? Style sheet == opmaak/positionering etc. Dat is dus _belangrijk_. Ik probeer naar een mogelijke oplossing toe te werken en gaf ook nog een iets verbeterde HTML code aan als voorbeeld waarop verder gewerkt kan worden. Zoals je nu 'kwaad wordt' heb ik er eigenlijk helemaal geen zin meer in om je hier wat verder mee te helpen. Kant en klare oplossingen geef ik nooit (uizonderingen daargelaten).

[anoniem]

Sorry je begrijpt me totaal verkeerd... sorry... Ben totaal niet kwaad ofzo hoor! Alleen totaal wanhopig!! :) Ik waardeer je hulp heel erg! Maar ik begrijp niet waarom ik het niet voor elkaar krijg om alles op een lijn te krijgen....... als ik het volgende aanpas: span.help { line-height:150%; vertical-align:middle; } Vindt er een kleine verplaatsing in de goede richting plaats... Ik krijg het echter niet voor elkaar dit effect over de gehele regel plaats te laten vinden! Ik hoop dat je er nog even naar zou willen kijken!!!! bedankt!

[anoniem]

[code:1:1c5c5abe6b]<style type="text/css"> p{ margin:0; padding:4px; } label{ margin:0; padding:4px; cursor:pointer; } input{ margin:0; padding:4px; } span.help{ margin:0; padding:4px; font-size:80%; } </style> <form method="post" action=""> <p> <label for="name">Gebruikersnaam*:</label> <input type="text" id="name" name="loginnaam" size="14" maxlength="100"> <span class="help">Gebruik alleen letters en cijfers</span> </p> </form>[/code:1:1c5c5abe6b] Zo staat het op 1 lijn, alleen niet verticaal gecentreerd. <style> hoort uiteraard niet direct boven <form>, het hoort eigenlijk niet gebruikt te worden, maar dat was gewoon om te testen.

[anoniem]

You're my hero!!! Thanks!

[anoniem]

Dan heb ik eigenlijk een vraagje over formulieren. Ik wilde een formulier maken voor een gastenboek, en ik wil dat dit Valid XHTML 1.1 strict is. Toen ik een simpel formuliertje gaf had ik daar gelijk zo'n 15 fouten in zitten. Maar ik geloof dat het iets te maken heeft met de omliggende block-elementen. ik heb om het form toen <object>-tags gezet en was gelijk een heleboel foutmeldingen kwijt. Ik heb de oplossing dus wel, maar snap nog niet hoe het nu precies zit. Wie kan mij uitleg geven (link volstaat) hierover? alvast bedankt :D

[anoniem]

Eigenlijk gaat het maar om één ding, je moet binnen [i:024a3aa75d]form[/i:024a3aa75d] eigenlijk altijd [i:024a3aa75d]fieldset[/i:024a3aa75d] gebruiken om je invoervelden heen. De validator is daar een beetje vaag in, maar als je de beta validator (uri?) gebruikt wordt je bij sommige problemen wat wijzer. In dit geval gewoon het volgende gebruiken:[code:1:024a3aa75d]<form method="post" action=""> <fieldset> <label for="somefield">Description:</label> <input type="text" id="somefield" name="somefield" size="14" /> </fieldset> </form>[/code:1:024a3aa75d]Ik gebruik hier dus [i:024a3aa75d]fieldset[/i:024a3aa75d] ipv [i:024a3aa75d]div[/i:024a3aa75d] of [i:024a3aa75d]p[/i:024a3aa75d] zoals termin8or hier voorsteld. Structureel gezien is mijn aanpak "beter". Daarnaast moet je natuurlijk zorgen dat je tags altijd goed sluit, dus hier ook een backslash aan het einde van [i:024a3aa75d]input[/i:024a3aa75d]. De rand die om je fieldset heen komt kan je met CSS weer verwijderen. - Bas

[anoniem]

[quote:08e19946bf] Eigenlijk gaat het maar om één ding, je moet binnen form eigenlijk altijd fieldset gebruiken om je invoervelden heen [/quote:08e19946bf] Is dat zo? Waar kan ik daar meer over vinden, want ik kan geen plek vinden waar staat dat dat verplicht is. Grappig genoeg is html4 hier stricter, want als je daar een fieldset element gebruikt, moet je beginnen met een legend element als inhoud. In xhtml is dit niet verplicht vanwege beperkingen van de xml dtd mogelijkheden. http://lists.w3.org/Archives/Public/www-html/2002Feb/0054.html

[anoniem]

Persoonlijk heb ik het niet zo met fieldset en legend ( http://lists.w3.org/Archives/Public/www-style/2003Nov/0096.html ) hoewel ze markuptechnisch gezien natuurlijk heel mooi zijn. Is trouwens niet verplicht, maar het wordt wel aangeraden en is inderdaad een mooiere oplossing dan die van mij. Voor de geintresseerden: http://validator.w3.org:8001/

[anoniem]

Het gaat er natuurlijk om dat er een 'block' element om alle FORM inhoud staat, ook alle 'hidden' INPUT velden. DIV's en P's mogen wel valideren maar het gebruik van FIELDSET heeft wat meer betekenis, zelfs al gebruik je maar een enkele groep INPUT velden. Om het op mijn site te gebruiken moet ik in de PHP code hacken van mijn pMachine installatie. Dus ben ik nog niet klaar... dat weblog heeft altijd wel iets.

[anoniem]

[quote:23b5ad757c="termin8or"]Persoonlijk heb ik het niet zo met fieldset en legend ( http://lists.w3.org/Archives/Public/www-style/2003Nov/0096.html ) hoewel ze markuptechnisch gezien natuurlijk heel mooi zijn. [/quote:23b5ad757c] Ze zijn slecht te stylen die fieldset en zo, of niet? Hier staat misschien een beetje een uitleg waarom die form dingen slechter kunnen worden gestyled in sommige browsers. http://lists.w3.org/Archives/Public/www-style/2003Dec/0005.html Dus de reden dat er geen aandacht besteed is aan css voor form elementen is omdat dat de bedoeling is kennelijk. Browser bouwers mogen kennelijk hun eigen platformafhankelijke widgets gaan gebruiken volgens het w3c.

[anoniem]

Fieldset is prima te stylen, mits je weet hoe. Ben nog nooit tegen problemen opgelopen. Je moet de fieldset gewoon een transparante border geven en border-width op 0 voor IE. Je merkt het verschil niet eens. - Bas

[anoniem]

En wat als ik het als kopjes wil gebruiken: http://annevankesteren.nl/test/form/layout/legend-example.xml Die border komt uiteraard van de fieldset en die header met rode achtergrond moet de legend zijn. Onmogelijk tenzij zoiets als mijn proposal wordt doorgevoerd.

[anoniem]

Wat is er mis met het volgende?[code:1:53450901b1]<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> form{ width:500px; border:1px solid green; } fieldset{ border: 0 solid transparent; } h2{ margin:0; padding:2px; color:#fff; background:red; } </style> </head> <body> <h1>Test</h1> <form action=""> <h2>Legend</h2> <fieldset> <label for="k">K</label> <input id="k" type="text"/> </fieldset> </form> </body> </html>[/code:1:53450901b1]Het ziet er precies hetzelfde uit, heeft structureel meer betekenis en is net zo geldig XHTML als jouw voorbeeld. Of zie ik iets over het hoofd in dat voorbeeld? [b:53450901b1]Edit:[/b:53450901b1] Moet ik natuurlijk wel zorgen dat het geldig XHTML is... :D - Bas