Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 114
  • Last Modified:

How can I get my content centered?

Head out to http://www.crystalclearfamilydentistry.com

I added a new background and wanted to put some clouds in the corner. For some reason, I can't do it without the header going on squirrel - ly.

Here's what that looks like:

screenshot
The URL above shows you want I want it to look like. The image below shows you how my header is getting bumped down and I can't figure out how to position it where it belongs. The carousel is fine, it's the content to the immediate left - or what should be to the immediate left - that's killing me.

Here's my CSS:

body {
background-image:url(images/new_background.jpg);
background-repeat:repeat-x;
}

#cloud_left {
position:absolute;
background-image:url(images/left_clouds.png);
width:446px;
height:314px;
margin-left:-10px;
z-index:1;
}

#cloud_right {
position:relative;
float:right;
margin-top:-10px;
margin-right:-10px;
z-index:0;
width:503px;
height:318px;
background-image:url(images/right_clouds.jpg);
	
}

#header {
position:relative;
z-index:2;
margin:auto;
height:335px;
width:1012px;
}

#carousel {
position:absolute;
margin-left:533px;
top:0;
width:479px;
height:335px;
z-index:3;
}

Open in new window


What am I doing wrong?
0
brucegust
Asked:
brucegust
  • 3
  • 2
1 Solution
 
Tom ChadaraviciusSenior DeveloperCommented:
IMHO,

margin-left:533px;
width:479px;
height:335px;

will "nail" an element to a permanent position relative to its parent. The "margin-left" ought be something fluid: em or per cent, or auto. Also, try "min-height" / "min_width", "max-height"/"max-width".
0
 
RobOwner (Aidellio)Commented:
Do you have a link to the page that isn't working?
0
 
brucegustAuthor Commented:
OK, guys! Head out to http://hihatwebdesign.com/crystal/header.php for a simplified version of the site that demos my dilemma. Below I've got my code as well as as some questions that will hopefully enable me to not just copy and paste a solution, but really get my head around "why" things are working the way they are.

(HTML)

(1) <div id="clouds">
(2) <div id="cloud_left"></div> (3) <div id="cloud_right"></div>
</div>

(4) <div id="header">
      (5) <div id="header_image"><IMG SRC="images/header.png" usemap="#header" border="0">
      (6) <div id="carousel"></div>
      </div>
</div>

(CSS [with questions and commentary])

(1) #clouds {
position:absolute; //because I want to "nail" this location to my site in a way that's independent of however else the system might attempt to position it
margin:0px;
width:100%;
height:318px;
z-index:1; // places it above my background graphic
}

(2) #cloud_left {
position:relative; //"relative" to the absolute positioning of my cloud container
float:left;
background-image:url(images/left_clouds.png);
width:446px;
height:314px;
margin-left:-10px;
z-index:1;
}

(3) #cloud_right {
position:relative;
float:right; //I'm using float because, from what I understand, containers are not systematically positioned alongside one another by default. Rather, they go underneath one another - that's the natural progression. If you want to change that, you have to use "float."
margin-top:-10px;
margin-right:-10px; //hides a portion of the graphic that formed a distracting border
z-index:0;
width:503px;
height:318px;
background-image:url(images/right_clouds.jpg);
}

(4) #header {
position:absolute; //I'm using this to establish a clean and definitive container that helps me better separate things from the "floating" dynamic I've got with the right collection of clouds. I don't understand "clear:both." Never have. In an act of desperation / frustration, I put this container in place, hoping to solve the problem of my carousel (the black square) from slipping underneath my header graphic. It didn't work...
z-index:2;
text-align:center;
height:335px;
width:100%;
background-color:#cccccc;
}

(5) #header_image {
position:relative; //right? This is "relative" to the header container which I've defined as "absolute"
width:1012px;
height:335px;
margin:auto; //centered - looks good
}

(6) #carousel { //and here's my problem!
position:absolute; //thinking that I'm going to position "absolutely" within the header_image container
float:right; //again, defaulting to my understanding of "float" in that things will otherwise line up beneath one another, rather than side by side
margin-left:533px;
margin-top:0;
width:479px;
height:335px;
z-index:3;
background-color:#000000;
}

So, the bottom line is: Why does that black box position itself BELOW the header image as opposed to on top of it and to the right.

And one other question: Why does this page look like this in Windows:

windows screenshot
..and like this on a Mac:

Mac screenshot
Thanks!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RobOwner (Aidellio)Commented:
you just need to add top: 0 to your css.  On some browsers this is implied, on others it isn't so you need to be explicit.  In other words:

#carousel {
position: absolute;
float: right;
margin-left: 533px;
margin-top: 0;
width: 479px;
height: 335px;
z-index: 3;
background-color: #000000;
top: 0px; <======== This is the line I've added
}

Open in new window

0
 
brucegustAuthor Commented:
Why do the answers typically reveal themselves as something very simple?

Thanks!
0
 
RobOwner (Aidellio)Commented:
I know what you mean! Thanks for the points, happy to help :)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now