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 13 of 13
  1. #1
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    i'm super super noob, help please :(

    so i decided to make a new layout for my site, using imagemap and iframes. my webdesigner friend said this was a stupid idea and told me not to do it..and that if i did i'd have heaps of problems. but i did anyway (lol)
    he was right aha, i'm having trouble already. but i don't want to admit defeat and hear him say "i told you so" so i decided to ask a bunch of randos on the internet for help!

    first of all, i know it's a mess. like i said i'm a total noob at this and just make it up/google things as i go. oh and i know i haven't done the pages yet, i just want to figure this out first.

    k heres where i've been working on it:
    http://www.manateeny.com/testpage.htm

    so what i want to do is have it centered. is there a way to do this without splicing it up and using tables?

    also. is there a way to make everything resize to fit different screen sizes?

    thanks in advance and sorry for any frustration my noobness may cause

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    If a non-absolutely positioned element has a width, and the page has a valid doctype then margin:0 auto will centre the element horizontally:

    Code:
    #wrapper{width:90%;margin:0 auto}
    You can make your pages fluid - change relative to the available width by using percentages. Here's an example.

    Incidentally, I'm certain I've answered a question this week regarding this url, but cannot now find it. Odd.
    Last edited by SB65; 10-22-2010 at 03:47 PM. Reason: Clarification

  • #3
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    If an element has a width, and the page has a valid doctype then margin:0 auto will centre the element horizontally:

    Code:
    #wrapper{width:90%;margin:0 auto}
    You can make your pages fluid - change relative to the available width by using percentages. Here's an example.

    Incidentally, I'm certain I've answered a question this week regarding this url, but cannot now find it. Odd.
    i guess my doctype thing is wrong because it doesn't seem to be working :/

    and yeah i edited it since i decided to redesign the whole thing anyway. and apparently you can't delete posts here?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't see any element in your page with margin:0 auto.

  • #5
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    I can't see any element in your page with margin:0 auto.
    "
    #image_container {
    width:100%
    margin:0 auto;""

    ?

    where exactly should i be putting it? :S

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Right, you have:

    Code:
    #image_container {
    width:100%
    margin:0 auto;
         position: absolute;
     }
    Two things. It won't work with absolutely positioned elements - I should have been more explicit. And, you have not closed the width statement with a semi-colon. I'm not sure why would you want to centre something that's 100% wide anyway....

  • Users who have thanked SB65 for this post:

    Kym (10-22-2010)

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Remember, anything 100% wide will be just that, 100% wide as it relates to its parent element. If the parent of container is body, then container 100% will be the whole width of the available screen res.

  • Users who have thanked teedoff for this post:

    Kym (10-22-2010)

  • #8
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ohh i see...i thought having a smaller percentage shrinked the image down from its original size or something.
    sorry, i haven't had much sleep and it's 4am here lol. probably not the best time to be working on it.

    thanks! the main image is centered like i wanted it now.

    ...but now i don't know how to position my iframe over it :/

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    ...but now i don't know how to position my iframe over it :/
    Apply position:absolute; on #iframe_container and change the top value, if required.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Apply position:absolute; on #iframe_container and change the top value, if required.
    that doesn't position it exactly where i want it on the image though? :/
    also if i resize the screen the iframes suddenly in a different place.
    is there a way to position it exactly where i want it and make it follow the image?


    ..and now my image map isn't working cause of the fluid thing. are image maps even possible with fluid layouts?

    thanks
    Last edited by Kym; 10-23-2010 at 06:57 AM.

  • #11
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    any ideas?

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    How about
    Code:
    #iframe_container {
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:-90px;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Kym
    Kym is offline
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    How about
    Code:
    #iframe_container {
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:-90px;
    }
    ?
    http://www.manateeny.com/testpage.htm

    it still needs to be quite a bit over to the right though. also i'm not sure if it would look different with different screen sizes?

    hm, maybe what i'm trying to do isn't possible with a fluid layout :/


  •  

    Posting Permissions

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