WebPillangó főoldal
Oldalak: [1] 2 3 ... 8   Le
  Nyomtatás  
Szerző Téma: CSS, avagy hogyan legyen ízléses az oldalad  (Megtekintve 67681 alkalommal)
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Dátum: 2007. 09. 08. - 19:04:52 »

Sokan nem készítnek ízléses és szép oldalakat, vagy még mindig a html kódban, rossz esetben a tagokban formázzák az oldal külalakját! De miért is? Van erre külün nyelvezet, szépen, külső állományból, Cascading Style Sheet, avagy a jó öreg CSS.
Kérdésed van, tedd fel!  Kacsint
Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #1 Dátum: 2007. 10. 23. - 15:08:37 »

Bence kérdezte, hogyan lehet legördülő menüt készíteni, CSS segítségével. Nos, itt egy módszer. Az nagy divre rá kell tenni egy clip értéket, hogy vágja le akkorára, amilyen magas a menü látható része legyen. A hover értéke pedig legyen clip mentesítő, hogy látszoljon az egész menü.
IE alatt kell egy kis hack, mivel nem ismeri a hovert csak az a elemeken. Ez egy htcvel kijátszható, sok van belőle, csak rá kell keresni a googleba.
Naplózva
Beni
Új tag
*
Nem elérhető Nem elérhető

Hozzászólások: 4


« Válasz #2 Dátum: 2007. 10. 23. - 15:17:04 »

hali, kifejtenéd ezt bővebben? ennyire sajnos még nem vágom a css-t:( , de majd igyexem tanulni.
Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #3 Dátum: 2007. 10. 23. - 18:42:59 »

Van szerkesztés gomb is!!! Nem szabad hatvanhat gondolatot 120 hozzaszólásban írni! Szedd össze a gondolataidat, és csak akkor írd meg a hozzaszólásod, vagy használd a szerkesztés gombot.
A megoldás egyszerű. Ahol találtad a lefele nyíló menüt, annak átírod a CSS kódját, hogy ne lefele tolja el az egészet, hanem oldalra. Ha jól látom ez végzi az egészet:
Kód:
ul li ul {
  background-color: #D9E7EB;
  display: none;
}
ul li:hover ul {
  display: block;
}
Itt a másodikat kell neked átírni, úgy hogy oldalra menyjen, pl.
Kód:
ul li ul {
  background-color: #D9E7EB;
  display: none;
}
ul li:hover ul {
  display: block;
  position: relative;
  left: 200px;
}
Naplózva
Beni
Új tag
*
Nem elérhető Nem elérhető

Hozzászólások: 4


« Válasz #4 Dátum: 2007. 10. 23. - 19:29:23 »

Szia, kösz szépen a segítséget, bocs a sok "szemétért". sietős volt ezért irkáltam be sokaszor. Köszi szépen csáá
Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #5 Dátum: 2007. 10. 23. - 21:15:47 »

Nem gond, az ha sietős, csak van egy fórum etikett  Kacsint Örülök, hogy segíthettem.
Naplózva
TreamX
Tag
**
Nem elérhető Nem elérhető

Hozzászólások: 165


WWW
« Válasz #6 Dátum: 2007. 10. 24. - 13:16:46 »

Ahogy ígértem belinkelem itt is, és lesz pár kérdésem Mosolyog

http://amwebdesign.extra.hu/treamx/

Szóval azt szeretném tudni, hogy ha copyzom a bal menürészt (a html fileban) és bemásolom alá, akkor azt mért mellé teszi? És hogy tudnám a Navigáció szöveget a kép közepére tenni? mármint magasságilag.
Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #7 Dátum: 2007. 10. 24. - 18:20:30 »

Előszöris, hibás a HTML, nem zártad be a CSSt meghívó tagot:

Kód:
<link rel="stylesheet" type="text/css" media="all" href="style.css"

Mit duplázoll? a #leftmenutartalom részt, vagy egyebet? Légyszíves legyél pontosabb. IDs elemeket nem duplázhatsz, mert az ID, az egyedi lehet. Ha több elemnek akarsz hasonló kinézetet adni, akkor azt class-szal kell tedd. A CSSben az osztályokat . (pont) kezded.
Naplózva
Beni
Új tag
*
Nem elérhető Nem elérhető

Hozzászólások: 4


« Válasz #8 Dátum: 2007. 10. 24. - 18:21:30 »

Ahogy ígértem belinkelem itt is, és lesz pár kérdésem Mosolyog

http://amwebdesign.extra.hu/treamx/

Szóval azt szeretném tudni, hogy ha copyzom a bal menürészt (a html fileban) és bemásolom alá, akkor azt mért mellé teszi? És hogy tudnám a Navigáció szöveget a kép közepére tenni? mármint magasságilag.


Hali. én más fajta menüt készítenék.Listásat css-sel.

látogasd meg a köv weblapot:
http://www.netoktato.hu/?func=tut&act=view&cat=6&id=193

konkrét példa van és el is magyarázza hogy mit miért csinált.
Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #9 Dátum: 2007. 10. 24. - 19:26:38 »

Meg kell hagyni, jó link Mosolyog Kis nosztalgia érzésem akadt, valamikor még lehettem volna (bár szerintem most is be tudnék jutni) szerkesztőnek az említett oldalra.  Mosolyog
Naplózva
TreamX
Tag
**
Nem elérhető Nem elérhető

Hozzászólások: 165


WWW
« Válasz #10 Dátum: 2007. 10. 25. - 08:35:17 »

közben az oldalt lehet nézegetni egyfolytába frissítem. A bejelentkezés gombot hogy tudnám lecserélni? Mosolyog
Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #11 Dátum: 2007. 10. 25. - 09:15:51 »

Eloszor is, koszonom, hogy kitetted a linkem. A gombot sima CSS segitsegevel le lehet cserelni:

Kód:
.osztaly{
  background-image: url(kep.png);
}
Naplózva
TreamX
Tag
**
Nem elérhető Nem elérhető

Hozzászólások: 165


WWW
« Válasz #12 Dátum: 2007. 10. 25. - 09:17:35 »

Hát nincsmit Mosolyog ezzel fog foglalkozni az oldal, úgyhogy szerintem ennyi kell Mosolyog

Kód:
.osztaly{
  background-image: url(kep.png);
}
és a html-ben pedig

Kód:
<h1>
Felhasználónév:&nbsp;<input type="text" size="15" name="name">&nbsp;Jelszó:&nbsp;<input type="password" size="15" name="password">&nbsp;<input name="button" class="osztaly" type="button" onclick="alert('Hamarosan...')" value="Bejelentkezés">
&nbsp;<font color="#000000" align="right" onclick="alert('Hamarosan...')" size="3px">Regisztráció</font></h1>
vagy hogy? Mosolyog

Megvan, sikerült. köszönöm Mosolyog

És azt hogy tudom ha a regisztráció felé viszem az egeret ne legyen sárga? mer én nem irtam be olyan kódot Mosolyog
« Utoljára szerkesztve: 2007. 10. 25. - 09:21:46 írta TreamX » Naplózva
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #13 Dátum: 2007. 10. 25. - 09:20:34 »

Igen, igy kell. Mi lenne, ha megprobalnad, es ha nem mukodik, csak akkor kerdeznel ra Mosolyog
Naplózva
dying.inside

Új tag
*
Nem elérhető Nem elérhető

Hozzászólások: 46


« Válasz #14 Dátum: 2008. 02. 16. - 15:57:43 »

nos, a webpillangón van egy írás "Dinamikus gomb készítése CSSt használva" címmel.
szóval DeX észrevétele szerint ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás. nos ezt én is észrevettem ezért írtam egy egyszerűbb javascript kódot amivel működik. (cssre most így nem lesz szükség.)
szóval a kód:
Kód:
<A HREF="link"><IMG SRC="alap kép" onMouseClick="this.src='ha rákattintanak, ez látszik '; return true;" onMouseOut="this.src='alap kép'; window.status=''; return true;"></A>
szóljatok ha van valami bibi benne ;]
Naplózva

[ dying.inside ]
tudastarlap.extra.hu
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #15 Dátum: 2008. 02. 16. - 17:08:28 »

Ez igy mind szep es igaz Mosolyog A gond csak az, hogy azert CSS gomb, hogy CSSt hasznaljon es ne JS-t, amit joparan letiltanak/nem hasznalnak Mosolyog Az esztevetel jo Kacsint
Naplózva
AAron

Új tag
*
Nem elérhető Nem elérhető

Hozzászólások: 96


WWW
« Válasz #16 Dátum: 2008. 02. 26. - 21:01:04 »

Hm.
Érdekel ez a CSS dolog engem...
Tud ajánlani nekem valaki egy oldalt vagy valamit ahol elsajátíthatnám alap szinten ezt? A google már dobott nekem találatot, de olyat kérnék ami használható, és Ti is megbíztok benne...
Php programot, űrlapokat is tudok vele dizájnolni? gondolom igen...
Írhatom egyől a programot tartalmazó php fájlba, vagy egy külső css fájlt kell meghívnom?
« Utoljára szerkesztve: 2008. 02. 26. - 21:03:04 írta AAron » Naplózva

üdv.
Aaron
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #17 Dátum: 2008. 02. 26. - 22:11:13 »

PHP szerveren fut ... a PHP HTML-t general, amit viszont mar igen, tudsz formazni CSSel. En ezt ajanlom, ha az alapoktol akarja valaki megtanulni:
http://www.w3schools.com/css/default.asp
Naplózva
AAron

Új tag
*
Nem elérhető Nem elérhető

Hozzászólások: 96


WWW
« Válasz #18 Dátum: 2008. 02. 26. - 22:26:52 »

Köszönöm a gyors választ. Akkor nekilátok.
Naplózva

üdv.
Aaron
Tupacko
WebPillangó

Adminisztrátor
Törzstag
*****
Nem elérhető Nem elérhető

Hozzászólások: 966


WWW
« Válasz #19 Dátum: 2008. 02. 27. - 18:14:16 »

Szivesen, jo tanulast!
Naplózva
Oldalak: [1] 2 3 ... 8   Fel
  Nyomtatás  
 
Ugrás: