ugrás a tartalomhoz

Kép középre igazítása extra elemek nélkül

tiku I tikaszvince · 2006. Jún. 19. (H), 08.59
Sziasztok!

A segítségeteket szeretném kérni az alábbi probléma megoldásában. Tudom, hogy kell legyen rá megoldás, de egyszerűen nem találtam. Sem weblabor keresője, sem a google nem adott megfelelő választ.
Egy galéria kisképeit szeretném 200*200-as dobozokba "zárni", azzal a csavarral, hogy a képek a dobozok közepére legyenek rendezve. A vízszintes rendezés nem okozott problémát, de a függőlegessel meggyűlt a bajom.

A problémámat bemutató kód itt található.

Az a megoldás, amit találtam plusz elemekkel és CSS hackel operál, amit valami miatt nem tartok túlzottan szerencsésnek...

Ráadásul most vettem észre, hogy Explorerben a képek még "ugrálnak" is...

Előre is köszönöm a segítséget

TikuVoltam
‹ cellátkitöltő div Legújabb prototype.js letöltése ›
 ■
1

line-height vagy margin

Jano · 2006. Jún. 19. (H), 10.43
Állítsad be az 'a' elemnek, hogy legyen display:block és 100% széles és magas (vagy fixen a 200px) és a line-height:200px;
Ezekután az img-nek add meg, hogy vertical-align:middle;
2

haladunk

tiku I tikaszvince · 2006. Jún. 19. (H), 14.48
Köszönöm.

Ezt a két szabályt én is próbálgattam, de ezek szerint csak a nem megfelelő konstellációkra találtam rá :)

A jelenlegi változat már úgy néz ki Firefoxban és Operában is ahogy szeretném. Viszont az Explorer nem hajlandó még mindig azt csinálni amit szeretnék. Az "ugrálás effektről" sikerült lebeszélni más keret+padding összeállítással (az elképzelhető, hogy az <img /> tag padding beállítását IE nem hajlandó értelmezni?).

Jól sejtem, hogy ha azt szeretném, hogy explorerben is jól jelenjen meg, nem kerülhetem el a különböző CSS hekkeket?

TikuVoltam
3

font-size

Jano · 2006. Jún. 19. (H), 15.43
Hmm. Kicsit próbálgattam: IE valóban sz*rik erre, viszont ha megvan adva neki ugyanannyi font-size akkor jó lesz. Persze ekkor többi rendes bpngészőben esik össze line-height és font-size kombináció miatt. Még próbálok valami hack mentes megoldást keresni de lehet nincs.
6

220 nem Volt és nem is px

Jano · 2006. Jún. 20. (K), 10.41
Ha a font-size beállításnál nem adunk meg mértékegységet akkor működik!
Miért? Firefox szabványnak megfelelően nem veszi figyelembe a mértékegység nélküli értéket (csak nullát lehet mértékegység nélkül megadni), IE viszont pixelként értelmezi.

#dirContent div.img a {
  display: block;
  background: #CFCABE;
  
  width: 220px;
  height: 220px; 
  
  line-height:220px;
  font-size:220; /* NINCS MERTEKEGYSEG!! */
}
A validátor valószínűleg erre fújolni fog. Ha nem akarsz figyelmeztetést akkor conditional-comments. (Persze akkor mar megadhatod px-ként is, mert csak IE látja.
4

Ez talán jó

rpspace · 2006. Jún. 19. (H), 17.06
Megpróbáltam ezt a font size=0.905*height módszert kiegészítve és elvileg így FF-ben és IE-ben is jó (remélem másnál is :-)). módosítások:

#dirContent DIV.img A {
FONT-SIZE: 196px; display:table-cell; vertical-align:middle;
/* DISPLAY: block; */
BACKGROUND: #cfcabe; WIDTH: 220px; LINE-HEIGHT: 220px; HEIGHT: 220px
}

#dirContent DIV.img A IMG {
/* itt pedig a paddingeken változtattam */
BORDER-RIGHT: white 2px solid; PADDING-RIGHT: 0px; BORDER-TOP: white 2px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: white 2px solid; PADDING-TOP: 0px; BORDER-BOTTOM: white 2px solid
}
5

csak explorerben

tiku I tikaszvince · 2006. Jún. 20. (K), 08.10
Ez a módszer Explorerben úgy tűnik rendben van. De csak explorerben. (ugye jól látom, hogy a padding változtatás annyiban merült ki, hogy levetted mindenütt 0-ra?)

Akkor ezek szerint sikerült egy olyan problémával szemben találni magam, amit hack és/vagy plusz elem nélkül nem lehet megoldani? Ha így van, mit tanácsoltok? Melyik utat válsszam? Melyik az elegánsabb megoldás?

TikuVoltam
7

Műkődő

rpspace · 2006. Jún. 20. (K), 11.31
Mivel láttam, hogy minden módosítást beletettél amit írtam, elgondolkodtam hogy lehet hoyg az okozza a különbséget, hogy én FF-ban mentettem le az oldalt, így esetleg emiatt van lényeges különbség a források között. Így volt. Úgy tűnik ha a DOCTYPE-ot lecserélem a FF által mentettre, akkor úgy néz ki mint nálam:

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"-->

Helyett sajnos csak sima html-nél működik jól:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

És így nálam középen is van FF és IE-ben.

Viszont ha a DOCTYPE xhtml, akkor sikerül elérni hogy jó legyen, hogy tovább kombináltam:
#dirContent div.img a {
display: block;
background: #CFCABE;

font-size: 196px;
vertical-align: middle;

width: 220px;
height: 220px;
line-height: 177px;
}

A módosított kód itt nézhető meg:
http://www.hirdetni.hu/erdekes/k.htm
8

köszönöm

toxin · 2006. Szep. 26. (K), 20.06
én csak egy barátságos köszönömöt akarok mondani a topiknak, az estémet mentetteték meg :))) a

font-size: 135px;


-al , jááj IE miért vagy IEn

üdv t