Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Alignment help

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #41049
    jrobin747
    Participant

    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?

    #115860
    realife
    Member

    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..?

    #115875
    jrobin747
    Participant

    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

    #115876
    jrobin747
    Participant

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

    I get all confused with using those attributes

    #115877
    otc
    Participant

    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

    #115975
    jrobin747
    Participant

    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.

    #115979
    otc
    Participant

    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

    #115997
    jrobin747
    Participant

    OTC I did the changes and everything is good.

    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.