5 replies [Last post]
joeybab3
joeybab3's picture
Offline
newbie
Antarcticalifornia
Last seen: 1 year 36 weeks ago
Antarcticalifornia
Timezone: GMT-7
Joined: 2014-10-08
Posts: 3
Points: 4

It's pretty visible... sagexc.comThe top image(s) at the top are centered by the left side rather than in the middle, making them appear halfway accross the page unlike the other elements, which adjust according to the page.

#HeadImage
{
	z-index:3;
	width:980px;
	position:absolute;
	margin-top:0px;
	margin-left: auto;
    margin-right: auto;
	float: left;
}
#notHeadImage
{
	z-index:2;
	position:absolute;
	margin-top:0px;
	margin-left: auto;
    margin-right: auto;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 min 31 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9760
Points: 3842

Using absolute position is

Using absolute position is nearly always a bad idea unless you're a fairly experienced CSS coder.

This is all you need:

#HeadImage {
  margin: 0 auto;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

joeybab3
joeybab3's picture
Offline
newbie
Antarcticalifornia
Last seen: 1 year 36 weeks ago
Antarcticalifornia
Timezone: GMT-7
Joined: 2014-10-08
Posts: 3
Points: 4

I need z-index though

I need to stack the images using z-index though, i've tried setting it to fixed, and relative, but all yield the same results.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 min 31 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9760
Points: 3842

Simple

Add to the base container {position: relative;} and make the other, child container, {position: absolute;}. The second will use the first as its positioning context.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

joeybab3
joeybab3's picture
Offline
newbie
Antarcticalifornia
Last seen: 1 year 36 weeks ago
Antarcticalifornia
Timezone: GMT-7
Joined: 2014-10-08
Posts: 3
Points: 4

Tried that, it's still

Tried that, it's still centered in the middle...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 min 31 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9760
Points: 3842

My bad

I misunderstood what you're trying to do.

change the markup to this:

<div id="header">
  <img id="HeadImage" 
       alt="Bobcats Running Team" 
       src="http://sagexc.com/schsxc/images/top_pic.png" 
       height="185" />
</div>

CSS like so
#header {
  background-color: #003300;
  background-image: url("http://sagexc.com/schsxc/includes/php/rotate.php");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 182px;
  width: 980px;
  }
 
#HeadImage {
  margin: 0 auto;
  width: 980px;
  }

that ought to do it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.