Solved

How can I get my content centered?

Posted on 2015-01-07
6
82 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now