ugrás a tartalomhoz

nem ertem a CSS-t

carstepPCE · 2008. Nov. 28. (P), 16.15
Sziasztok,

Egy ideje mar nem nagyon irogatok CSS-t, de most megint kell es valamiben elakadtam, amire sehol nem talaltam megoldast eddig, ezert segitsegeteket kerem? Eddig FF3-ban es Safari-ban neztem meg, ahol Safari jol jelenitette meg, mig az FF3-ban a Search submit gomb mar kilogott a keretbol, de nem ertem miert, szerintetek az alabbi kodreszletnek mit kellene megjelenitenie?:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  2.    "http://www.w3.org/TR/html4/strict.dtd">  
  3. <html lang="en">  
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.     <title>VRN Search</title>  
  7.     <meta name="author" content="Bolla Sandor">  
  8.     <!--<link href="CSS/basic.css" media="screen" rel="stylesheet" type="text/css">-->  
  9.     <style>  
  10.         form {  
  11.     margin:     0px;  
  12.     padding:    0px;  
  13. }  
  14.   
  15. .pceframe-main {  
  16.     width:      500px;  
  17.     margin:     10px auto;  
  18.     border:     1px solid gray;  
  19.     padding:    2px;  
  20. }  
  21.   
  22. .pceframe-header {  
  23.     margin:             0px;  
  24.     padding:            .5em;  
  25.     background-color:   #4D4D4D;  
  26.     color:              white;  
  27.     border-bottom:      1px solid #4D4D4D;  
  28. }  
  29.   
  30. .pceframe-vrnfield-frame {  
  31.     margin:     0px;  
  32.     padding:    5px;  
  33. }  
  34.   
  35. .pceframe-button-frame {  
  36.     float:      right;  
  37.     width:      55px;  
  38.     margin:     0px;  
  39.     padding:    0px;  
  40. }  
  41.     </style>  
  42. </head>  
  43. <body>  
  44.     <div class="pceframe-main">  
  45.         <div class="pceframe-header">[login information]</div>  
  46.         <div class="pceframe-vrnfield-frame">  
  47.             <form action="" method="POST">  
  48.                 <span class="pceframe-vrnfield-label">Enter your VRN number:</span>  
  49.                 <input type="text" id="pceframe-vrnfield">  
  50.                 <div class="pceframe-button-frame">  
  51.                     <input type="submit" id="pceframe-buttons-submit" name="submit" value="Search">  
  52.                 </div>  
  53.             </form>  
  54.         </div>  
  55.     </div>  
  56. </body>  
  57. </html>  
Udv
Sanyi
‹ radio input elemek értékeinek átvitele xmlhttprequesttel. hogyan is kell? HTML, CSS Kiegészítések ›
 ■
1

Float

Poetro · 2008. Nov. 28. (P), 17.23
Ha valamit float-olsz az kikerül a dokumentum folyamából. Ezért utána vagy kell egy clear, vagy a mellete levő tartalomnak hosszabbnak lenni, mint a float-olt elem. Pl ha a pceframe-button-frame div-et a pceframe-vrnfield-label span elé rakod, akkor máris nem lóg ki.
2

clearfix

carstepPCE · 2008. Nov. 28. (P), 17.33
koszonom, igy mar konnyebb volt googlizni. Ezt hivjak clearfix problemanak? most mar kezd derengeni a dolog, 3 eve foglalkoztam utoljara CSS-sel es kicsit felejtodnek a dolgok :-).

A span -nak viszont nem adhatok meg height erteket (max line-height-t), de ugye ez mar design kerdese :-)

Udv
Sanyi
3

block formatting context

tgr · 2008. Nov. 28. (P), 18.14
A block formatting context fogalmának érdemes utánanézni, ez szabja meg, hogy a float mit tekint keretnek. Pl. ha overflow: hidden van a <form>-on, akkor megnő akkorára, hogy tartalmazza a floatot.
4

nagyon jo

carstepPCE · 2008. Nov. 29. (Szo), 02.21
Eddig inkabb csak hasznaltam a CSS-t, mint ertettem, ha esetleg van tovabbi jo forrasod, hasonlo problemakra, szivesen veszem.

Ezek sajna nem voltak benne Eric Meyer fele konyvben es az The Art & Sience of CSS ben sem volt ra utalas. Igazabol nem is nagyon volt eddig gondom vele, mert egyszerubb eseteket biztak ram, de most mar jobban kezd erdekelni a dolog.

bye
Sandor
5

CSS spec

tgr · 2008. Nov. 29. (Szo), 16.37
CSS 2.1 specifikáció, azon belül is főleg a visual formatting model (ha nagyon elszánt vagy, a visual formatting model details) szakasz. Elég száraz olvasmány, de világos és nagyon precíz, egyszer érdemes átrágni magad rajta.

Amit még az elolvasása után is könnyű félreérteni, az a kétféle inline/block: van egy olyan dolog, hogy block és inline html elemek, meg van egy olyan, hogy block és inline display érték a CSS-ben, a kettőnek semmi köze egymáshoz. Pl. a span egy inline HTML elem (ami azt jelenti, hogy csak olyan HTML elemeknek lehet a gyereke, ami megenged inline gyerekeket), aminek tetszésed szerint adhatsz inline vagy block displayt CSS-ben, és utóbbi esetben minden további nélkül megadhatsz neki magasságot.