PDA

View Full Version : Position DIV on page (centre my page)



Annagr
Sep 15th, 2009, 08:52 PM
Please somebody help me,

I am new at web design...or, know basic HTML and CSS.

Now, on my web page i have tried something new: sliced image from photoshop. Why i have done this is to embed a video on my web page in a frame and it works wonders! Im stoked over how far ive gotten with my page, my problem now is, i can not center it!! After weeks of "googeling" and asking people i have realized that it is because my divs are set to absolute.....i need to position them. But how do i do this? Or is there any other easier way to do this?

My div tags look like this now:

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:794px;
height:721px;
}

#newindexpage-01 {
position:absolute;
left:0px;
top:0px;
width:794px;
height:81px;
}

#newindexpage-02 {
position:absolute;
left:0px;
top:81px;
width:157px;
height:640px;
}

#newindexpage-03 {
position:absolute;
left:157px;
top:81px;
width:73px;
height:25px;
}

#newindexpage-04 {
position:absolute;
left:230px;
top:81px;
width:112px;
height:25px;
}

#newindexpage-05 {
position:absolute;
left:342px;
top:81px;
width:103px;
height:25px;
}

#newindexpage-06 {
position:absolute;
left:445px;
top:81px;
width:55px;
height:25px;
}

#newindexpage-07 {
position:absolute;
left:500px;
top:81px;
width:74px;
height:25px;
}

#newindexpage-08 {
position:absolute;
left:574px;
top:81px;
width:220px;
height:94px;
}

#newindexpage-09 {
position:absolute;
left:157px;
top:106px;
width:417px;
height:69px;
}

#newindexpage-10 {
position:absolute;
left:157px;
top:175px;
width:238px;
height:546px;
}

#newindexpage-11 {
position:absolute;
left:395px;
top:175px;
width:320px;
height:240px;
}

#newindexpage-12 {
position:absolute;
left:715px;
top:175px;
width:79px;
height:546px;
}

#newindexpage-13 {
position:absolute;
left:395px;
top:415px;
width:320px;
height:306px;
}


YES i have 13 images to position so this makes it very complicated for me...


Please someone help!

Thanks so much
Anna :)
gronlund.co.uk

Scriptet
Sep 15th, 2009, 09:18 PM
OK step by step...

1.Add this line right after the line: <body>



<div id="wrap">


2. Add this line right before the line: </body>


</div>


3. Add this line to your CSS stylesheet:


#wrap { margin:0 auto; width: 794px; position:relative; }

That's all :) Of course your shouldn't position absolute everything but you just used imagready to export the HTML I guess so you can't ask for everything. Anyway by setting position:relative; on the wrap it means that the everything will be positioned absolutly in the wrap rather than the screen.

Annagr
Sep 15th, 2009, 09:36 PM
MATE!!!

you are a star!!! :thumbsup:

you would not believe how long time this has taken for me to figure out! i have written to several forums but only got reply's like : "you have to learn css properly" or "your coding is completely wrong".

ahhh, im so stoked now! finally my first page is looking alright.

i know, i have along way to go but now i finally have something to show my clients. thank you mate, honestly, i really appreciate your help!

much love
Anna
gronlund.co.uk

Scriptet
Sep 15th, 2009, 09:57 PM
No probs, glad I could help :)

It's true most people in forums will just waffle on with the technical talk when people just want a solution!

Annagr
Sep 16th, 2009, 12:49 PM
thanks again mate! im so stoked!