Webszerkesztés előtti kérdések

Webszerkesztés előtti kérdések
2010-11-10T16:34:12+01:00
2010-12-04T17:49:17+01:00
2022-10-27T04:45:35+02:00
  • köszi a segítséget!
    Sajnos a skype-s fehér négyzetet egyelőre nem tudom eltüntetni, majd ha találok rá megoldást, akkor visszatérek rá..
    A telefonképet nem tudtam css-sel módosítani, mert valahogy ott volt eredeti méretben is és alul kis méretben is..ráadásul mivel szétesett az oldal és órákba telt összeraknom, megelégszem egyelőre ezzel.

    Egyébként lehet a kettő összefügg valahogyan...az én gépemen minden böngészőben ugyanúgy néz ki az oldal, de egy másik laptopon teljesen el van csúszva a 2. linkelt oldal, és a főoldalon megjelenik ez a fehér kis négyzet, ugyanakkor a telefonkép jobb alsó sarkában pedig egy ugyanakkora fekete négyzet...mindenesetre érdekes, főleg, hogy ahogy mondtad, flash objektum...

    Ha le lehetne zárni a témát, most megtenném. Természetesen sorra merülnek fel kérdések, de azok egy másik témában kerülnek megvitatásra :)

    A javaslatokat köszönöm!
    Mutasd a teljes hozzászólást!
  • No, megnéztem.
    Ügyes vagy, ez már igenis jó lett!

    Skype, és FB gombokhoz nem tudok hozzászólni, sosem használtam őket, nem is nagyon érdekelnek.

    Amit mondani tudok, az:

    1. Az elválasztóvonalaknál div helyett használhatnál <hr />-t.
    A <hr /> (horizontal line) egy, az ajánlásban is szereplő HTML tag, teljesen szabványos, és pont arra való, amire most egynéhány div-et használsz: vizszintes vonal rajzolására. Gondolom igen nehéz lehetett kitalálni :)
    Ugyan úgy tudod formázni CSS segítségével, mint a div-et.
    Például:
    <div id="vonal4"></div>

    #vonal4{ height:1px; width:290px; background-color:red; position: relative; top: 4px; left: 0px; margin-left: 0px; margin-right: 0px; }


    Helyett:

    <hr id="vonal4" />

    #vonal4{ height:1px; width:290px; background-color:red; position: relative; top: 4px; left: 0px; margin-left: 0px; margin-right: 0px; border: 0px solid transparent; }

    A CSS csak egy border attribútummal bővül azért, mert a legtöbb böngésző a <hr />-nek ad egy keretet, ami nekünk nem kell.
    Erről ennyit.


    Van az oldalban egy ilyen:
    <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>

    Ez biztosan valami skype-os izébigyó script, nem tudom pontosan mire való, de azt látom, hogy létrehoz egy apró picike fehér négyzetet balra lent, ami ráadásul egy FLASH objektum. Azt onnan szerintem jó lenne kiírtani.

    A másik, ami nagyon fontos, kihagytad a karakterkódolást! Erre figyelni kell, ugyanis ha nincs megadva a karakterkódolás, akkor sokkal bizonytalanabb, hogy fognak megjelenni az oldalon a nemzeti karakterek.
    Előfordulhat, hogy egy külföldi látogató az ő, ű, í, stb. karakterek helyett csak kockákat, vagy krikszkrakszokat fog látni.

    Szóval, egy ilyet szúrj be a <head>-be:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Ezzel adod meg, hogy a karakterkódolás UTF8 legyen.

    Mellé meg mehet egy ilyen is:
    <meta http-equiv="Content-Language" content="hu" />

    Tovább.
    <img src="cellphone.gif" width="60" height="70"/>

    Ezt a telefonképet gondolom úgy is kiszeded, de azért szólok, hogy a méreteit annak is CSS-sel kellene megadni.

    Még annyit, hogy a <center>-t vedd ki, és helyette div-et rakj be, mert a center tag nem szabványos.

    Mutasd a teljes hozzászólást!
  • És megvan az első lájkolód :)

    A problémával csak később tudok foglalkozni, most dolgozom, de addig segíthetne más is...
    Mutasd a teljes hozzászólást!
  • Íme a linka link

    1. Skype gomb egy kép, nem tudtam megcsinálni, hogy az eredeti gomb ne mindig offline-nak mutasson.
    2. FB like gomb működik, de hülyét kapok, hogy ott van az az Admin page ha lájkolod, amire ha rákattintasz, akkor pedig az oldalon a FB rész alatti skype gomb lesz a FB admin oldal neve.
    3. Az admin oldal a <meta property="fb:admins" content="USER_ID"/> megfelelő user_id beillesztésével került fel, a sor utólagos törlése után sem tudom eltüntetni.

    Egyébként minden működik :) Lehet a divekből egy kicsit sok van.
    Mutasd a teljes hozzászólást!
  • Feltöltöm újra holnap. Valami történt és szétesett az egész, eltartott egy darabig, amíg újra összeraktam. Írok ha feltettem.
    Mutasd a teljes hozzászólást!
  • Törölted?

    Nem működik.
    Mutasd a teljes hozzászólást!
  • Készítettem egy weboldalt.
    Úgy tűnik minden böngészőben ugyanúgy néz ki, a divek nem csúsznak el sehol.

    Abból amit mondtál, én úgy gondolom, így kell csinálni egy weboldalt. Kérlek mondd el a véleményed :)

    http://gyakorlooldal5.fw.hu/uj.html
    Mutasd a teljes hozzászólást!
  • Hali!

    Ez így már túlmutat ezen a topikon. Konkrét, megoldandó kérdéssel/problémával - külön-külön - a Tudástárat keresd fel.

    Mutasd a teljes hozzászólást!
  • Olyat hogy tudok csinálni, hogy egy egy kép mellett és alatt úgy szerepel egy szöveg, mint egy iniciálé? Mivel a szövegnek stílust akarok adni, ezért divbe kell tenni (?), de akkor már csak a kép alatt, v mellett lehet.
    Az alábbi kódban még nincs divben, ezért a kép mellett kezdődik, majd a 4. sor már a kép alatt, csakhogy túl közel van a képhez...


    <div FB> <img src="Facebook_logo_ps.jpg" style="height:50px; width:50px; float:left;"/> Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Lájkolj minket a Facebookon!<br/><br/> </div>
    Mutasd a teljes hozzászólást!
  • Mikor és miért relatív és mikor abszolút pozícionálás?


    Megmondom őszintén, ezen a kérdésen még sosem gondolkodtam el. Én úgy vagyok vele, hogy ha elképzelem fejben az oldalam, már akkor tudom, hogy melyik div lesz absolute, melyik relative.
    De azt mondom, hogy ha nem tudjuk, mekkora lesz egy adott div mérete, akkor érdemes relativként létrehozni.

    A relatívnál más böngészőkben elcsúszhatnak a divek,


    Inkább más böngészőméretben szoktak elcsúszni a dolgok. Pl., ha te egy oldalt 1600x1200-as felbontásra tervezel, akkor elcsúszhat 1024x768-ban.
    Mutasd a teljes hozzászólást!
  • Igen, lejjebb, ezt a szót kerestem :)

    Mikor és miért relatív és mikor abszolút pozícionálás? A relatívnál más böngészőkben elcsúszhatnak a divek, ráadásul a floattal is szórakozni kell, az abszolút címzés jobbnak tűnik.

    Más kérdésem most nincs, dolgozom az oldalon :)
    Mutasd a teljes hozzászólást!
  • A különböző position beállítások nem kavarnak be a különböző böngészőkben, felbontásban?


    Attól függ.
    Position: absolute esetén nem valószínű, hogy változna a megjelenés felbontásváltás, vagy ablakméretezés esetén.
    Position: relative, és float: left|right; esetén már elcsúszhatnak a div-ek egymáson.

    A böngészők manapság egész jól kezelik a diveket, általában a position miatt nem szokott gond lenni ezzel.

    Melyiket ajánlod?


    Ezt ajánlom, tehát a második megoldásod:
    <div id="szalon" ></div> <div id="szoveg" > <div id="szovegA" ></div> <div id="szovegB" ></div> </div> <div id="footer" ></div>



    Próbáltam csinálni egy olyat, hogy a szoveg diven 3 div van. Kettő mondjuk négyzet alakú egymás alatt és egy téglalap alakú mellettük, mely magassága a két egymáson lévő négyzet magasságával egyenlő.




    #szoveg { position: relative; top: 0px; left: 0px; margin-left: auto; margin-right: auto; width: 800px; height: 300px; background-color: yellow; } #szovegA { /* Teglalap alaku */ position: absolute; left: 0px; width: 150px; height: 150px; background-color: blue; } #szovegB { position: absolute; left: 150px; height: 300px; width: 650px; background-color: red; } #szovegC { /* Teglalap alaku */ position: absolute; margin-top: 150px; width: 150px; height: 150px; background-color: green; }

    Ez most így nem lesz tökéletes, mert a #szovegB fekvő téglalap lesz, nem álló.

    Csakhogy itt az újabb div azt eredményezi, hogy a bal felső négyzet (top:0px) aljabb van, mint a mellette lévő téglalap.


    Nem "aljabb" van az, hanem lejjebb :P
    Egyébként az ötlet jó, de bekavar az a lorem ipsum részlet ("Duis feugiat, sapien sit amet..."). Tudod, miért?
    Mert a <p> (paragraph) tag-nek is van marginja. Emiatt, a bal felső négyzet a #bal divben lejjebb lesz.

    Egy ilyet írj be a style.css-be:

    p { margin: 0px; }
    Ezzel 0-ra állítod a <p> tag margóját, és máris szebb lesz az élet :)
    Bár ettől még nem lesz egyvonalban a bal felső négyzet, és a jobb oldali piros téglalap. Na oszt mé nem?
    Há azé, mer' a jobb oldali piros téglalapban a top nem 0px, hanem 10px!
    Írd át 0-ra, és voila, egyvonalban vannak a cuccok!

    Ha ezek után kissebbre veszed a #szovegA magasságát, mondjuk 470px-re, akkor egyforma magas lesz a piros téglalap a zöld + a szürke téglalappal.

    Egyébként, a "Duis feugiat, sapien sit amet..." minden sorát miért raktad külön paragrafusba? Egyáltalán, minek raktad paragrafusba? :)

    Amúgy ha engem kérdezel, én így csináltam volna:


    #szoveg { width: 800px; margin-left: auto; margin-right: auto; } #szovegA { position: relative; width: 400px; height: 400px; background-color: gray; float: left; font-family: Arial, Verdana, Tahoma; font-size: 12px; } #szovegB { position: relative; margin-left: 400px; width: 400px; height: 800px; background-color: red; } #szovegC { position: relative; top: -400px; width: 400px; height: 400px; background-color: green; float: left; }

    <div id="szoveg"> <div id="szovegA"> Duis feugiat, sapien sit amet adipiscing commodo, quam dui facilisis purus, id imperdiet eros eros dapibus risus. Curabitur metus lectus, adipiscing at accumsan vel, mollis vel dui. Curabitur at tortor urna, vitae fermentum felis. Pellentesque nec sapien nec dui venenatis congue et dignissim nisl. Integer ac nibh pharetra leo sollicitudin ornare. </div> <div id="szovegB"></div> <div id="szovegC"></div> </div>

    mod.. nézd el nekem, ha picit nehezen értelmezhető, nagggyon másnapos vagyok
    Mutasd a teljes hozzászólást!
  • Azt hiszem sikerült megértenem. Csináltam több oldalt is, mind jó. Tapasztalataim:

    A különböző position beállítások nem kavarnak be a különböző böngészőkben, felbontásban?
    A szöveg divre szeretnék tenni egy szöveget és egy képet. Ezt jelenleg
    szovegA és szovegB-nek neveztem el, és position:absolut beállítással
    ráhelyeztem a szoveg divre.

    #szovegA { position: absolute; top: 0px; left: 0px; margin-left: 460px; margin-right: auto; margin-top:470px; width: 440px; height: 280px; background-color: yellow; } #szovegB { position: absolute; top: 0px; left: 0px; margin-left: 930px; margin-right: auto; margin-top:470px; width: 310px; height: 280px; background-color: red; float:right; }

    A html kódben a divek egymás alatt vannak:
    <div id="szalon" ></div> <div id="szoveg" ></div> <div id="szovegA"></div> <div id="szovegB"></div> <div id="footer" ></div>


    Szebb megoldásnak tűnt elsőre az alábbi elhelyzés:
    <div id="szalon" ></div> <div id="szoveg" > <div id="szovegA" ></div> <div id="szovegB" ></div> </div> <div id="footer" ></div>

    Így az absolut pozíció nem a képernyő sarkától, hanem a szoveg div-től számít. Így is rá tudtam helyezni a diveket a szoveg divre.
    Megcsináltam position:relative-vel is, ekkor már játszott a top és a float is.

    #szovegA { position: relative; top: 10px; left: 0px; margin-left: 10px; margin-right: auto; width: 440px; height: 280px; background-color: yellow; float:left; } #szovegB { position: relative; top: 10px; left: 0px; margin-left: 480px; margin-right: auto; width: 310px; height: 280px; background-color: red; }


    Melyiket ajánlod?
    Valamint miért jobb diveket használni, mint táblázatot?
    Próbáltam csinálni egy olyat, hogy a szoveg diven 3 div van. Kettő mondjuk négyzet alakú egymás alatt és egy téglalap alakú mellettük, mely magassága a két egymáson lévő négyzet magasságával egyenlő. Nem sikerült. Aztán arra gondoltam, hogy a két négyzet alakút egy divbe rakom, ez kap egy float:left-t, és és mellé kerül a téglalap. Csakhogy itt az újabb div azt eredményezi, hogy a bal felső négyzet (top:0px) aljabb van, mint a mellette lévő téglalap. Erre tudsz ötletet adni?
    (link)
    (A szovegA és a szovegC ami mondjuk négyzetalakú)

    kód:

    <div id="bal"> <div id="szovegA" > <p> Duis feugiat, sapien sit amet adipiscing commodo, quam dui facilisis purus, id imperdiet eros eros dapibus risus. Curabitur metus lectus, adipiscing at accumsan vel, mollis vel dui. Curabitur at tortor urna, vitae fermentum felis. Pellentesque nec sapien nec dui venenatis congue et dignissim nisl. Integer ac nibh pharetra leo sollicitudin ornare. </p> <p> Sed et justo vel felis accumsan feugiat posuere ut arcu. Etiam pulvinar lorem non leo euismod volutpat. Integer condimentum elementum ligula vel venenatis. Sed ut dolor turpis. Quisque eget nisi ipsum, ut posuere mauris. </p> <p> Aliquam eu lectus dolor. Nam enim metus, vestibulum vel eleifend et, dapibus eu nibh.</p> </div> <div id="szovegC" ></div></div> <div id="szovegB" ></div> #bal { float:left; } #szovegA { position: relative; top: 0px; left: 0px; margin-left: 10px; margin-right: auto; width: 360px; height: 470px; background-color: grey; } #szovegB { position: relative; top: 10px; left: 0px; margin-left: 400px; margin-right: auto; width: 390px; height: 630px; background-color: red; } #szovegC { position: relative; top: 20px; left: 0px; margin-left: 10px; margin-right: auto; width: 360px; height: 110px; background-color: green; }
    Mutasd a teljes hozzászólást!
  • Amit tegnap elfelejtettem írni, hogy a #menu divben, a linkek tulajdonságainál meg kellene adni a betütípus-családot (font-family), illetve a méretet is (font-size), mégpedig azért, mert alap esetben a böngésző egyedi beállítású betütípussal jeleníti meg a linkeket.
    Ki is próbálhatod a saját oldaladon. Én Operával teszteltem, az Ariallal jelenítette meg a linkeket, a Chrome pedig valamelyik talpas betütípussal (ha jól láttam, Times New Roman).
    Mutasd a teljes hozzászólást!
  • A felső szürke háttér pici


    A szürke háttér tartalmazza a logo.png nevű képet, semmi mást. Maga a szürke szín színkóddal van megadva.
    A logo valóban pici, mindössze 399x76 pixel méretű.

    ahogy a szalon3.jpg is, hiába van a stílusdefinícióban megadva más méret.


    Amikor div-nek (vagy bármilyen HTML element-nek) hátteret állítasz be, akkor a HTML szabvány szerint nem méretezi át a hátteret (látom, ezt írtad te is). Egyszerűen ilyen a szabvány, ez van...
    Ezért, a szalon3.jpg-t én átméreteztem egy programmal 800x300 pixel méretre. Ha megnézed a te oldalad, és az enyém, látszik is a különbség.

    Divek pozícionálásával kapcsolatban azt szeretném kérdezni, hogy a position az egymáshoz képesti pozíció?


    Ez jó kérdés.
    Ha azt adod meg, hogy position: fixed; akkor a böngésző ablakához képest lesz elhelyezve a div. Így lehet megoldani azt, hogy ha lefele vagy felfelé görgeted az oldalt, akkor is mindig az ablakban marad a div.
    Ez esetben a "left", "top", "right", "bottom" értékek triviálisan a böngésző ablakához képest lesznek értelmezve.

    Ha position: absolute; akkor ahhoz szülő dívhez viszonyítja az elhelyezést, amelyiknél van megadva "position" tulajdonság; vagy ha nincs ilyen div, akkor a legutolsó, "position: static;" tulajdonságú divhez.
    Ez esetben a "left", "top", "right", "bottom" értékek triviálisan a szülő divhez képest lesznek értelmezve.

    Ha position: relative; akkor - tudtommal - az előző divhez (elemhez) képest igazítva jelenik meg a div.
    Tehát, ha van két div-ed, az egyik position: absolute és left értéke 50px; a másik position: relative, és left értéke 20px; akkor a második div left értéke valójában 50+20, tehát 70px lesz.

    Ha position: static; akkor a div úgy lesz elhelyezve, ahogy a dokumentumban leírtad. Azaz, ha van előtte egy kép (<img ...>), akkor a kép alatt lesz a div. Ha a div mögött van egy kép, akkor a kép felett lesz a div. Ez esetben a "left", "top", "right", "bottom" (de még a "z-index" is) figyelmen kívül lesz hagyva.

    Ezen kívül a div-nek lehet olyan tulajdonsága is, hogy "float" (de ez csak relatív pozíciójú div esetén érvényes!). Például, "float: left" esetén a div balra lesz igazítva. "float: right" esetén jobbra lesz igazítva (az általam készített oldaon a #menu így van jobb igazítva).
    Olyan, hogy "float: center", NINCS!
    Ehelyett alkalmazandó: " margin-right: auto; margin-left: auto; ". Ez esetben középre lesz igazítva a div.

    És még van olyan tulajdonság is, hogy "clear".
    Ez olyan, mint pl. a Word-ben a szöveg körbefuttatása. Azt adja meg, hogy az adott div-et (vagy bármilyen elemet) melyik oldalról vehet körbe más elem.
    Tehát, ha van egy div-ed, és a "clear" tulajdonságát "none"-ra állítod, akkor bármely oldalról körbeveheti bármi. Ha "clear: left;", akkor a div-et bal oldalról nem veheti körbe semmi.
    Csinálj két relatív div-et, és próbálgasd ki.

    A lényeg, hogy megértsd a div-ek lényegét, mert akkor a weboldalak felépítését is át fogod látni, legalábbis nagyjából.

    Itt van egy kis aranyos oldal, most találtam, lehet hogy segít.
    Mutasd a teljes hozzászólást!
  • Valami ilyesmi magyarázatot reméltem, nagyon köszönöm.
    Kezdem érteni, de hibás (nekem).
    A felső szürke háttér pici, ahogy a szalon3.jpg is, hiába van a stílusdefinícióban megadva más méret. Egyébként az egész header a szürke és a beauty palace felirat, azért volt 4 belőle, mert túl kicsi volt és a html sokszorozta. Talán hasonló a probléma a szalon3.jpg-vel is, mert az is pici. Ha a bg-t repeatre állítom kitölti a 800x300 méretet, de több pici képpel.
    Nem értem miért nem nyújtja ki a html a képet.

    A szalon3.jpg alatt hatalmas űr van.

    Valamint ha az alsó 3 divet úgy írom ahogy a feltöltött fájl forrásában látszik, akkor már tényleg katyvasz van:
    <div id="szalon" />
    amig div-vel zárom be, csak a fenti hibák jelentkeznek, ha a tiéddel, akkor a kép is 2x jelenik meg...

    Divek pozícionálásával kapcsolatban azt szeretném kérdezni, hogy a position az egymáshoz képesti pozíció? Mert a te beállításaid mellett szétcsúszik, de ha a #szoveg top positionjét 300px-ről 0-ra állítom, egyből feljebb ugrik.
    Mutasd a teljes hozzászólást!
  • Ok, én csak segíteni akarok.
    Megnéztem az új verziót.
    Ami első körben hiányzik, az a DOCTYPE! Ezt bele kellene írni.
    A stílusdefiníciókat külön fájlba illene írni, de az talán még annyira nem fontos.

    Soronként végigmegyek rajta, és leírom, szerintem mi nem a legjobb benne, és én hogy csináltam volna.

    <div class="header"> <table background="index_files/uj_felso.jpg" width="800" height="150" border="1"> ...

    A "header" divbe nem kell a táblázat. A divnek meg lehet adni a méreteit, a hátteret, és a bordert is, a legegyszerűbben így:

    <div class="header" style="position: relative; margin-left: auto; margin-right: auto; width: 800px; height: 150px; background-image: url('uj_felso.jpg'); background-repeat: repeat; border: 1px solid black;">

    A táblázat pedig egyuttal törölhető.

    Következő.
    Fent a div-ben táblázattal akartam a jobb felső sarokba tenni a menüt úgy, hogy az egész tábla háttere egy jpg ami két részből áll: szürke bg+Beauty Palace felirat.


    Akkor, és csak akkor, ha a Beauty Peace feliratnak ugyan úgy kell ismétlődnie, ahogy jelenleg a te oldaladon látható, akkor én azt csinálnám, hogy a "header" divben ismételném a hátteret (backround-repeat: repeat) úgy, hogy az egyben helyre is legyen igazítva (background-position: 5px 75px;).

    jobb felső sarokba tenni a menüt


    Ez nagyon egyszerű, a megoldás: float: right;

    Következő.
    <a href="Nyitolap.html" class="fomenu" style="color:#282828;">Nyitolap</a> ...

    Látom, itt mindhárom menüpont azonos osztályba tartozik.
    Ez nem rossz, de! Mivel mindhárom link a "menu" osztályú div része (gyermeke), ezért (majdnem) ugyan azt a hatást éred el akkor, ha a "menu" osztály linkjeinek stílusát határozod meg.
    Így:
    #menu {} /* Ez maga a menu class */ #menu a {} /* A "menu" divben levo linkek stilusa */ #menu a:hover {} /* A "menu" divben levo, eppen "egermutato felette" linkek stilusa */ #menu a:active {} /* A "menu" divben levo, eppen aktiv linkek stilusa */ stb...

    Lépjünk tovább.
    Következő div a "szalon", amelyben egy kép van, a "szalon3.jpg".
    Szerintem inkább adjuk meg a divnek háttérként a szalon3.jpg-t, tegyük a helyére a div-et, és mindezt külön stílusdefinícióban:

    #szalon { position: relative; top: 10px; left: 0px; margin-left: auto; margin-right: auto; width: 800px; height: 300px; background-image: url('szalon3.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: 0px 0px; }

    Igaz, ebből a left, a background-position elméletileg elhagyható, de én ki szoktam tenni, biztos ami biztos alapon :)

    Következő div a "szoveg". Itt szintén ugyanez a játék, annyi különbséggel, hogy háttérkép nélkül megy a dolog, hisz a háttér homogén, ezért teljesen felesleges ennek egy külön kép:

    #szoveg { position: relative; top: 300px; left: 0px; margin-left: auto; margin-right: auto; width: 800px; height: 300px; background-color: #262626; }

    Utolsó divünk a "footer":

    #footer { position: relative; top: 300px; left: 0px; margin-left: auto; margin-right: auto; width: 800px; height: 100px; background-color: #757772; }

    A kész művet feltöltöttem ide!

    (egyébként XHTML 1.0 valid, csak a freeweb belepakolja a hülye scriptjeit, ezért van baja vele a validatornak...)
    Mutasd a teljes hozzászólást!
  • http://gyakorlooldal5.fw.hu/Nyitolap.html

    Ez volt az első verzió, táblázatos formában. Webre feltöltve kicsit felcsúszott. Alul a fehér háttéren is van fehér szinű szöveg, ez az alsó szürke footer részre került volna. (került még nálam, ahol jól néz ki)

    http://gyakorlooldal5.fw.hu/uj.html

    Ez lenne a második verzió alapja, divekkel. Szétszedtem az egész képet, ami háttérként funkcionál az első linknél, és külön divekben beillesztettem.
    Nincs már üres sor, vmi kavar volt, de annyira nem vagyok hülye, hogy <br/>-t hagytam volna benne.
    Fent a div-ben táblázattal akartam a jobb felső sarokba tenni a menüt úgy, hogy az egész tábla háttere egy jpg ami két részből áll: szürke bg+Beauty Palace felirat.
    Még küszködök vele, hogy ilyen darabos lett, csak gyorsan összedobtam.

    Így most jó úton járok?

    Egyébként fujime legközelebb próbáld meg értelmezni amit írnak, mert olyan kérdésekre adtál arrogáns választ, amit fel sem tettem.
    Mutasd a teljes hozzászólást!
  • Ha legalább egy képet mutatnál arról, hogy fest az oldalad, akkor többet tudnánk segíteni.

    Ahogy mondtam ps-ben szerkesztettem a háttereket és ezekre táblázatokkal a menüket, szövegeket.


    El lett mondva, hogy nem táblázattal építünk fel egy weboldalt!
    Miért erőlteted annyira a táblázatot?
    A táblázat táblázatos adatok megjelenítésére való, nem másra.

    Úgy gondolom, hogy az alapötlet jó volt, csak fel kell darabolni a hátteret és divekként berakni, így felépítve az oldalt. Ezt jónak találjátok?


    Nem, semmiképp! Ugyanis semmi garancia nincs arra, hogy például nagyításnál nem csúsznak egymásra a divek.

    Csináltam egy ilyet is, de egyrészt az egyes divek között üres sor van

    Miért? A divek közé írtál pár <br/>-t?

    sak táblázattal tudok a divekre más objektumokat (pl. link) tenni

    Miért?
    A
    <div><a href="#">asd</a></div>
    forma miért nem tetszik neked?

    az egész háttér világoskék, a weblap pedig középen mondjuk A4-es méretű, és annak is van háttere.


    Világoskék body background, középre egy div más háttérszínnel. Miért nem megy?
    Mutasd a teljes hozzászólást!
  • Köszi az eddigieket. Összedobtam egy alapweboldalt. Ahogy mondtam ps-ben szerkesztettem a háttereket és ezekre táblázatokkal a menüket, szövegeket. Köben rájöttem, hogy ezzel az a probléma, hogy a háttér statikus, tehát ha egy oldalra több szöveg kerül, akkor a háttéret ps-ben kell módosítani. Ráadásul két hátterem nem lehet így, azaz pl az egész háttér világoskék, a weblap pedig középen mondjuk A4-es méretű, és annak is van háttere. Úgy gondolom, hogy az alapötlet jó volt, csak fel kell darabolni a hátteret és divekként berakni, így felépítve az oldalt. Ezt jónak találjátok? Csináltam egy ilyet is, de egyrészt az egyes divek között üres sor van, másrészt csak táblázattal tudok a divekre más objektumokat (pl. link) tenni, mondjuk a div-ben van a tábla, annak a háttere a jpg, és így már a cellákba lehet pakolni. Ezt jó gondolatmenet?
    Tehát a problémám az, hogy hiába ismerem a html parancsait, nem ismerem a weboldalak felépítését. Tudnátok segíteni?
    Mutasd a teljes hozzászólást!
  • Nagyon robosztusnak találom a sima html-t...

    Erre való a CSS. 2 részből áll a weblap programozás:
    1) Szerver oldali logika
    2) Kliens oldali logika

    Amivel te akarsz foglalkozni, az a kliens oldali logika, így nem is nagyon kell szerver oldali nyelvekbe(ASP, PHP, stb) belemenned.
    Az én javaslatom weblap készítés megtanulásához:
    1) HTML
    2) CSS
    3) JavaScript

    Ha már nagyon jól mennek, akkor jöhet a PHP és ha már az is megvan, akkor nézz utána olyannak, hogy Ajax. És emellé más nem is kell egy weblaphoz - jobb esetben.
    Ami a flash-t illeti - én személy szerint azért nem foglalkozok vele, mert a tartalma statikus( egyszer megírod, akkor nem olyan könnyű átszerkeszteni, mint egy CSS fájlt ), több helyet foglal és általába csak díszítő szerepe van az oldalon( ott pörög, meg csipog, meg forog és elvonja a figyelmemet az oldalról - lásd flash reklámok ).
    Mutasd a teljes hozzászólást!
  • Hali!

    Annyi trükk volt a CSS-ben, hogy a body-nak megadtam a [...] block és relative értékeket, hogy a többi elem is örökölje...


    Pontosan melyik elemek öröklik a
    display: block;
    és
    position: relative;
    tulajdonságokat, ha a
    body
    -nak megadod ezeket?

    Mutasd a teljes hozzászólást!
  • Később a CSS persze külön file-ba érdemes tenni. És akkor a HTML szép olvasható marad, és könnyen rá lehet jönni, hogy az adott cél elérésében mit is kell módosítani.

    Annyi trükk volt a CSS-ben, hogy a body-nak megadtam a
    body { background: #EDE; display:block; position:relative; color: #FFF;}


    block és relative értékeket, hogy a többi elem is örökölje, így rövidebb lesz CSS , szintén ezt használtam ki a 3 egymás alatti div szélesség megadásánál.
    Mutasd a teljes hozzászólást!
  • Mint említettem a
    <table>
    nevű dolgot egyenlőre felejtsd el. Semmi szükség nincs rá, csak bonyolítja a web szerkesztést.

    ismerkedj meg a
    <div>
    -ekkel. Az alényeg, hogy ezek adják az oldal struktúráját, és a CSS-ben írod le, hogy hogyan nézzen ki az egész. pld:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <head> <style type="text/css"> * { padding: 0; margin: 0; } a img, :link img, :visited img, :hover img { border:none; } :link,:visited { text-decoration: none; } h1, h2, h3, h4, h5, h6, pre, code { font-size: 10px; } ul,ol { list-style: none; } body { background: #EDE; display:block; position:relative; color: #FFF;} .fomenu { width:auto; background: #532; padding: 5px; } #menu { height: 22px; } #menu li { float:left; } #menu li a:hover{color: #EEE; background: #643;} #menu li a {color: #CFC; } #fakeIMG, #demoText, #footer { width: 400px; } #fakeIMG { height:300px; background: #747; } #demoText { height:250px; background: #532; } #footer { height:30 px; background: #747; } </style> </head> <body> <div id=menu> <ul> <li><a href="index.hu" class="fomenu">Nyitólap</a></li> <li><a href="index.hu" class="fomenu">Szolgáltatásaink</a></li> <li><a href="index.hu" class="fomenu">Elérhetőség</a></li> </ul> </div> <div id=fakeIMG></div> <div id=demoText><p>Ez itt a demó szöveg</p></div> <div id=footer>Ne másold le </div> </body>

    Nem használtam a képed, de azt mondjuk egy megfelelő div-be berakhatod background-al is ha nem változik a kép.


    Végül használj rendes DOCTYPE-ot, enélkül nem működik mindenhol ugyanúgy az oldal (az Opera pont érzékeny volt erre 2 éve)

    pld.:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd" >


    Mutasd a teljes hozzászólást!
  • Hmm, köszi, nem is tudtam, hogy van ilyen. Ez tényleg olyan, mint a firebug :) Első ránézésre csak a js konzol tűnik használhatatlannak azzal, hogy csak egy sort lehet beírni.
    Persze nem akarok panaszkodni, sokat segít egy ilyen, mikor 6 böngészőben pixelezgeted a layout-ot
    Mutasd a teljes hozzászólást!
  • Az a legnagyobb problémám a html-lel, hogy nem tudom az egyes elemeket oda tenni ahova szeretném. Nyilván ezért fordulnak sokan grafikus programokhoz. De igyekszem, mert belátom, hogy jogos amit mondtok. Ráadásul a munkahelyemen nem futnak a portable verziók, a notepad++ meg ingyenes :)

    Tehetek fel alapkérdések szerkesztéssel kapcsolatban? Hiába mentem végig a w3schoolson ezek csak önálló munka sor merülnek fel.

    Az alábbi két címen találjátok a rövid kódot és a hozzátartozó képet (ez fontos hozzá). Kérlek segítsetek megválaszolni az alábbi kérdéseim:

    1. A hátteret PS-ben készítettem. Ezt beraktam háttérnek, majd táblázattal felosztottam a teret. Ezt így kell csinálni?

    2. A hátteret kell a táblázathoz igazítani? Alapból a háttér lejjebb van, mint a tábla, ezért igazítottam feljebb css-sel.

    3. Hogyan tudom a felső menüt feljebb vinni? Hiába alignoltam, semmi változás, pedig 10px a szövegméret és 20px a cella magasság.

    4.A háttér 500px magas, a cellák magassága ennél kevesebb. Ezt mi okozza, netán a borderek?

    5.Az oldal a Notepad++-ról indítva pici. A 400x500 méretet ps-ben változtassam először? A fájlra duplakattal indítva mégkisebb.


    Háttérkép
    html fájl
    Mutasd a teljes hozzászólást!
  • Az Operába alapból bele van építve egy DragonFly nevezetű cucc, ami kb azt tudja, mint a FireFox-os FireBug. Csak ez nem egy plugin, hanem benne van alapban a böngészőben és a böngészőt készítő cég fejleszti folyamatosan. Illetve ez többnyelvű (többek közt magyar).
    Mutasd a teljes hozzászólást!
  • Táblázat használatát HTML-ben csak direkt táblázatos adatok megjelenítésére érdemes használni.

    Ha tetszőleges grafikus menüt akarsz HTML-ben csinálni, egyetlen kép felhasználásával úgy, hogy a HTML kód olvasható maradjon, akkor nézd meg a url=http://www.vegetarianus.info/domains/germo/]régi oldalam[/url] menüjét, azt simán CSS/HTML -ben írtam (szövegszerkesztőben az egészet // nem is dinamikus az oldal).

    Annyi a lényeg, hogy a HTML kód szépen olvasható maradt.
    Egyetlen kép van az egész menü mögött, ami kétszer olyan magas mint maga a menü, és alul van az over állapot. Illetve ugyanazt használom annak a jelzésére, hogy melyik az aktív oldal.
    amit a

    <li id=s1></li>
    sor határoz meg, a második oldalon ugye
    <li id=s2></li>

    <div id=menu> <ul id=menuul> <li id=s1></li> <li id=m1><a href="index.html" ><span>Germo</span></a> </li> <li id=m2><a href="programok.html" ><span>Programok</span></a> </li> <li id=m3><a href="grafikak.html" ><span>Grafikák</span></a> </li> <li id=m4><a href="animaciok.html" ><span>Animációk</span></a> </li> <li id=m5><a href="kiadvanyok.html" ><span>Kiadványok</span></a> </li> <li id=m6><a href="karrier.html" ><span>Karrier</span></a> </li> </ul> </div>

    Az egész menü működéséről a CSS gondoskodik, amit mindig a megfelelő képszeletet rakja ki. Az egész módszerről van egy tutorial a tutorial.hu-n, de már nem emlékszem hol.


    Mutasd a teljes hozzászólást!
  • HTML-be nagyon fontos a táblázatos felépítés tanulmányozása, átirányítás, stb. az alapműveletek

    táblázatos felépítés, átirányítás meg alapműveletek?
    még a táblázatos felépítés oké, de meta refresh? én életemben kétszer ha használtam, mégsem mondanám, hogy nem ismerem eléggé a html-t. Alapműveletek alatt mire gondolsz? Mi számít műveletnek egy leíró nyelvben?

    Ha segíteni akarsz, légy specifikusabb, mert egy kezdőnek az kell, hogy megértse, mire célzol.

    ha mesterművet akarsz készíteni, vagy esetleg nagyobb látogatottságú oldalakat, ott célszerű saját magad kialakítani felhasználói felületet

    Na ez mi? Grafika? És ha nem nagy a látogatottság, akkor menjen a template?

    skogk...: wysiwyg programokkal az a baj, hogy ha kezdőként használod, nem tanulod meg a html-t belőle, ha nem ismered a html-t, nem fogsz tudni komplexebb javascripteket írni, de még szerver oldalon sem fogod tudni a megfelelő html oldalt előállítani dinamikusan, mert mondjuk egy felsorolásnál nem fogod tudni, hogy mit rakj a cikluson belülre.
    Továbbá összeraksz DW-ben egy oldalt, hogy jól néz ki, mert egérrel mindent oda ráncigáltál, ahova kell, aztán a belső tartalmat kicseréled szerver oldalon egy adatbázisból jövő dologra, és rájössz, hogy húú, a blog szövege a dobozból kilóg, meg a jobb hasáb nem addig ér, mint kellene, stb.

    A linkelt oldalon a menü nem egy nehéz dolog <ul><li>, előre megrajzolt háttérképpel. De ha megismerkedsz a html-lel, egy ilyet magad is meg fogsz tudni oldani.

    Ja, és +1 a firefox-firebug -ra.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd