Grow your CSS skills. Land your dream job.

CSS Alignment help

  • # November 28, 2012 at 5:34 pm

    My css skills are weak and I need help.
    The alignment of my web site content is all over the place depending on which browser I use. It is more close to what I want in Firefox using a mac.

    My url ishttp://www.socialmediafanpages.com/bol/

    I wanted the background image to fill the window.

    I found this background alignment code
    html {
    background: url(images/background01.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    It seemed to work better than putting the background image inside of a div which did not fill the window.

    The main problem is that content should line up below the logo of the man kneeling.

    In one browser it may be to the far right

    In one browser it may be two inches below the logo.

    I need to know how to make it be very close to the same regardless of the browser.

    I am sure that I must be coding incorrectly
    What are some suggestions?

    # November 28, 2012 at 5:47 pm

    I’ll suggest first that you’ll get rid of the tables tags in your code…
    there’s no need for a simple site like that to use table tags.

    it should built with div tags..
    but what are you trying to do with the background, i didn’t understand exactly..
    you want that the background will be behind the box where i see the text in it..?

    # November 28, 2012 at 8:51 pm

    The content is supposed to line up with the background. The top left of the nav bar should be right under the logo. In some browsers the nav bar and content are too low or to far to the left of the logo.

    The graphic designer made an complex background and Im trying to may the content align properly in all browsers. I am not having success in doing it.

    Here is a screenshot of what I want http://www.socialmediafanpages.com/bol/BOLWebHome.jpg

    Thanks

    # November 28, 2012 at 8:58 pm

    Would my issue be knowing whether to use absolute or relative positioning?

    I get all confused with using those attributes

    otc
    # November 28, 2012 at 9:25 pm

    Hello :),

    Simple stuff, first thing you need is to fix your wrapper so that the content is always centered so let’s get to it:

    HTML:

    <div align="center">
    <div id="wrapper" align="center">

    DELETE align=”center” to both divs and delete the first div, make sure to delete it’s closing tag at the very bottom. We will resolve centering with CSS, YAY :)

    Your HTML should look like this

    <div id="wrapper">

    So how to do it? You can remove all declarations for #wrapper

    #wrapper {
    position:relative;
    top:200px;
    width: 730px;/*the width of your content*/
    margin: 0 auto;
    }

    I set the position to relative so you can specify a top pixel adjustment relative to the body tag. This says 0 margin top and bottom and 50% both left and right which means you’ve got a centered div if you specify it’s width.

    Now for the background image:

    html {
    background: #26598e url(images/background01.jpg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    What I changed, I set a default color so the bottom has no white.
    changed center center fixed to top center because you want the logo to stay up. Although I would recommend you separate the logo and the background.

    Hope this helps, Have fun :D

    # November 29, 2012 at 6:03 pm

    I did a test with the code you gave me and a new style sheet.

    It worked great on my 13 inch MacBook Pro with a 1280 x 800

    [http://www.socialmediafanpages.com/bol/index03.html](http://www.socialmediafanpages.com/bol/index03.html “”)

    It is still horrible on my pc resolution 1024 x 768 using both IE and FireFox.

    otc
    # November 29, 2012 at 7:19 pm

    Hello again,

    My code is correct however I just noticed all your divs inside your wrapper are absolute -_-.

    Set the wrapper to what I’ve mentioned before but change

    top:200px;
    to
    top:245px;

    And delete all absolute positions for #navigationbar, #base and #footer and TADA :D

    # November 29, 2012 at 10:29 pm

    OTC I did the changes and everything is good.

    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".