Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
CSS Question
- Thread starter rhett7660
- Start date
- Sort by reaction score
I am new to css but this may help...
To perfectly centre the inner head you may require 2 outer headers, one either side. Then the code to achieve this could be done by:
#outer head left
{float: left
size: whatever;}
#outer head right
{float: right
size: whatever
This will wedge the inner header between them and later help centre it as it will keep a gap from either edge of the screen...
The inner head will need centering by using this order structure (outer header left, outer header right, inner header) within your page code - probably in the form of div tag arranging. Then declare this central div as below
#inner head
{
margin-left: auto;
margin-right: auto;
size: "whatever percentage size you want"}
I hope this is correct, or that it at least points you in the right direction.
To perfectly centre the inner head you may require 2 outer headers, one either side. Then the code to achieve this could be done by:
#outer head left
{float: left
size: whatever;}
#outer head right
{float: right
size: whatever
This will wedge the inner header between them and later help centre it as it will keep a gap from either edge of the screen...
The inner head will need centering by using this order structure (outer header left, outer header right, inner header) within your page code - probably in the form of div tag arranging. Then declare this central div as below
#inner head
{
margin-left: auto;
margin-right: auto;
size: "whatever percentage size you want"}
I hope this is correct, or that it at least points you in the right direction.
I believe you need to be creating three more divs - that will house each of those sets of two.. like this.. hmm it takes longer to type out an analogy.. here is a quick construct that you can use to learn how this works:
![402gg.jpg]()
While this isn't exactly teaching one to fish.. its bare enough that you need to play with the styling at the top to understand just how to control it. The most important thing here is that each of those 'header + footers' get held together by a 'container', which is then set to float:left = force each container to sit next to the other one.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>middle div</title>
<style type="text/css" media="screen">
#left_container, #middle_container, #right_container {float:left;margin-left:5px;color:#fff;}
#left_header, #middle_header, #right_header{width:200px;height:200px;margin-bottom:5px;background-color:#888;}
#left_footer, #middle_footer, #right_footer{background-color:#555;}
</style>
</head>
<body>
<div id="left_container">
<div id="left_header">left_header</div>
<div id="left_footer">left_footer</div>
</div>
<div id="middle_container">
<div id="middle_header">middle_header</div>
<div id="middle_footer">middle_footer</div>
</div>
<div id="right_container">
<div id="right_header">right_header</div>
<div id="right_footer">right_footer</div>
</div>
</body>
</html>While this isn't exactly teaching one to fish.. its bare enough that you need to play with the styling at the top to understand just how to control it. The most important thing here is that each of those 'header + footers' get held together by a 'container', which is then set to float:left = force each container to sit next to the other one.
Better yet, go rip this code:
http://accessat.c-net.us/test/template-3col.html
= closer to what you were asking for from the beginning.
http://accessat.c-net.us/test/template-3col.html
= closer to what you were asking for from the beginning.
for layout lately i've been using Yahoo Grids:
http://developer.yahoo.com/yui/grids/
there is a form to set it up as well. it helps to know how to do it, but the YUI has the advantage of coming cross-browser compatibile. (there are others too, this is just the one i use, YMMV, IANAL, etc, etc. )
http://developer.yahoo.com/yui/grids/
there is a form to set it up as well. it helps to know how to do it, but the YUI has the advantage of coming cross-browser compatibile. (there are others too, this is just the one i use, YMMV, IANAL, etc, etc. )
Thank you for all of the replies....... I didn't even think about breaking it up into three columns. I was trying to do it in two sections.... one that goes all the way across and then one that is on top of the outer that is centered.... Now I see what I need to do. Just had a duh moment!
Looking at what was suggested........
Thanks again!
Looking at what was suggested........
Thanks again!
css:
html:
Hope that helps.
Code:
body { margin:0; padding:0; }
#outerHeader {
background:url(your background image or color);
width:100%;
}
#innerHeader {
margin:0 auto;
background:url(your background image or color) no-repeat;
width:width of your image or desired div width;
height:height of your image or desired div height;
}html:
Code:
<div id="outerHeader">
<div id="innerHeader"></div>
</div>Hope that helps.
Looking at your mock up again, perhaps you meant that you just want the outer header on the left hand side of the inner header. This can also be accomplished using the same 2 divs.
css:
html:
The absolute positioning on the outerHeader is to make it work in ie 6 and 7. If you left that out, the innerHeader would center between the end of the outerHeader and the right of the browser window.
css:
Code:
body { margin:0; padding:0; }
#outerHeader {
position:absolute;
left:0;
background:url(background image or color);
width:50%;
height:height of your innerHeader image or div height;
float:left;
}
#innerHeader {
position:relative;
margin:0 auto;
background:url(background image or color) no-repeat;
width:width of your image or desired div width;
height:height of your image or desired div height;
z-index:100;
}html:
Code:
<div id="outerHeader"></div>
<div id="innerHeader"></div>The absolute positioning on the outerHeader is to make it work in ie 6 and 7. If you left that out, the innerHeader would center between the end of the outerHeader and the right of the browser window.
Got it. The following will work in all browsers emulating your example:
css:
html:
This will allow the outerHeader to have a lesser height than the innerHeader, but still have the innerHeader on top and centered. You can also add a "top" to the innerHeader to control how far it is from the top of the browser.
css:
Code:
#outerHeader {
position:absolute;
top:10px (or whatever value works for you);
left:0;
background:url(background image or color) repeat-x;
width:100%;
height:height of this divs background image;
}
#innerHeader {
position:relative;
margin:0 auto;
background:url(background image or color) no-repeat;
width:width of image;
height:height of image;
z-index:100;
}html:
Code:
<div id="outerHeader"></div>
<div id="innerHeader"></div>This will allow the outerHeader to have a lesser height than the innerHeader, but still have the innerHeader on top and centered. You can also add a "top" to the innerHeader to control how far it is from the top of the browser.
^^ Very nice... trying it out now!
Thanks again to all of those who have replied..... You have been a huge help!
Thanks again to all of those who have replied..... You have been a huge help!