Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

css center div

Posted on 2009-05-08
14
Medium Priority
?
730 Views
Last Modified: 2013-11-19
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
Comment
Question by:kalleanka
[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
  • 4
  • 4
  • 3
  • +2
14 Comments
 
LVL 12

Expert Comment

by:GuitarRich
ID: 24335081
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
 
LVL 16

Expert Comment

by:rbudj
ID: 24337615
use margin:auto instead of absolute position
0
 
LVL 3

Expert Comment

by:bleech677
ID: 24338750
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:kalleanka
ID: 24338877
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
 
LVL 1

Author Comment

by:kalleanka
ID: 24339094
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
 
LVL 16

Expert Comment

by:rbudj
ID: 24339121

<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
 
LVL 16

Expert Comment

by:rbudj
ID: 24339135
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
 
LVL 1

Author Comment

by:kalleanka
ID: 24339184
still not working... did it work for you?
0
 
LVL 3

Accepted Solution

by:
bleech677 earned 500 total points
ID: 24339635
I didn't see a doctype - maybe your browser is opening in quirks mode

throw this in as the first line : <!doctype html>
0
 
LVL 43

Expert Comment

by:David S.
ID: 24339640
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
 
LVL 3

Expert Comment

by:bleech677
ID: 24339922
I didn't see anything about IE5 / Mac?
<!doctype html> will trigger standards mode for IE6+ and most others (FF, Chrome, Safari,opera)
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24340173
works fine for me
0
 
LVL 43

Expert Comment

by:David S.
ID: 24340457
> I didn't see anything about IE5 / Mac?

The screenshots are taken in IE5/Mac.
0
 
LVL 1

Author Closing Comment

by:kalleanka
ID: 31579374
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

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

610 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