Solved

How can I get my content centered?

Posted on 2015-01-07
6
88 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
  • 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 42

Expert Comment

by:Rob Jurd, EE MVE
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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE 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 42

Expert Comment

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

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

785 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