SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to centre position CSS/div

    Hi,

    I'd like some help please on how I could position my header 1 in the light blue colour to fit in line with the banner (the black thing you see) for my CSS. I have tried googling but to no avail.

    Picture 2.png

    Thank you very much!

    So far, I have got:

    HTML Code:
    	margin-left: auto;
    	margin-right: auto;
    	display: block;
            float: top;

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hi, ParfaitMacaron, Welcome to the forums,

    The image is still pending. Without seeing your HTML and CSS, which the image wouldn't show anyway, let me offer a possibility.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
    Thread: How to centre position CSS/div
    2013.03.02 21:56
    ParfaitMacaron
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    h1 {
        background-color:black;
        color:lightblue;
        text-align:center;
        padding:12px;
    }
    
        </style>
    </head>
    <body>
    
    <h1>Header Text</h1>
    
    </body>
    </html>
    PS: there is no such property as {float:top}

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Also, auto right and left margins don't do anything unless the elements also has a set width (such as 800px or 80%, for example. Any units will do.)

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    also:
    there is no such thing as float:top; (only left | right | none) . If you were to float this element then margins-right/left:auto would not be applicable.
    here ONE an example of what I think you are trying to accomplish.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>template</title>
        <style type="text/css">
    
    h1 {
        color:#000;
        text-align:center;
        padding:12px;
    }
    
    .header { background-color:lightblue; overflow: hidden}
    .wrap{margin:0 auto; width:960px;}
    .header img {float:right;}
    .header h1 {float:left; margin:0;}
        </style>
    </head>
    <body>
    		
    <div class="header">
    	<div class="wrap">
    		<h1>Header Text</h1>
    		<img src="image.jpg">
    	</div>
    </div>
    
    </body>
    </html>

    to be honest , you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content. ( for example... is the image content or deco rational, if it's content can it be considered part of the H1? ..etc etc..)
    hope that helps

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Then there's the display:table technique that works in IE8+

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
    Thread: How to centre position CSS/div
    2013.03.02 21:56
    ParfaitMacaron
    -->
    <head>
        <title>ParfaitMacaron</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {
        padding:0;
        margin:0;
    }
    
    div.header {
        display:table;
        table-layout:fixed;
        width:100%;
    }
    .header div {
        display:table-cell;
        background-color:#ffa;    /* for demo purposes */
        vertical-align:middle;
        text-align:center;
    }
    div + div,
    img {
        width:250px;
    }
    img {
        height:150px;
        display:block;
        background-color:#ddd;    /* for demo purposes */
    }
    h1 {
        border:5px solid #000;
        background-color:#ade;
        color:#000;
        padding:8px;
        margin:0;
    }
    
        </style>
    </head>
    <body>
    
    <div class="header">
        <div><h1>Header Text</h1></div>
        <div><img src="image.jpg" alt="image"></div>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE: Just figured it out! I think you're all right in some ways!! It's because I didn't specify the width of my h1 that it stopped working when I was using the auto margin-left and margin-right!

    Quote Originally Posted by ronpat View Post
    Hi, ParfaitMacaron, Welcome to the forums,

    The image is still pending. Without seeing your HTML and CSS, which the image wouldn't show anyway, let me offer a possibility.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
    Thread: How to centre position CSS/div
    2013.03.02 21:56
    ParfaitMacaron
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    h1 {
        background-color:black;
        color:lightblue;
        text-align:center;
        padding:12px;
    }
    
        </style>
    </head>
    <body>
    
    <h1>Header Text</h1>
    
    </body>
    </html>
    PS: there is no such property as {float:top}
    Thank you for the welcome. Can you see the image now by any chance? Thanks for telling me there's no float:top property! That's embarrassing I thought it existed. I tried to pad it out by 12px but it doesn't shrink to fit the 1000px width I've set (header banner image). The h1 I'm trying to set is supposed to be in line with the 1000px width of the header.

    Quote Originally Posted by ralph.m View Post
    Also, auto right and left margins don't do anything unless the elements also has a set width (such as 800px or 80%, for example. Any units will do.)
    Thank you for your reply. I googled how to centre a div and found this website: http://www.thesitewizard.com/css/center-div-block.shtml It worked and I think that is because my wrapper is set to 1000px width.

    Quote Originally Posted by dresden_phoenix View Post
    also:
    there is no such thing as float:top; (only left | right | none) . If you were to float this element then margins-right/left:auto would not be applicable.
    here ONE an example of what I think you are trying to accomplish.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>template</title>
        <style type="text/css">
    
    h1 {
        color:#000;
        text-align:center;
        padding:12px;
    }
    
    .header { background-color:lightblue; overflow: hidden}
    .wrap{margin:0 auto; width:960px;}
    .header img {float:right;}
    .header h1 {float:left; margin:0;}
        </style>
    </head>
    <body>
    		
    <div class="header">
    	<div class="wrap">
    		<h1>Header Text</h1>
    		<img src="image.jpg">
    	</div>
    </div>
    
    </body>
    </html>

    to be honest , you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content. ( for example... is the image content or deco rational, if it's content can it be considered part of the H1? ..etc etc..)
    hope that helps
    Thank you for your help. I appreciate the code example. I have coded up my index page with the div classes but for some reason I still can't get it right. I've tried your suggestions. My wrap is like yours, the header img is at the top of the page (how I want it) but I need the Home Page bar to fit in line with the header img.

    Quote Originally Posted by ronpat View Post
    Then there's the display:table technique that works in IE8+

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?990327-How-to-centre-position-CSS-div
    Thread: How to centre position CSS/div
    2013.03.02 21:56
    ParfaitMacaron
    -->
    <head>
        <title>ParfaitMacaron</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {
        padding:0;
        margin:0;
    }
    
    div.header {
        display:table;
        table-layout:fixed;
        width:100%;
    }
    .header div {
        display:table-cell;
        background-color:#ffa;    /* for demo purposes */
        vertical-align:middle;
        text-align:center;
    }
    div + div,
    img {
        width:250px;
    }
    img {
        height:150px;
        display:block;
        background-color:#ddd;    /* for demo purposes */
    }
    h1 {
        border:5px solid #000;
        background-color:#ade;
        color:#000;
        padding:8px;
        margin:0;
    }
    
        </style>
    </head>
    <body>
    
    <div class="header">
        <div><h1>Header Text</h1></div>
        <div><img src="image.jpg" alt="image"></div>
    </div>
    
    </body>
    </html>
    Thank you for your help. I've tried to comment out some of my CSS and use a bit of your demo code but for some reason, I still can't get it to work.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    ParfaitMacaron,

    The thing about HTML and CSS is that they work together. dresden_phoenix summed it up very nicely...
    Quote Originally Posted by dresden_phoenix
    you ahve to take your whole code into consideration, as you should start to style only after you have structured your HTML around your content.
    CSS and HTML not only depend on one another, they also depend on their own relatives, too. It takes a bit of experience before one learns how to copy bits and pieces from other code and use them in one's own.

    For example, if you copy the full page examples presented above by dresden_phoenix or me, and paste them on a stand-alone page, they will all work. Each example is a stand-alone unit.

    As your knowledge grows, you will learn how to selects features from one page and apply them to your own. In the beginning, before dismissing our examples as unworkable, be sure to give them a look on their own pages to see what we are demonstrating.

    Everything exists in the context of its surroundings.

    If you can post a link to your page, we will be happy to offer some guidance. Or, if you can post your HTML and CSS in a message, we can work with that, too. In your message, type

    [code]

    then paste your code here

    [/code]

    That will put it in a box with scroll bars (like ours above) and preserve formatting.

    Without being able to see your code, everything we can offer at this stage is a "guess".

    Best of luck!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •