• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 736
  • Last Modified:

css center div

I am trying to center the design on a page so it will look like this:
http://akademierna.se/www_gastro.intro.jpg

But I dont know what to do to make the container div center when I have absolute positioning inside.

This is how far I have got:
<html>
<head>
<title>Akademierna</title>
<style>
/* style of dynamic text: */
#desc1, #desc2, #desc3 {font:10px Verdana; color:#666; background:white; display:none; z-index:10;}
</style>
<script type="text/javascript">
 
function toggle(nbr,flip){
	document.getElementById('desc'+nbr).style.display=flip;
}
 
</script>
</head><body>
<div style="position:absolute; display: block; width:682px; height:800px; margin-left:auto; margin-right:auto; border:1px solid black;">
 
<a href="http://akademierna.se/vannerna" onMouseOver="toggle(3,'block')" onMouseOut="toggle(3,'none')">
	<img src="vannerna.gif" style="position:absolute; top:92px; left:220px;">
</a>
<div id="desc3" style="position:absolute; top:92px; left:495px; width:187px; height:100px;">Gastronomiska Akademierna och Måltidsakademiens Vänner, förkortat Vännerna eller GMV, bildades av respektive akademiers båda vänföreningar genom att dessa gick samman 25 april 2006.</div>
 
 
<a href="http://akademierna.se/maltidsakademien" onMouseOver="toggle(1,'block')" onMouseOut="toggle(1,'none')">
	<img src="maltidsakademien.gif" style="position:absolute; top:282px; left:262px;">
</a>
<div id="desc1" style="position:absolute; top:282px; left:495px; width:187px; height:100px;">Måltidsakademien grundades den 19 oktober år 2000 och har ett trettiotal ledamöter som arbetar för att främja forskning kring och utveckling av måltiden inom universitet- och högskolevärlden.</div>
 
 
<a href="http://akademierna.se/gastronomiskaakademien" onMouseOver="toggle(2,'block')" onMouseOut="toggle(2,'none')">
	<img src="gastronomiskaakademien.gif" style="position:absolute; top:427px; left:273px;">
</a>
<div id="desc2" style="position:absolute; top:427px; left:495px; width:187px; height:100px;">Gastronomiska Akademien instiftades år 1958 av Tore Wretman, Sten Broman och Fritiof Nilsson Piraten samt Povel Ramel som yngre ledamot.</div>
 
</div>
 
</body>
</html>

Open in new window

0
kalleanka
Asked:
kalleanka
  • 4
  • 4
  • 3
  • +2
1 Solution
 
GuitarRichCommented:
take out the position:absolute from the main div element. That doesn't need to be absolutely positioned you want it dynamic so it centers.
0
 
rbudjCommented:
use margin:auto instead of absolute position
0
 
bleech677Commented:
above are good tips - you can also create a fixed width div and give it a align=center property - that will center it on screen and anything inside of it . Though the margin:auto is the proper way
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
kalleankaAuthor Commented:
none of the above comments worked since I have absolute positioning inside the container div.

below is some simplified sample code ready to cut and paste.
if you know your css and can make it center, please answer with the working code.
<html>
<head>
<title>Akademierna</title>
<style>
#centercontainer {
	display: block; 
	width:682px; 
	margin:auto; 
	border:1px solid black; /*just for show, will not be visible*/
	}
#absoluteimage1 {
	position:absolute; 
	top:92px; 
	left:220px; 
	width:242px; 
	height:124px;
	border:0;
	}
#absolutedynamictextfield1 {
	position:absolute; 
	top:92px; 
	left:495px; 
	width:187px; 
	height:100px; 
	font:10px Verdana; 
	color:#333; 
	background:white; 
	display:none;
	}
</style>
<script type="text/javascript">
 
function toggle(nbr,blockORnone){
	document.getElementById('absolutedynamictextfield'+nbr).style.display=blockORnone;
}
 
</script>
</head><body>
<div id="centercontainer">
 
	<a href="http://akademierna.se/vannerna" onMouseOver="toggle(1,'block')" onMouseOut="toggle(1,'none')">
		<img id="absoluteimage1" src="http://akademierna.se/vannerna.gif">
	</a>
	
	<div id="absolutedynamictextfield1">Gastronomiska Akademierna och Måltidsakademiens Vänner, förkortat Vännerna eller GMV...</div>
 
</div>
 
</body>
</html>

Open in new window

0
 
kalleankaAuthor Commented:
and my main goal is to get the design to look centered with 1 dynamic textfield lined up to the right of each logo like this picture:
(in picture mouse is over middle logo)

 
www-gastro.intro.gif
0
 
rbudjCommented:

<html>
<head>
<title>Akademierna</title>
<style>
#centercontainer {
	display: block; 
	width:682px; 
	margin:auto; 
	border:1px solid black; /*just for show, will not be visible*/
	}
#absoluteimage1 {
	position:absolute; 
	top:92px; 
	left:220px; 
	width:242px; 
	height:124px;
	border:0;
	}
#absolutedynamictextfield1 {
	position:absolute; 
	top:92px; 
	left:495px; 
	width:187px; 
	height:100px; 
	font:10px Verdana; 
	color:#333; 
	background:white; 
	display:none;
	}
</style>
<script type="text/javascript">
 
function toggle(nbr,blockORnone){
	document.getElementById('absolutedynamictextfield'+nbr).style.display=blockORnone;
}
 
</script>
</head><body>
<div id="centercontainer">
 
	<a href="http://akademierna.se/vannerna" onMouseOver="toggle(1,'block')" onMouseOut="toggle(1,'none')">
		<img id="absoluteimage1" src="http://akademierna.se/vannerna.gif">
	</a>
	
	<div id="absolutedynamictextfield1">Gastronomiska Akademierna och Måltidsakademiens Vänner, förkortat Vännerna eller GMV...</div>
 
</div>
 
</body>
</html>

Open in new window

0
 
rbudjCommented:
scratch that first code... paste mistake.  try below... this site needs an edit option
<html>
<head>
<title>Akademierna</title>
<style>
#centercontainer {
	display: block; 
	width:682px; 
	margin:auto; 
	border:1px solid black; /*just for show, will not be visible*/
	}
#absoluteimage1 {
	
	top:92px; 
	left:220px; 
	width:242px; 
	height:124px;
	border:0;
	}
#absolutedynamictextfield1 {
	
	top:92px; 
	left:495px; 
	width:187px; 
	height:100px; 
	font:10px Verdana; 
	color:#333; 
	background:white; 
	display:none;
	}
</style>
<script type="text/javascript">
 
function toggle(nbr,blockORnone){
	document.getElementById('absolutedynamictextfield'+nbr).style.display=blockORnone;
}
 
</script>
</head><body>
<div id="centercontainer">
 
	<a href="http://akademierna.se/vannerna" onMouseOver="toggle(1,'block')" onMouseOut="toggle(1,'none')">
	<div style="margin:auto; width:230px"><img id="absoluteimage1" src="http://akademierna.se/vannerna.gif"></div>
	</a>
	
	<div id="absolutedynamictextfield1">Gastronomiska Akademierna och Måltidsakademiens Vänner, förkortat Vännerna eller GMV...</div>
 
</div>
 
</body>
</html>

Open in new window

0
 
kalleankaAuthor Commented:
still not working... did it work for you?
0
 
bleech677Commented:
I didn't see a doctype - maybe your browser is opening in quirks mode

throw this in as the first line : <!doctype html>
0
 
David S.Commented:
You're still testing in IE5/Mac?  It is very old now and has many bugs that make it display pages differently from other browsers. I recommend you concentrate your testing in Firefox, Safari, and/or Opera.

Also one thing necessary to get browsers to display similarly is to use a doctype that triggers "standards mode" rendering.  I recommend you read this: http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/
0
 
bleech677Commented:
I didn't see anything about IE5 / Mac?
<!doctype html> will trigger standards mode for IE6+ and most others (FF, Chrome, Safari,opera)
0
 
rbudjCommented:
works fine for me
0
 
David S.Commented:
> I didn't see anything about IE5 / Mac?

The screenshots are taken in IE5/Mac.
0
 
kalleankaAuthor Commented:
Including the doctype put me in the right direction.
Then I figured out I had to combine a position:relative for the container and position:absolute for the pics and texts inside.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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