Problem with moving

Rienk0r · #1 (**permalink**) Oct 10th, 2007, 11:04

Hello everyone,

I'm working on my portfolio site and I've stumbled on a bit of a problem:

screenie2.jpg

I want the middle body ( the one with the bright colour to go in the center of the body that is behind it

HTML: Select all

HTML:
<!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><link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>

<body>
<div class="logo"><a href="#.html"><img src="Logo.jpg" border="0" /></a></div>
<div class="body"><div class="inner"></div>
</div>
</body>
</html>

CSS:

Code: Select all

@charset "utf-8";
/* CSS Document */

body  {
background-image:url(Background.jpg);
background-repeat:repeat-x; }

.logo {
width:244px;
height:49px;
padding-left:182px;
padding-top:20px; }

.body {
width:763px;
height:437px;
background-image:url(Body.jpg);
background-repeat:repeat-x;
margin-top:24px;
margin-left:160px; }


.inner {
height:398px;
width:721px;
background-image:url(inner.jpg);
background-repeat:repeat-x; }

Thanks in Advance.

Lchad · #2 (**permalink**) Oct 10th, 2007, 11:10

Add the part in red and it should center:

Code: Select all

.inner {
height:398px;
width:721px;
background-image:url(inner.jpg);
background-repeat:repeat-x;
margin: 0 auto;
 }

Rienk0r · #3 (**permalink**) Oct 10th, 2007, 11:14

It's centered now in the top, it needs to go down still, to be really centered :S

Rienk0r · #4 (**permalink**) Oct 11th, 2007, 08:45

Anyone?

Monie · #5 (**permalink**) Oct 11th, 2007, 09:12

Try this:

Code: Select all

<style type="text/css">
body  {
background-image:url(Background.jpg);
background-repeat:repeat-x;
}

.logo {
width:244px;
height:49px;
padding-left:182px;
 padding-top:20px;
}

.body {
width:760px;
height:440px;
background: brown;
margin-top:24px;
margin-left:160px;
 padding: 20px;
}


.inner {
height: 440px;
width: auto;
background: yellow;
 margin: 0 auto;
}
 </style>

Center the .inner horizontally using {margin 0 auto},
Make the two div the same size (.body and .inner), and give the .body a padding of 20px.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Moving Nav bar	acrikey	Web Page Design	5	Sep 26th, 2007 13:37
slider moving problem	arhun	JavaScript Forum	1	Sep 14th, 2007 15:38
Moving	Ryan Fait	Webforumz Cafe	36	Jun 12th, 2007 22:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Problem with moving