PDA

View Full Version : Move Div around in Centered Page



marcusgrip
Feb 4th, 2010, 07:04 PM
I have a centered page and want to move an image that is in a div tag to the left but "margin-left" or just "left" or any other idea i had does not work.

I want to do this because i want everything centered and this image to the left but still it will follow the centered main div when i for example crop my web browser.
I hope you understand what i mean and here is the code for those who think it would be necessary(the div with the image inside i want to move is "01" and if you see i have added CSS to it with float and such and it looks perfect in Dreamweaver but in web browser itīs like nothing happens:



<style>

#list{
background-color:#999999;
width:1070px;
height:900px;
margin-top:-8px;
}
#image{
margin-top:10px;
}
#innerlist{
background-color:#212121;
width:1050px;
height:800px;
}
#01{
}
-->
</style></head>

<body>
<center><div id="list">
<div id="innerlist">
<div><img src="Images/Tutorials/tutorials.png" width="570" height="154" /></div>
<div><img src="Images/Tutorials/overline.jpg" width="1050" height="32" /></div>
<div><img id="01" src="Images/Tutorials/lesson.jpg" width="402" height="131" /></div>
</div>
</div>
</center>
</body>
</html>

Excavator
Feb 4th, 2010, 07:36 PM
Hello marcusgrip,
The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided (http://www.w3schools.com/TAGS/tag_center.asp)!

A more modern approach would be this -
To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto


Floating your images is one way to move them to one side or the other, float:left; or float:right;. There is no need to enclose each image in it's own div like your doing in the code you posted. Have a look at divitis and how to avoid it (http://www.apaddedcell.com/div-itis).

Don't trust DreamWeaver's design view. It will not show you your site the same way a real browser will.


Give this a try, just copy/paste the entire thing into a new .html document and view it with your browser -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#list{
background: #999;
width: 1070px;
margin: 0 auto;
text-align: center;
overflow: auto;
}
#innerlist{
background:#212121;
width:1050px;
height:800px;
margin: 50px auto;
}
#innerlist img {float: left;}
</style>
</head>
<body>
<div id="list">
<div id="innerlist">
<img src="Images/Tutorials/tutorials.png" alt="description" width="570" height="154" />
<img src="Images/Tutorials/overline.jpg" alt="description" width="1050" height="32" />
<img src="Images/Tutorials/lesson.jpg" alt="description" width="402" height="131" />
<!--end innerlist--></div>
<!--end list--></div>
</body>
</html>

marcusgrip
Feb 4th, 2010, 09:46 PM
Thanks alot, it seems to work pretty good but what if i want one of the images centered. How do i do? If you donīt mind i would really appreciate an explanation for the codes, not so detailed but just what it does and why. if itīs too complicated you might wanna show some links that explains it. I like to understand what the code tell and why and so on.

But mainly i would like to know how to move the images, or at least to the center and how to maybe just move an image like 10px to the right so itīs not exactly on the left side :)

Thanks alot for helping me out!

Excavator
Feb 5th, 2010, 12:32 AM
Hello again marcusgrip,
I commented on some of the CSS to explain what it does -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
font: 100% "Comic Sans MS"; /*sets sitewide font*/
background: #FC6;
}
* { /*universal reset - zero's out browser defaults*/
margin: 0;
padding: 0;
border: 0;
}
#list{
background: #999;
width: 1070px;
margin: 0 auto; /*margin top/bottom = 0, margin left/right = auto ...this is what centers #list*/
text-align: center; /*centers block level elements inside and child of #list*/
overflow: auto; /*clears the floats contained in #list*/
}
#innerlist{
background: #212121;
width: 1050px;
height: 800px;
margin: 50px auto; /*margin top/bottom = 50px, margin left/right = auto*/
}
#innerlist img {float: left;} /*remove this to center images*/
</style>
</head>
<body>
<div id="list">
<div id="innerlist">
<img src="Images/Tutorials/tutorials.png" alt="description" width="570" height="154" />
<img src="Images/Tutorials/overline.jpg" alt="description" width="1050" height="32" />
<img src="Images/Tutorials/lesson.jpg" alt="description" width="402" height="131" />
<!--end innerlist--></div>
<!--end list--></div>
</body>
</html>

marcusgrip
Feb 5th, 2010, 07:59 AM
Thanks for helping me and teaching me. So i will try this and i have my own idea of how to just apply centering ONE image and if i canīt do it i will cry for help again ;)

Thanks alot!!

Excavator
Feb 5th, 2010, 09:07 AM
i have my own idea of how to just apply centering ONE image

Same rule applies -
To center an element you need three things:

a DocType Declaration
an element with a width
that elements left/right margins set to auto