hvordan forme et skjema i div uten table?

[Vonbo]

Hei,

 

Jeg prøver å lage en nettside i divs. Har bare laget i tabeller før, og er ikke helt kjent med logikken til divs.

 

Jeg skal ha en side med to forskjellige skjemaer ved siden av hverandre. Slik:

 

--------------- ---------------

| SKJEMA 1 | | SKJEMA 2 |

--------------- ---------------

 

Jeg prøvde å ha en div som dekket hele siden, med to divs for hver av de forskjellige skjemaene. Siden så helt fin ut med 3 divs helt til jeg la inn følgende skjema i de to skjema-divene:

 

<form action="index.php?id=04" method="get">
 <table class="login_form">
 	<tr>
   <td>Kunde: <input type="radio" name="custumer" /><br />
   <td>Tilbyder: <input type="radio" name="custumer" /></td>
 	</tr>
 	<tr>
   <td>Brukernavn:</td><td><input type="hidden" name="id" value="04" /><input type="text" name="" value="" /></td>
 	</tr>
 	<tr>
   <td>Passord:</td><td><input type="password" name="name" /></td>
 	</tr>
 	<tr>
   <td colspan=2><input type="submit" name="name" value="Logg inn" /></td>
 	</tr>
 <table>
</form>

 

Når jeg legger inn dette skjema i div nr1(skjema1 over) ødelegger den hele plassen til den andre diven og legger den under seg. Så når jeg da legger inn samme skjema en gang til i skjema 2 legger denne seg under skjema 1. Skjønner? Hvorfor det?

 

Her er stilarket til de 3 divene:

#main  	{position: absolute; width: 819; height: 650px; top: 152px; left: 50px; color: #295695; padding: 15px; }
#login_left  {top: 0px; float: left; margin-left: 15px; border: 1px dashed red; width: 350px; height: 180px; padding: 5px;}
#login_right  {top: 0px; float: right; margin-right: 15px; border: 1px dashed red; width: 350px; height: 180px; padding: 5px;}

 

Noen som kan rettlede meg med hvordan jeg bør bruke divs for å løse dette problemet?

Endret 19. januar 2006 av Vonbo

[Jesper Karsrud]

Hvorfor bruker du tabeller til å formattere forms uansett? Men det du må gjøre er å legge en div under de to divene dine, med clear: both; Da skal det funke..

[Lovskogen]

Trenger ikke div engang, hva med fieldset?

[Cucum(r)]

http://alistapart.com/stories/practicalcss/

 

Scroll ned til «FORM(s) and Function»

[Jesper Karsrud]

Hmm.. Der brukte de jo ikke labels en gang? Det var litt slapt, vil jeg tørre å påstå..

[Cucum(r)]

Hmm.. Der brukte de jo ikke labels en gang? Det var litt slapt, vil jeg tørre å påstå..

5467654[/snapback]

Heilt enig. Brukte berre Googles I'm Feeling Lucky.

[Vonbo]

Jeg prøvde med clear: both, men ingenting skjer. Jeg prøvde med den ene linken dere ga meg, og bruker nå det som test-form. Jeg får ikke plassert dem riktig i forhold til hverandre no mather what! De er vrange

 

De skal altså stå på en vannrett linje, ved siden av hverandre. Koden ser nå slik ut:

 

<div id="login_left">
<div style="width: 350px; background-color: #cc9; border: 1px dotted #333; padding: 5px; margin: 0px auto";>
 <form>
   <div class="row">
     <span class="label_right">Name:</span><span class="formw"><input type="text" size="25" /></span>
   </div>
   <div class="row">
     <span class="label_right">Age:</span><span class="formw"><input type="text" size="25" /></span>
   </div>
   <div class="row">
     <span class="label_right">Shoe size:</span><span class="formw"><input type="text" size="25" /></span>
   </div>
   <div class="row">
     <span class="label">Comments:</span><span class="formw">
       <textarea cols="25" rows="8">
       Go ahead - write something...
       </textarea>
     </span>
   </div>
 <div class="spacer">
  
 </div>
</form>
</div>
<div id="login_right";
<div style="width: 350px; background-color: #cc9; border: 1px dotted #333; padding: 5px; margin: 0px auto";>
 <form>
   <div class="row_right">
     <span class="label_right">Name:</span><span class="formw_right"><input type="text" size="25" /></span>
   </div>
   <div class="row_right">
     <span class="label_right">Age:</span><span class="formw_right"><input type="text" size="25" /></span>
   </div>
   <div class="row_right">
     <span class="label_right">Shoe size:</span><span class="formw_right"><input type="text" size="25" /></span>
   </div>
   <div class="row_right">
     <span class="label_right">Comments:</span><span class="formw_right">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
     </span>
   </div>
 <div class="spacer">
  
 </div>
</form>
</div>
</div>	
<div id="wrapper_under"></div>

 

og stilarket slik:

 

#login_left  {position: absolute; top: 20px; left: 20px;}
#login_right  {position: absolute; top: 20px; left: 400px;}
#wrapper_under  {clear; both;}

 

Som dere ser bruker jeg position: absolute på divene. Jeg vet ikke helt hvorfor, men det er kun da divene reagerer på hvordan jeg setter "koordinatene".

 

Nå står de nesten riktig. Men ikke helt på vannrett linje. Hva må til? Takker for alle svar. Dette er spennende!

[Garreth]

Hvis du ikke bruker absolute så kan du ikke bruke "kordinater". Bruker du floats så må du spesifisere bredden på divene, så vil de "flyte" på plass (kort fortalt).

 

 

Koden din er vel ikke helt super sematisk (riktig). Ta en titt på Form-garden siden heller, her er det mer riktig html og mange css forslag på ulike skjema design.

Endret 20. januar 2006 av Garreth

[noccy]

Her er kode for to "diver" ved siden av hverandre. Jeg har lagt stilen rett på divene...

 

<form>

<div id="left" style="width:280px; position:absolute; left:10px; top:10px;" >
<p>Felt1:</p><input id="Text1"/>
<p>Felt2:</p><input id="Text3"/>
<p>Felt3:</p><input id="Text4"/>

</div>

<div id="right" style="width:280px; position:absolute; left:300px; top:10px;">
<p>Felt4:</p><input id="Text2" />
<p>Felt5:</p><input id="Text5"/>
<p>Felt6:</p><input id="Text6"/>
<p>Felt7:</p><input id="Text7"/>

</div>
</form>

 

Du kan også bytte ut div med fieldset og bruke legend:

 

 

<form>

<fieldset id="left" style="width:280px; position:absolute; left:10px; top:10px;" >
<legend>Skjema1</legend>
<p>Felt1:</p><input id="Text1"/>
<p>Felt2:</p><input id="Text3"/>
<p>Felt3:</p><input id="Text4"/>

</fieldset>

<fieldset id="right" style="width:280px; position:absolute; left:300px; top:10px;">
<legend>Skjema2</legend>

<p>Felt4:</p><input id="Text2" />
<p>Felt5:</p><input id="Text5"/>
<p>Felt6:</p><input id="Text6"/>
<p>Felt7:</p><input id="Text7"/>

</fieldset>
</form>

Endret 20. januar 2006 av noccy

[Cucum(r)]

Bytt ut P med LABEL, så blir det bra.

[pfft]

hepp

her kanskje :klick: