Autor Zpráva
Radim Jan
Profil
Zdravím všechny přítomné.
Jsem začátečník a hodně věcí dělám ve Wordpressu. Rád bych poprosil místní programátory a kodéry, jestli by mi mohli poradit, jakým kódem zajistit, aby se mi na webu zobrazoval obrázek např. banner.png jako z-index v pozici fixed s upoutávkou na nějakou záležitost - akci, novinku atd. tak, jako na obrázku? Zřejmě ve Wordpressu patří kód do style.css v šabloně, ale nevím, jak přesně ten kód napsat. Zkoušel jsem návody na netu, ale nezobrazuje se mi. Díky všem za případnou radu či pomoc.
Vilak
Profil
řekněme, že máš div, který má id "topjpg", který chceš mět zafixovaný a vždy na prvním místě na stránce (tedy ať ho nepřekrývá jiný prvek)
co CSS tedy vložíš toto
#topjpg {position: fixed; z-index: 999;}
čím vyšší je číslo u z-indexu, tím má větší prioritu (klasické prvky mají z-index 0, ty, které mají vyšší číslo jsou potom v popředí.. ta nejvyšší čísla jsou logicky nejblíže ke čtenáři a překrývají menší čísla), taky z-index funguje jen tehdy, když je u toho atribut position

potom taky samozřejmě to bude mět další prvky jako velikost, šířku, pozadí,...
celý kód by mohl vypadat třeba takto:
html:
<body>
...
<div id="topjpg">
 <!-- CELÝ TENTO DIV BUDE V POPŘEDí A FIXNUTÝ -->
</div>
...
</body>
css:
/* element s id topjpg bude mít šířku 50px, výšku 100px, bude fixnutý na obrazovce a bude v popředí */
#topjpg {width: 50px; height: 100px; position: fixed; z-index: 999;}
možná jsme se někdě upsal a udělal překlep, ale mělo by to takto byt...
Radim Jan
Profil
Díky za snahu o pomoc, ale asi někde dělám tu samou chybu. dedukcí a zkoušením jsem došel k tomuto kódu

#toppng {
background-image: url("images/toppng.png");
width: 250px;
height: 250px;
position: fixed;
top: 100px;
right: 100px;
z-index: 999;

ale vůbec mi to nejde ať zkouším měnit cokoliv. Zadal jsem to do style.css šablony wordpress. Omlouvám se, plavu v tom a nevím, jestli tomu dostatečně rozumím. Zadávám to správně? <div id="toppng"> mám vložit do header.php? nebo index.php?
Tomáš123
Profil
Radim Jan:
Prosím o odkaz na živú ukážku.
Radim Jan
Profil
Tomáš123:

např. zde: http://www.lacik.cz/ strom nebo zde http://www.sklepvmikulove.cz/ korková zátka a hrozen vína.
Tam je to řešeno jako:

#logo h1 span {
    background:url(images/hrozen.png) 0 0 no-repeat;
    width:323px;
    height:187px;
    position:fixed;
    margin: 640px 0 0 -200px;
    padding: 0 0 0 0;
    z-index:200;}
Tomáš123
Profil
Radim Jan:
Ja chcem vidieť tvoju stránku. Snažíme sa predsa prísť na to, prečo to nefunguje...
Radim Jan
Profil
Tomáš123:

Mám ji na lokálním serveru, na web ji dávám až je funkční. Jestli to chápu správně, stačí výše uvedený kód zadat ve style.css nebo ještě jako

<body>
...
<div id="topjpg">
 <!-- CELÝ TENTO DIV BUDE V POPŘEDí A FIXNUTÝ -->
</div>
...
</body>

někde v index.php?
Tomáš123
Profil
Radim Jan:
Mám ji na lokálním serveru
Prepáč, zabudol som. Vlož ukážku do tunajšieho nástroja Živá ukázka.

Jestli to chápu správně, stačí výše uvedený kód zadat ve style.css nebo ještě jako
Teoreticky by to stačiť malo, prakticky tam niečo zavadzia a spôsobuje problémy...

Nebude to nerovnakým názvom tried v HTML a CSS? Hore v ukážke je použitá raz toppng a druhýkrát topjpg. Ak si kód kopíroval, nemusel si si to všimnúť.
Chamurappi
Profil
Reaguji na Radima Jana:
aby se mi na webu zobrazoval obrázek např. banner.png jako z-index v pozici fixed s upoutávkou na nějakou záležitost
Jestli nemáš i menu s position: fixed, tak velmi pravděpodobně nechceš, aby byl banner.png fixní.
A pokud chceš, aby ho viděli všechny šestiny návštěvníků, včetně té s adblockem, neměl bys ho pojmenovávat banner.png.
Radim Jan
Profil
Chamurappi:
banner.png je jeom příklad. Jinak ukázka je zde, není tam vložen výše uvedený kód, protože přesně nevím kam ho vložit. Dával jsem ho fo header, ale nefungoval to:

http://kod.djpw.cz/opnb


Tomáš123:

topng a topjpg jsem změnil vše na toppng, potřebuji png s průhledností
Chamurappi
Profil
Reaguji na Radima Jana:
http://kod.djpw.cz/opnb
Co to má být? To si máme zdroják místo diskuse číst tam? Opět bez toho, abychom viděli, jak funguje?
Dodej laskavě opravdovou živou ukázku.

topng a topjpg jsem změnil vše na toppng, potřebuji png s průhledností
Jen pro pořádek podotýkám, že je úplně jedno, jaké id se použije, důležité je, aby bylo v HTML stejné jako v selektoru v CSS.
Radim Jan
Profil
A můžeš mi napsat prosím jak bude vypadat přesně tedy kód div id v html pro tento kód?

#toppng {
background-image: url("images/toppng.png");
width: 250px;
height: 250px;
position: fixed;
top: 100px;
right: 100px;
z-index: 999; }

V tom bude asi ten problém, protože ho definovaný v html nemám. Zkusím metodu pokus omyl ať se to naučím, ale potřebuji trochu popostrčit. Děkuji moc za trpělivost
Tomáš123
Profil
Radim Jan:
Neviem, či to vidíš, ale snažíme sa popostrčiť ťa do cieľa. Chceme za to iba ukážku HTML a CSS kódu. Je veľmi pravdepodobné, že ak sem pridáš vhodnú ukážku, ukážeme ti riešenie a vysvetlíme príčiny. Úlomky, ba ani celé CSS kódy nestačia. Prečítaj si, čo je živá ukážka a dodaj vhodný materiál.
Radim Jan
Profil
nahraju na free server a dám odkaz... chvilku to potrvá...díky


Takže - úvodní stránka zatím bez textů, ale ty nejsou potřeba.... někde na úrovni slideru bych potřeboval umístit aktuální info nebo nabídku viz. obrázek.


www.testwebu.9e.cz/

a tady živá ukázka - snad sem to nezvencnul

http://kod.djpw.cz/dqnb

řádek 917 je výše zmiňovaný kód
Radim Jan
Profil
EDIT: ted je živá ukázka správně ;-)
Tomáš123
Profil
Ach jaj, už sa mi nechce dookola ti vysvetľovať to, čo je napísané tam, kde sme ťa už dvakrát odkázali. Máš dodať stránku kde je problém pozorovateľný, nie web, kde to treba urobiť. Tu máš ukážku, zamysli sa nad ňou, skús na svojom webe niečo vytvoriť a príď sem s tým, čo nebude fungovať.
Radim Jan
Profil
Tomáš123:
Tak nevím, ale buď neumím číst, nebo je tam napsáno tohle:

Co je živá ukázka?
Živou ukázkou se myslí stránka (či jiný webový zdroj), na které se momentálně projevuje problém popisovaný v dotazu. - to je tedy www.testwebu.9e.cz. tam je problém pozorovatelný, na linku http://kod.djpw.cz/dqnb je kód celé té stránky www.testwebu.9e.cz i s kódem, který nefunguje. V mém třetím příspěvku jsou odkazy na dvě stránky ( http://www.lacik.cz - strom nebo zde http://www.sklepvmikulove.cz/ - korková zátka a hrozen vína), kde funguje to, co chci dokázat i na současném webu www.testwebu.9e.cz. Co víc k tomu říct?
S kódem ukázkou si zkusím pohrát a třeba to nějak zprovozním. Díky za snahu.
Tomáš123
Profil
Radim Jan:
Prepáč, ale ja tam stále nevidím žiadny prvok, ktorý by sa snažil nehýbať. Zo vzorových webov vyššie som pochopil, o čo sa snažíš a pripravil ukážku, tak snáď poslúži.
Radim Jan
Profil
Tomáš123:
Nevidíš, protože se nezobrazuje...
Davex
Profil
Radim Jan:
V tom bude asi ten problém, protože ho definovaný v html nemám.
Proč ho v HTML nemáš? Pokud definuješ vzhled či umístění elementu, který v HTML kódu není, tak se ani nemůže zobrazit.
Radim Jan
Profil
Davex:
...a jsem opět na začátku, protože nevím jak element definovat pro html a jak má vypadat v <div id... a v které části ho umístit :-(.
Davex
Profil
Může vypadat úplně normálně, jak už psal [#2] Vilak a může být kdekoliv, kde nerozbije jiný element - můžeš ho dát třeba na konec stránky před </body></html>.
Radim Jan
Profil
<div id="demo">
 <!-- pokus -->
</div>

dávám do header.php nakonec před <?php } ?>

#demo {
background-image: url("images/demo.png");
width: 250px;
height: 250px;
position: fixed;
top: 100px;
right: 100px;
z-index: 999;
}

dávám do style.css pod Header. Vím, že dělám někde velkou chybu.
Tomáš123
Profil
Radim Jan:
Fixne poziciovaný prvok svojou pozíciou nepôsobí na ostatné prvky, takže by bolo umenie zastrčiť ho niekam, kde by ti rozbil layout. Absolútne odsadenie zhora a sprava je nevhodné, pretože takýto prvok bude umiestnený v konštantnej vzdialenosti od okraju okna. Vlastnosť z-index je potrebná iba v prípadoch, keď sa stretne viac absolútne a fixne poziciovaných prvkov a je potrebné prebiť predvolené poradie, kde vyhráva element umiestnený nižšie v kóde. To by tiež nemal byť tvoj prípad. Inšpiruj sa ukážkou, ktorú som ti vyššie pridal. Očividne, na správnu funkčnosť nie je potrebné nič iné.
Radim Jan
Profil
Můžu to dávat kam chci, nefunguje. Díky všem za pomoc, prostě se bez toho musím obejít.
Davex
Profil
Radim Jan:
dávám do header.php nakonec před <?php } ?>
Proč zrovna do header.php? Neměl by být konec stránky spíš ve footer.php?
Radim Jan
Profil
Tak, částečně se mi to podařilo, ale jak docílit toho, aby se obráuek jako z-index přizpůsobil změnšování okna a nezůstával na udané pozici ale posouval spolu s obsahem?

Mám to takto:

<body>
<div id="demo"></div>
</body>

a css

#demo {
background-image: url("images/demo.png");
position:absolute;
width:250px;
height:250px;
top:200px;
left:1450px;
z-index:100;
}

Poradíte? Díky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: