Solved

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

Posted on 2011-09-06
5
258 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

635 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