| Autor | Zpráva | ||
|---|---|---|---|
| severus Profil |
#1 · Zasláno: 20. 8. 2009, 19:54:38 · Upravil/a: severus
Hezký den,
můžete mi, prosím, poradit, jak mám toto >>> http://www.severusloveschristine.euweb.cz/ - upravit tak, aby se mi to při zvětšení nerozsypalo - optimalizovat pro ostatní prohlížeče (já fakt nevím, jak se to dělá) - objasnit, proč ten obrázek s nápisem "where is severus", který má být celý klikací, je klikací jen do poloviny, když v mém počítači je klikací celý. P.S.: Ta vložená reklama mi posunula celý obsah dolů :-( Děkuji velice |
||
| panther Profil |
#2 · Zasláno: 20. 8. 2009, 20:53:33
severus
„upravit tak, aby se mi to při zvětšení nerozsypalo “ nepozicovat absolutně, nevíš-li, jak se pozicování chová. „optimalizovat pro ostatní prohlížeče (já fakt nevím, jak se to dělá) “ když začínáš psát stránku, otevři si vedle sebe vícero prohlížečů a každých pár kroků se koukej, jestli to dělá to, co očekáváš. Tak odhalíš chyby v kódu včas. „objasnit, proč ten obrázek s nápisem "where is severus", který má být celý klikací, je klikací jen do poloviny, když v mém počítači je klikací celý. “ levá polovina a pak otazník vpravo. Je to snadné, vprostřed je překrytý divem s id „pravy“. „Ta vložená reklama mi posunula celý obsah dolů :-( “ ano, co jsi myslel? Že ten obsah posune nahoru? |
||
| severus Profil |
nepozicovat absolutně, nevíš-li, jak se pozicování chová.
Zkoušel jsem relativní pozicování, ale bylo to ještě horší, myslel jsem si tedy, že tudy cesta nevede. Nyní vidím, že vede, budu tedy pozicovat relativně když začínáš psát stránku, otevři si vedle sebe vícero prohlížečů ... Teď jsem to zkusil v počítači, IE mi vůbec nezobrazuje obrázky a ani text... Bude to velmi zajímavé... Ale na netu to celkem jde levá polovina a pak otazník vpravo. Je to snadné, vprostřed je překrytý divem s id „pravy Jasně, tohle mě nenapadlo :-) ano, co jsi myslel? Že ten obsah posune nahoru? Ovšem, že ne, ale čekal jsem, že se to posune celé, ale jenom text mi prchnul dolů, zbytek zůstal Děkuji za rady, o víkendu na to mrknu. |
||
| panther Profil |
#4 · Zasláno: 20. 8. 2009, 21:40:35
severus
„Nyní vidím, že vede, budu tedy pozicovat relativně “ Ne, zkus nepozicovat vůbec. Věř, že jsou i jiné cesty. Podívej se do layoutů, bude se ti hodit článek o fungování floatu a clearu, ať se za chvíli neptáš znovu. „Jasně, tohle mě nenapadlo :-) “ doporučuji třeba doplněk firefoxu firebug nebo WebdeveloperToolbar, také bys na to snadno přišel. „ale jenom text mi prchnul dolů, zbytek zůstal “ díky pozicování. |
||
| severus Profil |
#5 · Zasláno: 20. 8. 2009, 23:14:22
Děkuji velice. Já se stejně zase budu ptát, znám oba články, ale nějak mi to podle nich nejde... Zkusím se na to zaměřit o víkendu důrazněji. Jeětě jednou děkuji.
|
||
| severus Profil |
Tak jsou zkoušel float, vůbec nepozicuji, ale výsledek je poněkud... nejistý. Prostě, u toho textu dole, co se mi nedaří s ním pohnout, je definováno následující:
#text1 {float: left; margin-top: 1px; margin-left: 20px; padding: 10px; width: 401px; height: 980px; text-align: justify; font-family: tahoma; font-size: 13px;
border-right: 1px dotted; border-top: 2px solid rgb(0,0,0); border-bottom: 2px solid rgb(0,0,0)}#pravy {position: absolute; width: 329px; height: 1050px; top: 317px; right: 311px;
}
#text2 {float: right; margin-top: 1px; margin-left: 20px; padding: 10px; width: 340px; height: 980px; left: 730px; text-align: justify; font-family: tahoma; font-size: 13px;
border-top: 2px solid rgb(0,0,0); border-left: 1px dotted rgb(0,0,0); border-bottom: 2px solid rgb(0,0,0);
}Ale ani se to nehne. A z toho článku od pixiho jsem toho taky moc nepochopil :-( Něco jo, ale nestačí to na to, abych text1 & text2, potažmo další objekty, posunul tam, kam potřebuji. |
||
| panther Profil |
#7 · Zasláno: 23. 8. 2009, 09:12:28
severus
obrázky, které mají být jako obrázky na pozadí a nenesou žádný význam, nepatří do tagu img, ale na pozadí prvku. Pokud máš všechny obrázky jako img, text přes ně jinak než pozicováním nedostaneš. Ovšem je to špatný postup. Následující řádky ode mne ber jako tip, ne jako kritiku stávající situace. Nechceš-li, číst je nemusíš :-) Tipuji, že začínáš, ale používáš spoustu věcí, které jsou špatně. Být tebou, začal bych se jich vyvarovávat již teď v začátcích, později to bude horší. (obrázky patří na pozadí, tag center se dá také nahradit CSSkem, se dá nahradit marginem, příp. paddingem.) |
||
| severus Profil |
#8 · Zasláno: 23. 8. 2009, 10:57:49
Si teda připadá jako idiot, ale ať dělám, co dělám, prostě mi to nejde :'-( Ten první odkaz je na pozadí, pokud nastavím background-img a url, celý ten modrý obrázek s bílým okrajem se nastaví jako pozadí, což je pochopitelné, ale můj problém to neřeší.
Rozumím tomu dobře, že si nastavím jako pozadí, background černou barvu a pak tam ty obrázky nějak dostanu ? Pokud ano, naprosto nechápu, jak. Vím, jak se nastaví pozadí, tedy aspoň doufám :-), ale tohle mi jasné není. |
||
| tayger Profil * |
#9 · Zasláno: 24. 8. 2009, 16:47:52
severus:
vím, domnívám se. člověče chápeš alespoň jak to celé funguje? ad1. <img style="float: left; top: 11px; left: 20px" src="napis.jpg"> pleteš všechno do hromady, pokud chceš pozicovat za pomoci float, tak nenastavuješ atributy top a left, ale margin-top a margin-left; ad.2 <center><img src="logo1.jpg" onclick="this.src='logo2.jpg'"></a></center> typické. jsou dvě možnosti jak to řešit buď obalíš obrázek do divu a nastavíš mu atribut center a nebo obrázku specifikuješ styl: width: 150px; margin: 0 auto; width je šířka obrázku a margin zapsaný takto znamená, že nad obrázkem a pod ním nebude volný prostor a auto dopočítá prostor kolem prvku tak, aby ho vystředil. ad3. <center><img style="margin-top: 30px" height="1190" width="1000" border="0" src="obal.jpg"></center> toto lze lehce přepsat takto: <img style="margin: 30px; height: 1190px; width: 1000px; border: none;" src="obal.jpg"> ad4. Když už musíš aplikovat doctype jako xhtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"> tak u každého nepárového tagu musí být lomítko <img src="" /> ad5. <a style="position: absolute; top: 1435px; right: 720px; font-family: tahoma; font-size: 14px" href="mailto:bigbadbob%40seznam.cz">Severus Snape</a> takových věcí se vyvaruj, použil místo absolutního posicování obyčejné pozicovací techniky jako margin a padding. ad6. V těch stylech v externím soubru se ti hrabat rozhodně nehodlám, použij nějako úpravu, ať se to dá číst. Například můžeš použít tento styl http://pavlacka.ic.cz/index.css nebo jakýkoliv jiný. A místo psaní v nějakém notepadu by jsi měl začít používat pspad. Volně ke stažení, je i česky. |
||
| tayger Profil * |
#10 · Zasláno: 24. 8. 2009, 16:50:29
„buď obalíš obrázek do divu a nastavíš mu atribut center “
sorry měl jsem na mysli atribut align="center" |
||
| Bubák Profil |
#11 · Zasláno: 24. 8. 2009, 17:07:47
„jsou dvě možnosti jak to řešit buď obalíš obrázek do divu a nastavíš mu atribut center a nebo obrázku specifikuješ styl: width: 150px; margin: 0 auto; width je šířka obrázku a margin“
ad 1) atribut center, nebo CSS text-align: center má mít DIV, z textu není zřejmé, jestli jsi chtěl tento atribut dát DIVu, nebo obrázku. Vycentrovat obrázek pomocí CSS text-align:center; v nadřazeném blokovém elementu je podle mého nejlepší. ad 2) vsadím nohu, že to v žádném prohlížeči nebude fungovat, mimo to je vhodnější zadávat rozměry obrázků HTML atributy width a height. |
||
| tayger Profil * |
#12 · Zasláno: 24. 8. 2009, 17:43:20
Bubák
Hm zajímavé, vhodnější snad, kdyby jsi chtěl na to navázat nějaký skript, každopádně se má oddělovat html od css. Používání atributů je už zastaralost, všude se doporučuje co lze nastavit v css, tak nastavit v css. „vsadím nohu, že to v žádném prohlížeči nebude fungovat“ Tak fajn pošleš mi ji v exprestním balíku? Funguje to všude, mám to odzkoušené, dokonce metoda s margin: 0 auto; je považována za jedinou správnou metodu, jak něco vystředit. To s tím text-align je hezké, ale zkusil jsi to někdy aplikovat na blokový prvek uvnitř toho divu? budeš možná překvapen, žé né každý prohlížeč to překousá. apropo, ty jsi si na mě nějak zasedl či co? :-D |
||
| Bubák Profil |
#13 · Zasláno: 24. 8. 2009, 18:01:33 · Upravil/a: Bubák
„Používání atributů je už zastaralost, všude se doporučuje co lze nastavit v css, tak nastavit v css.“
Všude ne, jedním z mála atributů, které se doporučuje ponechat, jsou rozměry obrázků. „metoda s margin: 0 auto; je považována za jedinou správnou metodu, jak něco vystředit“ Souhlasím pouze v případě blokových elementů, což obrázek není. Vím, že bych ho mohl deklarovat jako blokový, ale proč si v tomto jednoduchém případě přidávat práci? „apropo, ty jsi si na mě nějak zasedl či co?“ Ne, ale blábolíš tu nesmysly, nedokážeš vyvrátit nic z toho, co jsem napsal. Dodatek: V téhle tabulce je uvedeno, které atributy kterých elementů jsou považůvány za zastaralé (deprakted): www.w3.org/TR/REC-html40/index/attributes.html Dodatek 2 „Tak fajn pošleš mi ji v exprestním balíku?“ Nevím o tom, že bych nohu prohlál: http://teststranek.kvalitne.cz/noha-vyhra/ |
||
| severus Profil |
#14 · Zasláno: 24. 8. 2009, 18:10:54
Tayger :
Ne, mnohdy nevím, jak to celé funguje. Mám tedy dvě možnosti, buď napíši do diskuze a bude čekat, že mi to někdo prozradí, nebo se na to vykašlu a budu se věnovat něčemu jinému, třeba hrnčířství :-) Já raději napíši do diskuze. Panther psal, že obrázky, které nenesou žádný význam, patří do pozadí, ale já pořád nevím, jak je tam dát. Pozadí nastavím, ale nastavit na pozadí další obrázek, to bohužel neumím. PSPad používám, v notepadu jsem psal externí soubor. Upravil bych to, ale pokaždé, když jsem se o to pokusil a Enterem jsem to chtěl nějak oddělit, tak se na stránce vůbec tyto styly nezobrazily. Chyba může být jinde, ale došlo k ní pokaždé, když jsem se pokoušl toto upravit. A samozřejmě děkuji za vysvětlení a rady :-) |
||
| tayger Profil * |
#15 · Zasláno: 24. 8. 2009, 18:32:51
severus
„Upravil bych to, ale pokaždé, když jsem se o to pokusil a Enterem jsem to chtěl nějak oddělit, tak se na stránce vůbec tyto styly nezobrazily“ No tak se na to podíváme: a:link u css vám stačí pouze a a devinujete odkazu to jak vypadá, když se prvně načte stránka. a:hover - je už pseudo třída, která nastaví styly, pokud je myš nad odkazem a:visited - tak bude vypadat odkaz, když už na něj bylo kliknuto. body - to se specifikuje většinou jako první. no dál se mi to toho nechce gabat. „Ne, mnohdy nevím, jak to celé funguje. Mám tedy dvě možnosti, buď napíši do diskuze a bude čekat, že mi to někdo prozradí, nebo se na to vykašlu a budu se věnovat něčemu jinému, třeba hrnčířství :-)“ To je hloupost, další alternativou je, že si pořádně nastudujete vše na webu jakpsatweb.cz a případně jiné podobné stránky a nučíte se to používat. Ikdyž vám to tu někdy bude podrobně vysvětlovat, nikdy nepochopíte jak to vlastně funguje a budete mít v tom jenom větší bordel. |
||
| severus Profil |
#16 · Zasláno: 24. 8. 2009, 18:36:20
Pokud mi tady někdo něco ukáže, vysvětlí, v nejbližších dnech to zkouším. Stejně jako teď.
|
||
| tayger Profil * |
#17 · Zasláno: 24. 8. 2009, 18:44:18
severus
To je špatný přístup, nikdo ti to tu dělat nebude, já jsem se to učil také sám, dokonce jsem si nakoupil i pár publikací, začal jsem se stránkou ve framech, pak jsem ji povíšil na ifram pro menu a zbytek stránka, poté jsem vytvořil už první pozicovanou za pomocí div a následně jsem vytvořil první stránku, kterou jsem dostal i zaplacenou za pomoci php, xhtml a css. Doba studia? Cca 3 roky s výpadky :-) Takhle to funguje, ale pokud se vám nechce učit, tak využíjte nějaký webový editor. |
||
| panther Profil |
#18 · Zasláno: 24. 8. 2009, 18:49:12
tayger
„body - to se specifikuje většinou jako první. “ i kdyby bylo na konci, čemu to bude vadit? „tak využíjte nějaký webový editor.“ pravděpodobně myslíš WYSIWYG editor, že? co ten tvůj exkurz do stylování odkazů? Ten byl k čemu? severus „ale pokaždé, když jsem se o to pokusil a Enterem jsem to chtěl nějak oddělit, tak se na stránce vůbec tyto styly nezobrazily.“ kde enterem? V CSSku normálně můžeš enter používat dle libosti, v inline stylech nevím (a nechce se mi zkoušet), jestli funguje, ale minimálně se to nepoužívá. „ale nastavit na pozadí další obrázek, to bohužel neumím. “ druhý obrázek na pozadí jednoho elementu nastavit nelze. Každý element může mít jedno obrázkové pozadí doplněné jednobarevným pozadím - to se zobrazí tam, kde již nestačí obrázek. |
||
| severus Profil |
#19 · Zasláno: 24. 8. 2009, 18:50:24
Ale já se chci učit, dělám stránky, taky s výpadky, čistého času možná čtyři měsíce. Rozhodně nečekám, že mě to někdo bude učit, ale pokud něco nevím, nepíši do diskuze.
Tyhle stránky jsou občas velmi zmatené a nejasné, pro někoho, kdo to zná, jistě ne, ale pro laika zmatené rozhodně jsou. Tedy aspoň pro mě :-) Jen jsem se zeptal, jak to udělat, aby se mi stránka nerozsypala, panther mi poradil článeik o pozadí. A já jsem napsal, že mi z toho článku není jasné nic. |
||
| severus Profil |
#20 · Zasláno: 24. 8. 2009, 18:54:45
Panther : Mám obrázek obal.jpg, to je ten s tím bílým okrajem, druhý obrázek je nápis where is severus a třetí obrázek je ten nápis v levém horním rohu. Psal jsi, že nepatří do tagu <img>, anžto nenesou žádný význam, ale patří na pozadí.
Já opravdu vůbec netuším, jak to mám udělat. Z toho odkazu, který jsi mi poslal, jsem na nic nepřišel, ať to zkouším, jak chci, nejde mi to. Pozicování používat nemám, vyhnu se mu tedy, ale jinak ten text nedostanu tam, kam chci. |
||
| panther Profil |
#21 · Zasláno: 24. 8. 2009, 18:55:39
severus
„A já jsem napsal, že mi z toho článku není jasné nic.“ co konkrétně ti není jasné? Teď chvilku pusť z hlavy taygerovy příspěvky a popiš co konkrétně ti není jasného. Je to nastavení obrázku na pozadí? Jeho pozice? Barva pozadí? Myslím si, že v uvedené stránce je to popsáno vcelku dobře. Případně se můžeš podívat i jinde, jestli to bude popsáno lépe, chtěl jsem s odkazem zůstat „doma“ - tedy na jpw.cz |
||
| panther Profil |
#22 · Zasláno: 24. 8. 2009, 18:57:57
severus
Já ve tvém CSS souboru žádný background (resp. background-image) nevidím. |
||
| tayger Profil * |
#23 · Zasláno: 24. 8. 2009, 19:00:23
panther
„„body - to se specifikuje většinou jako první. “ i kdyby bylo na konci, čemu to bude vadit?“ ničemu, ale je to dobrý zvyk, alespoň ten co to po tobě čte, tak to nebude muset hledat někde na konci, když bude chtít vyměnit obrázek na pozadí „„tak využíjte nějaký webový editor.“ pravděpodobně myslíš WYSIWYG editor, že?“ ano nepamatuji si ten název, kóduji bez toho :-) „co ten tvůj exkurz do stylování odkazů? Ten byl k čemu?“ měl jsem z jeho css souboru pocit, že mu to není jasné. severus Když se chceš naučit kódovat, tak se nemůžeš neustále spoléhat na druhé, když něco nevím, tak zkusím google, zda už to někdo neřešil a pokud nic nenajdu, tak se obrátím sem do distkuze. Navrhuji, aby jsi začal nejdříve s html, až ho ovládneš, tak plynule přešel na css, kde nejdříve budeš nahrazovat atributy html tagů a později se propracuješ ke stylování. |
||
| severus Profil |
#24 · Zasláno: 24. 8. 2009, 19:00:46
Jistě, jen zůstaňme doma :-)
Co mi není jasné ? Pozadí si nastavím, nastavím mu barvu, to je popsané vcelku srozumitelně (pozadí na té stránce je černé) Nerozumím tomu, jak mám na pozadí nastavit další obrázek (obrázky), bez použití pozicování. Reaguji na tvoji radu, že obrázky, které mají být jako obrázky na pozadí a nenesou žádný význam, nepatří do tagu img, ale na pozadí prvku. Co je to pozadí prvku ? Co je to prvek ? Pokud tam patří, jak je tam dostanu ? Ptám se jako idiot, ale přijde mi to lepší, než žít v bláhové nevědomosti. |
||
| panther Profil |
#25 · Zasláno: 24. 8. 2009, 19:04:03 · Upravil/a: panther
náčrt struktury tvého webu:
<div id="wrapper" style="width: 960px; background: blue url('obal.jpg') no-repeat;"> <!-- vse obaluje, misto blue si dosad odstin barvy, jakou to pozadi ma - at je to stejne pro pripad vypnutych obrazku -->
<div id="left" style="width: xx px; float: left">Obsah leveho sloupce</div>
<div id="right" style="width: xx px; float: left">Obsah leveho sloupce</div>
<div style="clear: both;"> </div><!-- ukonceni floatovanych prvku -->
<div id="footer">Paticka</div>
</div>
<!-- konec wrapperu -->„Co je to pozadí prvku ?“ to je ten background, CSS vlastnost. „Co je to prvek ?“ vše, co je v HTML - div, span, h1-h6, p, strong... Zkrátka elementy, tagy.. |
||
| Bubák Profil |
#26 · Zasláno: 24. 8. 2009, 19:05:23
Je třeba začít od začátku, máš někde aspoň zhruba namalované, jak má tvůj web vypadat?
|
||
| tayger Profil * |
#27 · Zasláno: 24. 8. 2009, 19:05:49
Bubák
nemám chuť ti něco vyvracet, spíše se divím, že se vůbec ozíváš. Přišel jsem mu poradit jak na to a vypíchl jsem pár drobností co má ve zdrojáku špatně a ty jediné co umíš, tak mi vyčítat nesmysly, proto nemá cenu ti něco vyvracet. |
||
| severus Profil |
#28 · Zasláno: 24. 8. 2009, 19:11:18
Bubák : Zhruba je to na www.severusloveschristine.euweb.cz
už to vypadalo tak, jak jsem si to představoval, ale teď se pokouším odstranit pozicování. Dneska už na nic nepřijdu, zítra na to vrhnu, stejně už bych nic nevymyslet, zkusím pochopit pantherovy rady, říkám pochopit, nikoliv zkopírovat. |
||
| tayger Profil * |
#29 · Zasláno: 24. 8. 2009, 19:14:32
severus
Na to se dá říct jediné, experimentovat. Jen tak zjistíš, jak to vlastně funguje, nejdříve změníš hodnoty, pak třeba prvky na které to aplikuješ atd. |
||
| severus Profil |
#30 · Zasláno: 24. 8. 2009, 19:16:10
Nebo to udělám jinak. Začnu prostě od začátku, to bude asi úplně nejlepší
|
||
|
Téma pokračuje na další straně.
|
|||
0