| Autor | Zpráva | ||
|---|---|---|---|
| AdamZ13 Profil |
#1 · Zasláno: 25. 11. 2008, 14:28:57 · Upravil/a: AdamZ13
Zdarec tohle je můj web: www.adush.czweb.org vím, že to je nic moc(hlavně html kod je hroznej) mám problém s tím, že pokaždé když někdo příde na můj web a má jiné rozlišení než 1024x768 tak ty odkazy sou na jiném místě než mají být....
dík za radu:o) |
||
| Railbot Profil |
#2 · Zasláno: 25. 11. 2008, 14:31:44
Nepoužívej absolutní pozicování. Přečti si něco o floatu.
|
||
| igamenir Profil |
#3 · Zasláno: 25. 11. 2008, 15:53:24
souhlasím s floatem, ale když už to jinak nejde (což občas nejde, i když zřídka) tak nepoužívej pozicování k celé stránce ale k jednotlivým divům (divu nastavit position: relative (pokud už nemá vlastní absolute) a tím se budou prvky v tom počítat k divu a ne ke stránce)
|
||
| Petr ZZZ Profil * |
#4 · Zasláno: 25. 11. 2008, 15:58:44
Ahoj Adame,
nevim, zda je to to co hledas, ale treba tam najdes inspiraci: Odkazy jako tlacitka Takto udelane tlacitko se chova jako text, takze se ti nemuze rozhodit text a design tlacitka (aspon si to myslim, ale s webdesignem teprve zacinam). Uzitecne ovsem muze byt pouziti misto obycejne mezery v pripade, ze text tlacitka je vice nez z jednoho slova. Taky na odsazeni textu od okraje tlacitka lze pouzit , aby se pripadne nelamalo na konci radku. Ahoj, Petr |
||
| panther Profil |
#5 · Zasláno: 25. 11. 2008, 16:57:28
Petr ZZZ
„Taky na odsazeni textu od okraje tlacitka lze pouzit , aby se pripadne nelamalo na konci radku. “ na odsazování máme CSS vlastnost padding |
||
| yFang Profil |
#6 · Zasláno: 25. 11. 2008, 17:23:34
na odsazování máme CSS vlastnost padding
Případně se dá využít text-indent, pokud je text jen na jeden řádek. Tak se dá vyhnout problémům s box-modelem. |
||
| panther Profil |
#7 · Zasláno: 25. 11. 2008, 17:28:40
yFang
„Případně se dá využít text-indent, pokud je text jen na jeden řádek. Tak se dá vyhnout problémům s box-modelem.“ to je pravda, ale co když položka menu bude dlouhá? nebo si uživatel zvětší písmo? Položka se roztáhne na dva řádky a bude problém.. |
||
| yFang Profil |
#8 · Zasláno: 25. 11. 2008, 21:26:55
panther
Tak chce to zvážit situaci. ;-) |
||
| Petr ZZZ Profil |
#9 · Zasláno: 25. 11. 2008, 21:49:55
Petr ZZZ: "Taky na odsazeni textu od okraje tlacitka lze pouzit , aby se pripadne nelamalo na konci radku."
Panther: "na odsazování máme CSS vlastnost padding" Ahoj Panthere, dik za alternativni navrh, pomalu se zacinam ucit a pote, co jsem si ted pul hodiny hral s ruznymi hodnotami vlastnosti padding, tak si asi uz budu pamatovat, co to ten padding (a kdyz uz jsme u toho, i margin) je. V konkretnim pripade mi ale dela padding neplechu, protoze se mi pak vetsi ramecek kresli i kolem obrazkovych odkazu, a to nechci. Proto jsem si do tech par textovych odkazu napsal vsude . Jedna se zde jen o jednu mezeru a je mi vcelku jedno, zda bude trosku vetsi ci mensi. Proste jen nechci, aby hrany tlacitka byly nalepene na text uvnitr tlacitka (jako na obr. 1), takze staci vzdy jen jedna mezera na konci a na zacatku textu tlacitka. A aby se (pri hodne malem okne) tlacitko nelomilo vejpul (obr. 2) nebo aby jeden radek nekoncil pismenkem a druhy nepokracoval hranou tlacitka (obr. 3), tak jsem si mezery udelal pomoci a neresil jsem to centralnim formatovanim (resil, jenze kvuli obrazkum mi vyhovuje mala hodnota paddingu, ktera je ale spatna u textu, tak jsem u textu pouzil tu tvrdou mezeru). Pripadné lomeni, tak jak ma byt, kdyz se nevejdou vsechna tlacitka na jeden radek, je videt na poslednim obrazku. Mozna by se ruzne formatovane odkazy daly resit prirazenim trid, ale to zatim moc neumim (zde me napada - daly by se napsat do *.css - souboru zavorky v zavorkach? Neco jako {bla bla {bla bla bla }bla bla } ? ) To by potom snad bylo mozne pomoci dvou trid (class) udelat na jedne strance html pomoci jednoho externiho CSS dva ruzne formaty na odkazy, ne? Zdravim a dekuji, Petr 
|
||
| panther Profil |
#10 · Zasláno: 25. 11. 2008, 22:03:23
Petr ZZZ
„(zde me napada - daly by se napsat do *.css - souboru zavorky v zavorkach? Neco jako {bla bla {bla bla bla }bla bla } ? )“ závorky v závorkách se zapsat nedají, ani nevím, čeho bys tím chtěl dosáhnout :-) jinak na příkladu nevím, jak se ti povedlo ve druhém a třetím případě rozhodit ten rámeček na dva řádky, správně by se mělo stát, co se stalo na čtvrtém příkladu - tlačítka se floatují, tudíž, pokud se nevejde na řádek, šoupne se dolu.. |
||
| Petr ZZZ Profil |
Ahoj,
na závorky v závorkách jsem se ptal kvuli moznosti formatovat dvojím zpusobem odkazy. Chtel bych v jednom a tom samém externim *.css na formátování odkazu textových pouzit jednu definici stylu a na formátování odkazu obrázkových jinou. Muzete mi prosim nekdo tyto dva kody zapsat do dvou trid v ramci jednoho externího *.css tak, abych mohl potom v jednom a tom samém html-souboru odkazovat zde na jednu a tam na druhou tridu? Ja si myslim, ze to musi jit, ale nevim, jak to zapsat. Jak udelat dve trídy – class? Zdravím a dekuji predem, Petr /*obrazkove odkazy – jedna třída*/
a:link { padding: 0.4em; border: inset 0.5em; border-color:#99CC66; background-color:#CCFF99; color:#000000; }
a:visited { padding: 0.4em; border: inset 0.5em; border-color:#99CC66; background-color:#CCFF99; color:#000000; }
a:active { padding: 0.4em; border: inset 0.5em; border-color:#99CC66; background-color:#CCFF99; color:#000000; }
/*textove odkazy – druhá třída*/
a:link { padding: 0.1em; border: outset 0.2em; border-color:#33CC33; background-color:#FFFFFF; color:#000000; }
a:visited { padding: 0.1em; border: outset 0.2em; border-color:#33CC33; background-color:#FFFFFF; color:#000000; }
a:active { padding: 0.1em; border: outset 0.2em; border-color:#33CC33; background-color:#FFFFFF; color:#000000; }
K predchozímu dotazu Panthera: Rozhození rámečku na dva řádky souvisí s mezerami; pro názornost jsem hodil na web priklad. V horní sade zustavaji tlacitka vzdy cela, dole se v závislosti na sirce obrazovky ruzne trhají. Jediný rozdil je v sázení mezer, delaných bud znaky ("tvrdých"), anebo mezer "bílých", delaných obycejným mezerníkem (klávesou space). V horní sade tlacítek se v textu samotného tlacitka, t.j. mezi odkazem *.html> a tagem </a> bílé mezery vubec nevyskytují, jsou jen mezi tlacitky, cili az za tagem </a> . Tam bílé mezery být musí, jinak by tlacitka asi byla vsechna v jednom rádku (jisty si tim nejsem, mozna by se to lamalo za koncem tagu); kazdopadne by ale byla nalepená na sebe, coz by nebylo hezké. Pro úplnost uvádím jeste celý kód, pokud bych nekdy v budoucnu stehoval stranky nebo z nich ten soubor vymazal. Da se ulozit jako *.html a prohlizet tez na disku; akorat odkazy nebudou fungovat, pokud nebude pripojen internet. Kdyby si v tom náhodou nekdo vsimnul nejake hovadiny, prosim o upozorneni. (Pisu <b /> misto <br> protoze jsem se jeste nerozhodl, zda mam psat v HTML nebo v XHTML; momentalne pisu v HTML, ale kdybych se v budoucnu rozhodl jinak, chci potom mit min prace s prepisovanim, a protoze prohlizece udajne stráví to <br /> i v HTML, tak to tak pisu. Budu ale vdecný za jakékoli dalsí pripomínky). (Ty odkazy vedou na me stranky, jejichz design momentalne resim – musim u vsech souboru menit hlavicky, ktere budou odkazovat na externi *.css a muze chvili trvat, nez to bude mit nejakou prijatelnou optiku.) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Neposlusna tlacitka</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body { margin:0.4em 1em 1em 1em; background-color:#000000; color:#3366FF; font-family:Arial,sans-serif; font-size:18px; font-weight:bold; }
a:link { padding: 0.3em; border: outset 0.5em; border-color:#33FFFF; background-color:#99FFFF; text-decoration:none; color:#000000; }
a:visited { padding: 0.3em; border: outset 0.5em; border-color:#3399FF; background-color:#3366FF; text-decoration:none; color:#000000; }
a:active { padding: 0.3em; border: outset 0.5em; border-color:#3399FF; background-color:#3366FF; text-decoration:none; color:#000000; }
a:hover { padding: 0.3em; border: outset 0.5em; border-color:#FF6633; background-color:#FF6633; text-decoration:none; color:#FFFF33; }
p, ul,ol,li,div,td,th { font-size:18px; }
p { line-height: 350% }
</style>
</head>
<body>
<br />
<center><p>
<a href="http://www.zabra.at/demonstration.html#ende_okt_2008"> Emil Kučera ist wieder zu Hause! </a>
<a href="http://www.zabra.at/publikationen_petr_zabransky.html"> Pub likationen </a>
<a href="http://www.zabra.at/fotos.html"> Bilder: Fotos </ a>
<a href="http://www.zabra.at/grafik.html"> Bilder: Grafik </a>
<a href="http://www.zabra.at/termine_eigene.html"> Eigene Termi ne </a>
<a href="http://www.zabra.at/termine_sonstige.html"> Sonstige T ermine </a >
<a href="http://www.zabra.at/zabra_00000016.html"> Arbeitsgemeinscha ft Österreichischer Entomologen </a>
<a href="http://www.zabra.at/externe_links.html" TARGET="_blank"> Sonstige Links </a>
<a href="http://www.zabra.at/impressum.html"> Kontakt, Impressu m und Copyright </a>
<br /><br />
<a href="http://www.zabra.at/demonstration.html#ende_okt_2008"> Emil Kučera ist wieder zu Hause! </a>
<a href="http://www.zabra.at/publikationen_petr_zabransky.html"> Publikationen </a>
<a href="http://www.zabra.at/fotos.html"> Bilder: Fotos </a>
<a href="http://www.zabra.at/grafik.html"> Bilder: Grafik </a>
<a href="http://www.zabra.at/termine_eigene.html"> Eigene Termine </a>
<a href="http://www.zabra.at/termine_sonstige.html"> Sonstige Termine </a >
<a href="http://www.zabra.at/zabra_00000016.html"> Arbeitsgemeinschaft Österreichischer Entomologen </a>
<a href="http://www.zabra.at/externe_links.html" TARGET="_blank"> Sonstige Links </a>
<a href="http://www.zabra.at/impressum.html"> Kontakt, Impressum und Copyright </a>
</p><p>
Copyright © Petr ZZZ. Alle Rechte vorbehalten. All rights reserved. Všechna práva vyhrazena.
</p></center>
</body></html>
|
||
| yFang Profil |
#12 · Zasláno: 26. 11. 2008, 12:10:29
Petr ZZZ
Nechceš dát odkaz na tu stránku? |
||
| Petr ZZZ Profil |
yFang: "Nechceš dát odkaz na tu stránku?"
Myslel jsem si, ze by to nekdo mohl vedet z fleku, ale samozrejme mohu priklad uvest; dole jsou pruslusne kody obou souboru (html a css), do kterych bych potreboval nadefinovat ty dve tridy. Abyste mi spravne rozumeli: dezajn jako takovy si udelam (v tom prikladu treba nestoji za nic), ale ty tridy definovat neumim. Proste nevim, jak priradit nekterym odkazum takovy a jinym odkazum jiny styl (jaky presne styl v tom a onom pripadu, to uz si konkretne vyresim - ale jak ty dva ruzne styly priradit?). V html souboru bych chtel mit odkazy formatovane dvema ruznymi zpusoby. V externim CSS by ty dva ruzne formaty byly definovane. Predpokladam, ze tridami (class), ale nevim, jak je zapsat do toho html souboru a do toho CSS-souboru. Toto je priklad na ten html-soubor: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fotos von Petr ZZZ</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="fmdd.css">
<style type="text/css">
</style>
</head>
<body>
<p><div class="tl">
<span class="li"><span title="to the list of beetle pictures">Zur Übersicht der Käferfotos: </span>
<a href="fotos_ikonen.html" title="icons">Ikonen</a> <a href="fotos_namen.html" title="names">Namen</a></span>
<span class="re">
<a href="zabra_00000095.html" class="pfeil"><img src="bilder/arrow01prev.jpg" border ="0" alt="previous: Capnodis tenebrionis"></a>
<a href="zabra_00000007.html" class="pfeil"><img src="bilder/arrow01next.jpg" border ="0" alt="next: Dicerca alni"></a></span>
</div></p>
<p>
<center><img src="bilder/eurythyrea_quercus_copyright_petr_zabransky_148KB.jpg" class="pic" title="Prachtkäfer Eurythyrea quercus">
</center></p>
<div class="block">
<p>Der etwa 2 cm große Prachtkäfer <i>Eurythyrea quercus</i> macht seine mehrjährige Larvalentwicklung <a href="zabra_00000015.html"><img src="bilder/zabra_00000015a.gif" alt="Eurythyrea quercus Schlupfverlauf"></a> im Starktotholz mehrhundertjähriger Alteichen durch. Die erwachsenen Käfer verlassen das Brutholz, in welchem sie sich entwickelt haben, und verbringen den Großteil ihrer Zeit in luftiger Höhe, in den Kronen der Eichen. Die Weibchen können an heißen Sommertagen an stark dimensioniertem, sonnigem Totholz angetroffen werden, wenn sie mit der Eiablage beschäftigt sind <a href="publikationen_petr_zabransky.html" title="list of publications">(Zabransky 1991a, 1998, 2001a, 2004a)</a>.
</p></div>
<br /><br />
<center><p><a href="index.htm" title="back to start" class="start">zur Startseite</a></p></center>
<br /><br />
<center>
<a href="impressum.html" title="impressum, copyright" class="cprght">Copyright © Petr ZZZ.</a > Alle Rechte vorbehalten. All rights reserved.
</center>
<br />
<br />
<br />
<br />
<br />
</body></html>A toto je priklad prislusného css-souboru se styly (jsou tam i nejake zbytecnosti, toho si nevsimejte): body { padding:10px; background-color:#000066; color:#3399FF; font-family:Arial,sans-serif; font-size:20px;}
/*obrazkove odkazy: toto má být jedna třída – ale jak ji zapsat?*/
a:link { padding: 0.4em; border: inset 0.5em; border-color:#99CC66; background-color:#CCFF99; color:#000000; }
a:visited { padding: 0.4em; border: inset 0.5em; border-color:#99CC66; background-color:#CCFF99; color:#000000; }
a:active { padding: 0.4em; border: inset 0.5em; border-color:#99CC66; background-color:#CCFF99; color:#000000; }
/*textove odkazy: toto ma být druhá třída – ale jak ji zapsat?*/
a:link { padding: 0.1em; border: outset 0.2em; border-color:#33CC33; background-color:#FFFFFF; color:#000000; }
a:visited { padding: 0.1em; border: outset 0.2em; border-color:#33CC33; background-color:#FFFFFF; color:#000000; }
a:active { padding: 0.1em; border: outset 0.2em; border-color:#33CC33; background-color:#FFFFFF; color:#000000; }
p, ul,ol,li,div,td,th,address,blockquote { font-size:20px; }
p { line-height:150%; }
.block { text-align:justify; }
.cprght { font-size:20px; }
.fotoliste { font-size:20px; }
.start { font-size:20px; }
.li { float:left; }
.re { float:right; }
.tl { width:863px; margin-left:auto; margin-right:auto; } |
||
| AdamZ13 Profil |
#14 · Zasláno: 26. 11. 2008, 19:42:05
hmm to je divný na jednom z mích starších webu změna rozlišení nerozhází web a přitom je to na 99% stejný kod
http://cityofheroes.czweb.org/ |
||
|
Časová prodleva: 4 dny
|
|||
| Petr ZZZ Profil |
#15 · Zasláno: 30. 11. 2008, 14:35:22
reaguji sám na sebe (zasláno: 26.11.2008 18:49:36)
Snad jsem to vyresil (viz nove vlakno). Reaguji na Adama Ahoj Adame, opravdu tomu pramálo rozumim, ale nikdo neodpovídá, tak to zkusím. Koukal jsem na kod Tveho druheho prikladu a dovedl bych si predstavit, ze s jeho funkcnosti a s nefunkcnosti toho prvního ma snad do cineni neco z techto udaju: position:absolute; left:823px; top:330px; vspace="20"hspace="209" noresize Co je z-index:15 nevim. A spoustu dalsich veci taky nevim. Takze Ti mozna nezbyde nez cekat, az odpovi nekdo, kdo se v tom vyzna, nebo budes muset nastudovat kazdou vlastnost, kterou nevis zpameti, a pak te reseni pri trose stesti snad trkne. Zdravim, Petr |
||
| Petr ZZZ Profil |
#16 · Zasláno: 30. 11. 2008, 15:19:36
Do kódu, který jsem uvedl v mém příspevku z 26.11.2008 02:16:34, se nejakym zpusobem, nechápu jak, vloudily (jeste k tomu na naprosto nepochopitelná místa uprostred slov – napr. Termi ne, T ermine, Impressu m) bílé mezery, které celý příklad znehodnocují. Příklad na mém webu funguje tak jak má a mám za to, ze odtam jsem kód kopíroval. Mohu se samozrejme mýlit, v tom případe se omlouvám. Ten příklad chování tlacítek za ruzné šířky okna nechávám pro vsechny případy az na dalsí na mém webu.
|
||
|
Časová prodleva: 15 let
|
|||
0