Autor Zpráva
fanky
Profil
#1 · Zasláno: 26. 3. 2007, 20:38:28 · Upravil/a: fanky
Odpovědět Citovat
chtěl jsem si udělat galerii a chtěl jsem využít postup z této knížky, vyslytuje se mi tam takový neduh, i když kód zkopíruju zcela přesně.. div obalující celou galerii totiž nikdy neobalí celou galerii, ale posledni řadu orbázků jakoby ignoruje, tudíž absolutně pozicovaná pata s bottom: 0 taky ignoruje poslední řadu a přiřadí se za předposlední řadu, což jaksi není dobé, ale nechápu proč tomu tak je, mohl by mi to prosím někdo objasnit, děkuji, kód příkládám...

<!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=windows-1250">
<title>Zobecněné skupiny sloupců: plovoucí karty</title> 
<style type="text/css" media="all">

      body {

        background-color: #999;

        text-align: center;

      }

      p {

        margin: 0.5em 0;

        }

      .cleaner {

        clear: both;

        height: 0;

        overflow: hidden;

        content: ' ';

      }

      .cleaner hr {

        display: none;

      }

      #page {  tady ten div neobalí uplně celou galerii

        width: 440px;

        margin: 0 auto;

        padding: 1px 0;

        background-color: #CCCCCC;

        text-align: left;

        }

      #pagein {

        margin: 10px;

      }

      #galerie {

        margin: 1.5em 0;

        width: 100%;

        padding: 1px 0;

        }

      #galerie .foto {

        float: left;

        display: inline;

        width: 130px;

        height: 120px;

        overflow: auto;

        margin: 5px 5px;

        background-color: white;

        text-align: center;

      }

      #galerie .foto img {

        margin: 10px 0 0 0;

        border: 1px solid silver;

      }

      #galerie .foto p {

        margin: 0;

      }



    </style>

</head>

<body>

<h1>Zobecněné skupiny sloupců: plovoucí karty</h1>

<div id="page"> 

  <div id="pagein"> 

    <p>Toto je příklad zobecněné skupiny sloupců, tzv. plovoucích karet. 

Každá karta má zadanou šířku a výšku a je plovoucí k levému okraji. 

Na jeden řádek se umístí jen takové množství karet, které se bez problémů vejde. 

Další karta pak začně pod svými předchůdci novou řadu. 

Toto řešení se hodí například pro různé fotogalerie.</p>

    <div id="galerie"> 

      <div class="foto"> <img src="foto1.jpg" alt="Fotografie: důstojná modř" width="100" height="75"> 

        <p>důstojná modř</p>

      </div>

      <div class="foto"> <img src="foto2.jpg" alt="Fotografie: přírodní zeleň" width="100" height="75"> 

        <p>přírodní zeleň</p>

      </div>

      <div class="foto"> <img src="foto3.jpg" alt="Fotografie: oranžová svůdnice" width="100" height="75"> 

        <p>oranžová svůdnice</p>

      </div>

      <div class="foto"> <img src="foto4.jpg" alt="Fotografie: zemitá hněď" width="100" height="75"> 

        <p>zemitá hněď</p>

      </div>

      <div class="foto"> <img src="foto5.jpg" alt="Fotografie: fialová pro madam" width="100" height="75"> 

        <p>fialová pro madam</p>

      </div>

      <div class="foto"> <img src="foto6.jpg" alt="Fotografie: žlutá jako sluníčko" width="100" height="75"> 

        <p>žlutá jako sluníčko</p>

      </div>

      <div class="cleaner">

        <hr />

      </div>

    </div>

  </div>

</div>

</body>

</html>


přikládám screen, asi to chyba není, ale nevím proč to takhle dělá?
http://www.fanky.cz/galerie.png
Christmaspoo
Profil *
#2 · Zasláno: 27. 3. 2007, 11:17:36
Odpovědět Citovat
Mně se to zobrazuje normálně...
Plaváček
Profil
#3 · Zasláno: 27. 3. 2007, 11:29:45
Odpovědět Citovat
fanky

Kod se zdá v pořádku, testoval jsem ho a funguje bez problémů v každém prohlížeči.

Vypadá to na chybu jinde (nemáš ještě jiný nebo upravený CSS předpis?).
fanky
Profil
#4 · Zasláno: 27. 3. 2007, 12:45:56
Odpovědět Citovat
Plaváček

ahoj, kód se mi jeví také jako spravný, a v prohlížeči se to zobrazí také dobře, ale pouze naoko, pokud se podíváš na ten screen, který je z editoru po přesném zkopírování kódu z přiloženého CD, tak div obalující celou galerii (page) neobalí tu spodní celou řadu a patička se tím pádem neumístí pod všechny fotky

v prohlížeči to je ok, dokud nechci přidat patičku, když ji přidám, tak se zobrazí jako na screenu, jelikož ja jsem napsal, div page neobaluje celou galerii což vůbec nechápu
Plaváček
Profil
#5 · Zasláno: 27. 3. 2007, 13:25:39
Odpovědět Citovat
fanky

Jak říkám, chybu bych viděl někde v okolním kodu (absolutně pozicovaná patička?). Z obrázku ti moc neporadím. Tohle http://klient.plavacek.net/prac.html je přesně ten kod.
fanky
Profil
#6 · Zasláno: 27. 3. 2007, 14:14:20
Odpovědět Citovat
Plaváček

jo, zobrazí se to dobře, ale pokud máš Dreamweaver, zkus ten kód hodit do něj, aniž bych cokoli měnil, div page neobalí celou galerii, je to vidět i na tom obrázku, patičku si klidně odmysli.. nechápu jen, proč spodní řada karet vylejzá z divu page, je to právě vidět v tom dreamweaveru, kterej kolem divů dělá ty pomocný vizuální přerušovaný rámečky
Plaváček
Profil
#7 · Zasláno: 27. 3. 2007, 14:58:37
Odpovědět Citovat
fanky

Nechápu, co má Dreamweaver společného s prohlížečem? Dreamweaver používá svůj vlastní zobrazovací engine a ten není vůbec dokonalý a neumí moc dobře se styly pracovat.

Každý asi mluvíme o něčem jiném.

Trvám na tom, že zdrojový kód tohoto příkladu je naprosto v pořádku a problémy se zobrazováním v editoru jsou irelevantní.
fanky
Profil
#8 · Zasláno: 27. 3. 2007, 15:51:21
Odpovědět Citovat
Plaváček

ano, Dreamweaver může sice zobrazovat některé věci po svém, ale když se potom i vlastnost, kterou zobrazí Dreamweaver objeví i v prohlížečích, je to divné, ale neříkám, že někde nedělám fatální chybu 

#paticka {

    position: absolute;

	width: 100%;

	height: 20px;

	bottom: -300px; 

	left: 0;

	font-size: 90%;

	text-align: center;

}


aby se mi patička ale zobrazila až pod všemi kartami, musím jí dát zápornou příslušnou hodnotu bottom, při bottom: 0; se objeví pouze vždy za předposlední řadou karet, ať jsou v galerii řady dvě nebo jich je deset, poslední prostě přetéká z divu page

a teď klidně do mě, rád bych se dozvěděl kde dělám chybu
Časová prodleva: 2 měsíce
Petroff
Profil
#9 · Zasláno: 18. 5. 2007, 11:12:31
Odpovědět Citovat
Zobraz kompletní kód stránky - tedy té co ti nefunguje tak jak má - nic neupravuj ani nevynechej.
Vsadím se, že problém způsobila ona úprava s patičkou - jak jinak, vždyť původní kód
(knihu mám před sebou, příklad na obrazovce:ve Firefoxu používám WEB Developer a taky Platypus)
funguje normálně.
Tuším,co způsobí rozhození formátu: to že umísťuješ absolutně pozicovanou patičku do statického toku, ale nebudu předbíhat - ozvi se.
Jinak: Dreamweaver neznám - což by nemělo vadit
Petroff
Profil
#10 · Zasláno: 18. 5. 2007, 15:49:07
Odpovědět Citovat
Jinak tady máš svou fotogalerii s patičkou. Patička se drží u spodního okraje okna.
Pokud však okno zmenšíš nebo obsahuje hodně karetních řad, drží se na konci dokumentu.
Je 100% funkční, žádné neobvyklé chování.
(akorát jsem změnil charset )

<!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=RTF-8">
<title>Zobecněné skupiny sloupců: plovoucí karty</title>
<style type="text/css" media="all">

html, body
{
height: 100%;
padding: 0;
margin: 0;
}

#stranka
{
width: 100%;
background-color: #999;
text-align: center;
min-height: 100%;
_height: 100%; /* IE */
position: relative;
}

#paticka {
position: absolute;
width: 100%;
height: 85px;
bottom: 0;
left: 0;
font-size: 90%;
}

#main {
padding: 0 0 90px 0;
overflow: hidden;
}
p { margin: 1ex }

.cleaner {
clear: both;
height: 0;
overflow: hidden;
content: ' ';
}
.cleaner hr {
display: none;
}
#page {
width: 440px;
margin: 0 auto;
padding: 1px 0;
background-color: #CCCCCC;
text-align: left;
}
#pagein {
margin: 10px;
}
#galerie {
margin: 1.5em 0;
width: 100%;
padding: 1px 0;
}
#galerie .foto {
float: left;
display: inline;
width: 130px;
height: 120px;
overflow: auto;
margin: 5px 5px;
background-color: white;
text-align: center;
}
#galerie .foto img {
margin: 10px 0 0 0;
border: 1px solid silver;
}
#galerie .foto p {
margin: 0;
}
</style>
</head>
<body>
<div id="stranka">
<div id="paticka">
<hr />
<p>Tento DIV id="paticka" je absolutně pozicovaný a je nutné jej vložit do DIVu id="stranka",
který je relativně pozicovaný a obsahuje hlavní obsah stránky, vložený do DIVu id="main".
Pro případ,že pozice spodní řady karet přesáhne určitou mez, máme rezervovaný prostor pro patičku.
O to se postará 90px vysoký spodní okraj DIVu "main".</p>
</div>
<div id="main">
<h1>Zobecněné skupiny sloupců: plovoucí karty</h1>
<div id="page">
<div id="pagein">
<p>Toto je příklad zobecněné skupiny sloupců, tzv. plovoucích karet.
Každá karta má zadanou šířku a výšku a je plovoucí k levému okraji.
Na jeden řádek se umístí jen takové množství karet, které se bez problémů vejde.
Další karta pak začně pod svými předchůdci novou řadu.
Toto řešení se hodí například pro různé fotogalerie.</p>
<div id="galerie">
<div class="foto"> <img src="foto1.jpg" alt="Fotografie: důstojná modř" width="100" height="75">
<p>důstojná modř</p>
</div>
<div class="foto"> <img src="foto2.jpg" alt="Fotografie: přírodní zeleň" width="100" height="75">
<p>přírodní zeleň</p>
</div>
<div class="foto"> <img src="foto3.jpg" alt="Fotografie: oranžová svůdnice" width="100" height="75">
<p>oranžová svůdnice</p>
</div>
<div class="foto"> <img src="foto4.jpg" alt="Fotografie: zemitá hněď" width="100" height="75">
<p>zemitá hněď</p>
</div>
<div class="foto"> <img src="foto5.jpg" alt="Fotografie: fialová pro madam" width="100" height="75">
<p>fialová pro madam</p>
</div>
<div class="foto"> <img src="foto6.jpg" alt="Fotografie: žlutá jako sluníčko" width="100" height="75">
<p>žlutá jako sluníčko</p>
</div>

<div class="cleaner">
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0