Weblap

[enjoys1ng1ng]

@Mosi

 

Jaj, félre ne érts! Bíztatásnak szántam és nem károgásnak. Én soha senkit piszkáltam még itt és nem is fogok. Na, ennyit az érzelmekrõl.

 

Õrülten számolom a pixeleket a lapodon, de még nem találtam. Azt viszont megpróbálhatnád, hogy a "content"-nek is fix szélességet adsz, hiszen a container-ed 830px széles és megadtad a left és a right szélességeket. Talán ha nem auto a width a content-ben akkor jobban látszanak a dolgok.

A "container h1"-et átnevezném "content h1"-nek és azon belül adnám meg a margin értékeket. Úgy egyszerûbb.

Most ennyi, próbálgasd. Én is keresem tovább.

[payskin]

Na, elkezdtem én is nézni.

• A CSS-ben rögtön van hiba, a legelején a font-family-ben a Georgia után pontosvesszőt raktál. Erre jó egy kódszínezős szerkesztő (Notepad2), rögtön kiszúrható a hiba.
• A border: szinte mindenhol rosszul van megadva. Három paramétere van: méret, stílus, szín!
• Elvileg nem hiba, de nincs sok értelme két teljesen azonos box1-box2 osztályt létrehozni. Ha ugyanolyan dobozokat akarsz használni, arra elég egy box1 osztály, hiszen az osztályt egy oldalon belül többször is felhasználható (szemben az id-vel).

A hibát az okozza, hogy a #content nincs a helyén! Erre jó a Firebug, rögtön megmutatja a problémát!

 

 

Szerintem az a baj, hogy nem pontosan tudod, mit csinál a float. Megpróbálom elmagyarázni, bár nem egyszerű.

 

Tételezzük fel, hogy nincs float. Akkor az oldal úgy épül fel, hogy az egyes divek szépen egymás alá kerülnek:

 

#header

#menu

#right

#left

#content

#footer

 

Ezt hívjuk az oldal normál folyásának (idegen szóval normal flow).

 

A float kiveszi az adott elemet az oldal normál folyásából, és azt a float irányának megfelelően az adott területen belül kirakja a "falhoz". Tehát amikor a #right-nak megadod, hogy float: right, akkor az kikerül a normál folyásból, és kitapad a #container diven belül a jobb oldalra. A #left is kijön a folyásból és kitapad a #container diven belül a bal oldalra.

 

Az összes többi elem a normál folyás szerint épül fel, tehát

 

#header

#menu

#content

#footer

 

Azaz a #content az oldal normál folyásának megfelelően szépen beül a #menu div alá, mintha mi sem történt volna. Pontosan ráül a #left-re, amiről fogalma sincs, hogy ott van, mivel ő a normál folyásban van, a #left meg, ugye, nincs.

 

A probléma megoldásához a #content divet pontosan 171 pixellel kell betolni balról, hogy a helyére kerüljön. Pont annyival, amilyen széles a #left (nem feledkezünk meg az +1 pixel keretről sem)!

 

#content 
{
    width: 488px; /* 830 - (2 x (170 + 1)) */
    height: 400px;
    margin: 0px 171px;
}

Ha a margin:-nál csak 2 értéket (felső, jobb) adunk meg, akkor azt "letükrözi" a másik kettőre, tehát ebben az esetben a felső-alsó margó: 0px, a bal-jobb margó: 171px. (Ugyanaz, mintha azt írtam volna: margin: 0px 171px 0px 171px;)

 

 

A bajok azonban ezzel még nem oldódtak meg teljesen, ugyanis a h1-et is sikerült egy kicsit kitolni a #contentből. Ugye a #content 488 pixel széles (a #container 830 pixeles belső területéből levonjuk a #left és a #right méretét + az 1-1 pixel keretüket (171+171 = 342), 830 - 342 = 488 pixel).

 

Ehhez képest a h1-et úgy definiálod, hogy:

 

#container h1 
{
    width: 450px;
    margin-left: 52px;
    padding-left: 10px;
    font-size: 16px;
    color: #333;
    background-color: #b1ae98; 
    border: 1px solid #333;
}

Nézzük csak. Helyből 450 pixel széles. Adsz neki 10 pixel bal paddingot, az rögtön hozzáadódik a hosszához, így már 460 pixel széles. Plusz az 1-1 pixel keret a két oldalán = 462 pixel, és ezt az egészet betolod a bal margóval 52 pixellel, tehát, ha jól számolom, akkor 26 pixellel lógunk ki a #contentből.

 

Ezt úgy oldjuk meg szépen, hogy először is kiszámoljuk, hogy hány pixel széles legyen a h1, hogy a paddinggal és a borderrel 450-re jöjjön ki, majd a bal és jobb oldali margót pedig auto-ra állítjuk, hogy a böngésző berakja középre. (Valamint a #content divben beállítunk 10 pixel felső paddingot, hogy a h1-en ne a tetejére üljön.) A definícióban a h1-et átköltöztettem a #content alá (--> div#content h1).

 

#content 
{
    width: auto; /* 830 - (2 x (170 + 1)) = 488px */
    height: 390px; /* +10px padding-top = 400px */
    margin: 0px 171px;
    padding-top: 10px;
}

#content h1 
{
    width: 438px; /* +10px padding-left + 1-1px border = 450px */
    padding-left: 10px;
    border: 1px solid #333;
    margin: 0px auto;
    font-size: 16px;
    color: #333;
    background-color: #b1ae98; 
}

Az eredmény egyaránt tökéletes (vagy legalábbis azonos) Firefoxban és Internet Explorerben is.

 

És örvendezének vala:

:olé:

 

De a dolog ezzel még nem ért teljesen véget, ugyanis a floatokat le is kell ám zárni! Az első olyan oldalelemben, ami a floatolt elemek alá kerül (esetünkben ez a #footer), berakunk egy clear: both; stílusdefiníciót. Ezzel tudatjuk a böngészővel, hogy innentől kezdve megint a normál folyás szerint mennek a dolgok.

 

Az én változatom: index.html, style.css.

 

íl: Firebug

 

Ui: kivettem belőle a *-ot, mert nem kell, és csak bonyolította az amúgy sem egyszerű megoldást. Ha pedig valamit kihagytam, majd jön Giraffe...

Edited June 5, 2007 by Spányik Balázs

[Mosi]

Balázs!

Köszönök mindent! Lenyûgöztél!

 

Most mindjárt szétrobban a fejem, de reggel nekiállok megoldani a problémákat!

 

Üdv,

Gábor

[Mosi]

Nos, sikerült felfognom, hogy mi volt a hiba!

Még egyszer köszönöm mindenkinek a segítségét!

Balázs! Imába foglaltam a neved!

 

Üdv,

Mosi

[enjoys1ng1ng]

@Balázs!

 

Elolvasva ezt az oktató anyagot a fejem verem a falba, hogy áááááááá, hát ez ilyen egyszerû!!! Mindig mindent túlbonyolítok.

Nagyon sokat tanultam belõle!

 

Neki is álltam gyakorolni: "ez lett belõle". Pechemre, tegnap feltettem a netscape böngészõt, így már meg tudom nézni IE-ben, Firefoxban, Opera-ban és Netscape-pel...

 

- ez utóbbin lecsúszik a "right" a left alá, de nem is teljesen alá, hanem elcsúszva azért jobbra. Ezerszer átszámoltam, de nem látom hol a hiba.

 

De egy másik dolog: állandóan hadilábon állok a horizontal menu - vel. Ezt is elmagyarázhatnád ilyen részletesen mint az elõzõ témát. Persze csak ha van idõd erre. Konkrétan, bárhogy próbálom, nem tudom változtatni a menu elemek szélességét.

 

Köszönöm ha foglalkozol vele. Vagy bárki másnak akinek van ideje és kedve hozzá.

 

 

jav.: Most mind a négy böngészõn kb. egyformán néz ki, de nem tudom elérni, hogy a left és a right között csak 10px keret legyen középen, mint mindenhol máshol a content-ben.

[payskin]

Szia, megígérem, hogy átnézem, és segítek, csak ma nagyon húzós napom volt, és még elég sok dolgom van. Ha holnap időben érek haza, elmagyarázom a vízszintes menüt, meg meglátjuk, milyen gondok vannak még. Persze, addig is szabad a vásár bárki számára, nem kell rám várni.

 

Egyébként a Netscape-et hagyd a fenábe. Öreg a kód, ezer éve nem nyúltak hozzá, nincsenek jól dokumentálva a hülyeségei, marginális a felhasználói tábor (talán kevesebben használják, mint az Operát, és az is csak néhány százalék körüli.) Aki azzal bünteti magát, hogy ezt használja, az azt kapja, amit. L'oreal. Mert megérdemli.

[payskin]

Van egy kis időm, elmesélem, miért nem tudod a menüpontok méretét állítani.

 

Megjelenés szempontjából a HTML elemeket két nagy csoportba sorolhatjuk: vannak blokk szintű és az úgynevezett inline elemek. A blokk szintű elem az oldal normál folyásában egy jól elkülönö részt képez, ilyenek például a div blokkok, de ilyen például maga a

tag is, ami egy bekezdést, egy szövegblokkot hoz létre. Az inline elemek nem különülnek el, beolvadnak az őket tartalmazó blokk szintű elemekbe, és így az oldal normál folyásába. Tipikus inline elem az .

 

Sok helyen úgy magyarázzák a különbséget, és talán így könnyebben érthető, hogy a blokk szintű elemek megtörik az oldal folyását, ők is új sorba kerülnek, és az utánuk következő elem is új sorba kerül, tehát előttük és utánuk is sortörés van. Az inline elemek nem "rendezik át" az oldalt, nincs a lezárásuknál sortörés. Fontos különbség még, hogy a blokk szintű elem kitölti a rendelkezésre álló vízszintes területet, míg az inline elem csak "addig nyújtózkodik", míg a takarója ér.

 

<div style="width: 300px; background-color: yellow;">
    <p style="background-color: red">aaa</p>
</div>

<div style="width: 300px; background-color: yellow;">
    <span style="background-color: red">aaa</span>
</div>

Mindkét

teljesen egyforma, az egyikben egy blokk szintű bekezdést definiálunk, a másikban pedig az inline -nal formázzuk a szöveget, de mindkettőben pirosra állítjuk a háttérszínt. Megfigyelhető, hogy a

rögtön mohón kisajátította a

teljes szélességét (blokk szintű, tehát jár neki), míg a udvariasan csak annyit falt fel a sárgából, amennyire szüksége volt.

 

CSS-ből csak a blokk szintű elemeknek tudjuk állítani a méretét, az inline-oknak nem. Arra viszont van lehetőségünk, hogy egy inline elemet blokk szintűnek definiáljunk. Erre való a display: block; definíció. Példa:

 

<div style="width: 300px; background-color: yellow;">
    <a href="www.pcworld.hu" style="background-color: red">PC WORLD</a>
</div>

<div style="width: 300px; background-color: yellow;">
    <a href="www.pcworld.hu" style="background-color: red; display: block">PC WORLD</a>
</div>

Előbb egy olyan hivatkozást használunk, aminek piros a háttere, majd egy olyat, amit emellett még blokk szintűként is definiálunk. Érdemes megfigyelni, hogy amellett, hogy a második az egész területet "felfalja" magának, a hivatkozás is a teljes piros területén "él", figyeld az egérkurzor alakját! Akár kattinthatnánk az üres területre is, ott is működne!

 

Még egy példa:

 

<div style="width: 300px; background-color: yellow;">
    <a href="www.pcworld.hu" style="background-color: red; width: 200px;">PC WORLD</a>
</div>

<div style="width: 300px; background-color: yellow;">
    <a href="www.pcworld.hu" style="background-color: red; display: block; width: 200px;">PC WORLD</a>
</div>

Az előzőhöz képest csak annyi a különbség, hogy ebben az esetben mindkét hivatkozást 200 pixel szélesre próbáljuk definiálni. Az első esetben ez nem működik: a hivatkozás inline elem, nem lehet a méretét állítani. A másodikban, ahol viszont blokk szintűként definiáljuk, már működik a méretállítás.

[payskin]

enjoys1ng1ng közben megtalálta a Listamatic weboltalt, és épített magának gyönyörű menü csíkot, de azért a többiek okulására elmesélem, hogy csinálunk menüt.

 

Eredetileg valami ilyesmi volt a menü forrása:

 

 <div id="navigator">
  <div id="top">
    <a href="" class="top">menu 1</a>
    <a href="" class="top">menu 2</a>
    <a href="" class="top">menu 3</a>
    <a href="" class="top">menu 4</a>
  </div>
</div>

Látszik, hogy a menüpontok hivatkozásokból, tagekből állnak, ami ugye inline elem, tehát ennek nem tudjuk állítani a méretét. Nyilván azért használunk -t, mert egyrészt így lesz link, másrészt hogy a menüpontok egymás mellé kerüljenek!

 

BZZZZZZZZZ! HIBA!

 

Az egymás mellé kerülés kinézet! Az XHTML oldal forrásában nem használunk a kinézet miatt kódot! Kizárólag funkció alapján válogatunk a tagek közül: azért használjuk az -t, mert hivatkozni akarunk! Azt hogy hogy fog kinézni, majd CSS-ből oldjuk meg! Sőt, hogy áldozzunk a semantika oltárán, tovább gondoljuk a dolgot, és mivel a menü az tulajdonképpen hivatkozások listája, ezért -- funkciójánál fogva -- listát fogunk használni a menünkhöz, valahogy így:

 

<div id="navigator">
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</div>

Gondolom, most sokan felhördülnek, hogy "Nanananana! Hiszen ez így egy függőleges lista lesz, ronda nagy listapöttyökkel az elején". Persze, hogy az lesz, amíg jól meg nem formázzuk CSS-sel!

 

Lássunk is hozzá!

 

Kezdjük a

-vel, bár ő sok vizet nem zavar, nagyjából megtartottam olyannak, amilyenre enjoys1ng1ng eredetileg definiálta, csak kivettem belőle az overflow-t, mert az nem tudom, miért volt benne.

 

div#navigator
{
    width: 746px;
    height: 20px;
    margin-bottom: 10px; 
    padding: 0; 
    border: 2px dotted orange;
}

Tegyük fel, hogy azt szeretnénk, hogy minden egyes menüpont 150 pixel széles és 20 pixel magas legyen (paddingtól most az egyszerűség kedvéért eltekintünk). Ebből máris kiszámoltuk, hogy a teljes menüsáv 600 pixel széles lesz (4 menüpontunk van). Tehát az

-ben egyrészt beállítjuk a méretet, aztán középre pozícionáljuk a margót auto-ra állítva. Még egy fontos dolog van, a list-style-type: none;-nal kikapcsoljuk a listapöttyöket.

 

div#navigator ul
{
    width: 600px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    list-style-type: none;
}

Ettől azonban a listaelemek még nem kerültek egymás mellé! Mitől fognak egymás mellé kerülni? Floatoljuk őket! A menüpontok szövegét pedig középre igazítjuk.

 

div#navigator ul li
{
    margin: 0;
    padding: 0;
    text-align: center;
    float: left;
}

Most jön az érdemi munka a hivatkozások definiálása, íme:

 

div#navigator ul li a
{
    width: 150px;
    height: 20px;
    background: #fff;
    color: #000;
    text-decoration: none;
    display: block;
}

Kezdem a végén: display: block; -- blokk szintű elemmé emeljük a hivatkozásokat, azaz állíthatjuk a méretüket! Meg is tesszük az elején, úgy ahogy megbeszéltük, állítunk még háttér- és szövegszínt, valamint levesszük az aláhúzást. Ennyi. A hoverben pedig berakunk egy másik háttér- és szövegszínt:

 

div#navigator ul li a:hover
{
    background: #00f;
    color: #fff;
}

A végeredmény itt megtekinthető.

 

Mivel floatolunk, igazából úgy illene, hogy az

után, a

elé be kéne szúrnunk egy extra, üres

elemet, ami törölné a float-ot (clear:both). Tekintve, hogy a #navigator

-be semmilyen más tartalom nem kerül, amit ez összezavarhatna, ezért ettől most eltekinthetünk.

 

Egyébként, ha valaki végiggondolja, az egész semantikus szemlélet oldalba rúgása volna ez a float-lezárás, hiszen a törlő üres

nem volna tartalmi elem, tehát nem a funkciójának megfelelően használnánk. Sokan szívják is emiatt a fogukat, és... olvassunk tovább alább!

[payskin]

Kezdjük a

-vel, bár ő sok vizet nem zavar, nagyjából megtartottam olyannak, amilyenre enjoys1ng1ng eredetileg definiálta, csak kivettem belőle az overflow-t, mert az nem tudom, miért volt benne.

Balázs ezt a csodálatos június 10-ei, kora reggeli időpontot választotta ahhoz, hogy megtudjon valamit a floatról, amit enjoys1ng1ng ezek szerint már tudott, Balázs azonban még nem (és még ez mer ilyen oktató jellegű dolgokat írni, az arcom leszakad).

 

Szóval, floatot kizárólag a középkorban töröltek extra

hozzáadásával. Azóta eljött a XXI. század, és valaki rájött, hogy ha annak a

-nek stílusához, amelyben a floatolt elemek vannak, hozzáadjuk az overflow: auto definíciót, akkor nem kell törölni a floatot! Nahát!

 

Tessenek megtekinteni ezt a példát*. Eredeti terveink szerint egy bal és a egy jobb oldali hasábba tördeljük a két bekezdést, amit a kék színű, lágy szaggatott kerettel vennénk körbe. Iderakom a CSS-t, mert az az izgalmas:

 

div#befoglal
{
    width: 756px; /* + 10-10px L-R padding, + 2-2px L-R border  = 780px */
    margin: 0 auto;
    padding: 0 10px;
    text-align: left;
    border: 2px dashed blue;
}

div#balhasab
{
    float: left;
    width: 256px;
    margin: 0;
    padding: 0;
    background: #f0f0ff;
}

div#jobbhasab
{
    float: right;
    width: 500px;
    margin: 0;
    padding: 0;
    background: #f0fff0;
}

A befoglal id-jű

-ben gondosan beállítjuk a 2 pixel vastag kék szaggatott keretet, majd a balhasab és jobbhasab

-ekben a hasábok méretét és a bal illetve jobb floatot. Az eredményben pedig azt látjuk, hogy a keret nem éri körbe a két hasábot, hanem az oldal tetején magába csuklik. Miért? Mindkét hasábot floatoltuk, azaz kivettük az oldal normál folyásából, ami konkrétan azt jelenti, hogy a befoglal

-nek nincs normál folyású tartalma, mondhatni üres. Na, pont a semmi köré csinál keretet a képernyő tetején.

 

Ez a float problémája, és ezt oldaná meg a lezárás, ha beraknánk egy harmadik

-et a kódba, valahogy így:

 

<div style="clear: both"></div>

Ez azonban nemcsak ronda, hanem mint odafent kifejtettem, lábbal tiprása szent elveinknek, miszerint nem használunk XHTML kódot valamilyen kinézet elérése érdekében. Hát itt pont azt tennénk. Azért csak próbálja ki gondosan mindenki, hogy lássa, valóban működik.

 

Ez volt a középkor, viszlát! Ehelyett a befoglal

stílusába berakjuk az overflow: auto; definíciót, és örvendezünk vala.

 

div#befoglal
{
    width: 756px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: left;
    border: 2px dashed blue;
    overflow: auto;
}

Már érdemes volt felkelni, nem igaz?

 

*Itt hívnám fel a figyelmet arra, hogy akik Internet Explorer 6-tal böngésznek, a problémából semmit nem látnak. Az Intenet Explorer ezúttal sem követi az előírást, mit neki szabvány, és nem tekinti üresnek a befoglal

-et, így be is rajzolja szépen a keretet a hasábok köré. Lehet, hogy ez elsőre remek ötletnek tűnik. NAGYON NEM AZ!

[enjoys1ng1ng]

@Balázs: Nagyon köszönöm! Eddig csak átmásoltam a kódokat és próbáltam megérteni, hogy mi miért van, most már értem és tudom! Nagy különbség! Nagyon jól magyarázol, minden érthető, világos, tiszta. (Nem írtál még tankönyvet? Hol lehet megvenni?)

 

Szóval, végre értem miért van "inline" meg "block", meg "clear:both"! (A "float" már tiszta volt.) Nagyon, nagyon köszönöm! (Ja, és egyáltalán nem mellékes: még szórakoztató is volt... )

[h.arpad]

Ja, és egyáltalán nem mellékes: még szórakoztató is volt...

[egerecske]

Sziasztok!

 

Sajnos a PHP-hez egyáltalán nem értek, és a HTML-hez is csak egy kicsit.

van egy kódom, amivel megjelenik egy szövegmező, meg egy gomb. Azt szeretném, ha a mezőbe írva egy e-mail címet, és rákattintva a gombra, az küldje el nekem ezt az adatot egy megadott címre. Nem kell, hogy rögtön valami levelezőlista- vagy hírlevélprogramba vagy nemtommibe tegye, mert oylat úgysem tudok írni - csak jöjjön át az adat anélkül, hogy külön e-mailt kellene írniuk az érdeklődőknek. Megoldható ez valahogy?

Judit

[h.arpad]

A <form> tag-be kell beírni, hogy action="mailto:cimed@domain.net".

[egerecske]

Kedves Árpád!

 

Köszi, majd kipróbálom, bár egyelõre csak halvány fogalmaim vannak, hogy mi minden is kell legyen egy <form> tag-ben... és simán lehet, hogy eltévedtem, mert azt a szót, hogy CAPCHA, most hallottam elõször, tehát honnan kellett volna tudjam, hogy ez már másik topicba tartozik? Sajnos csak a html-hez értek egy kicsit, semmi máshoz, éppen ezért kérdezek Tõletek, mert Ti sokkal okosabbak vagytok :-)

Ma napszúrást kapttam, úgyhogy nem barkácsolok, de ha nem megy, akkor még jövök vissza és kérdezek :-)

Szió

Judit

[h.arpad]

http://w3schools.com/xhtml/default.asp

Ez segít. Igaz nem a napszúrás ellen.

[Master_of_Puppets]

Olyan pici logót hogyan lehet létrehozni ami megjelenik a keresõben a cím mellett és a kedvencekben is?

[payskin]

Favicon

[Master_of_Puppets]

Köszi szépen

[Atys]

@Balázs: Ezt én is köszönöm!

 

Na ezt a kérdést nem tudom hol tegyem fel:

Sokszor látom, hogy egyes cégek úgy hirdetik magukat, hogy adnak a honlap mellé egy szerkesztõt, és azon bárki frissítheti a honlapot. Na én ilyet szeretnék összehozni a saját honlapomhoz, csak nem tudom, hogy hol kezdjek neki.

 

Edited July 24, 2007 by Atys

[Master_of_Puppets]

Na, megvolt a logo generálás, betettem ezt

<link rel="shortcut icon" href="favicon.ico" >

a head-ba, ugyanabban a mappában van minden, újra betettem a kedvencek közé az oldalt, frissítettem is, de mégse akarja behozni

Pedig még a validator is azt mondta hogy működik...

[Garono]

Ha lezárnád esetleg?

[h.arpad]

Csak XHTML-ben kell lezárni.

 

Ha Firefox-ban a kedvencek közé teszed, nem jelenik meg egybõl az ikon. A lényeg, hogy a címsorban megjelenjen.

[Garono]

Nem XHTML-rõl van szó?!

 

Firefoxban egyébként akkor teszi be az ikont, ha könyvjelzõbõl nyitod meg az oldalt.

 

[h.arpad]

Még ha XHTML lenne is (amit kétlek, mert azt írta, hogy az oldal valid), attól még, hogy nem XML-lezárást használsz, alkalmaznia kell a böngészőnek a tulajdonságokat. (Be jó is lenne, ha nem tenné... )

[Master_of_Puppets]

Ha lezárnád esetleg?

Úristen Állandóan ilyesmiken csúsznak el a cuccok amiket csinálok. A lezárás megoldotta