SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot GregShasta's Avatar
    Join Date
    Jul 2001
    Location
    atlanta ga
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering without using tables

    cant quite figure out how i can get the 'centered' effect common with table pages with css. now i have been using <div style="align:center;"> now it works great until i get to the overlapping divs. i have tried every combination of positioning(relative,absolute,none) the results are mind bending. example code would look like this:
    <body>
    <div1 align="center"><div><img src="main.gif"></div>
    /*ok this is the backgrond gif which centers fine*/
    <div style="left:15px;top:245px;z-index:1;" ><img src="body.gif"></div>
    /*now this is the navigation image im placing the divs on*/
    <div style="position:relative;left:75px;top:220px;z-index:2;" ><img src="1.gif"></div>
    <div style="position:relative;left:175px;top:220px;z-index:2;" ><img src="2.gif"></div>
    <div style="position:relative;left:275px;top:220px;z-index:2;" ><img src="3.gif"></div></div>
    /*now there are more and the coordingates are just for example but these images are clickable links placed around the body.gif*/

    now when i type this code the main and body gifs work fine and center as they should within the browser window as i change resolutions however the 3 clickable gifs just get thrown around. now if i try to position them absolutely they wont move at all. its very frustrating is their a simpler way.

    essentially long problem short i want to place three links that are clickable on to an existing div and have all of them center in various sized browser windows. i dont think it was clear but if anyone has any ideas please help.

    thx,
    Greg

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not really clear what you are wanting to do. I see the code ok, but you aren't explaining yourself very well. Maybe you could create a rough drawing of your intentions and post the image here?

    By the way, in the code you posted, you have one extra </div> tag and the first div says:

    <div1 align="ce

    You need to take the 1 out of there.

    Anyway, we'll get you figured out.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Zealot GregShasta's Avatar
    Join Date
    Jul 2001
    Location
    atlanta ga
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah sorry about that its even confusing to me looking back at it. but what i want to happen is that when my browser resizes from 800*600 to 1024*768 i want the page to remain centered like you would see with a tabled page. now the <div align="center"> works fine for my elements until i reach the absolutely positioned divs.

    now i would be willling to go thru the positioning headache of recalculating the top and left positions except that when i resize these elements 'relatively' they get all jumbled up when i change browser dimensions.

    i suppose the meat of the problem is how can i have absolutely positioned elements within an 800*600 page that will center at larger browser dimensions ala a table layout. can i in some way use the margins or padding properties of the body in percentage form or is this a lost cause and i should just use tables?

    thx,
    Greg

    i will try to post something online that demonstrates this shortly hopefully.

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, a solution might be that you use a TABLE inside a certain DIV. But, the probem lies in that you cannot absolutely position an element and the expect it to move around. That is what absolute means. It doesn't move, ever.

    Without using extensive javascripting you cannot combine a centered table and absolutely placed DIV's.

    of course, I might very well be wrong, but I would be more than happy to have someone prove me wrong.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Zealot GregShasta's Avatar
    Join Date
    Jul 2001
    Location
    atlanta ga
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually i think i solved it:
    <div align="center"><div><img src="img.gif"></div>
    <div style="position:relative;top:0px;left:0px;">
    <div style="position:absolute;top:100px;left:110px;"></div>
    <div style="position:absolute;top:200px;left:210px;"></div>
    <div style="position:absolute;top:300px;left:310px;"></div>
    <div style="position:absolute;top:400px;left:410px;"></div>
    </div></div>

    so now you have a relatively positioned box that will move as the browser window changes size and the absolutely positioned elements inside move with it. now you do have to line up the relative div with the aligned div or divs but it mimics the action of a table. my code was so goddang screwy that i got lost within it. at least it works for tonite and thats whats important ive lost 6 lbs fooling with this code.

    thx,
    Greg


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
  •