Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there a way to have text move together with centered bg-img?

    Hi there!
    I'm a beginner with CSS, but I'm moving along nicely (I like to think .
    I've created a website for a friend's legal practice and need a little help. Here's the site:
    http://aftergoodesq.com/
    I'm working on a pretty small monitor, and my problem seems to be that on larger monitors, the text and nav all move off the centered background image and onto the grey background color.
    My question is: is there a way to have the text and nav move with the background image (without making them all into an image, and without centering the text and nav)?
    I have other questions about the site, but this one is the most pressing.
    Thanks very much for your help!

  • #2
    New Coder
    Join Date
    May 2010
    Location
    Michigan, USA
    Posts
    56
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Could you give me the CSS code to the Left and Right grey sides, the background image, and the part that is overlapping?

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure. forgive me if this includes stuff you don't need, but most of the elements on the site are involved in the question. thank you!!!


    body
    {
    background-image: url(images/main-bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-color: grey;
    }

    #content
    {
    height: em;
    margin: 0;
    overflow: hidden;
    float: left;
    padding: 2em 30em 20em 13em;
    }

    #logo
    {
    padding: 20px 0 0 175px
    }

    .rule
    {
    border-top: 2px solid #99ccff;
    width: 42em;
    margin-left: 11em;
    }

    #navlinks
    {
    font-family:century gothic !important;
    font-size: small;
    margin-left: 10em;
    padding:0 0 1.1em;
    white-space:nowrap;
    list-style-type:none;
    }

    #navlinks li
    {
    display:inline;
    }

    #navlinks li a
    {
    padding:0 0 0 4em;
    color:#666;
    text-decoration:none;
    float:left;
    }

    #navlinks li a:hover
    {
    color:#99ccff;
    }


    p
    {
    font-size: 0.85em;
    color: grey;
    font-family: georgia;
    min-width: 450px;
    text-align: center;
    }

  • #4
    New Coder
    Join Date
    May 2010
    Location
    Michigan, USA
    Posts
    56
    Thanks
    10
    Thanked 0 Times in 0 Posts
    What part is the part that is overlapping? Is that the navlinks?

    Edit:
    Also could you give me the HTML Codes to the navbar and background?
    Last edited by Mr Travis L; 05-14-2010 at 04:53 AM.

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it's everything that isn't the background image -- nav and paragraph text. look here and you'll see what i mean:
    http://clip2net.com/page/m0/5763090

  • #6
    New Coder
    Join Date
    May 2010
    Location
    Michigan, USA
    Posts
    56
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Ahhh, I see. On yours everything is over, I didn't know that. I thought that it was just the navbar and logo because thats all it shows on mine.

    Change the body to this:
    body {
    background-image: url(images/main-bg.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    margin:0px 50% 0px 50%;
    }

    Tell me if this works... I can't really think of a better solution this late at night.

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no, that messes it up for small screens:
    http://clip2net.com/page/m0/5798687

  • #8
    New Coder
    Join Date
    May 2010
    Location
    Michigan, USA
    Posts
    56
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Try turning them into tables? Thats how I make all my websites, with <table>.

    Easy way to do that would be this:

    Put this right under your body tag: <table><tr><td>&nbsp;</td><td width="957">
    Example:
    <body>
    <table><tr><td>&nbsp;</td><td width="957">
    THEN YOUR CODES

    Then put this right above your ending body tag: </td><td>&nbsp;</td></tr></table>
    Example:
    YOUR CODES ABOVE
    </td><td>&nbsp;</td></tr></table>
    </body>

    What this does is first makes a blank table on the left (where the stuff is overlapping), then makes another box in the middle that is the same size as your background image (I put 957, because I think that is what your background image width is), then it makes another blank box to the right, this should automaticly put the middle box in the middle, and then make the 2 side boxes take up the rest of the page, with both the same equal width.

    If this doesn't work please say.

    You "may" have to get rid of your background image, and make it the middle tables background image (nothing differnt, just instead of it being a background image, it would be a table background image).

  • #9
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    usually if you set everything to margin-left: auto, margin-right:auto, it will all center in a similar fashion.

  • #10
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks Mr Travis L, but this is what happened:
    http://clip2net.com/page/m0/5865500
    looks like my nav is not happy with the table set up. but this may be the right track...

    code beginner, i don't think that'll work considering that right now the content has quite a bit of padding on it to get it in the right place...

    thank you both for your help!

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    I think a good solution would be to make a containing div that holds everything in the middle, then place everything inside that...

    eg:

    #container{
    width:youdecide;
    height:auto;
    position:relative;
    left:50%;
    margin:0 0 0 -50%of size; ok so here the numbers work round clockwise from top so, top, right, bottom, left, so the last number (left) should be minus half the size of the actual div, that way it will always be in the center of the page and this div will in a sense become your new body so apply any padding etc within this to contain everything else.

    }

    I hope this helps and I've explained that ok, if you need help let me know.
    Last edited by shepherd; 05-18-2010 at 10:35 PM.

  • #12
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by osenorman View Post
    I think a good solution would be to make a containing div that hold everything in the middle and place everything inside that
    ?????????


  •  

    Posting Permissions

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