| Autor | Zpráva | ||
|---|---|---|---|
| Radim Jan Profil |
#1 · Zasláno: 6. 6. 2015, 12:08:07
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 |
#2 · Zasláno: 6. 6. 2015, 21:17:59
ř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;}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> /* 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;} |
||
| 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 |
#4 · Zasláno: 7. 6. 2015, 08:09:00
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 |
#6 · Zasláno: 7. 6. 2015, 09:51:57
Radim Jan:
Ja chcem vidieť tvoju stránku. Snažíme sa predsa prísť na to, prečo to nefunguje... |
||
| Radim Jan Profil |
#7 · Zasláno: 7. 6. 2015, 09:58:29
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 |
#8 · Zasláno: 7. 6. 2015, 15:00:32
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 |
#9 · Zasláno: 7. 6. 2015, 15:47:08
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 |
#10 · Zasláno: 7. 6. 2015, 17:08:20 · Upravil/a: Radim Jan
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 |
#11 · Zasláno: 7. 6. 2015, 18:57:11
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 |
#13 · Zasláno: 7. 6. 2015, 19:45:10
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 |
#15 · Zasláno: 8. 6. 2015, 08:31:40
EDIT: ted je živá ukázka správně ;-)
|
||
| Tomáš123 Profil |
#16 · Zasláno: 8. 6. 2015, 15:51:42
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 |
#18 · Zasláno: 8. 6. 2015, 16:44:14
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 |
#19 · Zasláno: 8. 6. 2015, 17:51:38
Tomáš123:
Nevidíš, protože se nezobrazuje... |
||
| Davex Profil |
#20 · Zasláno: 8. 6. 2015, 17:58:39
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 |
#21 · Zasláno: 8. 6. 2015, 19:25:55
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 |
#22 · Zasláno: 8. 6. 2015, 19:30:48
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 |
#23 · Zasláno: 8. 6. 2015, 19:40:41
<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 |
#24 · Zasláno: 8. 6. 2015, 20:45:49
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 |
#25 · Zasláno: 8. 6. 2015, 22:07:48
Můžu to dávat kam chci, nefunguje. Díky všem za pomoc, prostě se bez toho musím obejít.
|
||
| Davex Profil |
#26 · Zasláno: 8. 6. 2015, 22:14:54
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 |
#27 · Zasláno: 10. 6. 2015, 12:02:22
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 |
||
|
Časová prodleva: 9 let
|
|||
0