PDA

View Full Version : Centering Image/text for all resolutions?


Nazgul
03-03-2009, 10:58 PM
hi,

as you can see i'm new to the site and relatively new to using dreamweaver. i have had the program a while but now i really want to get into it. i found this site a day or two ago and decided it would be worth while signing up.

my question is this:

Say i was creating a welcome page with either a simple graphic or text box. i want it to be dead center of the browser. equal distance from the top and bottom and equal distance from the left side of the page to the right. if you get me? :confused:

what is the best way to go about this?

i've fiddled for a while but haven't achieved very much.

thanks in advance for any help/tips you can supply :)

edbr
03-03-2009, 11:59 PM
use css
margin:auto;

stupatch
08-11-2009, 12:55 PM
use css
margin:auto;

How do i center my images and text in all resolutions? ... Am i being really dense?

I tried edbr's sugestion of using css ... but have I applied it correctly? can anybody help?

As you can see from the screen shots, I have an image central on 1280 resolution, if I have a 1024 res ... the image is set to the right and if I have higher than 1280 naturallly the image will move to the left.

Screenshots:

1280 native resolution
http://i464.photobucket.com/albums/rr7/stupatch_2008/screenshot1.jpg

1024 resolution
http://i464.photobucket.com/albums/rr7/stupatch_2008/screenshot2.jpg

1440 resolution
http://i464.photobucket.com/albums/rr7/stupatch_2008/screenshot3.jpg
Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#div_image1 {
margin: auto;
position: absolute;
left: 340px;
top: 100px;
}
-->
</style>
</head>
<body>
<div id="div_image1"><img src="image/image1.jpg" width="600" height="350" alt="image" /></div>
</body>
</html>

DWcourse
08-11-2009, 03:50 PM
Absolute positioning forces your div to go right where you set it (regardless of margins). Remove this from your style:

position: absolute;
left: 340px;
top: 100px;

set the top margin to 100px and the left and right margins to auto:

margin: 100px auto 0 auto;

stupatch
08-11-2009, 03:57 PM
:-D Superb! cheers DWcourse :mrgreen:

stupatch
08-18-2009, 12:14 AM
I have put your knowledge to use, but I am now struggling with the concept of controling divs within divs without using "absolute" positioning for example how would I place a div containing text within the div_image1 and it naturally having the same attributes of following the image around regardless of resolution. I appologise if this may seem a tedious question and elementary to some but I do appreciate the help.

Corrosive
08-18-2009, 06:16 AM
If I understand you correctly you use only one div for this. Set the image as a background and then position the text over the image using padding. Therefore the text goes where the image goes.

stupatch
08-18-2009, 01:53 PM
Thanks for the tip corrosive, but I didnt quite manage to fathom out exactly how to get the results I wanted via your method, i am very much used to working with AP divs, and actually have found the "Wrapper" method on http://dwcourse.com/dreamweaver/centering-page-layout.php more suitable for my style of working in dreamweaver ... obviously I need to start reading up more!

DWcourse
08-18-2009, 02:08 PM
That wrapper method is a work around for dealing with an existing layout but you shouldn't rely on it for laying out pages. (that's why I get accused of being an enabler).

If you're using Dreamweaver CS3 or CS4, look at the built-in CSS layouts they offer and try to understand how they are put together using divs, floats, etc. The CSS files associated with the layouts are heavily commented and explain quite a bit.