SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DreamWeaver CS5: Web Page Positioning?

    Hello:

    Trusting this is the right place to post this question...

    I have a background image in DreamWeaver and I need the top of the image to sit at the very top of the browser in the center. It will only do one or the other (top or center but not both).

    Every time I change the position to “relative” it drops the image in the browser a few pixels (therefore, not flush with the top).

    Any code and/or solutions to center and keep the image at the top of the browser at the same time would be much appreciated.

    Thanks!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi AlphaQuest,

    Welcome to Sitepoint
    You can position a background image in both directions with background-position: xPosition yPosition;

    Code css:
    background-position: 50% 0;

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi markbrown4,

    Thank you for your prompt and friendly welcome!


    I have tried what you suggested, for some reason it doesn't seem to be working on my end. I must be entering the code incorrectly.

    Here is what my code currently looks like (without the changes), could you show me how to correct it and also include an example of the CSS code?

    Thank you! Your help is very much appreciated!


    #body {
    position:absolute;
    width:1200px;
    height:1024px;
    z-index:1;
    left: 0px;
    top: 0px;
    }
    #container{
    position:absolute;
    width:1200px;
    height:1024px;
    z-index:2;
    left: 0px;
    top: 0px;
    }
    #background_image {
    position:absolute;
    width:1200px;
    height:1024px;
    z-index:2;
    left: 0px;
    top: 0px;
    background-image: url(images/main_images/about.jpg);
    }

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Ok, that CSS has dreamweaver layers written all over it
    If you really want to learn how to build web sites you're going to need to code the CSS by hand, each and every time.

    Can you post the complete HTML / CSS of your page and we'll suggest a better way to lay it out?

    There's some info in the FAQ why you need to avoid absolute positioning elements like you are.
    http://www.sitepoint.com/forums/show...=1#post2156853

    4)Don't absolute position every element unless you have a fixed width fixed height layout that isn't going to change. Otherwise you could find yourself with a very rigid layout that is hard to manage. The question often asked in the forums is how can I put a footer under the absolute columns and the answer is you can't unless the columns are a fixed height or you want to script it).

    You usually need a mixture of static (default), floated and absolute positioning in most layouts and will rarely use relative positioning.


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
  •