CSS Question

Discussion in 'Web Design and Development' started by rhett7660, Jun 18, 2009.

  1. rhett7660 macrumors G4

    rhett7660

    Joined:
    Jan 9, 2008
    Location:
    Sunny, Southern California
    #1
    Hello..

    How could I do the following:(see attachment)



    I want the outer head to extend the full length of the browser window while the inner head (main graphic) stays centered?

    Any suggestions?
     

    Attached Files:

  2. j.earnshaw macrumors newbie

    Joined:
    Apr 19, 2009
    #2
    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.:)
     
  3. needlnerdz macrumors regular

    needlnerdz

    Joined:
    Jun 10, 2006
    Location:
    switzerland
    #3
    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:

    [​IMG]

    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.
     
  4. needlnerdz macrumors regular

    needlnerdz

    Joined:
    Jun 10, 2006
    Location:
    switzerland
    #4
  5. jakeOSX macrumors regular

    Joined:
    Mar 24, 2005
    #5
    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. )
     
  6. rhett7660 thread starter macrumors G4

    rhett7660

    Joined:
    Jan 9, 2008
    Location:
    Sunny, Southern California
    #6
    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!
     
  7. lovesupreme macrumors newbie

    Joined:
    Apr 23, 2008
    #7
    css:
    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.
     
  8. lovesupreme macrumors newbie

    Joined:
    Apr 23, 2008
    #8
    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:
    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.
     
  9. rhett7660 thread starter macrumors G4

    rhett7660

    Joined:
    Jan 9, 2008
    Location:
    Sunny, Southern California
    #9
    Actually I want it going all the way across. Sorry for not making it more clear....

    See attached...
     

    Attached Files:

  10. lovesupreme macrumors newbie

    Joined:
    Apr 23, 2008
    #10
    Got it. The following will work in all browsers emulating your example:

    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.
     
  11. rhett7660 thread starter macrumors G4

    rhett7660

    Joined:
    Jan 9, 2008
    Location:
    Sunny, Southern California
    #11
    ^^ Very nice... trying it out now!

    Thanks again to all of those who have replied..... You have been a huge help!
     

Share This Page