Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

Problem centering div elements that are in a particular order and grouped

Hi all

I had to create a site from scratch, while having a jpg which was the layout. It worked out well, only I do not know how to center the layout, while keeping the div elements in the same place and order. I know the problem is in using position:absolute but changing it into relative screws the placing and ordering up

http://webshophelp.nl/test/welkom.html

It should center itself, the layout

I added the layout, with the names of the div elements, and the css code

Can anyone help out
// css code

#main_menu {
	position:absolute;
	width:295px;
	height:264px;
	z-index:1;
	left: 75px;
	top: 188px;
	visibility: visible;
}
#vertical_line {
	position:absolute;
	width:20px;
	height:370px;
	z-index:2;
	left: 370px;
	top: 140px;
}
#logo {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 74px;
	top: 73px;
}
#outer_line {
	position:absolute;
	width:906px;
	height:630px;
	z-index:4;
}
#content {
	position:absolute;
	width:420px;
	height:115px;
	z-index:5;
	left: 420px;
	top: 150px;
}

Open in new window

layout.jpg
0
PeterdeB
Asked:
PeterdeB
  • 2
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
change this

#outer_line {
      position:absolute;
      width:906px;
      height:630px;
      z-index:4;
}

#outer_line {
        left:60px; \\or margin-left:60px ....just try to increase or decrease the value
      position:absolute;
      width:906px;
      height:630px;
      z-index:4;
}
0
 
Dave BaldwinFixer of ProblemsCommented:
You create a 'div' that includes all of the other content, typically called 'wrapper' because it wraps around everything.  Give it 'auto' left and right margins and a width like below.  

These attributes in the body "tracingsrc="/images/Clipboard02.jpg" tracingopacity="5"" are unknown to the W3C validator and I've never heard of them.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!-- 
#wrapper {width: 908px; margin-left:auto; margin-right:auto;position:relative;}  
-->
</style>
</head>

<body tracingsrc="/images/Clipboard02.jpg" tracingopacity="5">
<div id="wrapper">

<div id="outer_line"><img src="images/lining.png" width="906" height="630">
<div id="main_menu"><a href="welkom.html"><img src="images/welkom.png" name="welkom" width="293" height="53" id="welkom"></a><a href="werkwijze.html"><img src="images/werkwijze.png" name="werkwijze" width="293" height="53" id="werkwijze"></a><a href="tarieven.html"><img src="images/tarieven.png" name="tarieven" width="293" height="53" id="tarieven"></a><a href="contact.html"><img src="images/contact.png" name="contact" width="293" height="53" id="contact"></a></div>
<div id="vertical_line"><img src="images/vertical_line.png" width="18" height="386"></div>
<div id="logo"><img src="images/masther_logo.png" width="268" height="114"></div>
<div id="content">
  <h1><a href="#">Welkom bij Masther</a>.</h1>

  Masther is een deskundige praktijk waar de cliënt centraal staat. Of U nu komt voor een ontspannende massage of met een lichamelijke klacht, bij Masther bent U aan het juiste adres.
  Bij Masther wordt gewerkt volgens de 5 natuurgerichte principes:<br><br>
  1. energie<br>
    2. prikkeloverdracht<br>
    3. drainage<br>
    4. voeding<br>
    5. psyche<br><br>

  Deze zorgen ervoor dat de therapeut de cliënt op een holistische, dat wil zeggen 'de mens als geheel bekijken', wijze benadert. <br>
    <br>
  
  Bij Masther bent U in verzorgende handen.
</div>
</div>
</div>
</body>
</html>

Open in new window

0
 
PeterdeBAuthor Commented:
@gurvinder372, thank you for your fast reply your solution did not change much
@Davebaldwin, super, thanks for your fast reply the trace tags were leftovers from dreamweaver
0
 
PeterdeBAuthor Commented:
thx!
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now