SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I cant get my div to center..

    Hello guys, I have the following problem with my website:
    http://cudamine.com/noct/main.html

    If you look down, the part I'm using as footer just REFUSES to center in the screen... margin left and right auto just doesn't want to work. I know I probably have pretty "crappy" code, but I would like to know what exactly is stopping this div from getting centered! The "logo" div does exactly what I want, but not the footer one...

    CSS:
    HTML Code:
    html { overflow: -moz-scrollbars-vertical !important; }
    
    body {
    	background-color: #000000;
    	background-image: url(images/mainbg.jpg);
    	background-position:top;
    	background-repeat:no-repeat;
    }
    
    div#logo {
    	width:635px;
    	height:181px;
    	background-image: url(images/noct.png);
    	margin-top:80px;
    	margin-left:auto;
    	margin-right:auto;
    	z-index: 1;
    }
    
    div#side {
    	width:80px;
    	height:65px;
    	background-image: url(images/side1.png);
    	float:left;
    }
    
    div#side1 {
    	width:80px;
    	height:65px;
    	background-image: url(images/side2.png);
    	margin-top:0px;
    	margin-left:1099px;
    	margin-right:auto;
    	margin-top:-47px;
    }
    
    div#youtube {
    	width:560px;
    	height:340px;
    	border: 1px solid #470606;
    	position:absolute;
    	margin-top:20px;
    	margin-left:-280px;
        left:50%;
    	z-index: 1;
    }
    
    div#bgtube {
    	background-image: url(images/bgtube.png);
    	width:668px;
    	height:440px;
    	position:absolute;
    	margin-top:-33px;
    	margin-left:-334px;
    	left:50%;
    	z-index: 0;
    }
    
    div#entrar {
    	background-image: url(images/entrar1.png);
    	width:326px;
    	height:64px;
    	position:absolute;
    	margin-top:390px;
    	margin-left:-163px;
    	left:50%;
    	z-index: 0;
    }
    
    div#entrar:hover{
        background-image: url(images/entrar.png);
    }
    
    div#box {
    	width:835px;
    	height:800px;
    	background-image:url(images/bgbox.jpg);
    	background-color:#000;
    	background-repeat:no-repeat;
    	background-position:bottom;
    	border: 1px solid #1f1f1f;
    	margin-top:20px;
    	margin-left:auto;
    	margin-right:auto;
    	z-index: 2;
    }
    
    div#footer {
    	width:1552px;
    	height:221px;
    	background-image:url(images/footer.jpg);
    	background-repeat:no-repeat;
    	background-color:#000;
    	margin-left:auto;
    	margin-right:auto;
    	z-index: 1;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you put a border around the footer you will see that it is indeed centered. The image may make it seem like it isn't centered though
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm..

    well, i just put a border up, and as you can see, it's not centered... it looks like it doesnt follow my margins.

    http://cudamine.com/noct/main.html

  4. #4
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Why are you using such a wide footer? 1552px?
    What resolution / view port are you actually seeing your page with?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It is centered . Lower the width to 500px (just for testing)

    Notice it is centered. The width is just so big that it will appear to not be centered but it actually is

    I too am wondering why it is so big. My 20 inch monitor barely has it so no scrollbar appears.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're totally right, I can however answer the width thing, I have the following line to cut on overflow:
    html { overflow: -moz-scrollbars-vertical !important; }

    This makes it so if the resolution of the user is smaller then the image, it will just be cut, it's not really important to display the full image (same thing happens in the banner), it's just a design 'thing'.

    Looks like I'll have to play with the image more, it just sucks how if I enlarge the image out of my resolution range, it seems off centered... it doesn't happen with the banner, so weird.

  7. #7
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Cudamine View Post

    Looks like I'll have to play with the image more....
    Yes you should!
    Also, it is a good practice IMO to make the whole design fit in a container div that holds in the other divs!
    & finally have you tried hidden for overflow-x?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Giving overflow-x:hidden; will do the same thing AND allow other browsers to get that overflow cut. Right now only mozilla browsers will (since you have the -moz- extension)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice, thanks .

    "background-position:center;" seemed to have helped me as well, but as soon as I turn the width to the right size... boom.

  10. #10
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    @Ryan, so the legend is true! you answer faster than your shadow

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, do you guys have a tip for me on how to remove that small black space from the bottom of the footer?

    edit:
    Just learned from your sig that Dan Schulz passed away, very sad news, Dan helped me greatly in past problems with my websites, RIP my good man.

  12. #12
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    yes Dan passed away few months ago! What a loss!


    for the black space set the footer height o exactly: 199px (height of the graphic) and remove the background-color (black: #000)!
    also I would suggest using background: instead of background-image: , background-repeat etc...

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done as you told me, but there is still a space there (smaller one), the image is actually 221 px in height too.

  14. #14
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    for me your footer image is 1400px × 199px and did you remove background-color:#000;?

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. the one I uploaded and seeing is 1552px × 221px, and yes, the black bg was removed:

    div#footer {
    width:1552px;
    height:221px;
    background:url(images/footer.jpg);
    background-position:center;
    margin-left:auto;
    margin-right:auto;
    }

  16. #16
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Yep it is 1552px × 221px for me now too (cleaned the cache)!
    recalculate the container height! looks like it is missing ~80px...
    also use background:url(images/footer.jpg) no-repeat; that should be enough remove background-position:center;

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't quite get what you're saying, my container is as follows.
    div#container {
    height:100%;
    margin:0;
    padding:0;
    }
    But I'm guessing this isn't what we're talking about?

  18. #18
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Well I didnot look at your #container code when I posted the last message! I just saw that the container wasn't aligned with the top of the background image.... In fact, there's a margin of 80px on top for the container! (from the logo div)
    You should have a header div with a background image (mainbg.jpg) this will embrace the logo too!
    then insert the image of the logo in the HTML (noct.png) attribute a class and add the top margin... This a lot better practice.

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys, i decided to bum this after a friend of mine showed me his print screen of my website, it is centered. His resolution is 1920x1200 though.

    On my resolution for example, 1440x900 it just doesn't look centered lol.

    You can see what I mean here:
    http://i48.tinypic.com/9bbqdy.jpg

    As you can see, it's way off... why does this happen on smaller resolutions but not on larger ones?..

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dark Tranquility View Post
    Off Topic:

    @Ryan, so the legend is true! you answer faster than your shadow
    Just saw this.
    [ot]Stomme Poes suggested I become a ninja because I always ninja a post in before someone
    Quote Originally Posted by Cudamine View Post
    Hey guys, i decided to bum this after a friend of mine showed me his print screen of my website, it is centered. His resolution is 1920x1200 though.

    On my resolution for example, 1440x900 it just doesn't look centered lol.

    You can see what I mean here:
    http://i48.tinypic.com/9bbqdy.jpg

    As you can see, it's way off... why does this happen on smaller resolutions but not on larger ones?..
    What do you mean? The content is centered.

    The footer doesn't appear c entered but that is probably because the footer image is so wide, and the screen isn't wide enough to give it space to even APPEAR centered
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, but for example, the header is centered just fine, and that image is has large as the footer.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    On "div#box", the box with the actual content in it, you set a 835px width and that's not the same as the footers
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't think we're on the same page here.

    ill try to explain as much as I can:
    http://cudamine.com/noct/main.html

    That is the website, and this is what I see on my 1440x900 res:
    http://i47.tinypic.com/517dw1.jpg

    If you check te green lines, you can clearly see that my footer is really not centered in. It's like it doesn't follow any rule I gave it, but on wider resolutions, it appears just fine.
    It wouldn't be such big problem if the same exact thing WANSN'T happening for the header!

    My body has the header image included:
    body {
    background-color: #000000;
    background-image: url(images/mainbg.jpg);
    background-position:top;
    background-repeat:no-repeat;
    }
    And this is the footer:
    div#footer {
    width:1552px;
    height:221px;
    background:url(images/footer.jpg) no-repeat;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;
    z-index: 1;
    }
    Both images are 1552px in width.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you set the footer to 1552px then it can't possibly center in widths of less that 1552px because it will be flush to the left edge.

    Just use a 100% width and center the background image (...no-repeat 50% 0 ).

    e.g.
    Code:
    div#footer {
        width:100%;
        min-width:835px;
        height:221px;
        background:url(http://cudamine.com/noct/images/footer.jpg) no-repeat 50% 0;
        z-index: 1;
    }
    Hiding the horizontal scrollbar on the html element is a very bad move and makes the content inaccessible on screens smaller than 835px.

  25. #25
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yay! You fixed it

    Thanks a lot Paul and Ryan!

    One thing on the scrollbar though, I only placed that in so the content doesn't overflow if the resolution isn't as big as the images (my case for example), what would you recommend then?

    Also, do you have any clue on how to remove the space from the bottom of the footer? I'd like it to be really at the bottom of the page without any space.


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
  •