Trükkös z-index
Sziasztok!
Van egy érdekes problémám, mégpedig az, hogy mostanában sokat másolok weboldalakat, ilyen gyakorlás alapon (nem üzleti célokra). Ezekbe próbálom beépíteni a HTML5-öt és a CSS3-mat. Eljutottam a z-indexig, de van egy problémám.A CSS:Remélem ennyi kód elég lesz. Kicsit érdekesen húzza be a kódszínező a kódot, annyi baj legyen.
Úgy próbálom megcsinálni, hogy a menü átlátszó, és alá be van húzva a kép. Viszont a z indexet bárhogy is keverem, mindig a kép van feljebb. Ez csak akkor változik meg, mikor a kép van előbb a kódban és utána a menü, relatívan pozicionálva. Viszont akkor olyan nemkívánatos mellékhatások lesznek, amik engem zavarnak.
Ha az itt levő kód nem elég, itt az egész: wéwéwé(pont)66aaaa(pont)myds(pont)me/kk.
Kérlek nézzétek el, hogy ilyen rondán írtam le, de egy nasról megy a weboldal (ezen fejlesztek), jobb a biztonság.
Építő jellegű és egyéb kritikákat is szívesen veszek.
■ Van egy érdekes problémám, mégpedig az, hogy mostanában sokat másolok weboldalakat, ilyen gyakorlás alapon (nem üzleti célokra). Ezekbe próbálom beépíteni a HTML5-öt és a CSS3-mat. Eljutottam a z-indexig, de van egy problémám.
<header>
<aside id="menu">
<div class="kozep">
<img src="img/logo.png" id="logokep" alt="logo">
<nav id="menusav">
<a href="">Főoldal</a>
<a href="asdasd/">asdasd</a>
<a href="asdasd/">asdasd</a>
<a href="asdasd/">asdasd</a>
<a href="asdasd/">asdasd</a>
<a href="asdasd/">asdasd</a>
</nav>
</div>
</aside>
</header>#galleriakep {
margin: 0 auto;
display: block;
width: 1200px;
height: 400px;
z-index: 200;
}
#menu {
height: 120px;
text-align: left;
opacity: 0.4;
filter: alpha(opacity=40);
background-color: #00b0d8;
z-index: 300;
font-size: 20px;
word-spacing: 15px;
font-weight: bold;
position: relative;
bottom: 420px;
color: #FFFFFF;
}Úgy próbálom megcsinálni, hogy a menü átlátszó, és alá be van húzva a kép. Viszont a z indexet bárhogy is keverem, mindig a kép van feljebb. Ez csak akkor változik meg, mikor a kép van előbb a kódban és utána a menü, relatívan pozicionálva. Viszont akkor olyan nemkívánatos mellékhatások lesznek, amik engem zavarnak.
Ha az itt levő kód nem elég, itt az egész: wéwéwé(pont)66aaaa(pont)myds(pont)me/kk.
Kérlek nézzétek el, hogy ilyen rondán írtam le, de egy nasról megy a weboldal (ezen fejlesztek), jobb a biztonság.
Építő jellegű és egyéb kritikákat is szívesen veszek.
A z-index
- A HTML és a CSS (amit ideírtál) nem passzol össze, így nem lehet benne hibát keresni (CSS-ben van "galleriakep" id, míg HTML-ben nincs és HTML-ben "logokep" id, ami CSS-ben nincs, a
navelem azonosítója sem stimmel);- Az 1200px szélességű elem XGA kijelzőn vízszintes gördítősávot fog jelenteni, amit a többség utál;
- HTML-ben mindig számít, hogy mi szerepel előbb;
- Ha egymásra akarsz pakolni elemeket és azt akarod, hogy kizárólag a z-index határozza meg a szinteket, akkor jobb abszolút pozicionálni;
- Háttérképnek használj
background-...tulajdonságokat azimgelem helyett. Hasonló (azonos) tulajdonságú dobozokkal kevesebb gondod lesz, mint különböző HTML elemekkel (ugye a képet szoktuk betenni egy konténerbe, nem fordítva).Még egy apró észrevétel: mivel a
navelemet IE (8-ig) nem ismeri fel, felesleges a CSS-ben afilter: alpha(opacity=40);sor, az csak IE-nek "szól". Ha fontos, hogy IE is jól megjelenítse, akkor elég kevés HTML5-ös tag-et használhatsz, vagy különféle js-trükkökkel kell megjelenésre bírnod, amik meg elég memória- és procizabáló. (Lehet, hogy a <nav> még pont megjelenik, most - fejből - úgy emlékszem, hogy ez sem.)Köszi az észrevételeket!
Fú, tényleg, a kép lemaradt... De írtam, ha valami nem okés a kóddal, a teljes ott van a link alatt, firebug on (esetleg ctrl + u), nem akarom elrondítani az oldalt a teljes kóddal.
-Lehet, hogy nem passzol össze, mert nem a navhoz tartozik, hanem az asidehez. Eddig div volt, csak úgy átírtam.
-Az 1200px széles elemre mit javasolsz?
-Tisztában vagyok, hogy számít, mi van előbb.
-Ezt nem tudtam.
-Ööö ezt most nem értettem tisztán. Hol használok háttérnek img elemet? Ez egy képrotátor lesz, láthatod is az egyszerűsített kétgombos változatát az első postban levő linkben. Persze tied a tisztelet, félreérthető volt a szitu.
Csak azért szoktam weboldalakat másolni, mert nehezen jön az ihlet :)
A második idézésre meg az a válaszom, hogy ha a kép van előbb a kódban, aztán a menü, akkor a kép alatt levő dolgok mindig keverednek a menüvel. Elvileg egy div segíthetne, de valamiért nem tette. Most csak azon próbálkozok, hogy jó legyen úgy, hogy előbb a menü, aztán a kép van.
Még egy félreérthető rész, mivel nem a teljes kódot másoltam be, ezért nem látszik, hogy a fejlécben meghívom Remy Sharp (vagy ki) "HTML5 enabling scriptjét". Ha jól tudom, egy tömbbe teszi az új elemeket, végigmegy a tömbön és az elemeket megalkotja a createElement-tel. Tied a tisztelet. (Meg, manapság kinek nincs 4 giga RAM-ja?)
Ha valami nem érthető, szólj.
más eszköz
Mondjuk a telefonodnak, a tabletednek, a netbookodnak, a notebookodnak. És ezekből az eszközökből van egyre több, nem pedig asztali gépekből.
IE 8
Újabbakon nem
Igen
Zagyvaság némi nagyképűséggel
1. Legyen okés. Azt írd ide, amivel problémád van, úgy, ahogy a problémát okozza. Így más is tanulhat belőle.
2. Nincs link. Értelmetlen katyvaszduma van helyette, nem bogozgatom. Ha linkelted volna, esetleg megnéztem volna. De jobban örülök (és mások is) az itt helyben színezett forráskódnak. Ha meg írsz be forráskódot, hagy ne töltsem azzal az időmet, hogy válogatom a különféle "verzióidat". Nem kell teljes kód, csak ami - szerinted - a problémát okozza, de az pontosan.
Amit alább válaszolgattál, kissé nehéz így beazonosítani, jobb ha néha idézel.
<img src="img/logo.png" id="logokep" alt="logo">), annyira pontatlan volt a kérdés... Láthatom, ha megnézném, de nem link, l. fentebb.Egyrészt statikusan