Jump to content
php.lv forumi

Problēma ar CSS background centrēšanu


andrisp
 Share

Recommended Posts

Tātad - body tagam ir backgroundā bildīte, kas tiek centrēta pa vidu. Un ir div elements, kam ir fiksēts platums (platums ir tāds pats kā bildītei) un tam ir tā paša bildīte. Div elements arī tiek centrēts. Tātad šajā piemērā pēc idejas to div elementu nemaz nevajadzētu redzēt, jo tas "sakrītīs" ar fonu. Bet diemžēl tā nenotiek - gan FF, gan IE pie dažādiem logu platumiem (ļoti nenoteikti) nepareizi centrē vienu vai otru. Rezultātā var redzēt novirzi par vienu pikseli.

 

Šeit piemērs: http://apblog.lv/misc/bgcenter/

 

Tātad - kādam ir zināma kāda alternatīva šim ? Man ir svarīgi, lai fons būtu 100% width un height (ja izmantojam body, tad tas worko jau pats par sevi).

Link to comment
Share on other sites

taa liekas ir browsera probleema, kad arii tu samazini bowseri un vinju staipi turp atpakalj, var smuki redzeet ka browsers ciinaas ar to 1px. Bet patiesiibaa taa ir 0.5px nobiide, un noapaljojot sanaak taa 1px nobiide.

 

Bet anyway, likt centreetu bg ieksh body imho nebuus iisti labi, jo samazinot browser windows, kad paraadaas horizontaalais scrolls, un kad ar scrollu pascrolle pa labi, body bg centreetais ir aizgaajis pa kreisi bet <div> ir palicis pie kreisaas malas, so ir radusies nobiide.

Edited by Evi
Link to comment
Share on other sites

Evi, risinājums būtu uzlikt body tagad min-width. Uz IE6 man vakar arī izdevās kaut kā safiksot, bet aizmirsu jau kā. :)

 

Un attiecībā par to 0.5px - imo, monitorā neeksistē puspikselis. Vienkārši, iespējams, ka pārlūks atšķirīgi rēķina attālumus elementu marginiem un bacground pozīcijām, ja loga platums pikseļos ir nepāra. Vienā gadijumā paņem reisajā malā par vienu pikseli vairāk, otrā - labajā malā.

Link to comment
Share on other sites

es te bik paspeeleejos, panjeemu tavu fixed piem, pat izskataas, ka viss smuki straadaa FF IE6 Opera =), nav nekadu 1px nobiizhu un uz windows samazinaashanu abi bg ir savaas vietaas. Jaa, vinjsh tomeer laikam meera no browsera malaam attaalumus un taapeec sanaak taa nobiide, njemot veeraa #d1 un #d2 'uzvediibu'.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Hello!</title>
<style type="text/css">
html,body{
	margin:0;
	padding:0;
	height:100%;
	background:url(graybg.jpg) center repeat-y}
body{
	min-width:499px}
div#d1{
	background:url(bluebg.jpg) center repeat-y;
	height:70px}
	div#d2{
		width:469px;
		margin:0 auto;
		padding:15px}
</style>
</head>
<body>
<div id="d1">
	<div id="d2">
		<p>Some text</p>
	</div>
</div>
</body>
</html>

Link to comment
Share on other sites

  • 3 months later...
 Share

×
×
  • Create New...