Member Avatar for Bassznapper

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

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;
}
  • 3 Contributors
  • 4 Replies
  • 206 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by stultuske

Dani AI

Generated

Good catch by — the fix is to stop using the deprecated <center> tag and stop applying layout widths to the body (or to td, th). Wrap the whole page in a single block-level container and center that with auto margins. Example pattern (minimal):

body { margin: 0; padding: 0; }

.site { width: 950px; margin: 0 auto; box-sizing: border-box; }

For a dynamic / responsive approach (what suggested), prefer a percent-based width with a max-width so the layout scales down on small screens but never grows beyond your design width:

.site { width: 90%; max-width: 950px; margin: 0 auto; box-sizing: border-box; }

/* modern two-column layout; avoids float hacks */
.page { display: grid; grid-template-columns: 250px 1fr; gap: 20px; }

Troubleshooting checklist if it still looks off:

  • Remove any width rules applied globally to body, td, or th. Those defeat centering.
  • Use DevTools (inspect element) and look at computed widths to find elements wider than the wrapper (images, long text, absolutely positioned blocks).
  • If you must keep floats, clear them with a small utility (or use display: grid / display: flex instead):
    .clearfix::after { content: ""; display: table; clear: both; }
  • Add meta name="viewport" content="width=device-width, initial-scale=1" for mobile.

This expands on ' margin:auto suggestion and on 's point about fluid widths. Replace align attributes and <center> with CSS classes and the page will center reliably and adapt better to different screens.

Recommended Answers

All 4 Replies

Member Avatar for hericles

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.

Member Avatar for stultuske

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.

Member Avatar for Bassznapper

Tnx :D it work :D

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

Member Avatar for stultuske

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.