Solved

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

Posted on 2011-09-06
5
248 Views
Last Modified: 2012-05-12
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
Comment
Question by:PeterdeB
  • 2
  • 2
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36493777
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 36493797
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
 

Author Comment

by:PeterdeB
ID: 36493919
@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
 

Author Closing Comment

by:PeterdeB
ID: 36493920
thx!
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36493926
You're welcome.
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question