[html]input box eist ruimte boven en onder box

[whitehouse]

ik heb een aantal List Items, waarbij elke list-item een <p>tekst</p> heeft.
Omdat ik alle list items netjes onder elkaar wil zonder extra witruimte ertussen, heb ik een style="display:inline" in de <p> gezet.
In de bovenste List Item heb ik een input box staan, waarmee gezocht kan worden. Deze eist een witruimte die ik niet weg krijg.

voorbeeld hieronder :



de bijhorende code :

code:

               <li>
                 <p style="display:inline">zoek persoon </p>
                 <form style="display:inline">
                   <input type="text" name="textfield" class="standard" style="display:inline"> <input type="button" value="zoek" class="button" style="display:inline">
                 </form>
               </li>
                <li>
                  <p style="display:inline"><a href="pers_invoeren.php">persoon invoeren</a> </p> 
                </li>
                <li>
                  <p style="display:inline"><a href="#">giften</a></p>
                </li>

Is het mogelijk deze toch weg te krijgen ?

[Folkert]

waarom staat er een <p> omheen?

[whitehouse]

binnen de li ??

[Folkert]

ja, haal die p tag eruit en doe de vormgeving dmv je css(padding/margin)

[ Voor 95% gewijzigd door Folkert op 09-06-2004 11:20 ]

[Helmet]

Cascading Stylesheet:

form { padding:0px; margin: 0px; }

een form element heeft ook padding/margins

[ Voor 34% gewijzigd door Helmet op 09-06-2004 11:20 ]

[whitehouse]

als ik dit doe :

code:

<form style="display:inline; padding:0px; margin: 0px">
   <input type="text" name="textfield" class="standard" style="display:inline; padding:0px; margin: 0px">
<input type="button" value="zoek" class="button" style="display:inline; padding:0px; margin: 0px">
</form>

gebeurt er niets

[ Voor 25% gewijzigd door whitehouse op 09-06-2004 11:26 ]

[Folkert]

Heb je een link misschien? Je plaatst een button en een inputveld in je <li>. Hierdoor zal de hoogte van dit item zeker veranderen.

De margin en padding op 0 zetten houdt in dat je <form> geen extra ruimte krijgt, iets wat standaard wel gebeurt.

Je kan misschien de hoogte van je button/inputveld verlagen? Anders de standaard hoogte verschillen tussen de <li> aanpassen aan de hoogte van de eerste item zodat alle gelijk valt.

[ Voor 8% gewijzigd door Folkert op 09-06-2004 11:30 ]

[whitehouse]

een link zal niet gaan

wel een screenshot :



en de css-code voor de textbox :

code:

INPUT.STANDARD,SELECT
{ 
   font-size: 9px;
   border-top:0px solid #336666;
   border-left:0px solid #336666;
   border-right:0px solid #336666;
   border-bottom:1px solid #336666;
}

hoe kan ik ervoor zorgen dat de tekst voor IN het textboxje onderaan uitlijnt, OP de lijn ?

[ Voor 12% gewijzigd door whitehouse op 09-06-2004 11:44 ]

[SchizoDuckie]

whitehouse schreef op 09 juni 2004 @ 11:41:
een link zal niet gaan

wel een screenshot :

[afbeelding]

en de css-code voor de textbox :

code:

INPUT.STANDARD,SELECT
{ 
   font-size: 9px;
   border-top:0px solid #336666;
   border-left:0px solid #336666;
   border-right:0px solid #336666;
   border-bottom:1px solid #336666;
}

hoe kan ik ervoor zorgen dat de tekst voor IN het textboxje onderaan uitlijnt, OP de lijn ?

kijk eens naar line-height, margin-bottom en vertical-align

[whitehouse]

code:

INPUT.STANDARD,SELECT
{ 
    
    font-size:0.7em;
    border-top:0px solid #336666;
    border-left:0px solid #336666;
    border-right:0px solid #336666;
    border-bottom:1px solid #336666;
    line-height: 7px;
    margin-top:0px;
    margin-bottom:0px;
    vertical-align:bottom;
}

geeft geen verbeterd resultaat. De tekst zweeft nog steeds een aantal px boven de bottom-border ..

[Folkert]

Heb zelf even snell een testje gedaan:

HTML:

<UL>
<li>hallo <INPUT id="Text1" type="text" value="test" name="Text1">
<INPUT id="Button1" type="button" value="Button" name="Button1">
</LI>
<LI>tetst</LI>
<LI>test&nbsp; <INPUT id="Text2" type="text" value="test" name="Text2">
<INPUT id="Button2" type="button" value="Button" name="Button2">
</LI>
<LI>test</LI>
<LI>test <INPUT id="Text3" type="text" value="test" name="Text3">
<INPUT id="Button3" type="button" value="Button" name="Button3">
</LI>
</UL>

Cascading Stylesheet:

body
{
    font-family: Verdana;
    font-size: 11px;
}

input
{
    font-family: Verdana;
    font-size: 11px;
    padding: 0;
    margin: 0;
    border: 0px;
    border-bottom: solid 1px black;
}

li input
{
    margin-bottom: 1px;
}

ul
{
    line-height: 20px;
}

De input items komen hiermee op dezelfde hoogte als je list items. Heb het niet kunnen testen in andere browsers, alleen in IE 6.0

[ Voor 24% gewijzigd door Folkert op 09-06-2004 15:29 ]

[whitehouse]

juist, die UL-css zorgt ervoor dat alle lines zo hoog zijn, dat die ene niet meer opvalt , wat ik juist wil, is de UL op 12 hebben, en die zoek-regel ook 12 px hoog is ..

[Amras]

Een input box met een hoogte van 12px is toch niet zo'n probleem?

HTML:

<html>
  <head>
    <style type="text/css">
        input {
            height: 12px;
            border: 1px solid black;
            font-size: 8px;
        }
    </style>
  </head>

  <body>
    <input type="text" value="hoi"/>
  </body>
</html>

Het enige probleem wat je nu hebt is dat de tekst er, iig in standaard lettertype, er pas in past met 8px en dat is niet echt leesbaar.

Misschien een andere oplossing bedenken?