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:
<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.