Autor Zpráva
wawrik
Profil
Ako naprostý amatér som si prelúskal Yuhuove stranky o divoch a pochopil som to tak, že v rámci jedného divu s rozmermi napríklad 300×300 px možem naukladať viac iných divov, ktorých súčet rozmerov zodpovedá rozmerom toho nadradeného divu. Je to tak? Mne to totiž vôbec nefunguje, babrem sa s tým tretí deň a neviem na to prísť :-(( V tejto súvislosti už začínam uvažovať o rituálnej samovražde :)

Vážne. Mám z divov vyskladaný každú jednu položku vo fotogalérii - rámik je zo štyroch divov okolo divu so samotnou fotografiou. Celé je to vložene v nadradenom dive s rozmermi, ktoré sú súčtom tých vložených divov. Aj tak sa mi to vo finále cele rozo...sype :-( Tu je rozpadnutý výsledok. Okolo obrázkov sa mi v jednotlivých divoch urobí nejaká tenka medzera, o ktorej netuším, kde sa zobrala, a celé lego mi rozhasí... Správne by to malo vyzerať nejako takto, až na tie popisky, ktoré by mali byť inde.

A čo už nechápem vôbec, že to celé nejako súvisí s veľkosťou nastaveného písma v prehliadači. V priebehu laborovania som došiel do stavu, že pri najmenšej veľkosti písma to bolo OK, pri strednej sa to rozsypalo :-O Aj teraz tam tá medzera s veľkosťou písma rastie... Z toho, že tomu nerozumiem, som celkom na prášky, za akékoľvek nakopnutie správnym smerom ponúkam polovicu kráľovstva a ruku mojej babičky k tomu!
Marty
Profil
jako první pomoc radím vložit toto do CSS, tedy pokud to tam ještě nemáš


* {
margin: 0;
padding: 0
}


Ještě se na to ale kouknu
Marty
Profil
Myslím, že to mám. Zkus ukončit div ram, až za ukončovací značkou příslušící tabulky. Ozvi se zda to jede.
bojars
Profil
wawrik

BTW: Skúsil si sa pozrieť na to vo FF? Ten asi celkom dobre pochopil, čo od neho autor chce.
Nemám obrázky, len som si pozrel kód, tak tu je môj názor:

Divy používaž na obrázok a tabuľku na popis obrázku.
Ak som to správne pochopil tá nová verzia by mala byť tak, že obrázok je vľavo a popis vpravo. Preto by som do definície štýlov doplnil pre:
.ram {
float: left;
}
table {
float: right;
}
... bude Ti to robiť asi problém so zarovnaním obrázku ku textu, tak to asi budeš musieť ešte vraziť do jedného divu:

Tie medzery, ktoré sa menia vzhľadom na veľkosť písma:
Ono v kóde HTML je jedno pravidlo, že každé oddelenie prvku: medzera, alebo Enter (nový riadok) sa na stránke prejaví ako deliteľná medzera (jedného znaku písma). Ty tam máš vedľa seba poskladaných päť prvkov: štyri časti rámu s vloženým obrázkom. Ak chceš aby na seba dosadali musíš celok dať do kódu v jednom riadku bez medzery...

Ešte jedno ma napadlo, keď som pozeral na usporiadanie jednotlivých rámov. Skúsil by som poradie: ľavý>horný>brucho>pravý>dolný
bojars
Profil
Ešte by som dodal:
table {
height: 146;
margin: 0;
padding: 0px 0px 0px 0px;
float: right;
border: none;
}
.ram {
width: 200;
height: 146;
padding: 0px 0px 0px 0px;
text-align: center;
float: left;
}
BTW: To poradie rámikov nechaj tak, ako si mal predtým...
wawrik
Profil
2marty: margin aj padding tam mám, je nastavený pre všetky divy (chápem to správne, že keď ich mám nastavené pre všetky divy obecne, platí to aj pre všetky triedy divov, ak nie je nastavené inak?). Skúsil som aj tvoj obecnejší zápis, nepomohlo, len sa celá stránka nalepila na okraj.

Ukočiť div "ram" až za tabuľkou som skúsil, nič neopravilo, akurát to popisku pchá pod obrázok namiesto vedľa neho. Div "ram" by mal obsahovať iba ten vyskladaný obrázok, aspoň tak som rátal rozmery. Keď aj vyhodím tabuľky s popiskami úplne, tej skladačke to nepomôže.

2bojars: Ehm, uhm, čo je FF? Ja som ozaj vo webdesigne začiatočník, tieto skratky a výrazy sa na mňa ešte nenalepili :-)

float: right tabuľke nepomohol, ani tvoje zápisy pre triedy... Skúšal som to aj napchať do toho jedného riadku, ako píšeš, žiadny efekt. K tomu by som mal jednu poznámku: z Yuhuovho výkladu o divoch som pochopil, že divy sa na seba lepia bez akejkoľvek medzery, nie?
bojars
Profil
FF= Firefox

Skús to tam vložiť takto:
<div class="ram">		

<div class="horny"></div><div class="lavy"></div><div class="brucho"><A HREF="fotogaleria/celkovy_pohlad.jpg" target="new"><IMG SRC="fotogaleria/t_celkovy_pohlad.jpg" ALT="celkovy_pohlad.jpg"></a></div><div class="pravy"></div><div class="dolny"></div>
</div>


(divy áno, ale keď máš medzeru (alebo od Enterovaný riadok) medzi <a href...> a <img src...>, tak sa to ráta ako medzera.
wawrik
Profil
2bojars: Áno! align="right" pri obrazku bol problém! Zostalo mi to tam z predchádzajúcej fotogalérie a vôbec ma nenapadlo, že by to bolo zle... Prečo zarovnanie obrázku rozhasí celý div? Ako si na to došiel? Či to je v riadku alebo nie, vyzerá byť jedno, ale ten align ho rozhodil... Srdečná vďaka za radu...

Ešte tam mám nejaký problém s horným okrajom rámu, robí mi medzeru. Zväčšuje sa so zväčšovaním písma v IE. Zdá sa, že to naťahuje celý div "ram" a ten potom kaskádovito odtláča ďalšie obrázky... Pritom majú oba pevne nastavenú výšku (?!). Keď prídeš aj na toto, ruka mojej babičky je definitívne tvoja! :-)
bojars
Profil
wawrik:
Mal by si skúsiť vynulovať paddingy (tie moje príklady zápisov triedy) vieš čo, človeče, pozri sa radšej sem (čo už s Tebou - aj vlastnú babku zapredáš, dúfam, že halušky robí dobré...):

http://bojars.wz.cz/ex/wawrik.html
wawrik
Profil
2bojars: Tie paddingy predsa vynulované mám (padding: 0 by malo byť to isté, čo padding: 0px 0px 0px 0px, nie?), a aj keď tam dám tvoj zápis, žiadna zmena.

Keď si otvorím HTML zápis toho tvojo linku a napastujem tam obrázok s popiskou viackrát za sebou, robí to presne to, čo mne - kaskádovo to odtláča ďalšie obrázky... Ako tak pozerám, ten div "horny" má určitú minimálnu výšku, keď zmenšujem height: tak to nemá žiadny efekt. Zväčšiť sa dá, ale zmenšiť nie. Je nejaké pravidlo, že výška divu nemôže klesnuť pod trebárs 15 pixelov? To by zodpovedalo skutočnej výške tých divov (horny a dolny) a vysvetlovalo by to, prečo sa naťahujú... Napadá ťa v súvislosti s tou výškou niečo?

Ešte jedna vec, ktorá je v podstate o tom istom: keď v tom tvojom linku zväčšujem a zmenšujem písmo, zväčšuje a zmenšuje sa aj červený pruh hore a dole. PREČO?! Majú predsa pevnú výšku zadanú v pixloch, to by predsa nemalo súvisieť s veľkosťou fontu!
bojars
Profil
wawrik: pozri sa tam teraz.
Z toho, čo tam vidím, vyzerá to na nepomer medzi výškou rámu a obrázku
bojars
Profil
A ešte som si všimol, že nemáš zadané jednotky:

http://www.jakpsatweb.cz/css/css-jednotky.html

Takže pokud náhodou uvedete délku bez jednotky, prohlížeč by to měl pochopit jako že je to v pixelech (ale třeba IE 6 to občas nepochopí a údaj bez jednotky ignoruje (zjištěno u pozicování)).

...píše Yuhů.
wawrik
Profil
2bojars: Babička je tvoja! Pomohol zápis font-size: 0px; do triedy .ram (alebo do tried .horny a .dolny)! A teraz mi, prosím, vysvetli, ako súvisí výška divu s fontom? Vyzerá to, že si IE default necháva v divoch priestor na text v základnej veľkosti :-O Preliezol som asi päť webov o tvorbe HTML, nikde o tom nie je ani zmienka... Kam si mám skočiť pre podobné informácie, aby som nabudúce neriešil tri dni jedinú minoritnú záležitosť? Sú to nejaké všeobecné pravidlá?

Ešte raz srdečná vďaka za pomoc.
bojars
Profil
wawrik: ani ja neviem celkom "múdro" vysvetliť prečo to funguje takto.
Iba doplňujem, že by to mohlo byť v IE tak preto, lebo ten obázok je zároveň odkaz. Myslím, že niečo podobné sa tu riešilo definíciou:

"line-height:"

http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=40 6

Je to i pre mňa skúsenosť, ktorú asi budem tiež potrebovať.

Nuž, aby si celkom nejasal skús si nainštalovať Firefox. Minule som bol u jedného známeho a jemu ho inštaloval predajca do nového Compu.. takže bude ich stále viac a viac...
Nemáš na tej stránke vo FF veľké chyby, len to prvé veľké písmeno Ti prekrýva text druhého riadku...
Prajem všetko dobré.
Radek
Profil *
.obrazek1 {
width: 100px;
height: 30px;
float: left;
}

.cely {
width: 200px;
height: 30px;
clear: both; // v pripade, ze chces ty obrazky mit vedle sebe a okolo uz nic, jen
//
}

index.html:
<div class="cely">
<div class="obrazek1">
<img src="bla.jpg" width="100" height="30" class="obrazek1" alt="" />
</div>
<div class="obrazek1">
<img src="bla2.jpg" width="100" height="30" class="obrazek1" alt="" />
</div>

...

Takhle by to melo nejak fungovat, samozrejme si to musis upravit dle sveho
:-)
Toto téma je uzamčeno. Odpověď nelze zaslat.