Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    May 2011
    Posts
    3
    Member #
    27974
    Hello guys i am new to this website but i have been reading around and i am quite happy with how everyone responds and speaks to each other so im posting a small question here maybe someone can solve this easily.

    I have a simple problem of one of my divs pushing my main background image around 10px top and left. its the #head container

    code looks like this

    <body>


    <div id="Master">
    <div id="Head">


    </div> <!-- end of #Head Div -->

    <div id="Content">

    <div class="topnavmenu">

    <p>Top menu area</p>

    </div><!--end of nav menu top div-->

    CONTENT IS HERE

    </div><!--end of content -->

    </div> <--!end of master-->




    CSS for the #head ID is

    #Head {
    width:950px;
    background-image: url(../Images/HeaderHTGYD.jpg);
    height: 150px;
    padding: 0;
    margin: 0;
    }

    *note* the image is exactly 150 px by 950px, i set margins and paddings but it doesnt seem to take care of the problem. also the colors i used have also changed when i preview in chrome. my image was designed in illustrator its a vector graphic.


    thanks for any help.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Try setting:
    body, div{margin:0; padding:0;}
    at the top of your CSS and see if that helps. Browsers add their own styles to elements, and that can sometimes push things around.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    You can sort of move around the background: http://www.w3schools.com/cssref/pr_b...d-position.asp
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  5. #4
    Junior Member
    Join Date
    May 2011
    Posts
    3
    Member #
    27974
    I already have my margins and padding set to 0 for the body, automatically i pre create css stylesheets like so for this type of reason, still doesnt seem to budge

  6. #5
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Would you mind forwarding all your css and html so i can have a look at it? it may be a padding issue, i had it with a site i was working on. for some reason putting padding-top:10px; into my header wrapper solved the issue... to this day i'm still not sure why it worked but im not complaining! ha.

    Also a tip: with background images dont use CAPITALS within the image title (EG. HeaderHTGYD.jpg) as it can have undesired effects with older browsers, change it to all lowercase.

    hope this helps, look forward to your reply.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  7. #6
    Junior Member
    Join Date
    Jul 2011
    Posts
    11
    Member #
    28542
    Liked
    1 times
    Try adding position top center to your background

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Daniel: if you're still with us, can you upload your page somewhere and post the link to it? This is porbably a case of "better seen than explained".
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com