Elementer på linje

[Tonny Kluften]

Er det noen som kan si meg hvorfor søkefeltet kommer lengre ned enn søkeknappen her: "PM for URL"

 

[Pong]

Aner ikke..
Div rundt og posisjoner mha den.

 

[Tonny Kluften]

Det er samme div på søkeboksen og knappen. Det som er i den:

float: left;
padding: 15px 0px 0px 0px;
display: inline;

 

[Pong]

jeg mente: ta en div rundt knappen og en div rundt søkeboksen. så kan du sikkert justere paddings.

 

[Mr Vest]

Jeg ser du har:

float:left; i <div class="search"> som da igjen går rundt både inputfeltet OG søkeknappen, mens du ikke har float:left; på inputfeltet og heller ikke float:left; på søkeknappen. Det er jo rundt disse to du må ha float:left; og ikke rundt klassen som går rundt begge 2. Den float:left; som går rundt begge to kan ikke jeg se at skal være nødvendig og ha der..

Om du i CSS legger inn følende kode vil jeg jo tro at det skal fungere.:

input.cntnt01searchinput { float:left; }
input.image { float:left; }

Eventuelt at du heller bytter ut hele:

form id="cntnt01moduleform_1" action="index.php" method="get">
<div class="hidden">
</div>
<label for="cntnt01searchinput">Søk</label>
:
<input id="cntnt01searchinput" type="text" onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';" maxlength="50" size="20" value="skriv søkeord..." name="cntnt01searchinput"/>
<input type="image" src="http://nettsted.no/images/knapp_sok.gif" name="submit"/>
</form>

med

form id="cntnt01moduleform_1" action="index.php" method="get">
<div class="hidden">
</div>
<label for="cntnt01searchinput">Søk</label>
:
<input id="cntnt01searchinput" style="float:left;" type="text" onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';" maxlength="50" size="20" value="skriv søkeord..." name="cntnt01searchinput"/>
<input type="image" style="float:left;" src="http://nettsted.no/images/knapp_sok.gif" name="submit"/>
</form>

Vil jeg jo egentlig også tro at det skal gi noen form for resultater. For all del, finn en revolver om jeg tar feil.

 

[Mr Vest]

Ja, nå ser jeg at det ikke akkurat vil hjelpe og legge inn den CSS som jeg nevnte der oppe. Det mangler jo en ID på søkeknappen din. Det nederste jeg nevnte der skal jo fungere.

 

[Tonny Kluften]

Det er ikke bare bare. Dette er i CMSmadesimple og har moduler og dill og dall, kan ikke bare lime inn koden.

Her har jeg lagt inn hele den nederste delen du nevner rett på sida, da kommer ordet "søk" over det andre.

PM for URL

 

[Mr Vest]

Ja, du sier noe. Det var jo den før inputfeltet også ja. Jeg kan ikke så veldig mye med css og hvordan man kan style opp slike saker som dette med css. Jeg trodde at alle inputfelter måtte ha en id for at det skulle være mulig, men mulig jeg tar feil.

Det eneste jeg eventuelt kan foreslå er faktisk at du legger inn følgende i CSS (siden du ikke kan endre på koden) et eller annet sted du selv vil, men om det faktisk vil fungere er jeg veldig usikker på.

label.cntnt01searchinput {float:left;}
input.cntnt01searchinput {float:left;}
input.submit {float:left;}

Det jeg har gjort her er og bruke "submit-input" sitt name, istedenfor ID (som den da ikke har.) Og på label har jeg brukt navnet på inputen som den hører til.

Det er jo mange her inne som er dyktige med css. En løsning som funker (om ikke min gjør det) ville vært utrolig koselig.

 

[Tonny Kluften]

Puh, fant en løsning. Jeg fikk ikke til din Atle, men tusen takk for hjelpen.

Løsningen ble å sette inn style="vertical-align:middle; padding: 0 0 6px 0;" i <input type="image" style="float:left;" src="http://nettsted.no/images/knapp_sok.gif" name="submit"/>

slik:

<input style="vertical-align:middle; padding: 0 0 6px 0;" type="image" name="submit" src="http://nettsted.no/images/knapp_sok.gif" >

Dette er ikke koding etter boka, med korrekt bruk av CSS så vil det se litt annerledes ut, men det fungerer og det er det viktigste. Og bruker man CMS-systemer må man regne med å bruke customløsninger på koding innimelom.

 

[Gaasehud]

Er vertical-align en valid kode? Eller litt på kanten? Bra du fant det ut uansett, Tonny.

 

[Tonny Kluften]

På kanten eller ikke, den fungerer. CSS Vertical-align Property

 

[peterandrej]

På kanten eller ikke, den fungerer. CSS Vertical-align Property

antakelig ikke i den mest bruke nettleseren (IE7).

 

[Tonny Kluften]

Det fungerer i min IE7.

 

[Pong]

Hva med å endre bildet? Legge til whitespace på toppen altså??

 

[Mr Vest]

Takk for at du postet en løsning som fungerte Tonny. Den kan være godt og ha med seg videre. Ryktepoeng for den kommer når jeg har gitt til noen andre også.

Jeg syns det er litt snodig med den vertical-align jeg. Jeg har nemlig aldri fått den til og fungere om jeg skriver den i stilarket, mens på style="" så funker den. Om noen skulle lure, ja, jeg er blond.