Solved

How can I get my content centered?

Posted on 2015-01-07
6
93 Views
Last Modified: 2015-01-09
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
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536958
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
 
LVL 43

Expert Comment

by:Rob
ID: 40537612
Do you have a link to the page that isn't working?
0
 

Author Comment

by:brucegust
ID: 40537917
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!

 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 40539199
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
 

Author Closing Comment

by:brucegust
ID: 40539431
Why do the answers typically reveal themselves as something very simple?

Thanks!
0
 
LVL 43

Expert Comment

by:Rob
ID: 40541279
I know what you mean! Thanks for the points, happy to help :)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Border and image sizing 5 35
Bottom border change 5 26
Change how page is organized 3 36
Can't change Woocommerce checkout select boxes, white on white text. 1 28
This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question