- Apple iPhone 16 Pro - rutinvizsga
- Samsung Galaxy A56 - megbízható középszerűség
- Nothing Phone (3a) és (3a) Pro - az ügyes meg sasszemű
- One mobilszolgáltatások
- Mi nincs, grafén akku van: itt a Xiaomi 11T és 11T Pro
- VoLTE/VoWiFi
- Mobil flották
- Xiaomi 15 - kicsi telefon nagy energiával
- Google Pixel 8a - kis telefon kis késéssel
- Samsung Galaxy S25 - végre van kicsi!
Új hozzászólás Aktív témák
-
#6221
Sk8erPeter
nagyúr
lesaux
#6220
Sk8erPeter
nagyúr
Ja, vágom. Nem néztem a kódját tüzetesen, csak gyors rápillantás alapján a webfejlesztő panelról egyszerűen a görgetés egy bizonyos szakaszán (kb. amikor a kép teteje az ablak tetejéhez ér) hozzáadják az .adaptive-ad osztállyal ellátott elemhez a .fixed osztályt is, így annál be lesz állítva a position: fixed; tulajdonság, plusz JavaScripttel hozzátoldják a kódból kiszámított, ablakhoz képest relatív top-tulajdonságot is, meg a width, height property-ket.
Ahhoz, hogy ezekre rájöjjél, hogyan működnek, mindenképp használnod kell a webfejlesztő panelt (Ctrl+Shift+I vagy F12), így viszonylag gyorsan rá lehet jönni.
-
#6219
Sk8erPeter
nagyúr
lesaux
#6218
Sk8erPeter
nagyúr
Na basszus, bocsi, akkor totál félreértettem, mert nálam blokkolva vannak a reklámok.
Sebaj, hátha mégis hasznos volt a "disszertáció". 
Most megjelenítettem az oldalt privát módban (így a böngésző-bővítményeim nélkül fut egy másik Chrome-példány), és így már látom a reklámot, viszont bevallom, a kérdést így már tényleg nem értem, pedig visszaolvastam, amit írtál, itt nem tudom, mit lehet görgetni. -
#6216
Sk8erPeter
nagyúr
lesaux
#6215
Sk8erPeter
nagyúr
Itt egy CSS3-as feature-t használnak, konkrétan a transitiont, amivel effektet/animációt lehet hozzáadni az elemek stílusának megváltoztatásához (így lehet egy átmeneted JavaScript vagy Flash használata nélkül is (persze sokszor a JavaScript nem kihagyható, a jelen példában is van egy minimális JS-kód, erről mindjárt)).
Itt csak annyi történik, hogy egyes elemek szélességének növelésével, illetve csökkentésével játszanak, mindezt egy finom átmenettel animálva, attól függően, hogy hol tartasz a scrollozásban. Ha az oldal legtetején vagy, akkor csak 2 ikont látsz, ha lejjebb görgetsz, mind az 5 ikon megjelenik (tehát 3 ikonnal bővül a segédmenü). Ezt egyszerűen úgy érik el, hogy JavaScripttel figyelik a görgetés állapotát (legtetején vagy az oldalnak, vagy lejjebb), és ha a legtetején vagy, akkor 0 pixelre állítják az elrejtendő ikonok szélességét, ha meg akarják jeleníteni, akkor az általuk meghatározott 36px-re (mindegyik ikon ilyen széles itt).
DE a JavaScript-kód itt csak minimális szerepet játszik, annyi a feladata, hogy a görgetés állapotától függően hozzáad, illetve elvesz egy osztályt a konténerelemről, konkrétan a scroll-at-top osztályt - nevéből következően ez azt jelenti, hogy megjelenik az osztály az elemen, ha az oldal legtetején vagy, de eltávolításra kerül, ha lejjebb görgetsz.Ez a div a konténerelem:
<div class="fixed-header fixed-header-line show-up-and-share-buttons scroll-at-top" id="fixed-header">
...
</div>Itt látható, hogy az osztályok között szerepel a scroll-at-top osztály, ha lejjebb görgetsz, így fog kinézni:
<div class="fixed-header fixed-header-line show-up-and-share-buttons" id="fixed-header">
...
</div>Csak annyi történt, hogy lekerült a scroll-at-top osztály.
Ezen a konténeren belül egy main osztállyal ellátott <ul> elem tartalmazza a menüpontokat.
Na, ez a CSS-kód vonatkozik az ELREJTETT ikonokra:
.fixed-header.scroll-at-top .main .icon-indexlogo-fixedheader, .fixed-header.show-up-and-share-buttons.scroll-at-top .main .icon-up, .fixed-header.show-up-and-share-buttons.scroll-at-top .main .icon-share {
width: 0;
padding-left: 0;
padding-right: 0;
}A lényeg a width:0, tehát 0 pixel alapból a szélessége ezeknek az ikonoknak.
A lejjebb görgetett állapotnál ez a fontos kódrészlet:.fixed-header .main .icon-indexlogo-fixedheader, .fixed-header.show-up-and-share-buttons .main .icon-up, .fixed-header.show-up-and-share-buttons .main .icon-share {
width: 36px;
transition: width 200ms,padding 200ms;
}Látható, hogy itt a második kódrésznél a width property-t 36px-re állítják, ÉS egy CSS3-as transition property értéke is meg van adva: width 200ms,padding 200ms; - ez azt jelenti, hogy a szélesség, illetve a padding tulajdonságok animációjának időtartama 200ms legyen.
Tehát ennyi a lényeg: 0 pixelről 36 pixelre nő a szélesség, 200ms-os animációval, amennyiben lekerül a fixed-header konténerelemről a scroll-at-top osztály, illetve fordítva, amikor rákerül ez az osztály a konténerelemre (a szülőelemek egyikére), akkor 0 pixelre csökken a szélesség, ugyanígy animálva.
Remélem, valamennyire tiszta volt a magyarázat.
Szerk.: jézusom, most látom, mennyit írtam, már megint szófosásom van.
=============
(#6213) Jim-Y:
Nahát, olyan gonosz vagy, cö-cö-cö, hát ilyet.
=============
(#6211) honda 1993:
Majd linkeld be nekünk légyszi a <table_2> tag specifikációját a W3C ajánlásában, szívesen elolvasnánk! Jöhet a többi számmal ellátott elem is!Mielőtt elfelejtem: IKSZDÉ!
-
cucka
addikt
Elképzelhető, hogy a biztonsági lyuk a tárhelyen lévő kódban található, nem pedig a gépeden. (Wordpress-nek volt régen egy ilyen sebezhetősége)
Amúgy általában úgy működnek, hogy a dokumentumok végére odafűznek egy szándékosan nehezen olvasható javascript kódot, ami berak a dokumentumba egy kártékony oldalra mutató iframe-et.
-
cucka
addikt
Nem, ennek nem kell működnie
A html-ed hibás. Nem ettől nem megy a képcserélés, de azért leírom, tehát:
Először is a html szintaxisod helytelen, a html tag-ek összes paraméterét dupla idézőjelbe kell tenni.
<a href='show.php?kep=298' ...
helyett
<a href="show.php?kep=298" ...
Másodszor: A border html paraméter értéke egy szám, tehát a border="0px" szintén helytelen. A "px" mértékegységet css-ben használjuk.
Harmadszor: a képnek hiányzik az ALT tulajdonsága, enélkül nem lesz valid a kód.A képcserélés: az onmouseover eseményben a gomb objektum src adattagját próbálod változtatni. A probléma, hogy attól, mert van egy "gomb" nevű képed, még nem fogod tudni annak a képnek az objektumát globális változóként elérni.
Első lehetséges megoldás, hogy a képnek adunk egy id értéket és arra hivatkozva már elő tudjuk szedni a képhez tartozó objektumot a document.getElementById függvénnyel.
<a href="show.php?kep=298"
onmouseover="document.getElementById('gomb').src='_arrow_left_over.gif';"
onmouseout="document.getElementById('gomb').src='_arrow_left_normal.gif';">
<IMG id="gomb" name="gomb" src="_arrow_left_normal.gif" width="55" height="55" border="0" alt="" ></a>Másik lehetséges megoldás, hogy magára a képre kötjük rá az eseményt, ilyenkor this-el hivatkozhatunk a kép objektumra. (Ez természetesen nem csak képekre igaz)
<a href="show.php?kep=298'">
<IMG name="gomb" src="_arrow_left_normal.gif" width="55" height="55" border="0" alt=""
onmouseover="this.src='_arrow_left_over.gif';"
onmouseout="this.src='_arrow_left_normal.gif';"></a>Harmadik lehetőség: a link-re kötöd rá az eseményt. Az eseményben először is a this.childNodes tömbben megkeresed a kép objektumot, majd ennek változtatod az src értékét. Ezt szerintem ide fölöslegesen bonyolult, úgyhogy nem írom meg a kódot (meg lusta is vagyok
). -
VladimirR
nagyúr
inkabb adj a mezoknek id-t es az alapjan hivatkozz rajuk, ez az ajanlott
<form action="comment.php" method="post" name="posta" onSubmit="return validate()">
Neved:<br><input TYPE="text" NAME="nev" id="nev" SIZE="20" MAXLENGTH="20">
<br><br><br>
Üzeneted:<br><textarea NAME="uzenet" id="uzenet" ROWS="6" COLS="55" wrap="virtual">
</textarea>
<br><br>
<input TYPE="submit" NAME="Request" VALUE="Mehet!">
</form>
<script>
function validate(){
if (!uresCheck(document.getElementById( "nev" ),"A nevet")) return false;
if (!uresCheck(document.getElementById( "uzenet" ),"Az üzenetet")) return false;
}
function uresCheck(mezo,mit){
if (mezo.value != "") return true;
else{
alert(mit+" kérem megadni");
return false;
}
}
</script> -
#1148
fordfairlane
veterán
lesaux
#1138
fordfairlane
veterán
Meg lehet oldani.
<div style="position:relative; width:500px; height: 500px; border: 1px solid">
<div style="position: absolute; bottom: 0px">lábléc</div>
</div>Nyugodtan használj táblázatokat, ha nagyon elakadsz. A CSS pozicionálás komplexebb dolog, és idő kell, hogy egyrészt megszokd a logikáját, másrészt megismerd a különféle böngészőket.
-
#1134
Louloudaki
aktív tag
lesaux
#1130
Louloudaki
aktív tag
próbáld meg rögtön azt a grafikát összerakni, amit belinkeltél az elején, mert így kétszer dolgozol. meg egy doctype nem ártana, anélkül a böngészők nem egységesen kezelik a box modellt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ezt tedd az oldal legtetejére.szerintem jobb lenne, ha valaki összerakná neked, és a kész jó kódot tanulmányoznád, abból jobban megértenéd.
-
#1133
fordfairlane
veterán
lesaux
#1130
fordfairlane
veterán
Második:
<body>
<div class="balmenu">balmenü</div>
<div class="kozep_keret">
<div class="cim">Cím</div>
<div class="navig">
<div class="balnyil">balnyíl</div>
<div class="datum">Dátum</div>
<div class="jobbnyil">Jobbnyíl</div>
</div>
<div class="tartalom">
<div class="foto">A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)</div>
<div class="foto"> </div>
<div class="foto"> </div>
<div class="foto"> </div>
<div style="clear: both"></div>
<div class="foto">A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)</div>
<div class="foto"> </div>
<div class="foto"> </div>
<div class="foto"> </div>
<div style="clear: both"></div>
</div>
<div class="also_menu">Alsó menü</div>
</div>
</body>
</html> -
#1132
fordfairlane
veterán
lesaux
#1130
fordfairlane
veterán
bemásolom a kódot két részletben, remélem jó lesz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #24577e;
font-family: 14px arial,sans-serif;
}
.balmenu {
position: absolute;
left:40px;
top:100px;
width:120px;
height:430px;
background-color: #d7e0ef;
}
.kozep_keret {
position: absolute;
left:200px;
top:100px;
width:760px;
min-height:430px;
background-color: #d7e0ef;
border: 0px solid #ffffff;
}
.cim {
height: 25px;
position: relative;
}
.navig {
height: 60px;
position: relative;
}
.balnyil {
background-color: #ffffff;
height: 60px;
position:absolute;
left: 0px;
width: 150px;
}
.datum {
background-color: #000000;
height: 60px;
position: absolute;
left: 150px;
text-align: center;
width: 460px;
}
.jobbnyil {
background-color: #ffffff;
height: 60px;
position: absolute;
left: 610px;
width: 150px;
}
.tartalom {
border: 1px solid;
margin: 0 auto;
position: relative;
width: 600px;
}
.foto {
border: 1px solid;
margin-top: 20px;
margin-left: 35px;
width: 100px;
float: left;
}
</style>
</head> -
#1129
fordfairlane
veterán
lesaux
#1128
fordfairlane
veterán
A floatnak ilyen a természete, mert alapvetően arra találták ki, hogy inline contentbe lehessen beszúrni és igazítani blokk elemeket, nem pedig arra, hogy blokkelemeket rakjuk egymás mellé. Ha a négy blokkelemnek a szélessége valamilyen oknál fogva meghaladja a konténerelem szélességét, akkor a float a következő sorba rakja az elemet (még nem jöttem rá, hogy FF-ben miért így van, IE-ben miért nem).
-
#1123
fordfairlane
veterán
lesaux
#1122
fordfairlane
veterán
Oké, ez már megvan, bár az érdekes, hogy ha "padding: 0 10px 0 10px"-et adok meg a négy téglalapnak, akkor befér a konténerbe, de ha meg margint, akkor már nem fér be.
A forráskód nélkül nem biztos, hogy jó a tippem, de a padding és a margin az hozzáadódik a blokkelem szélességéhez, illetve magasságához, tehát a width illetve height a tartalom szélességére és magasságára vonatkozik, padding, border és margin nélkül.
De most beleszaladtam egy sokkal nagyobb problémába: IE alatt szép a végeredmény, Firefox alatt viszont egy csomó dobozt ki se rajzol.
Ebben sem tudok segíteni a kód nélkül.
-
#1121
fordfairlane
veterán
lesaux
#1120
fordfairlane
veterán
Konténer elem már van, akkor azon belül meg ki kell matekozni ezek szerint.
Egy blokkelemet lehet középre igazítani a fentebb említett "margin: 0 auto" módszerrel, ha többet akarsz egymás mellé, akkor mindenképp szükséged lesz egy olyan plussz elemre, amit középre igazítasz, és ezen belülre rakod egymás mellé a többit.
-
#1119
fordfairlane
veterán
lesaux
#1118
fordfairlane
veterán
Ha például az oldal közepére akarsz rakni egy egy blokk elemet, akkor így lehet:
<div style="width: 300px; margin: 0 auto;"></div>
A te esetedet nem ismerem pontosan, valószínűleg kell egy konténer elem, amit középre igatítasz ezzel a módszerrel, és ebbe pakolod a további elemeket, mondjuk így:
<div style="position:relative; width: 400px; margin: 0 auto; border: 1px solid">
<div style="position:absolute; left: 0px; width:100px">1</div>
<div style="position:absolute; left: 100px; width:100px">2</div>
<div style="position:absolute; left: 200px; width:100px">3</div>
<div style="position:absolute; left: 300px; width:100px">4</div>
</div>Keretet azért raktam a konténer elemre, hogy lásd, hol van.
-
#1107
Louloudaki
aktív tag
lesaux
#1106
Louloudaki
aktív tag
én nem használok absolute meg relative beállítást, float minden oszt jóvan.
szerintem ez is az egyszerűbb, bár a fene tudja.
az alsó három div float left, aztán egy üres div ami 100% széles és clear: both, és akkor megint balról kezdődik a következő sor, nem csúszik be ezek mellé, ha esetleg beférne, akkor sem. float meg vagy left vagy right, float: clear olyan nincs.
és akkor ide jönnek a fotós divek. esetleg az ilyen sok kis divet be lehet foglalni konténer divekbe, és ez is segít, hogy ne csússzanak össze.
amúgy nem muszáj divekből, lehet ul-en belül li-ket is floatolni, és display: blockot beállítani rájuk. nézd meg ezt firebuggal, hogy épül fel: [link] -
#1103
Louloudaki
aktív tag
lesaux
#1102
Louloudaki
aktív tag
kövezz meg, de én ennél bonyolultabb oldalakat rakok össze divekkel pikk-pakk.
a tartalom lebontva, így hirtelen:
1 széles div a címnek,
1 széles div az alatta lévő cuccnak, azon belül 2 div a nyilaknak olyan széles mint a nyíl képe, meg 1 a középső szövegnek olyan széles, mint a középső mínusz a 2 nyíl div
1 div a képeknek, azon belül egy div text-align center, berakod a képet, br, szöveg
1 széles div az alsó menünek,
a menü divek pedig xy méretűek, a gomb képe a háttér, szöveg középre, line-height akkora mint a div magassága, így függőlegesen is középre kerül, és némi margin, hogy legyen köztük távolság.
marginokkal meg paddingekkel kell kicsit játszadozni, és kész. -
lesaux
veterán
Na de most komolyan. Ezt hány darab divvel lehetne megoldani?
[link]
Van egy div a menüsornak balra meg egy a fő témának középen. Eddig oké. Aztán valahogy pozícionálni kéne a címet, a nyilakat, a dátumot, a képeket, a képalákat, lent újra a gombokat, ráadásul a gombokon lesznek szövegek is, azt se tudom, hogy kell odapakolni. Aki azt mondja, hogy ezt könnyebb divekkel, mint table-lel, az vagy nagyon tud valamit, vagy csak füllent. -
vakondka
őstag
az abszolút pozícionálásban az a jó, hogy pixel pontosan oda pozícionálsz mindent ahová szeretnéd.
Szerintem ugyanez a hátránya is, mert nem tudsz dinamikusan középre igazítani, stb csak a fix pozíciót tudod tartani.
Én jobban szeretem a float-olást a fentiek miatt.Az ebookz.hu oldalon van egy jópár tutorial CSS-el kapcsolatban.
Ezen kívül: [link]
[link] -
vakondka
őstag
A betöltő programnak pont az a lényege, hogy először betölti a képeket és csak utána kezdi el a weboldal többi részének betöltését a kód alapján.
Ezért ha a javascript már lefutott a head elemek között, akkor az betöltötte a felhasználó gépének memóriájába a fájlt, így ha valahol hivatkozol rá, akkor azt normál módon megteheted a fájlnévvel:
<img src=''image1.gif'' />
Így nem akkor kezdi el a gép betölteni a képet, mikor ideér ehez a kódhoz, hiszen már bent van a memóriában, vagyis egyszerűen csak megjeleníti és kész
[Szerkesztve] -
RedAnt
aktív tag
Elcseszték, valami asp-s custom tag maradhatott benn.
e helyett:
<radiogroup-extratextbox name="field_84" autopostback="False" enabled="True" filltype="Vertical"><items-extratextbox><item name="0">háztartási</item><item name="1">nem háztartási</item></items-extratextbox></radiogroup-extratextbox>
szerintem valami ilyesminek kéne lenni:
<input type="radio" name="tbFormTemplateField84" value="0" />háztartási<br />
<input type="radio" name="tbFormTemplateField84" value="1" />nem háztartási<br /> -
Chaser
legenda
Valszeg rosszul fogalmaztam meg a problémát
Az oké, hogy feltöltöm ftpre a képeket, de egy oldalon lennének pl 4esével egymás mellett..aztán következő sor..és így tovább. Meg lehet azt oldani, hogy ne egyesével kelljen nekik linket adni a forrásban, hogy látszanak? Mind1ik kép egyforma magxszél-re lesz átméretezve. Táblázattal esetleg meg lehet oldani? Régen htmleztm, most nem vagyok képben
Sebaj, hátha mégis hasznos volt a "disszertáció". 
.
Új hozzászólás Aktív témák
Hirdetés
- Argos: Szeretem az ecetfát
- Linux kezdőknek
- Könyvajánló
- Bambu Lab 3D nyomtatók
- Apple iPhone 16 Pro - rutinvizsga
- TCL LCD és LED TV-k
- RAM topik
- Intel Core i3 / i5 / i7 / i9 10xxx "Comet Lake" és i3 / i5 / i7 / i9 11xxx "Rocket Lake" (LGA1200)
- sziku69: Fűzzük össze a szavakat :)
- Vicces képek
- További aktív témák...
- DDR5 GAMER PC: Új RYZEN 7 8700F +RTX 4060/5060/4070/5070 +16-32GB DDR5! GAR/SZÁMLA! 50 FÉLE HÁZ!
- Dell Latitude 7410 Strapabíró Ütésálló Profi Ultrabook 14" -80% i7-10610U 16/512 FHD
- Szép! HP EliteBook 850 G8 Fémházas Multimédiás Laptop 15,6" -65% i7-1185G7 32/512 Iris Xe FHD Magyar
- HP EliteBook 850 G8 Fémházas Multimédiás Laptop 15,6" -65% i7-1185G7 8/512 Iris Xe FHD Magyar
- 512 Gb-os NVME-k
- Telefon felvásárlás!! iPhone 13 Mini/iPhone 13/iPhone 13 Pro/iPhone 13 Pro Max
- ÁRGARANCIA!Épített KomPhone i3 10105F 8/16/32GB RAM RX 6500 XT 4GB GAMER PC termékbeszámítással
- Apple iPhone 16 Pro Max - Desert Titanium - 256GB 1 ciklus 100% akku! 1 év garancia! Új készülék!
- BESZÁMÍTÁS! 1TB Kingston KC3000 NVMe SSD meghajtó garanciával hibátlan működéssel
- Eredeti DELL 240W töltők (LA240PM160)
Állásajánlatok
Cég: PC Trade Systems Kft.
Város: Szeged
Cég: CAMERA-PRO Hungary Kft
Város: Budapest