Solved

How can I get my content centered?

Posted on 2015-01-07
6
104 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

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!

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

622 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