9143
HTML-szerkesztés kezdőknek!!!
  • Dichter
    #3487
    #3415
  • Dj Faustus #3486
    Ha kikommentezem <!--...-->) az <a href="main.htm"> és a </a> közti részt,és a #center2 a(:hover) img-t átalakítom #center2 a(:hover)-szerűvé akkor nem látszódik az ENTER háttérkép, és nem tudsz továbbmenni sehova.

    Az átlátszó gif-nek az a funkciója, hogy legyen mire rákattintani, illetve azok számára, akik kikapcsolják a képek megjelenítését (vagy szöveges böngészőt használnak) látható navigációs elemet nyújtsunk.
  • Sil78
    #3485
    Hmm, azt hiszem, kezdem érteni. Szóval a háttérre van ráírva (és a te megoldásodban ki van hagyva a rollover effektus). De akkor már érvelhetünk úgy is, hogy az nem prezentációs elem, hanem funkciója van, így nem háttérképnek kellene lennie, hanem sima img-nek, és akkor tök fölösleges az az átlátszó gif...
  • Dj Faustus #3484
    Ha látja akkor kattingatni fog a képen. (Tényleg, lehetett volna imagemap technikát alkalmazni...)
    Ha nem látja (vak, vagy gyengénlátó)/szöveges böngészőt (Lynx,Links) használ, akkor az img tag alt attribútuma segít (de a Flash valószínűleg nem lesz olyan vakbarát...).
  • Sil78
    #3483
    Jó, de honnan fogja a látogató tudni, hogy éppen pont ott lehet belépni? Ha mondjuk csak a kurzor változik meg, az is egy elég mistery meat-es megoldás, és így kerülendő, nem?
  • grizzly21
    #3482
    ez lett belőle:
    klikk
  • Dj Faustus #3481
    Furcsa, nálam (Firefox 1.5) működik.
    A null.gif nálam így néz ki:
  • grizzly21
    #3480
    megvan!! nagyon köszönöm
  • grizzly21
    #3479
    létrehoztam egy átlátszó gifet de ugy nem jó. megnézem amit most írtál.
  • Dj Faustus #3478
    Azért van az alt attribútum beírva, mert az img tag kötelező része.
    A title nem.

    Az átlátszó gif azért kell, hogy látszódjon a háttér.
  • Sil78
    #3477
    Na de még ha létre is hozza, hol fog látszani az a felirat? Úgy gondoltad, hogy az alt text jelenjen meg tooltip-ként, amikor fölé megy egérrel? Mert az nem fog menni Firefoxban, az csak a title-t jeleníti meg így, az alt-ot a szabványnak megfelelően csak akkor mutatja, ha maga a kép nem elérhető.
  • Dj Faustus #3476
    "a piros belépés felirat az a null.gif miatt eltünt és mot ott semi nincs"
    A null.gif egy 258*33 méretű teljesen átlátszó gif kép. Szóval létre kell hozni egyet.

    Vagy módosítsd következőképp a HTML kódot:
    <div id="center2">
    <a href="main.htm">
    <div></div>
    </a>
    </div>


    Akkor a CSS-kód a következőképp módosul:
    #center2 a div {
    cursor: pointer;
    background: url("fullflash_04.jpg") center top no-repeat;
    width: 258px;
    height: 33px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #center2 a:hover div {
    cursor: pointer;
    background: url("rollover_04_04.jpg") center top no-repeat;
    width: 258px;
    height: 33px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
  • grizzly21
    #3475
    ez már középen van köszi!
    egyedüül az a gond, hogy a piros belépés felirat az a null.gif miatt eltünt és mot ott semi nincs:(
  • Dj Faustus #3474
    Táblázat használata nélkűl, valid kóddal, középre pozicionálva a HTML-kód:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Indexoldal</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="container">
    <div id="row1">
    <div id="leftcell"></div>
    <div id="centercell">
    <div id="center1"></div>
    <div id="center2">
    <a href="main.htm"><img src="null.gif" alt="Belépés" width="258" height="33" border="0" /></a>
    </div>
    </div>
    <div id="rightcell"></div>
    </div>
    <div id="row2"></div>
    </div>
    </body>
    </html>

    A null.gif egy 258*33 méretű teljesen átlátszó gif kép.

    A HTML kódhoz tartozó CSS kód (style.css):
    body {
    background-color: #ffffff;
    color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: center;
    }
    #container {
    position: absolute;
    background-color: #ffffff;
    color: #000000;
    width: 772px;
    height: 431px;
    top: 50%;
    left: 50%;
    margin: -215px auto auto -386px;
    padding: 0px;
    border: none;
    vertical-align: middle;
    text-align: left;
    }
    #row1 {
    width: 772px;
    height: 324px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #leftcell {
    background: url("fullflash_01.jpg") center top no-repeat;
    width: 257px;
    height: 324px;
    margin: 0px;
    padding: 0px;
    border: none;
    float: left;
    }
    #centercell {
    width: 258px;
    height: 324px;
    margin: 0px;
    padding: 0px;
    border: none;
    float: left;
    }
    #center1 {
    background: url("fullflash_02.jpg") center top no-repeat;
    width: 258px;
    height: 291px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #center2 a img {
    background: url("fullflash_04.jpg") center top no-repeat;
    width: 258px;
    height: 33px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #center2 a:hover img {
    background: url("rollover_04_04.jpg") center top no-repeat;
    width: 258px;
    height: 33px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #rightcell {
    background: url("fullflash_03.jpg") center top no-repeat;
    width: 257px;
    height: 324px;
    margin: 0px;
    padding: 0px;
    border: none;
    float: left;
    }
    #row2 {
    background: url("fullflash_05.jpg") center top no-repeat;
    width: 772px;
    height: 107px;
    margin: 0px;
    padding: 0px;
    border: none;
    }
  • grizzly21
    #3473
    nem, nem kell annyira nem fontos.
    egyébként ehhez kell:
    http://kurucz.try.hu //öcsémnek
  • Dj Faustus #3472
    Validitás ellenörzése:
    * (X)HTML/WAP
    * CSS
    * RSS/Atom
    * Section 508/WCAG
    * Paramédia

    Ajánlom még figyelmetekbe:
    * Akadálymentes weboldalak
    * Weblapok ergonómiája
    * Irányelvek webfejlesztőknek
    * Jakob Nielsen: Web-Design
    * World Wide Web Consortium - a(z) (X)HTML, CSS, és egyéb szabványok lelőhelye.
  • CattiBrie
    #3471
    mit nyertem?

    tudom, hogy rájöhetek, hogy hol a hiba és csináljam meg FF alá is :)
  • grizzly21
    #3470
    találat:)
  • CattiBrie
    #3469
    fogadjunk hogy FF-t használsz!
  • grizzly21
    #3468
    valóban viszont most meg horizontálisan nincs középen, és a rollover image nem megy
  • stormnet
    #3467
    ponsosan... esetleg valaki tudna ajánlani valamit amibol (meg)lehet tanulni Faustus 3. pontjában szereplo komplikáltnak titulált dolgokról (valid, böngészőfüggetlen) ? mert en igy magát a nyelvet (html, css php stb.) értegetem, de konkrét ilyen húzások érdekelnének amivel ezeket el lehet érni (valid, böngészőfüggetlen)
    thx
  • Dj Faustus #3466
    "Szerintem a legegyszerűbb programozási nyelv, már ha lehet annak nevezni."
    Nem az. HyperText Markup Language - hiperszöveg leíró nyelv.
    Programozási nyelvek: Logo, (Visual) Basic, (Visual) C(++), C#, Pascal, Delphi, Java, Fortran, Assembly,...
    Szkriptnyelvek (majdnem programozási nyelvek, de mégsem azok): PHP, ASP, Javascript, Perl (CGI), VBS,...

    "a HTML oldalak már legalább 3-4 éve elavultak"
    1. A mai trend az, hogy az oldal tartalmát, és az oldal design-ját különszedjék. Az előbbihez ott az (X)HTML, az utóbbihoz ott a CSS. Sőt valószínűleg hosszabb távon az oldal tartalmát, az oldal struktúráját, az oldal design-ját szét fogják szedni. Erre lesz majd az XML+XSLT+CSS megoldás.

    Remélhetőleg a cégvezetők rájönnek, hogy a céges weblapoknál igen fontos az ergonómikus (felhasználók számára könnyen böngészhető, vakok/süketek/bénák számára is élvezhető), jól kialakított, valid oldal. Ugyanis ez is trend.
    2. A statikus oldalak azért avultak el, mert a felhasználók egyre jobban elvárják a sűrűn frissűlő tartalmat.
    3. A HTML nyelv könnyen megtanulható. Ami komplikált, az a valid, böngészőfüggetlen (amit a CSS és a Javascript kissé megnehezít), ergonómikus weboldal kialakítása.
  • CattiBrie
    #3465
    jajj, de ércs férre, csak azon "hihi"-ztem, hogy én azon az oldalon adtam be a HTML beadandómat.. :)
  • DEXTER92
    #3464
    Még az oldal neve is: "weblapszerkesztés kezdőknek"
    Amúgy meg ez a HTML nyelv tök egyszerű dolog, két éve, egy unalmas hétvégén megtanultam az egészet. Ennyi. Szerintem a legegyszerűbb programozási nyelv, már ha lehet annak nevezni. De manapság HTML-el az ember már semmire se megy, azonkívül minimum javascript és php kell, mert a HTML oldalak már legalább 3-4 éve elavultak.
  • CattiBrie
    #3463
    lol
  • DEXTER92
    #3462
    Szerintem egyszerűen meg lehet tanulni innen. Én még annó könyvből tanultam, asszem a 'Weblapszerkesztés házilag' c. /bbs könyvkiadó/ könyvből.
  • CattiBrie
    #3461
    nédd csak meg, hogy mennyire középen van az!!!!!

    itt
  • CattiBrie
    #3460
    de hát, nincs benne
  • grizzly21
    #3459
    beleírtam, akkor is beleírtam de nem rakta középre!
  • CattiBrie
    #3458
    ja és, ne zippelve tegyél fel tárhelyre weboldalt, csak simán másold fel a fájlokat
  • CattiBrie
    #3457
    na, ez eddig jó, de írd bele, amit modntam

    #3444 -as komment, ami zölddel van
  • grizzly21
    #3456
    http://stopthebees.uw.hu/html.zip
  • batman
    #3455
    de egyébként nem bonyolult:

    Csinálsz egy "nagy" táblázatot, amibe a teljes tartalom bekerül. Ennek mindössze 1 sora és 1 cellája legyen. Ebbe a cellába berakod a másik táblázatot úgy, hogy valahogy így nézzen ki: <td valign="middle"><table><tr>....és így tovább.

    és ezt az egészet (tehát a "nagy" táblázatot) vagy a <center></center>, vagy a <div align="center"></div> módszerrel vízszintesen is középre rakod. Ennek működnie kell.
  • batman
    #3454
    ez miez? "http://stopthebees.uw.hu/oldal.zip"

    egyébként nálam is működik, amit Cattie-Brie csinált
  • CattiBrie
    #3453
    ez mi ez a zip?
  • CattiBrie
    #3452
    akkor valamit nagyon elcsúnyázol, mert megicsnáltam és nálam középen-középen van minden
  • grizzly21
    #3451
    ugyanaz nem müxik:(
    viszont már jó az uw:
    http://stopthebees.uw.hu/oldal.zip
  • batman
    #3450
    oké
  • CattiBrie
    #3449
    de
  • batman
    #3448
    Azt értem, de attól még maga a táblázat nem lesz középen...