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?:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>VRN Search</title>
	<meta name="author" content="Bolla Sandor">
	<!--<link href="CSS/basic.css" media="screen" rel="stylesheet" type="text/css">-->
    <style>
        form {
    margin:     0px;
    padding:    0px;
}

.pceframe-main {
    width:      500px;
    margin:     10px auto;
    border:     1px solid gray;
    padding:    2px;
}

.pceframe-header {
    margin:             0px;
    padding:            .5em;
    background-color:   #4D4D4D;
    color:              white;
    border-bottom:      1px solid #4D4D4D;
}

.pceframe-vrnfield-frame {
    margin:     0px;
    padding:    5px;
}

.pceframe-button-frame {
    float:      right;
    width:      55px;
    margin:     0px;
    padding:    0px;
}
    </style>
</head>
<body>
	<div class="pceframe-main">
		<div class="pceframe-header">[login information]</div>
        <div class="pceframe-vrnfield-frame">
            <form action="" method="POST">
                <span class="pceframe-vrnfield-label">Enter your VRN number:</span>
                <input type="text" id="pceframe-vrnfield">
                <div class="pceframe-button-frame">
                    <input type="submit" id="pceframe-buttons-submit" name="submit" value="Search">
                </div>
            </form>
        </div>
	</div>
</body>
</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.