WN - CSS & Forms

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS & Forms (https://www.wn.se/forum/showthread.php?t=19444)

Hej!

Har stora problem att få horisontell alignment cross browser med labels och vissa inputs (radio och checkbox bl.a.).

Någon som har en bra lösning här, jag har provat position, float samt  men inget funkar :o.

<div id="rflicense">
<label for="rfaccept">I accept the user license agreement.</label>
<input id="rfaccept" name="rfaccept" type="checkbox" />
</div>

All hjälp jag kan få är jag tacksam över.

mvh
Robert

Vad är det som inte ser bra ut? (Jag antar att det ser ut som kryssrutan är för högt eller lågt jämfört med texten.) Skicka en link så man kan titta på det eller ge oss lite css…

Jag personligen skulle nog klippa bort lite överflödig kod:

Kod:

<label id="rflicense"><input id="rfaccept" name="rfaccept" type="checkbox" /> I accept the <a href="#" target="_blank">user license agreement</a>.</label>

och sätta display: block på label.

Skall prova med display:block.

Precis, problemet är att checkboxen är för högt upp i Mozilla, för långt ner i IE och förmodligen olika i de andra webläsarna som finns.

Måhända att jag skrivit överflödig kod men är fortfarande i inlärningsfasen, kanske effektiviserar koden när jag är mer erfaren :) Har bara 6månaders erfarenhet av sitekodning överhuvud taget.

Har ingen hostad server för tillfället så lägger in koden här.

HTML

Kod:

         <div id="rfplaceholder">

  <form id="rf" name="rf">

          <fieldset>

   <legend>Personal Information</legend>

   <div>

           <label for="rfname">Firstname:</label>

           <input id="rfname" name="rffname" type="text" />

   </div>

   <div>

           <label for="rfemail">Email:</label>

           <input id="rfemail" name="rfemail" type="text" />

   </div>

   <div>

           <label for="rfcemail">Confirm Email:</label>

           <input id="rfcemail" name="rfcemail" type="text" />

   </div>

          </fieldset>

          <fieldset>

   <legend>User Details</legend>

   <div>

           <label for="rfuname">Desired Username:</label>

           <input id="rfuname" name="rfuname" type="text" />

   </div>

   <div id="vrfuname">

           <a href="#">Verify username</a>

   </div>

   <div>

           <label for="rfpass">Password:</label>

           <input id="rfpass" name="rfpass" type="password" />

   </div>

   <div>

           <label for="rfcpass">Confirm Password:</label>

           <input id="rfcpass" name="rfcpass" type="password" />

   </div>

          </fieldset>

          <div id="rflicense">

           <label for="rfaccept">I accept the <a href="#" target="_blank">user license agreement</a>.</label>

           <input id="rfaccept" name="rfaccept" type="checkbox" />

          </div>

          <div id="rfsubmit">

   <input value="Submit" type="submit" />

          </div>

  </form>

         </div>

CSS

Kod:

input,textarea,label {

font-size:1.1em;

}



input {

padding:0 0 0 1px;

}



input:focus {

background:#eee;

}



#checkuname {

float:left;

display:block;

width:100%;

}



#vrfuname {

float:left;

width:300px;

margin:10px 0;

}



#vrfuname a {

display:block;

width:100px;

background:#ddd;

height:20px;

border:1px solid #000;

line-height:20px;

text-align:center;

margin:0 0 0 100px;

}



#vrfuname a:hover {

background:#ccc;

color:#000;

}



#rferror {

border:red;

}



#rfplaceholder,#lfplaceholder,#ffplaceholder,#sfplaceholder {

width:300px;

margin:50px auto;

}



#rf fieldset,#lf fieldset,#ff fieldset, #sf fieldset {

border:none;

border-top:1px solid #000;

margin:5px 0;

}



#rf legend,#lf legend,#ff legend, #sf legend {

color:#000;

border:1px solid #000;

background:url(/images/ORANGE_GRAY_Gradient/Background/gray_item_header_1x20.png) repeat-x;

padding:3px;

}



#rf label,#lf label,#ff label, #sf label {

float:left;

width:150px;

text-align:right;

margin:5px 0 0;

}



#rf fieldset input,#lf fieldset input,#ff fieldset input, #sf fieldset input {

float:left;

width:100px;

border:1px solid #000;

margin:5px 0 0 5px;

}



#rfsubmit,#lfsubmit,#ffsubmit, #sfsubmit {

width:300px;

text-align:right;

margin:10px 0 0;

}



#rfsubmit input,#lfsubmit input,#ffsubmit input, #sfsubmit input {

background:#ddd;

border:1px solid #000;

width:50px;

color:#000;

}



#rfsubmit input:hover,#lfsubmit input:hover,#ffsubmit input:hover, #sfsubmit input:hover {

background:#ccc;

}



#lfsubmit p,#ffsubmit p,#sfsubmit p {

font-size:10px;

margin:2px 0;

}



#lfsubmit a,#ffsubmit a, #sfsubmit a {

text-decoration:underline;

}



#rflicense {

text-align: center;

height: 30px;

width: 100%;

}



#rflicense a {

color: blue;

text-decoration:underline;

}



#rflicense label {

font-size: 0.8em;

width: 200px;

}



#rflicense input {

position:relative;

left: -40px;

top: 4px;

}

#rflicense sakerna är alla test så det är inte rätt :)

Sätt margin:0px och padding:0px på form-elementen, så kan du själv formatera dem efter behov sen. Margin o padding är olika i IE o FF...:/

Citat:

Originally posted by marty3d@Feb 19 2007, 14:17
Sätt margin:0px och padding:0px på form-elementen, så kan du själv formatera dem efter behov sen. Margin o padding är olika i IE o FF...:/

Har en reset.css som sköter det, men tack för infon :)

Endast Radio och Checkbox som strular ;)

Hur saker och ting sätts upp/ner i förhållande till annat ändrar du med vertical-align, t ex
vertical-align: middle;
prova lite med detta så får du till det (du kan använda värdena top, middle, baseline, bottom såväl som % t ex 50% för i mitten)

Citat:

Måhända att jag skrivit överflödig kod men är fortfarande i inlärningsfasen, kanske effektiviserar koden när jag är mer erfaren Har bara 6månaders erfarenhet av sitekodning överhuvud taget.

Jag tycker allt du kommit långt! Det finns inte mycket att klaga på. Vad du skulle kunna göra är att använda lite färre divvar. T ex är form själv ett element som inte behöver stoppas i en div om man inte behöver det. Då kan man "träffa" form direkt i css:en även utan id och #. Och som sagt att göra label till block så skulle du slippa 8 div-element. Du kan också fundera på att försöka träffa elementen utan att använda så mycket id, t ex fieldset a istället för vrfuname. Men det här handlar ju en hel del om eget stilval, säkerligen skulle en del mena att det är bra med så mycket id och div som möjligt (även om jag tycker att man ska försöka reducera "kluttret" så mycket så möjligt så att de väsentliga elementen kommer fram så att man får en bra översikt).