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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Image Banner Centering Issues

    Im coding a band's myspace and am having issues with the positioning of a top banner. Its absolutely positioned so it looks fine on a widescreen 1600x900 resolution, but its too far left on a standard 1024x768 resolution. ive tried a couple of different center tags and stuff but cant figure it out and nothing works. help please?

    www.myspace.com/releasetherivermusic

    this is the code im using

    Code:
    <style>
    body{
    background-position:top center;margin-top: 575;}
    
    div.topbanner {
    top: 0;
    left: 50%;
    margin-left: -792px;
    width: 100%;
    height: 600px;
    position: absolute;
    }
    </style>
    
    <div class="topbanner"><img src="http://i260.photobucket.com/albums/ii38/Overtonerocks/Bannertopv3Final1b.jpg" /></div>
    thanks in advance

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    absolute positioned divs dont move according to screen resolution. If you want your div to position itself acording to resolution then insert it inside an relative positioned div.

    vineet

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vineet View Post
    absolute positioned divs dont move according to screen resolution. If you want your div to position itself acording to resolution then insert it inside an relative positioned div.

    vineet
    let me go ahead and apologize in advance-im not good at code at all. i do management tho so it comes with the turf. haha

    i understand what you are saying about relative and absolute positioning but i had no clue how to do it so i basically googled "relative positioned div" and tried to DIY it to no avail. the closest i got was having a 'blank space' at the top where the banner should be but the banner was near the bottom and to the left a bit (i never could figure out what was pushing it left)

    could you explain how i can change the absolute code to a relative one that centers the image at the top of the page. i wish i knew more so i could be more specific with my question but im trying to learn some of this stuff as i go.


  •  

    Posting Permissions

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