Hi can anyone tell me why my page don wnat to go to center?

www.norwegiandjs.no

My html is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="Dimitris Michelinakis" />
<meta name="keywords" content="Opera, Baritone, Modenos, Music" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="charset" content="ISO-8859-1" />
<meta name="description" content="Norwegian DJ's hjelper deg med alle typer spillejobber, fester og eventer. Kontakt oss i dag!" />
<meta name="keywords" content="Fest, Musikk, DJ, Events, Disco, Norsk, Disc Jockey, Bryllup, Klassefest, Party, Moss, Østfold, DJ formidling, booking, Norge " />
<meta name="copyright" content="Copyright © 2012 Norwegian DJ's" />
<meta name="author" content="Magnus Høydahl" />
<meta name="designer" content="Magnus Høydahl" />
<meta name="email" content="Hoydahl@norwegiandjs.no" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="robots" content="NOYDIR" />
<meta http-equiv="content-language" content="NO" />
<title>Norwegian DJ's</title>
<link href="CSS/Style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nb_NO/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<center>
	<div class="topContent" align="left"><div class="fb-like" data-href="http://www.facebook.com/pages/Norwegian-DJ-Booking/146280672059421" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-colorscheme="dark" data-font="arial"></div></div>
	<div class="Logo" align="right" >
    </div> 
    <div class="Leftcontent">
    	<div class="LeftBar"></div>
      <div class="LeftBarContent" align="left">
        &bull; <a href="#">Hovedside</a><br />
        &bull; <a href="#">Link</a><br />
        &bull; <a href="#">Link</a><br />
        &bull; <a href="#">Link</a><br />
      </div>
    </div>
  </div>
    <div ID="TEXT" class="bodycontent">
    	<h1>Her kommer den nye siden til Norwegian DJ's!</h1> 
    	<p>Ved spørsmål kontakt Magnus Høydahl på 988 89 551.<br />
      Eller på <a href="mailto:hoydahl@norwegiandjs.no">hoydahl@norwegiandjs.no</a>.</p>
</div>
</div>
</center>

An CSS is:

/* CSS Document */

body,td,th
{
	background-image:url(../img/BG.png);
	color: #808080;
	width:950px;
	margin-top:0;
}

.Logo
{
	background-image:url(../img/NDJ-Logo.jpg);
	background-repeat:no-repeat;
	height:300px;
	width:950px;
}


.Leftcontent
{
	height:auto;
	width:250px;
	float:left;
	padding:15px;
	
}

.LeftBar
{
	background-image:url(../img/Leftbar.jpg);
	width:250px;
	height:54px;
}

.LeftBarContent
{
	border-style:solid;
	border-width:1px;
	border-color: #808080;
	height:auto;
	width:242px;
	padding-left:5px;
	padding-top:10px;
	padding-bottom:10px;
}

.bodycontent{
	background-color:#000;
	width:950px;
	height:auto;
}

.topContent{
	background-color:#000;
	height:25px;
	width:950px;
}

CENTER{
	background-color:#000;
}

a:link {
	color: #FFF;
}
a:visited {
	color: #FFF;
}
a:hover {
	color: #FFF;
}
a:active {
	color: #FFF;
}

.L-AD-Space{
	width:15%;
	height:auto;
	float:left;
}

.R-AD-Space{
	width:15%;
	height:auto;
	float:right;
}

Recommended Answers

All 4 Replies

Change your <center> tag to another <div> and in the CSS specify it a width (I'm guessing 950px) and then use margin: 0 auto o auto;
As long as a block element has a width specified and margin-left and margin-right set to auto the element will be centered.

in the CSS specify it a width (I'm guessing 950px)

be careful when doing this: you'll be assuming all clients show your page the way you see it, but you need to take into consideration that other users might have another screen resolution.

try as much as possible to have a dynamic width and height.

Tnx :D it work :D

But how to do it dynamic? :P using %?

yep, if you have, for instance: 50%, it will use 50% of the available browser screen.
you can check that yourself, if you resize your browser, you should see the difference.
if you have a fixed value, say 550px;, and you resize your screen, or if the page is looked at on a screen with a different resolution than yours ... well, the difference may be huge.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.