ugrás a tartalomhoz

Abszolút középre pozícionálás

Creative · 2011. Dec. 7. (Sze), 15.25
Üdv

Újabban kezdek (részint hála az egész WL közösségnek, részint Poetronak) egyre stabilabb oldal-buildeket készíteni és sorra alakítom át saját, kb éve fejlesztés alatt álló alkalmazásom is. azonban most belefutottam egy érdekes problémába, ami ezerszer előfordul kismillió oldalon, mégis, valahogy egyik eljárás se tökéletes hozzá.

Tehát a cím ne legyen megtévesztő, mindössze arról van szó, hogy adott egy rendezetlen lista, melynek minden eleme áll egy névből, egy kis dobozból, melyben vertikálisan és horizontálisan is középre igazítva befigyel a linkként használt képem. Ez szépen, stabilan működik ff, chrome, opera, sőt még safari alól is! Mást ne mondjak még ie alatt is oké (v8.). Azonban ha ie 7 alól tekintem meg, mindig a dobozom bal felső sarkába rendezi el a képet. Mivel legtöbb esetben igyekszem úgy megírni a stílusfájlt, hogy ie-alól is jól működjön, most kissé tehetetlennek érzem magam.

Ez az alap html-kódom:
							<div class="changer">
								<span>
									<a href="#" title="Lorem" class="limage" >
										<img src="images/SAMPLE.jpg" alt="Lorem" />
									</a>
								</span>								
								<span>
									<a href="#" title="Lorem" class="limage" >
										<img src="images/SAMPLE.jpg" alt="Lorem" />
									</a>
								</span>
								<span>
									<a href="#" title="Lorem" class="limage" >
										<img src="images/SAMPLE.jpg" alt="Lorem" />
									</a>
								</span>
								<span>
									<a href="#" title="Lorem" class="limage" >
										<img src="images/SAMPLE.jpg" alt="Lorem" />
									</a>
								</span>
							</div>
A hozzátartozó stílusok, amik ie7 kivételével mindenhol jól működnek:
		div.changer {
			display: block;
			padding-left: 2px;
		}
		
		div.changer span {
			display: block;
			width: 65px;
			height: 65px;
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #DBDBDB;
			float: left;
			margin: 0 3px 3px 0;
		}
		
			div.changer span a {
				display: table-cell;
				width: 65px;
				height: 65px;
				line-height: 1em;
				text-align: center;
				vertical-align: middle;
			}
			
			div.changer span a img {
				margin: 0 auto;
				max-width: 65px;
				max-height: 65px;
			}

				div#slider_products div.changer a.image span {
					background-color: #FFFFFF;
					border: 1px solid #D6D6D6;
					padding: 4px;
				}

				div#slider_products div.changer a.image img {
					max-height: 63px;
					width: 63px;
				}
Kérdés tehát, hogy a külön ie stíluslapomba mit lehet ezekből átalakítva rakni, hogy normálisan működjön a megjelenésem ie7 alatt is?

C.
‹ JQuery animate() dinamikusan jquery .width(); és div tartalom float-tal ›
 ■
1

Ha jól értem, vannak a 65x65

Hidvégi Gábor · 2011. Dec. 7. (Sze), 15.36
Ha jól értem, vannak a 65x65 pixeles <span> elemeid, és azokban függőlegesen és vízszintesen középre szeretnéd helyezni a képeket, amelyeknek nem tudod a méretét. Szerintem IE7 alatt ezt úgy tudod megoldani, ha a spanokat lecseréled táblázatokra.

Második megoldás: a képeket rakd be az <a> tag-ek háttérképének egy style attribútummal, ha nem cél az, hogy a kis képeket is le lehessen tölteni.
2

off: rendezetlen lista

Poetro · 2011. Dec. 7. (Sze), 15.55
Mivel még te is azt állítod, hogy ez egy rendezetlen lista, akkor miért nem ul/li elemeket használsz, miért div/span?

Ráadásul a következő nem tudom, miért szerepel a CSS-ben, mivel nincs elem, amire alkalmazva lenne:
        div#slider_products div.changer a.image span {  
            background-color: #FFFFFF;  
            border: 1px solid #D6D6D6;  
            padding: 4px;  
        }  
  
        div#slider_products div.changer a.image img {  
            max-height: 63px;  
            width: 63px;  
        }
3

hát igen ez valszeg nem megy

szabo.b.gabor · 2011. Dec. 7. (Sze), 15.57
hát igen ez valszeg nem megy hákolás nélkül ie-ben. esetleg megoldhatod javascript-tel a dolgot (ajánlanám pl a jquery-t ha még nem használnád)

csinálsz egy js-t ami megnézi, hogy milyen böngészőn nyomulsz (vagy csinálhatod szerver oldalon is), ha észleli, hogy gond lesz, akkor behúz egy js-t (azért így, hogy a normális böngészőknek ne kelljen már letölteniük..) ami elvégzi az esetleges módosításokat.

http://api.jquery.com/jQuery.browser/
http://api.jquery.com/jQuery.support/
http://api.jquery.com/jQuery.getScript/
http://api.jquery.com/jQuery.cssHooks/

nem csináltam ilyet mostanában, de ha rászánnám magam, akkor így csinálnám azt hiszem. ha esetleg így teszel és sikerül, oszd meg velünk :)

amúgy az előttem szóló kolléga megoldását is tudom ajánlani.
4

Poetroval egyetertek illetve

Leonuh · 2011. Dec. 7. (Sze), 16.35
Poetroval egyetertek illetve 2 elterjedt megoldas van, amit megint csak csodalok hogy nem kerult meg be :)

1.: Javascript fallback... csinalhatod aszinkron behuzassal is...

<!--[if lt IE 8]>
<style>
div.changer span a img {
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<![endif]-->
2.: Javascript nelkul -> viszont kell egy plusz (span) elem

<!--[if lt IE 8]>
<style>
div.changer span a { position: relative; }
div.changer span a span { position: absolute; top:50%; }
div.changer span a span img {position: relative; top: -50%; }
</style>
<![endif]–>
5

2 elterjedt megoldas van,

Hidvégi Gábor · 2011. Dec. 7. (Sze), 16.56
2 elterjedt megoldas van, amit megint csak csodalok hogy nem kerult meg be :)
Nyilvánvalóan azért, mert magasabb ligában játszol, mint mi. Vigyázz, mert aki korpa közé keveredik, megeszik a disznók!
6

Poetro hozzajarult erdemleges

Leonuh · 2011. Dec. 7. (Sze), 17.24
Poetro hozzajarult erdemleges valasszal de ezt irtam is... Csak potoltam az elhanyagolt valaszt... Sok dolog van biztos amiben tobbet tudsz nem tudhatom, de mostanaban, hogy becsatlakoztam a forumozasba csak poetrotol + par embertol lattam erdemleges valaszt. Ez a forum segitsegnyujtasrol szol, az hogy fenyegetozol mert "finoman leszolva" mondtam 1-2 dolgot (mert elavult technikat mutogatsz) amit eddig nem tudtal az teged minosit. Szerintem nem sertettem szabalyzatot, de ha igen az adminok majd tesznek rola. Nem akarok jobban belemenni off-ba... Igy is tul sokat irtam mar es nem is szeretnek tobb "beszelgetesbe" belemenni... :)
7

"elhanyagolt valaszt",

Hidvégi Gábor · 2011. Dec. 7. (Sze), 17.43
"elhanyagolt valaszt", "fenyegetozol", "elavult technikat mutogatsz" - most csak vagdalkozol, vagy alá is tudsz bármit támasztani? Szerencsére viszonylag könnyen vissza lehet minden hozzászólást keresni.

"finoman leszolva" - nem sért szabályzatot, ettől függetlenül senki sem szokott élni ezzel a lehetőséggel.
8

Hagyjátok abba

Poetro · 2011. Dec. 7. (Sze), 17.50
Kérlek ezt itt most hagyjátok abba. Ez sem ebbe a témába, sem ebbe a fórumba nem tartozik.
9

Elnézést kérek.

Hidvégi Gábor · 2011. Dec. 7. (Sze), 17.55
Elnézést kérek.
10

4. hsz nyomán

Creative · 2011. Dec. 8. (Cs), 15.38
Ez megoldja a középre igazítást, ám még van egy apró hiba! Tételezzük fel, hogy álló és fekvő képek is vannak, és az álló képet veszi magasság-ügyileg megfelelőnek, így ha fekvő képet is rakok be, a teteje ugyanott lesz, mint az álló képnek, viszont én középre akarom erőszakolni =(
							<div class="changer">
								<span>
									<a href="#" title="Lorem" class="limage" >
									<span>
										<img src="images/SAMPLE.jpg" alt="Lorem" />
									</span>
									</a>
								</span>								
								<span>
									<a href="#" title="Lorem" class="limage" >
									<span>
										<img src="images/SAMPLE.jpg" alt="Lorem" />
									</span>
									</a>
								</span>
IE alatt a külön behívódó fájlban pedig ez szerepel eddig:
div.changer span { position: relative; }
div.changer span a { position: absolute; top: 50%; left: 50%; width:65px; height:65px; margin-top: -44%; margin-left: -33px; }
Viszont, ha az oldal fejlécébe beillesztem, hogy IE8 módot töltsön be ahogy csak tud, a böngészőm átvált IE8 alapra, ahol nincs semmi baja. De nem tudom, ott ahol CSAk ir7 lenne, mit művelne =(
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4;chrome=1" >
Természetesen megpróbáltam js-es móddal is, de semmi :s:(

C.
11

Ha megfeleloen hasznalod a

Leonuh · 2011. Dec. 8. (Cs), 16.02
Ha megfeleloen hasznalod a technikat a parenthez kepest mindig kozepen lesz az adott kep, bar latom kicsit alakitottal rajta, igy mar nem ugyanazt eredmenyezi :)

Erre itt nincs szukseg, de <!--[if lt IE 8]> ez mondja meg, hogy hol ervenyesuljon az adott stilus.

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4;chrome=1" >
Ez kell neked (Ezt pedig vedd ki: margin-top: -44%;):

div.changer span a span img {position: relative; top: -50%; }
12

?

Creative · 2011. Dec. 8. (Cs), 16.26
Ne haragudj, Félrenéztem tényleg picit :( :$
Így már végre úgy működik, ahogy kell ie7 -ben is ^^
div.changer span { position: relative; width:65px; height:65px; }  
div.changer span a { position: absolute; top: 50%; left: 50%; margin-left: -33px; }
div.changer span a span { position: relative; top: -50%; line-height:65px; }
Köszönöm a segítségeteket még egyszer ^^' jó a nagyoktól tanulni ha már elakadunk =)

C.