PDA

View Full Version : How to centre image


nippyeyes
01-04-2010, 08:29 PM
I am currently making a portfolio and would like the template i made in photoshop to be in the middle of the page when viewed in a web browser. How would i go about doing this?


Thanks alot

gentleone
01-04-2010, 08:32 PM
search the forum... this question is answered too many times... ah well, check the tab 'Tutorials and Articles'.

nippyeyes
01-04-2010, 08:35 PM
I have but i didn't really understand, i am quite new to dreamweaver and was wondering for a more basic explanation. At the moment i have used <div= align"center"> before <body> and </div> before </body> but this only seems to put it in the middle on the top margin not the left hand margin

gentleone
01-04-2010, 08:42 PM
The following page explains how you center a div horizontally and vertically:
http://www.kirkdesigns.co.uk/vertically-and-horizontally-center-div-using-css

nippyeyes
01-04-2010, 08:47 PM
Thank you that helped, this may sound stupid but where would i use this code in my dreamweaver file.

#outer {<br> position: absolute;<br> top: 50%;<br> left: 0px;<br> width: 100%;<br> height: 1px;<br> overflow: visible;<br>}<br> <br>#inner {<br> width: 300px;<br> height: 200px;<br> margin-left: -150px; /*** width / 2 ***/<br> position: absolute;<br> top: -100px; /*** height / 2 ***/<br> left: 50%;<br>}

gentleone
01-04-2010, 09:07 PM
Okay well... first forget that piece of code above... it does look a bit messy with all those <br> tags (did not saw that in my quick search and find)

Take the following code as reference and place this in your CSS in the <head> or even better in a external stylesheet:
#outer {position:absolute;top:50%;left:0px;width:100%;hei ght:1px;overflow:visible}
#inner {position:absolute;width:950px;height:550px;margin-left:-475px;top:-275px;left:50%}


Now let me explain. The #inner div is going to hold your template. In this example the width of this div is 950px, but you change this to the width of your template. The same goes for the height. As you can see margin-left: in this example is the half of 950px (475px), but then putted to minus: -475px. The same goes for top, this is the half of the height but then also in minus -275px. You do the same with your width and height from the tempate.

Now you place the following in between the <body> tags:

<div id="outer">
<div id="inner">
Your template code here
</div>
</div>


So... and that's it!

nippyeyes
01-04-2010, 09:14 PM
When i put in the first code, when i preview it in the browser i can see the text am i meant to put < infront of outer and inner?

gentleone
01-04-2010, 09:27 PM
Okay... I see. You're really at the beginning of learning things, so let me guide you in the right direction. Dreamweaver is a handy tool to develop websites, but without a little knowledge of HTML and CSS, Dreamweaver is useless. What I'm trying to say is that you need to understand at least the very basics of building a webpage. The following tutorial is a beginners guide with good and clear explanation. It's quite a long tut, but it does cover everything you should know if you wanna start a career in web design/development.

http://articles.sitepoint.com/article/html-css-beginners-guide

I hope this helps!

nippyeyes
01-10-2010, 01:08 PM
Finished the tutorial, i made an external css sheet and used the code you gave me and it worked. Thank you very much.

gentleone
01-10-2010, 04:34 PM
I'm glad to hear that you took the effort to read the tutorial and to learn the basics.

If you have any other questions, then don't hesitate to ask us. We'll help and guide you in the right direction.

rattlsnak
01-10-2010, 07:54 PM
Just curious why you simply didnt set the margins to :auto instead of using absolute positioning?

gentleone
01-11-2010, 01:52 PM
Just curious why you simply didnt set the margins to :auto instead of using absolute positioning?

This is a method to center a div horizontally and vertically.