« 1 2 »
Autor Zpráva
Viki
Profil *
Zdravím pěkně, nevítě prosím někdo, jak to učiniti, aby (mluvíme tedy o situaci, které nastává v IE), když mám v prostředním sloupci obrázek, nezůstával tento až pod koncem textu levého sloupce. V levém sloupci je hromada textu a obrázek ve středním se pouze v IE nastaví až pod konec tohoto textu. Ale jen obrázek. Když je v prostředním sloupci text, ten se chová ve všech prohlížečích normálně.
Omlouvám se, že neukážu svůj příklad, ale už jsem to vyřešil. Ale dost neelegantně, tak prosím o nápovědu, abych lépe pochopil Pixyho 3layout. Asi to má co do činění s obtékáním, ale nevím, zas tak dobře programovat neumím. Děkuji.
Nox_lbc
Profil
Asi to má co do činění s obtékáním, ale nevím, zas tak dobře programovat neumím. Děkuji.

Tvoje intuice o obtékání byla naprosto správná...

http://www.google.cz/search?client=firefox-a&rls=org.mozilla%3Acs%3Aof ficial&channel=s&hl=cs&q=HTML+CSS+obt%C3%A9k%C3%A1n%C3%AD&lr=&btnG=Vyh ledat+Googlem
Petroff
Profil
1.Je nutné zabránit zúžení prostředního sloupce pod jistou mez pomocí min-width:xxxx.
2.Nevýhodou je že v IE6 a starších tato vlastnost chybí - jde to ošetřit pomocí expressions (podmínkou je zapnutý javascript)
3.Nejlepší by bylo použít layout se všemi třemi sloupci float:left a čističem, pak k nabourání sloupci mezi sebou nedojde.

Nejjednodušší=1+2
Viki
Profil *
Díky za náměty, mrkám na to a dám vědět.
Viki
Profil *
Tak jo, trochu jsem se začetl do CSS, které moc neovládám, stačilo banální float: right do <DIV> s obrázkem. Stále rozpracovaná verze je na mém webu, na stránce, kde experimentuji s novým vzhledem.
Viki
Profil *
Tak jsme zase u pixyho, našel jsem u něj tento příspěvek, kde právě řeší, jak to učiniti, aby se sloupec nezmenšoval pod určitou mez v i IE. Pixyho řešení. Když jsem to já neumětel zkopíroval snad do odpovídajícího místa, trochu poupravil na mé požadavky. A na IE mi to hlásí, že, že chyba v programu. On se mi chudinka zhroutil, tak to tu ještě nebylo....
Petroff
Profil
Rád ti pošlu svůj 3sloupcový LAYOUT který je obrázkovzdorný, a napíšu ti jak si ho přizpůsobit.
Právě jsem ho dokončil tak aby fungoval ve všech prohlížečích (IE6 trochu zlobila), ale jdu spát, tak až zítra, ať nakonec něco nezkazím (minimálně radost z díla).
Viki
Profil *
Petroff
Díky, žádné spěchy. Já si teď dodělávám ještě prográmek na tu stránku v JS. Původně v packalu, pardon, pascalu, předělaný na C++, a teď jsem si půjčil učebnici JS a objevuju tento pgm jazyk. Výpočet data velikonoc podle Gaussova algoritmu. No, ale to už by patřilo do diskuze o JS, zatím ale nemám problém. Jestli chceš můj mejl nebo to zveřejníš v diskuzi, jak je ti libo libové.
Viki
Profil *
Ten obrázek na Pixiho za žádnou cenu nechce zůstat uprostřed (to asi kvůli tomu obtékání) a navíc se mi stále nepodařilo ošetřit minimální mez, pod kterou sloupec nesmí se zmenšiti
Petroff
Profil
Tento layout má ještě jednu výhodu - levý sloupec určený pro navigaci (příklad použití viz. 2.zdroják) je ukotven takže se nepohybuje při skrolingu.
Ve zdrojáku jsou připravené i obrázky - skryl jsem do komentáře 6 příkladů, jak zabudovat do kódu obrázek v blokovém zobrazení (tedy ne float).
Když je použiješ (ne najednou !!! - jeden po druhém) tak si zárověn otestuješ chování a vzhled stránky,doporučuju.
Kdybys měl doopravdy zájem tak se ozvi - pár drobností ještě doplňuju např. vybarvení podkladu bočních sloupců, funkci min-width u IE6 a náhradu za marquee - validní. Taky se teprv učím css, tak mi všechno dlouho trvá a dává dost zabrat.
Ve stylech si (kromě barev a okrajů sloupců) snadno nastavíš vlastnost min-width,a to podle nejširšího bloku ve středním sloupci. Taky můžeš nastavit šířky bočních sloupců podle svého.
======================================[1]============================= ==========

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trojsloupcový dynamický layout s ukotveným levým sloupcem</title>
<style type="text/css">
html,body {height: 100%; overflow: hidden; margin:0; padding:0; background: #ccc; letter-spacing: 0.12ex; font-size: 100% }

img { display: block; border: 0; margin: 1ex }
b { display: block; text-align:center; font: bold small-caps 150%/1.5 Garamond,serif }

marquee#resizer {display:table-cell; width:10%; overflow: hidden; color: yellow }
marquee.filler { visibility:hidden; height: 1% } /* Vizuální odstranění */

#obal_HACP {position: relative; height: 100%; overflow: auto }
#obal_AC {position: relative; min-width: 830px } /* hodnota= součet šířek: 155(levý)+222(pravý)+???(střední) */
#obal_IE_AC {position: relative; height: 1%}

#H_hlavicka,#P_paticka {clear:both; position: relative; height:4em; text-align:center }
#H_hlavicka { background: #FF6; font-size:larger; border: 7px outset #AA88da }
#P_paticka { background: white;font-size: smaller }

#H_hlavicka div {position: absolute;left:0;width:100%;right:0; padding: 1ex; color: #606 }
#P_paticka div {position: absolute;left:0;width:100%;right:0; color: gray }

#A_stred { float: left ; padding-left:155px; padding-right:222px; position: relative;; }
#B_levy { position: fixed; width:155px; top:5.5em; left: 0; bottom: 0px; z-index:0}
#C_pravy { float: right; margin-left:-222px; width:222px }

/************** ZDE SE NASTAVÍ VZHLED SLOUPCŮ ********************/
#A_stred div { padding: 1ex 1ex; color: white; background: black }
#B_levy div { padding: 1ex 1em; color: blue }
#C_pravy div { padding: 1ex 1em; color: red }

/************** PŘÍKLADY STYLŮ PRO PRÁCI S OBRÁZKY JAKO BLOKY *************/
#Obr_1 { margin: 50px auto 20px auto }
#Obr_2 {width: 450px; margin: 1ex auto }
.guma img {width: 100%; margin: 0px } /* POUŽITÍ: <div class="guma"> <img ...bez rozměrů....> </div> */
.rozmezi img {min-width:50px; max-width:600px} /* POUŽITÍ: <div class="guma rozmezi"> <img.........</div> */
.vyrez {width:96%; height:500px; overflow:auto} /* POUŽITÍ: <div class="vyrez"> <img.........</div> */
/* POUŽITÍ: <div class="guma vyrez"> <img.........</div> */
</style>
<!--[if IE]>
<style>
marquee#resizer {width: 100%}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
#H_hlavicka,#P_paticka { margin-right:14px }
#obal_HACP { width: 100%; }
#obal_AC { }
#obal_IE_AC { }
#B_levy { position: absolute }
</style>
<![endif]-->
</head>
<body>

<div id="B_levy">
<div>
<b> B = levý </b>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Donec tempor mauris in ligula. Suspendisse ac dolor
ENDUS.
</div>
</div>

<div id="obal_HACP">
<div id="obal_AC">

<div id="H_hlavicka">
<div><b> H = hlavička </b> O její výšku musíme odsadit levý sloupec </div>
</div>

<div id="obal_IE_AC">

<div id="A_stred">
<div>
<b> A = střední </b>
<!--
<img id="Obr_1" alt="Originální velikost" src="http://punk.hostuju.cz/uploads/images/catch22-dinosaur_sounds.jpg " />
<img id="Obr_2" alt="Úprava na width=600" src="http://mujweb.cz/www/hradiste-klaster/kal/kal1a.jpg" />
<div class="pro_img"><img id="Obr_3" alt="Gumová velikost" src="http://mujweb.cz/www/hradiste-klaster/kal/kal1a.jpg" /></div>
<div class="pro_img rozmezi"><img id="Obr_4" alt="Guma + omezení velikosti" src="http://mujweb.cz/www/hradiste-klaster/kal/kal1a.jpg" /></div>
<div class="vyrez"><img id="Obr_5" alt="Výřez 500 vysoký" src="http://mujweb.cz/www/hradiste-klaster/kal/kal1a.jpg" /></div>
<div class="guma vyrez"><img id="Obr_6" alt="Výřez+guma" src="http://mujweb.cz/www/hradiste-klaster/kal/kal1a.jpg" /></div>
-->
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
ENDUS. <br />
<marquee id="resizer" class="Filler">
§§§ &nbsp; prvek &lt;MARQUEE&gt; může být neviditelný, ale musí zůstat v bloku A_stred &nbsp;
§§§ &nbsp; petroff varuje před jeho odstraněním, za následky neručí &nbsp; §§§
</marquee>

</div>
</div> <!-- Použij ^filler (s malým f) pro zneviditelnění prvku marquee -->

<div id="C_pravy">
<div>
<b> C = pravý </b>
BEGINUM dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congue. Sed eget turpis.
Donec tempor mauris in ligula. Suspendisse ac dolor.
Morbi vitae mi luctus enim convallis ENDUS.
</div>
</div>

</div>

<div id="P_paticka">
<div><b> P = patička </b> Copyright &copy; PETR FOJTÍK </div>
</div>

</div>
</div>

</body>
</html>

======================================[2]============================= ==========

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertikální scrolování pomocí ukotveného MENU</title>
<style>
* {margin: 0; padding: 0; font-size: 16px }

#Menu {
position: fixed;
width: 320px;
top: 5px;
left: 25px;
}
#Menu ul {
width: 14em;
list-style: none;
margin: auto;
padding: 1ex 1em;
border: 1px solid gray;
font: bold 20px Arial;
}
#Menu a, #Menu a:link, #Menu a:visited {
width: 12em;
display: block;
padding: 0.5ex 1ex;
text-decoration: none;
color: #666
}
#Menu a:hover {
color: blue
}
#Text h3 { margin: 40px auto 10px; font: bold 24px Arial }
#Text a[name] { color:red }
#Text {
margin-left: 320px;
padding: 1em 4em;
}
#imgA {display:block; width:300px}
</style>
<!--[if lte IE 6]>
<style>
html { overflow: hidden }
body { height: 100%;
overflow:auto
}
#Menu { position: absolute; }
</style>
<![endif]-->
</head>
<script>
function ukaz(a){
a=a.href.match(/#.+/)+"";
a=document.getElementById(a.substring(1));
return !window.open(a.src,"_blank");
}
</script>
<body>
<div id="Menu" >
<ul>
<li><a href="#1">První článek</a></li>
<li><a href="#2">Druhý článek</a></li>
<li><a href="#3">Třetí článek</a></li>
<li><a href="#4">Čtvrtý článek</a></li>
<li><a href="#5">Pátý článek</a></li>
<li><a href
Viki
Profil *
Petroff
Díky, mrknu se na to, teď v září mám dost dovolený a nehodlám moc vysedávat u kompu. Ozvu se hned, jak to vyzkouším. Tento týden to asi nebude. Mám to zkopírovaný.
Viki
Profil *
Petroff
Tak jsem se na to jen v rychlosti mrknul, no zkopíroval oba dva zvlášť a zkusil, co to udělá. Vypadá to fajnově, jenom v IE je to celé poházené, prostředek překrývá pravý sloupec a levý sloupec začíná až dole pod prostředním. A ten druhý zdroják není kompletní, tak jsem jej ukončil. Ale to je jen moje první hodně zběžné mrknutí. Později se na to podívám podrobněji a dám vědět.
Viki
Profil *
Hmhm, proč je v IE písmo v pravém sloupci větší? Mrkám na to....
Viki
Profil *
A když odstaním byť jen jediné písmenko z nápisu v pravém sloupci (třeba BEGNUM), celý text se začne pohybovat jako marquee. To už mě vyvedlo z míry. Jdu se na to vyspat.
Petroff
Profil
Kurňa; zapomněl jsem u dlouhých textů na kontrolu úplnosti (že má něco začátek to neznamená že to má konec :-)

HLAVNĚ DEJ POZOR ABY 1.ŘÁDEK KÓDU STRÁNKY BYL: <!DOCTYPE HTML PUBLIC "-//......... !!!

Pro jistotu jsem to zpětně zkontroloval - kromě IE6 (jen v případě že příliš zúžíš okno) (a bude to opraveno) je vše perfekt.

Ledaže bys přímo do sloupce vložil velikánský obrázek bez nastavení min=width. Ale právě IE tuhle situaci zvládne (bez úprav) => sloupce budou OK. Napiš jakou verzi IE používáš (na tom dost záleží).
JINAK: jediné co na levé straně v IE6 přeteče je text hlavičky (tu jsem spíchl v rychlosti) ,dík za upozornění <nejen sloupci stránka je živa>

Teď mě napadlo - jestli nemyslíš jak spodním posuvníkem posuneš prostřední sloupec doleva a on překryje levý sloupec => tohle je důsledek toho, že se levý sloupec nehne ze svého místa na obrazovce.
Je to velmi výhodné a praktické. Tohle mi dalo hodně zabrat. Pokud bys to nechtěl, pak kód stránky bude o něco kratší (a jednodušší).


======================[2.text - Doufám že se to vejde celé:]===========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertikální scrolování pomocí ukotveného MENU</title>
<style>
* {margin: 0; padding: 0; font-size: 16px }

#Menu {
position: fixed;
width: 320px;
top: 5px;
left: 25px;
}
#Menu ul {
width: 14em;
list-style: none;
margin: auto;
padding: 1ex 1em;
border: 1px solid gray;
font: bold 20px Arial;
}
#Menu a, #Menu a:link, #Menu a:visited {
width: 12em;
display: block;
padding: 0.5ex 1ex;
text-decoration: none;
color: #666
}
#Menu a:hover {
color: blue
}
#Text h3 { margin: 40px auto 10px; font: bold 24px Arial }
#Text a[name] { color:red }
#Text {
margin-left: 320px;
padding: 1em 4em;
}
#imgA {display:block; width:300px}
</style>
<!--[if lte IE 6]>
<style>
html { overflow: hidden }
body { height: 100%;
overflow:auto
}
#Menu { position: absolute; }
</style>
<![endif]-->
</head>
<script>
function ukaz(a){
a=document.getElementById(a.href.replace(/.*#/,""));
return !window.open(a.src,"_blank" );
}
/*return !window.open(document.getElementById(this.href.replace(/.*#/,"")).src, "_blank")
return !window.open(a.src,"_blank","width="+a.width+",height="+a.height);
*/
</script>
<body>
<div id="Menu" >
<ul>
<li><a href="#1">První článek</a></li>
<li><a href="#2">Druhý článek</a></li>
<li><a href="#3">Třetí článek</a></li>
<li><a href="#4">Čtvrtý článek</a></li>
<li><a href="#5">Pátý článek</a></li>
<li><a href="#imgA">Obrázek A</a></li>
<li><a href="#imgA" onclick='return ukaz(this)'>Obrázek A [velký]</a></li>
<li><a href="#imgB">Obrázek B</a></li>
<li><a href="#Text">HOME</a></li>
</ul>
</div>
<div id="Text" >
<div id="1"><h3>První článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
</div>
<div id="2"><h3>Druhý článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
</div>
<div id="3"><h3>Třetí článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
</div>
<div id="4"><h3>Čtvrtý článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum.
<a name="4a">Aliquam consequat</a> fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
</div>
<div id="5"><h3>Pátý článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet.<a name="5a">Nullam </a>
ante libero, luctus vitae, hendrerit at, rhoncus in, augue.
Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum.
<img id="imgB" alt="Catch22" src="http://punk.hostuju.cz/uploads/images/catch22-dinosaur_sounds.jpg " />
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
</div>
<div id="6"><h3>Poslední článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum.
Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.
Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum.
Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
<img id="imgA" alt="hradiste-klaster" src="http://mujweb.cz/www/hradiste-klaster/kal/kal1a.jpg" />
</div>
</div>
</body>
</html>
Petroff
Profil
Pokud u mně je to OK a u tebe NE, první věcí je zjistit jestli ńedošlo cestou do tvého browseru ke zkomolení => když dáš zobrazit zdrojový kód (view page source) , pošleš mi ho a mně taky nebude fungovat = musí se hledat chyba někde úúúplně jinde.....[SPÍŠE JDE O TO TUTO MOŽNOST NA 100% VYLOUČIT]

Např. jednou mi editor nějak přidal na úplný začátek 5 nezobrazitelných znaků, a z původně fungující stránky se stala troska (než jsem je vymazal).
Viki
Profil *
Petroff
Zkus ten můj web na atlasu, tady jsem to zkopíroval. Používám IE6.0. Že se levý sloupec nemá pohybovat i při rolování, to je mi jasné. Bravo. Jen jeho text v IE6 se mi objevil někdy (!!!) necelý. Asi to je tím Atlasem, na kterém web mám. Nevím. Teď na to čučím a je to OK.
Pravý sloupec ale zlobí vždy. Buď je dole pod středním sloupcem (tedy čeká na ukončení stř. sloupce a pak teprve se projeví, a je opravdu vpravo). Navíc má vždy větší písmena než by měl mít (má třeba v Mozille stejně velké znaky jako sloupec levý). Problémy ale jen v IE6.
Obrázky doprostřed jsem ještě nezkoušel dát.
Pro jistotu jsem si včera půjčil knížku od Pixyho, aby mě uvedla do tajů CSS.
Viki
Profil *
Na /kal/pff2.htm zkus, jak to vypadá, když ve SLOVĚ BEGINUM vymažu N, BEGIUM. A hned to v IE6 lítá jako marquee. Jsem poděšen.
Viki
Profil *
Jo a v Mozille to je po vymazání toho N OK, jenom se marquee udělá dvouřádkový, každý řádek lítá jinou rychlostí. Divočina
Petroff
Profil
TAK SKUTEČNĚ POUŽÍVÁŠ POZMĚNĚNÝ KÓD - NENÍ DIVU ŽE STRÁNKA VYPADÁ A CHOVÁ SE JINAK.
Díky za pff2.htm - ihned jsem objevil 2 chyby, které za všechno můžou:
1. Špatné kódování
2. Zkomolené entity = kritická chyba !!!
Za obojí může (špatné) použití (nevhodného ....to nevím: Jaký používáš???) editoru.
------------------------------------------
Rád ti vše později vysvětlím (zabere to trochu času), ale napadlo mě, že bys rád viděl stránku bezchybně zobrazenou - a to jde velmi jednoduše:
1.Vezmi NOTEPAD a otevři ho.
2. Z diskuse zdroják COPY-PASTE do NOTEPADU.
3. Dej SOUBOR/ULOŽIT JAKO...
Název: pfff.html Kódování: UTF-8 a nakonec ULOŽIT
4.Rovnou otevři v prohlížeči.
(po odeslání FTPčkem na server pak obdržíš v prohlížeči zase to samé *)

*u IE existuje vzácná vyjímka: zásahem do registrů by sis mohl vytvořit 5.bezpečnostní zónu(=pouze pro soubory na tvém počítači) a mít ji odlišně nastavenou - třebas zakázat JavaScript apod. Ale na vzhled to nemá vliv
Petroff
Profil
Kdežto v pff.htm se vyskytuje jen chyba č.1 - chybné kódování.
Čeština používá tři typy kódování:
Unicode UTF-8
Central-Europe ISO 8859-2
Central-Europe Windows-1250

Tvůj editor použil kódování typu Windows-1250
Když si ho v každém browseru ručně nastavíš, stránka se změní do správné podoby (nejpatrnější je to u IE, tam je nesprávným kódováním postiženo více věcí než jen záměna ěščřžýýáíé za otazníky).

Automatika browserů se řídí řádkem: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Autor se musí postarat aby editor pro uložení dokumentu toto kódování použil.
(nouzové řešení by bylo udělat to přesně naopak => nastavit <meta http-equiv="Content-Type" content="text/html; charset=Windows-1250" /> podle zřejmě defaultního nastavení editoru)
Viki
Profil *
Petroff
Čau,
AD pff.htm: Budeš se divit, ale podobný problém s kódováním jsem nedávno řešil. No, tak to dáme ještě jednou a budu si dávat pozor na kódování. Ale netušil jsem, že chybné kódování se projeví jinak, než jen veselými otazníčky nad českými znaky. OK. Takže kódování. Mrknu na to.
AD pff2.htm: To je moje lajdácká nátura, ale upozorňoval jsem, že mám dovču a mrkám na to jen to zatím jen tak povrchně. Přetáhnul jsem to paste - copy atd, ale po zjištění, že to není úplný zdroják jsem se s tím nepatlal a jen tak podle oka všechny zdvojený tagy uzavřel.
Tak jo, takže se budu patlat. Jdu se nejdříve najíst a po obědě se do toho dám.
Co bude asi dobrého....
Viki
Profil *
No tak jsem se naobědval a znehybněl, takže jsem se na to podíval až po dnešním obědě.
Už to chodí i ve IE6. Tak budu definovat "editor", editorem se zřejmě myslí prográmek, ve kterém se tvoří web, např. FrontPage. Nepletu-li se. Abych odpověděl na jednu z tvých dřívějších otázek, já žádný editor nepoužívám, programuju si to růčo. Stará dobrá poctivá (no, v mém případě...) ruční práce. Ťukám to přímo na www.mujweb.cz . No, abych se zbavil dojmu, že mi tam Atlas dává něco, co nevidím, otevřel jsem si, jak radíš, Poznámkový blok a pak COPY - PASTE zdroják, co píšeš nahoře, uložit a poslat na můj školní web, kde do toho pořádně vidím.
Chovalo se to zcela stejně, tak mě navedlo tvé poslední psaní, abych stisknul pravé tlačítko myši a tam si to nastavil na IE6 ručně z UTF - 8 na "Central European (Windows)" (tak to přesně je v IE6 pojmenovaný). A už to chodí.
Viki
Profil *
Už tady píšu, co je dávno na www.jakpsatweb.cz/cestina.html
Změnil jsem kódování ve zdrojáku na ISO Latin 2 (= Central European (Windows)) a už to chodí v IE6 i ve FF. Automaticky, bez pravého tlačítka na myši. Že jo. UTF - 8 nee, ISO Latin 2 joo.
Našel jsem ještě jednu mouchu. Na pff2 (tam jsem hodil to vertikální rolování) je odkaz na Obrázek A [velký]. Ve FF to funguje, v IE6 to hodí "Sorry vole, error on the page".
Viki
Profil *
Tak jo, jak jsem říkal, funguje to v IE i FF. Ještě si to ale radši pořádně vyzkouším. Ohledně toho vertikálního rolování, kde je ten odkaz na Obrázek A [Velký], kdy to v IE nefunguje (viz můj vzkaz výše)... Podívám se ti pořádně do skriptu, ale ne dnes, později.
Viki
Profil *
Petroff
AD ....tak si zárověn otestuješ chování a vzhled stránky,doporučuju..... :
Testoval jsem na IE 6.0.2800.1106.xpsp2.030422-1633 abych byl přesný.... A na FF 1.0. V PC učebně u nás na kolejcíh jsem si pustil 3 PC vedle sebe s různým rozlišením monitoru: 800x600, 1280x1024, 1024x768 px.
Používal jsem zdroják, co jsi zveřejnil nahoře, tak jestli jsi už něco upravoval, nevím. Zkoušel jsem si postupně různé zobrazení obrázků, jak mi doporučuješ. Když si je očísluju vezdrojáku od 1-6 odshora dolů, tak poslední 2 měly tu nevýhodu, že byly samá skrolovací lišta. Což zvláště při malém rozlišení celkem znemožňovalo prohlížení. U č. 3 jenom poznámečka, že obrázek není uprostřed, ale to je chybička kosmetická, to nechme být.
Celkem vzato, v okamžiku, kdy je okno tak malé, že se zobrazí horizontální scroll, hlavička zachová velikost okna, ale když se posune stránka do strany, je vidět, že hlavička je široká prostě jen těch počátečních např. 800px a nad levým sloupcem je místo hlavičky prázdný prostor.
A ještě jedna věc, při malém rozlišení (800x600) text pravého (nehdybného) sloupce zajížděl pod patičku, když se odskrolovalo až dolů a text v pr. sloupci byl dlouhý.
Tolik mé testování.



Kdybys měl doopravdy zájem tak se ozvi
Ozývám se, protože mám zájem, protože to je dobrý zdroják. Nemám potřebu uvádět se jako autor pod něco, co jsem nevytvořil. Je to tvoje dílo. Takže jestli chceš, budeš uváděn jako autor, úpravy bych s tebou konzultoval.
Viki
Profil *
AD 1. Špatné kódování , OK. Zobrazil jsem si při prohlížení na netu vlastnosti stránky a porovnal s meta charset tagem, kde používám něco jiného. OK, chápu.
AD
2. Zkomolené entity = kritická chyba !!! Co je míněno ENTITOU v informatice? Na wikipedii nic moc nevysvětlují. Nechápu, co jsem udělal za chybu.
Petroff
Profil
Měl jsem teď hodně práce, takže po dlouhé odmlce až dnes jsem zpět na stránkách fóra.
Tak si vše přečtu, povzpomínám a napíšu....
Petroff
Profil
Spousta se vykouřila z hlavy..
Navíc v pff2 je teď něco jiného, tak přece jen zkusím dát šanci paměti....znaková entita v HTML kodu je zapis např. &nbsp; &copy; obecně &něco; nebo &#číslo;
Určitě to znáš = vyjadřuje to 1 jediný znak, ale ten se pouze zobrazí => nemůže nic provést
No a já jsem v textu v marquee zobrazoval &lt;marquee&gt; a zkomolení=ty jsi (nějak) z těch entit udělal znaky = tagy (mezi dalšími m.tagy) <marquee>
Petroff
Profil
JOJO tos uhodil hřebík patičkou na hlavičku (nebo naopak ?)
Ta verze s nehybným levým sloupcem má tu vlastnost že snadno k ní "vyrobíš" hlavu a patu, které budou tvořit vrch a spodek okna (něco jako lišta Exploreru s title, ta taky přesně kopíruje šířku okna)
Zatímco hlava/pata která by udržovala přesně šířku tří sloupců čeká na svého objevitele.

Kdykoliv ti bude něco z mých výtvorů připadat použitelné, tak to použij.
Své výtvory nepodepisuju (ty legrácky v marquee nebo patičce neber vážně).
Něco jiného je originální/nepopsaný/nepoužívaný postup/nápad, tam je SIGN namístě -> vložený do komentáře v kódu.
« 1 2 »

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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