Autor Zpráva
Petr ZZZ
Profil *
#1 · Zasláno: 22. 11. 2008, 20:37:16 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Ahoj,

jsem zde (v diskuzi) poprve, tak mi dovolte nejprve pochvalit stranky jakpsatweb, ktere mi uz fakt hodne pomohly. Rozumim spis broukum nez pocitacum, ale nakonec jsem se prece jen rozkyval udelat si vlastni web. Ty uplne zacatky mi vysvetlil kamarad zive, a pak jsem se pokousel studovat stranky http://de.selfhtml.org/index.htm . Ne ze by mi nemcina delala problemy, ale musim rict, ze spoustu veci jsem pochopil az potom, co jsem si to precetl na www.jakpsatweb.cz . Presto mam dotaz (zrejme/doufam) primitivni a doufam, ze mi pomuzete.

Moje stranky uz jsou na webu (www.zabra.at – zatim zel jen v nemcine), ale ted jsem je zacal uplne prekopavat. Chci si udelat novy layout (nastesti uz aspon zhruba vim, jak to delat za pomoci centralniho souboru 
.css
) a taky trochu zlepsit funkcnost, napr. hojnejsimi odkazy na pribuzne stranky. Konkretne: z obrazku brouka se zatim dostanu jen na hlavni stranku, ale chci si udelat odkazy na dalsiho brouka a tam zas na dalsiho atd. Priklad: kliknete-li na tuto stranku, tak tam nahore na te "modre" strance uz jsou udelane sipky, na ostatnich jeste ne. Protoze tech ostatnich html-souboru, kazdy s jednou fotkou brouka, je momentalne asi stovka a budou pribyvat, chci si udelat "kopyto", do ktereho bych uz jen doplnoval prislusne odkazy na obrazky a na nejake dalsi soubory (dalsi ci predchozi brouk), ale jinak by layout byl castecne pevne dany, castecne by se doladil v cetralnim souboru css, na ktery bude kazda stranka odkazovat. A to "kopyto", protoze tech souboru bude hodne, musi byt dobre vymyslene, abych ho v budoucnu uz nemusel menit, protoze menit dodatecne stovku nebo i vic souboru by bylo na mrtvici (to je to, co me ceka ted, a nechci aby se to opakovalo :-) .

Tim se konecne dostavam ke konkretni otazce. Nahore na strance nad obrazkem je vlevo text (Zur Uebersicht der Kaeferfotos) a dva linky (Ikonen, Namen) a vpravo ve stejnem radku jsou jeste dve sipky. Mezi tim textem vlevo a temi sipkami vpravo chci mit prostor, a ten jsem vytvoril tupym (dvacetinasobnym!!) opakovanim prikazu 
 
, ale mam silne podezreni, ze to neni zrovna semanticky hezke, nehlede na to, ze to zvetsuje objem dat. Proto se chci zeptat, zda nekdo nevi o nejakem elegantnejsim reseni, jak udelat prostor mezi vlevo a vpravo. To pripadne reseni by melo zohlednovat nasledujici skutecnosti a cile: Klikne-li se sipkami doleva nebo doprava, dostanu se k nove strance html, ktera je s tou predchozi temer identicka. Lisi se druhem vyfoceneho brouka, pripadne nejakym textem pod broukem, ale – a ted pozor – eventualne taky velikosti obrazku (ja vim, ze by mely byt ty obrazky vsechny stejne velke – mozna to jeste nekdy upravim). A zde bych si pral, aby vlevo ten text nad obrazkem (Zur Uebersicht der Kaeferfotos: Ikonen Namen) a vpravo ty dve sipky se klikanim od souboru k souboru ani o vlas nehnuly. To je dulezite nejen z estetickych duvodu, ale take kvuli funkcnosti tech sipek. Ty tam maji byt proto, aby divak ("juuzr") mohl pohodlne proklikat treba stovku obrazku, aniz by byl nucen hnout mysi. Kdyz ten roman shrnu:

Lze nejak sikovneji (usporneji) nez tim dvacetinasobnym 
 
dosahnout toho sameho efektu? Slo by napr. nejak zkombinovat 
repeat
a 
 
a rict masince, kolikrat ma repetovat? To moje dosavadni reseni se mi nelibi: 

                                       


Zdravim a dekuji predem,

Petr

P.S. Omlouvam se za chybejici diakritiku.
Petr ZZZ
Profil *
#2 · Zasláno: 22. 11. 2008, 20:51:26
Odpovědět Citovat
Pardon: To www.zabra.at v uvodnim prispevku, zda se, nefunguje, tak doufam, ze to klapne ted.

Ahoj, Petr
blackjoker
Profil
#3 · Zasláno: 22. 11. 2008, 20:57:57 · Upravil/a: blackjoker
Odpovědět Citovat
Dobrý den,
dejte to do dvou divů a přidělte jednomu float: left; a druhému float:right;
jsou i další možnosti, ale tento by měl vyhovovat.
tedy: 
<div class="vlevo"><p><span title="to the list of beetle pictures">Zur Übersicht der Käferfotos: </span> &nbsp; 
<a href="fotos_ikonen.html" title="icons">Ikonen</a> <a href="fotos_namen.html" title="names">Namen</a> </div> 
<div class="vpravo"> 
<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></div>

A CSS 
.vlevo 
{float: left;} 
.vpravo 
{float:right;}

edit: zvýraznění
Bubák
Profil
#4 · Zasláno: 22. 11. 2008, 21:48:49 · Upravil/a: Bubák
Odpovědět Citovat 
<div style="font-size: 1.2em; padding: 2em 0;">
<h1 style="float: left; font-size: 1em; padding-right: 1em;">Zur Übersicht der Käferfotos:</h1>   
<img src="vpravo.png" style="float: right;">
<img src="vlevo.png" style="float: right;">
<a style="padding: 0 .2em;" href="#">Ikonen</a>
<a style="padding: 0 .2em;" href="#">Namen</a>
</div>
To je jen ukázka, jak na to, styly dej do externího CSS souboru. Divu doporučuji dát šířku a vycenrovat.
Mezery jde zvětšit také u příkladu výše pomocí marginu, nebo paddingu.
Petr ZZZ
Profil *
#5 · Zasláno: 23. 11. 2008, 00:14:52 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Ahoj blackjoker a bubaku,

jste jednicky! Diky moc za bleskove odpovedi! Kombinaci obou Vasich navrhu a dohledanim nejakych drobnosti v internetu jsem to zrejme vyresil (mam nainstalovany jen IE, nevim, zda to jezdi i v jinych prohlizecich). Puvodni blackjokerovo reseni nebylo uplne optimalni, protoze jsem nechtel, aby ten text (Zur Uebersicht der Kaeferfotos) vlevo a ty sipky vpravo presahovaly vlevo a vpravo okraje obrazku; dobre to vypadalo jen tehdy, kdyz bylo okno presne na sirku obrazku (priznam se, ze jsem tento problem cekal, ale nelituji, ze jsem to vyzkousel, aspon jsem se neco zase naucil). Bubak mi ale dal nesmirne uzitecny tip, a sice ze divu lze priradit rozmer (napr. 800px), coz jsem vubec netusil a za pomoci tohoto doplnku se blackjokeruv navrh dal vytecne zoptimalizovat. Aspon doufam – jak rikam, mam zatim jen IE. Jen pro uplnost bych se jeste rad zeptal:

1. Cetl jsem, ze div je blokovy a span radkovy element, tak jsem aspon to left a right obalil do span (a ne do div), protoze je vse v jednom radku. Z cehoz plyne dalsi otazka: Smi span obsahovat jeste dalsi span? (A smi div obsahovat span nebo dokonce span a v nem jeste jeden span?) Kvuli textu ve zlute bubline (u toho "Zur Uebersicht der Kaeferfotos") tam uz jeden span je a ted to je 
<div> <span> <span> </span> </span> </div>
. Smi se to takhle prokladat do sebe? Zkusil jsem to a funguje to, ale rad bych vedel, zda se to opravdu smi nebo zda mi to prohlizec zkratka jenom sezvejkal (mam IE, ktery, jak se vsude pise, skousne ledacos; zatim se mi nepodarilo zjistit, jakou verzi, odhaduji tak 3-4 roky starou). A slo by pripadne napsat 
<span> <span> <span> </span> </span> </span>
, cili trikrat do sebe vlozeno?

2. Nevim proc, ale ten obrazek se mi puvodne lepil bez jakekoli mezery primo pod tu radku nad nim a pomohly az dva 
<br />
(jeden nestacil), ackoli predtim mel obrazek odstup.

3. Jen tak pro zajimavost – existuje nejaky prikaz, jak upravit odstup od stredu smerem doleva a smerem doprava (misto nalepeni k levemu a pravemu okraji)? Treba neco podobneho jako padding:20px; ale ne od okraje, ale od stredu. Kdybych dva takove "odstredove" paddingy, jeden doleva a jeden doprava, priradil tem dvema class="li" a class="re", tak by to asi melo taky fungovat, ne? Jenom jak udelat levy a pravy "odstredovy" padding? Da se vzdalenost od stredu vubec nejak primo formatovat? Zkousel jsem hledat, ale pokud jsem dobre pochopil co jsem nasel, tak margin a padding urcuji vzdalenost od kraje (horniho, praveho atd...) smerem do stredu. Nasel jsem udaj, ze margin-left:auto; margin-right:auto; zpusobi vycentrovani (a pouzil jsem to), ale jevi se mi to spis jako trik nez jako opravdovy prikaz. Da se vzdalenost smerem od stredu ke kraji formatovat nejak "primo"?

Jeste jednou treskuty dik!

Petr

P.S. Pro uplnost uvadim jeste to hlavni z toho externiho souboru fm.css: 

body { padding:20px; background-color:#000066; color:#3399FF; 
font-family:Arial,sans-serif; font-size:20px;}
a:link { text-decoration:underline; color:#CC66FF; }
a:visited { text-decoration:underline; color:#0066CC; }
a:active { text-decoration:underline; color:#996699; }
a:hover { text-decoration:underline; color:#99CCFF; }
p, ul,ol,li,div,td,th { font-size:20px; }
.block { text-align:justify; }
.cprght { font-size:20px; }
.start { font-size:20px; }
.li { float:left; }
.re { float:right; }
.tl { width:863px; margin-left:auto; margin-right:auto; }
blackjoker
Profil
#6 · Zasláno: 24. 11. 2008, 18:41:14
Odpovědět Citovat
1) Ano můžete mít spanů v sobě nebo v divu, kolik jen budete chtít. Ale nesmíte mít div ve spanu. Tedy blok v řádku.
2) Odstup by se dal řešit margin-bottom: 25px(zhruba); ke class .tl
3) Pokud je mi známo tak nejde použít žádný odstředový padding nebo margin, ale dá se použít zadávání hodnot v procentech (tedy např.: margin-left: 40%;). Nebo se dá použít margin: auto; ten však nefunguje u IE. Pro IE je toto řešení: http://www.jakpsatweb.cz/css/text-align.html
Bubák
Profil
#7 · Zasláno: 24. 11. 2008, 19:40:25
Odpovědět Citovat
„mam nainstalovany jen IE, nevim, zda to jezdi i v jinych prohlizecich“
Tak koukni třeba na http://browsershots.org/ a na www.totalvalidator.com/validator/ValidatorForm

„Smi span obsahovat jeste dalsi span? (A smi div obsahovat span nebo dokonce span a v nem jeste jeden span?)“
Může, ale obecně se dá říct, není dobré zaplevelovat kós zbytečnými DIVy a SPANy. To je jeden z důvodů, proč jsem použil nadpis H1, stránka totiž žádný nadpis nemá.
TY dva odkazy by bylo vhodné dát do MENU nebo UL, samotné odkazy do LI a nastylovat, ale mi se to nepodařilo, někdo zkušenější by to jistě zvládnul.

„ Nevim proc, ale ten obrazek se mi puvodne lepil bez jakekoli mezery primo pod tu radku nad nim a pomohly az dva <br />“
Na odsazení je margin a padding. Jak ve tvém případě nejlépe udělat zalomení, nevím, pravděpodobně bych měl horní část v DIVU, pak IMG "jen tak" (tebou použitá DTD to dovoluje) a dole odstavec (odstavce).
<br /> Píšeš v HTML, měl bys psát <br>

„margin-left:auto; margin-right:auto; zpusobi vycentrovani (a pouzil jsem to), ale jevi se mi to spis jako trik“
Jde o zcela regulérní a běžně používaný postup. Já sice zpravidla píši jen 
margin:auto;
ale hlavně proto, že je to kratší zápis.

blackjoker
„Nebo se dá použít margin: auto; ten však nefunguje u IE.“
Ale funguje, pokud je IE6 nebo IE7 ve standardním režimu. Ale vycentrování pro starší IE je naštěstí rutinní záležitost.

„Ale nesmíte mít div ve spanu.“ To je fakt, výjimky pominu
„Tedy blok v řádku.“ To platí pro HTML, v CSS si můžu vlastnosti "block" a "inline" deklarovat podle potřeby a ničemu to nevadí.
Petr ZZZ
Profil
#8 · Zasláno: 26. 11. 2008, 16:16:20
Odpovědět Citovat
Ahoj,

diky vsem za odpovedi, ktere mi moc pomahaji.

Bubák: <br />Píšeš v HTML, měl bys psát <br>
Cetl jsem, ze prohlizece to vezmou, i kdyz je to naopak nez jak by melo byt, a protoze nevim, zda v budoucnu neprejdu eventualne na XHTML, tak uz to tak pisu. Pokud jsem si to zapamatoval dobre, tak v XHTML nelze u odkazu pouzit target na otevreni noveho okna, a proto pisu v HTML, abych to treba u stranky "externi odkazy" mohl pouzit (tam to ma smysl, protoze po nekolikerem kliknuti by divák moje stránky uz nemusel najit; jinak je samozrejme lepsi target nepouzivat a v ramci me vlastni prezence to ani neni treba, protoze mam vsude odkaz na hlavni stranku). Taky jsem cetl, ze u XHTML staci malinka chybicka a uz se stranka nezobrazi, tak se toho XHTML taky trochu bojim. Jaky je zde na to nazor? Ma XHTML oproti HTML krome nevyhod take nejake vyhody?

Zdravim, Petr
panther
Profil
#9 · Zasláno: 26. 11. 2008, 16:37:36 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Petr ZZZ
„Taky jsem cetl, ze u XHTML staci malinka chybicka a uz se stranka nezobrazi, tak se toho XHTML taky trochu bojim.“
bojíš se zbytečně. HTML bylo, je a i bude, takže na lomítka vklidu zapomeň

Jinak výhody a nevýhody se tu řeší v poměrně rozsáhlém vlákně
Měsíček
Profil
#10 · Zasláno: 26. 11. 2008, 16:54:52
Odpovědět Citovat
"Ma XHTML oproti HTML krome nevyhod take nejake vyhody? "

Možná. Přečti si specifikaci, jenže faktem je, že novinky, které jsou a budou u XHTML 2.0 v praxi nikdy nevyužiješ.

"Taky jsem cetl, ze u XHTML staci malinka chybicka a uz se stranka nezobrazi, tak se toho XHTML taky trochu bojim."

Stačí to na to, aby XML parser vyhodil chybu.

"Pokud jsem si to zapamatoval dobre, tak v XHTML nelze u odkazu pouzit target na otevreni noveho okna,"

Myslím, že ne.
Petr ZZZ
Profil
#11 · Zasláno: 27. 11. 2008, 05:34:57
Odpovědět Citovat
Ahoj,

diky moc za odpovedi a pripominky, ktere jako vzdy jsou pro mne velmi cenné. Cetl jsem clanky Petra Staníčka proc pouzivat a Jiřího Koska proc nepouzivat XHTML a asi mam tendenci zustat pri HTML. Nezivim se webdezajnem a ani to nemam v umyslu, jen si chci delat sve stranky, a pokud mi to HTML zjednodusi a XHTML ztizi, tak je to jasne, bez ohledu na to, zda XHTML je novy standard a zda se prosadi nebo neprosadi. Myslim, ze stranek psanych v HTML je na svete tolik a tak objemnych, ze i budouci prohlizece se neobejdou bez toho, aby je i nadale podporovaly, protoze nelze predpokladat, ze by tolik autoru sve stranky nákladne predelavalo, tak ani necitim nutnost prechazet na novejsi XHTML. Samozrejme bych chtel i v HTML psat "slusne", jako napr. pouzivat u tagu zasadne mala pismenka, ale proto soubor jeste nemusim jako XHTML i deklarovat. Mam ale podezreni, ze vec ma jeden aspekt, ktery se v cele te diskuzi mihnul jen tak okrajove, ktery ale pro mne muze mit velkou dulezitost.

Proto bych se jeste rad zeptal: Kdybych chtel prece jen nekdy svoje stranky predelat na XHTML, znamenalo by to taky, ze

1. budu muset vsem souborum dat koncovky *.xhtml misto dosvadnich *.html a ze

2. z tohoto duvodu prestanou pripadne odkazy na me stranky z cizich stranek fungovat, dokud tam odkazy nebudou rovnez aktualizovány, a ze take vyhledavace budou hazet "stranka neexistuje" a tak podobne, dokud na ty "nove" stranky v XHTML nebudou "zvyklé"? (Mít stranky na webu ve dvou ruznych verzich nechci.)

Pokud tomu tak je (myslim ze ano, ale nejsem si jisty, proto se ptám), tak pro me dodatecny prechod na XHTML neprichází v úvahu, protoze dosazitelnost mých stránek na původních adresách je pro mne velmi dulezita.

Zdravim a dekuji predem za dojasneni nebo prípadné vyvrácení omylu,

Petr
Časová prodleva: 15 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0