Ik ben bezig met het opmaken van een zoekform.. ik zelf heb nog NOOIT met css gewerkt.. maar heb het wel al vaak doorgekeken/gelezen.. dus ik probeerde zelf wat maar het lukt me niet helemaal..

Ik wil dat mijn zoekform eruit komt te zien als de bijlage.. en ik heb ook een foto als bijlage met hoe hij er nu uitziet.. eigenlijk is het alleen de zoekknop nog wat mij niet lukt..

Css code:

input, option, textarea, select {
border:1px solid #B7B7B7;
background: #FFFFFF;
font-size:12px;
text-decoration: none;
color: #595959;
font-family : Verdana, Arial, Helvetica, sans-serif;
padding: 2;
}
zoek {
display: inline;
height: 21px;
width: 200px;
}
zoekbutton {
border:1px solid #B7B7B7;
height: 21px;
width: 58px;
background: #B4B4B4;
background-image: url(images/zoekbut.png);
font-size:12px;
text-decoration: none;
color: #FFFFFF;
font-family : Verdana, Arial, Helvetica, sans-serif;
padding: 2;

Code op me site:

<div>
<input type='text' class='cinput' name='zoeken' size="20" style="height: 21px;">
<input type="submit" class='zoekbutton' name="zoek" value="Zoek" style="height: 21px;">
</div>

Wat doe ik precies fout?

Wat doe ik precies fout?

De bijlage er niet bij zetten, zodat we niet kunnen zien hoe het er wel uit moet zien.. :)

Nu staat het erbij.. nu kom ik bij nog een fout.. doordat ik een Form eraan heb gedaan komt er een enter bij.. dit wil ik niet.. hierdoor rekt mijn layout uit..
Aanvullend bericht:
Heb nieuwe bijlage erbij gedaan "enter-door-form.png (3,3 KB)" waar je ziet dat er in 1x een enter komt door de form code

Je werkt nu met css, waarin je je hele opmaak kunt aanpassen, daarnaast doe je dat ook in je html. Daar staat style=... &size=... tussen. Dat zou er dus zo uit moeten zien:
<div>
<input type='text' class='cinput' name='zoeken' >
<input type="submit" class='zoekbutton' name="zoek" value="Zoek" >
</div>

Als je iets een class mee geeft, moet die ook in je css staan. de class 'cinput' staat in je html, maar niet in je css. Dat moet waarschijnlijk class='zoek' zijn. Zet ook eens een . voor classes in je css dus: .zoek & .zoekbutten . (bij input, option, textarea, select hoeft dat niet omdat dat standaard classes voor html objecten zijn)

Dankjewel! het ziet er nu al beter uit.. wel heb ik nog 2 foutjes die te zien zijn in de bijlage "bg-en-enter.png (3,4 KB, 0x gelezen)"..

De bg begint niet links boven in maar 1 of 2 pixels ervanaf.. ik heb bij zoekbutton al padding: 0; gedaan maar werkt ook niet?

En door de form geeft hij een enter en zoals je ziet sluit het zwarte daardoor niet goed meer aan...

Probeer eens in het 'input, option, textarea, select { ' float: left; te zetten. Gebruik ook padding:0px; ipv padding:0;

padding: 0; werkt prima hoor. 0px of 0em is toch gewoon hetzelfde (snappen alle browsers).
padding: 2; kan natuurlijk weer niet.

Nu is de enter weg.. echter krijg ik de zoekknop en het zoekformulier niet meer uit elkaar...

zet dan in zoek: margin-right:2px;
@René, dat is waar, maar zet er gewoon standaard een eigenschap achter en je hebt dat soort problemen nooit

Oke in IE staat die nu goed bij mij.. alleen de bg van de zoekbutton niet.. in FF is er alsnog een enter aanwezig.. en de zoekknop staat hoger dan het zoekform.. en hier zit echter wel weer de bg goed op zijn plek ik zou zo even alles wat ik op dit moment heb opnieuw posten..

Heb je een voorbeeld online staan? Kijk anders even in de bron van je voorbeeld hoe zij het hebben.Neem dit ook even door: http://www.mijnhomepage.nl/csscursus...noverzicht.php

Zoals iedereen kan zien is het bijna gelukt door de vele hulp van Dirk B, maar nu staat die in firefox nog helemaal verkeerd (IN IE 8 staat die goed hier).. hoe kan ik dit oplossen. de link naar de site is: http://83.149.112.33/~video/

CSS CODE:

}
input, option, textarea, select {
border:1px solid #B7B7B7;
background: #FFFFFF;
font-size:12px;
text-decoration: none;
color: #595959;
font-family : Verdana, Arial, Helvetica, sans-serif;
float: left;
}
.zoek {
border:1px solid #B7B7B7;
background: #FFFFFF;
font-size:12px;
text-decoration: none;
color: #595959;
font-family : Verdana, Arial, Helvetica, sans-serif;
height: 21px;
width: 175px;
margin-right: 4px
}
.zoekbutton {
border: 0px;
height: 21px;
width: 58px;
background: #B4B4B4;
background-image: url(../images/zoekbut.png);
font-size:12px;
text-decoration: strong;
color: #FFFFFF;
font-family : Verdana, Arial, Helvetica, sans-serif;
padding: 0;
align: right;
}

SITE CODE

<div style="width:900px;">

<div style="width:600px; padding:2px; margin:0px; float:left;">hier tekst
</div>

<div style="width:300px; padding:2px; margin:0px; float:left;">
<form action='?pagina=zoeken' method="post">
<input type='text' class='zoek' name='zoeken'>
<input type="submit" class='zoekbutton' name="zoek" value="Zoek">
</form>
</div>

</div>