Centering problem

I cannot make my website center! :(

Page 1 of 1

5 Replies - 1077 Views - Last Post: 25 May 2007 - 11:07 AM

#1 Joshnathan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 25-May 07

Centering problem

Post icon  Posted 25 May 2007 - 10:48 AM

Hello, I have been programming since quite a while now and I put together a professional website for the first time. I have done quite some work but there is one detail I cannot seem to solve.

-My website: www.cjonline.ch
-Problem: second page (www.cjonline.ch/index2.php) won't center
-PHP File code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <meta name="keywords" content="CJ online works, CJ online, websites, sites, construction sites, programmation, freelance, html, javascript, php">
  <meta name="description" content="Création de sites internet de qualité irréprochable à un prix abordable.">
  <meta name="author" content="Joshua Wöhle">
  <title>CJ Online Works</title>

<?php if(isset($_REQUEST["speed"]) && $_REQUEST["speed"] == "high")
{ ?>
  <!-- High Speed Internet Template -->
  <link rel="stylesheet" href="template/high/css/template_css.css" type="text/css">

  <script language="Javascript" type="text/javascript">
  <!--

  if (document.images)
   {
	 pic1on= new Image(470,270);
	 pic1on.src="template/high/images/coultarifs.jpg";
	 pic2on= new Image(270,329);
	 pic2on.src="template/high/images/coulport.jpg";
	 pic3on= new Image(350,517);
	 pic3on.src="template/high/images/coulpres.jpg";
	 pic4on= new Image(730,150);
	 pic4on.src="template/high/images/coulcontact.jpg";

	 pic1off= new Image(470,270);
	 pic1off.src="template/high/images/nbtarifs.jpg";
	 pic2off= new Image(270,329);
	 pic2off.src="template/high/images/nbport.jpg";
	 pic3off= new Image(350,517);
	 pic3off.src="template/high/images/nbpres.jpg";
	 pic4off= new Image(730,150);
	 pic4off.src="template/high/images/nbcontact.jpg";
   }

function lightup(imgName)
 {
   if (document.images)
	{
	  imgOn=eval(imgName + "on.src");
	  document[imgName].src= imgOn;
	}
 }

function turnoff(imgName)
 {
   if (document.images)
	{
	  imgOff=eval(imgName + "off.src");
	  document[imgName].src= imgOff;
	}
 }

 //-->
 </script>

</head>
<body>
<div id="main">

<div id="logo">
</div>

<div id="tarifs">
<a href="categories/tarifs/index.php?speed=high" onmouseover="lightup('pic1')" onmouseout="turnoff('pic1')">
<img src="template/high/images/nbtarifs.jpg" name="pic1" border="0" alt="Tarifs"></a>
</div>

<div id="port">
<a href="categories/portfolio/index.php?speed=high" onmouseover="lightup('pic2')" onmouseout="turnoff('pic2')">
<img src="template/high/images/nbport.jpg" name="pic2" border="0" alt="Portfolio"></a>
</div>

<div id="pres">
<a href="categories/presentation/index.php?speed=high" onmouseover="lightup('pic3')" onmouseout="turnoff('pic3')">
<img src="template/high/images/nbpres.jpg" name="pic3" border="0" alt="Presentation"></a>
</div>

<div id="contact">
<a href="categories/contact/index.php?speed=high" onmouseover="lightup('pic4')" onmouseout="turnoff('pic4')">
<img src="template/high/images/nbcontact.jpg" name="pic4" border="0" alt="Contact"></a>
</div>

<div id="content">

<div id="loginButton1">
<a href="java script:void()"><img src="template/high/images/login1.jpg" border="0"></a>
</div>
<div id="loginButton2">
<a href="java script:void()"><img src="template/high/images/login2.jpg" border="0" onclick="document.login.submit()"></a>
</div>

<div id="login">
<form name="login" method="post" action="java script:void()">
<table border="0">
<tr>
	<td>Pseudo:</td>
	<td><input type="text" size="8" name="pseudo"></td>
</tr>
<tr>
	<td>Mdp:</td>
	<td><input type="password" size="8" name="mdp"></td>
</tr>
</table>
</form>
</div>

<div id="news">
<div class="newsDate">09.03.2007</div>
<div class="newsTitle">Lancement du site</div>
</div>

</div>

</div>




<!-- End of High Speed Internet Template -->



<?php
}
else {
?>
<!-- Low Speed Internet Template -->
<link rel="stylesheet" href="template/low/css/template_low_css.css" type="text/css">
</head>
<body>
<div id="main">

<div id="tarifs"><a href="categories/tarifs/">Tarifs</a></div>
<div id="contact"><a href="categories/contact/">Contact</a></div>
<div id="portfolio"><a href="categories/portfolio/">Portfolio</a></div>
<div id="presentation"><a href="categories/presentation/">Presentation</a></div>

<div id="login">
<form name="login" method="post" action="java script:void()">
<table border="0">
<tr>
	<td><input type="text" size="12" name="pseudo"></td>
	<td>Pseudo</td>
</tr>
<tr>
	<td><input type="password" size="12" name="mdp"></td>
	<td>Mdp</td>
</tr>
<tr>
	<td colspan="2"><input type="submit" value="login"></td>
</tr>
</table>
</form>
</div>

<div id="news">
News<br><br>
<div class="newsDate">09.03.2007</div>
<div class="newsTitle">Lancement du site</div>
</div>

</div>
<?php
}
?>

</body>
</html>



-CSS (high speed template) file code:
/* ------------------------------------ *
 CSS
 mardi, 20. février 2007 22:40:08
 HAPedit 3.1.11.111
 * ------------------------------------ */

body {
background-color:#888888;
}

#main {
position:relative;
margin:auto;
width:1000px;
height:600px;
}

#logo {
position:absolute;
top:270px;
left:270px;
width:200px;
height:180px;
background-image:url(../../high/images/logo.jpg);
}

#tarifs {
position:absolute;
top:0px;
left:0px;
width:470px;
height:270px;
}

#port {
position:absolute;
top:271px;
left:0px;
width:271px;
height:329px;
}

#pres {
position:absolute;
top:0px;
left:470px;
width:350px;
height:518px;
z-index:1;
}

#contact {
position:absolute;
top:450px;
left:271px;
width:730px;
height:150px;
z-index:0;
background-color:transparent;
}

#content {
position:absolute;
top:0px;
left:820px;
width:181px;
height:517px;
background-image:url(../images/login.jpg);
}

#login {
position:absolute;
top:45px;
left:15px;
width:141px;
height:175px;
background-color:transparent;
}

#loginButton1 {
position:absolute;
top:16px;
left:99px;
width:70px;
height:17px;
background-color:transparent;
}

#loginButton2 {
position:absolute;
top:16px;
left:152px;
width:17px;
height:72px;
background-color:transparent;
}

#news {
position:absolute;
top:230px;
left:10px;
width:145px;
height:130px;
background-color:transparent;
}

.newsDate {
color:#000000;
text-align:right;
}

.newsTitle {
color:white;
text-align:right;
}


-CSS (low speed template) file code:
/* ------------------------------------ *
 CSS
 lundi, 5. mars 2007 17:51:05
 HAPedit 3.1.11.111
 * ------------------------------------ */

body {
background-color:#888888;
}

#main {
position:relative;
margin:auto;
width:1000px;
height:600px;
background-image:url(../images/main.jpg);
}

#tarifs {
position:absolute;
left:650px;
top:335px;
width:150px;
height:50px;
background-color:transparent;
font-size:60px;
font-weight:bold;
text-align:left;
}

#tarifs a{
color:#cb1010;
text-decoration:none;
}

#tarifs a:hover
{
color:#888888;
}

#contact {
position:absolute;
left:650px;
top:395px;
width:150px;
height:50px;
background-color:transparent;
font-size:60px;
font-weight:bold;
text-align:left;
}

#contact a{
color:#ef8110;
text-decoration:none;
}

#contact a:hover
{
color:#888888;
}

#portfolio {
position:absolute;
left:650px;
top:455px;
width:150px;
height:50px;
background-color:transparent;
font-size:60px;
font-weight:bold;
text-align:left;
}

#portfolio a{
color:#0dc00e;
text-decoration:none;
}

#portfolio a:hover
{
color:#888888;
}

#presentation {
position:absolute;
left:650px;
top:515px;
width:150px;
height:50px;
background-color:transparent;
font-size:60px;
font-weight:bold;
text-align:left;
}

#presentation a{
color:#0026e6;
text-decoration:none;
}

#presentation a:hover
{
color:#888888;
}

#login {
position:absolute;
left:10px;
top:10px;
width:150px;
height:100px;
color:white;
background-color:transparent;
}

#login td {
color:#919190;
font-style:italic;
font-weight:bold;
}

#news {
position:absolute;
left:15px;
top:300px;
width:150px;
height:200px;
color:#919190;
font-weight:bold;
font-size:20px;
font-style:italic;
background-color:transparent;
}

.newsDate {
color:#000000;
font-size:12px;
font-style:italic;
text-align:right;
}

.newsTitle {
color:#000000;
font-size:16px;
font-style:normal;
font-weight:bold;
text-align:left;
}


Hope someone has a solution to this problem which I have been trying to solve for quite a while now.

Joshua

Is This A Good Question/Topic? 0
  • +

Replies To: Centering problem

#2 xlivegamingx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 24-May 07

Re: Centering problem

Posted 25 May 2007 - 10:51 AM

What are you trying to center on that page? (http://www.cjonline.ch/index2.php)
Was This Post Helpful? 0
  • +
  • -

#3 Joshnathan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 25-May 07

Re: Centering problem

Posted 25 May 2007 - 10:56 AM

View Postxlivegamingx, on 25 May, 2007 - 10:51 AM, said:

What are you trying to center on that page? (http://www.cjonline.ch/index2.php)

Because In higher resolutions then 1024x768 it would show better in my and my webdesigner's opinion. :)
Was This Post Helpful? 0
  • +
  • -

#4 no2pencil  Icon User is offline

  • Original Digital Gansta
  • member icon

Reputation: 4501
  • View blog
  • Posts: 24,965
  • Joined: 10-May 07

Re: Centering problem

Posted 25 May 2007 - 11:00 AM

View PostJoshnathan, on 25 May, 2007 - 10:48 AM, said:

#main {
position:relative;
margin:auto;
width:1000px;
height:600px;
}


Hope someone has a solution to this problem which I have been trying to solve for quite a while now.

Joshua


You need to align your div-tag id main.

http://www.zachgraev...e-position-div/
Was This Post Helpful? 0
  • +
  • -

#5 xlivegamingx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 24-May 07

Re: Centering problem

Posted 25 May 2007 - 11:00 AM

View PostJoshnathan, on 25 May, 2007 - 10:56 AM, said:

View Postxlivegamingx, on 25 May, 2007 - 10:51 AM, said:

What are you trying to center on that page? (http://www.cjonline.ch/index2.php)

Because In higher resolutions then 1024x768 it would show better in my and my webdesigner's opinion. :)



Well my resolution is 1024 X 768 and that web page looks fine to me.
I dont know what your trying to center.

Also for the resolution for better appearance thing. In my opinion, I use 1024 X 768 and I design all of my pages to fit that context because thats like the default that everyone uses. Unless you have like a widescreen or something. But if your really good then you would design every page to fit on any screen by using precentages and stuff. But thats just an opinion and you can do it which ever way you want.
Was This Post Helpful? 0
  • +
  • -

#6 Joshnathan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 25-May 07

Re: Centering problem

Posted 25 May 2007 - 11:07 AM

View Postxlivegamingx, on 25 May, 2007 - 11:00 AM, said:

View PostJoshnathan, on 25 May, 2007 - 10:56 AM, said:

View Postxlivegamingx, on 25 May, 2007 - 10:51 AM, said:

What are you trying to center on that page? (http://www.cjonline.ch/index2.php)

Because In higher resolutions then 1024x768 it would show better in my and my webdesigner's opinion. :)



Well my resolution is 1024 X 768 and that web page looks fine to me.
I dont know what your trying to center.

Also for the resolution for better appearance thing. In my opinion, I use 1024 X 768 and I design all of my pages to fit that context because thats like the default that everyone uses. Unless you have like a widescreen or something. But if your really good then you would design every page to fit on any screen by using precentages and stuff. But thats just an opinion and you can do it which ever way you want.


I was talking about higher resolutions then 1024x768 :) It is based on a 1024x768 as it's the most common though.



View Postno2pencil, on 25 May, 2007 - 11:00 AM, said:

View PostJoshnathan, on 25 May, 2007 - 10:48 AM, said:

#main {
position:relative;
margin:auto;
width:1000px;
height:600px;
}


Hope someone has a solution to this problem which I have been trying to solve for quite a while now.

Joshua


You need to align your div-tag id main.

http://www.zachgraev...e-position-div/


You're the man :P Thx, works great
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1