Programming Help

Web Development



What's Here?

  • Members: 149,534
  • Replies: 506,646
  • Topics: 79,835
  • Snippets: 2,666
  • Tutorials: 706
  • Total Online: 1,517
  • Members: 89
  • Guests: 1,428

Welcome to Dream.In.Code
Become an Expert!

Join 149,534 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,517 people online right now. Registration is fast and FREE... Join Now!




Centering problem

 
 Reply to this topicStart new topic

Centering problem, I cannot make my website center! :(
Joshnathan
25 May, 2007 - 09:48 AM
Post #1

New D.I.C Head
*

Joined: 25 May, 2007
Posts: 18


My Contributions
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:
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:
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:
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
User is offlineProfile CardPM
+Quote Post

xlivegamingx
RE: Centering Problem
25 May, 2007 - 09:51 AM
Post #2

New D.I.C Head
*

Joined: 24 May, 2007
Posts: 5


My Contributions
What are you trying to center on that page? (http://www.cjonline.ch/index2.php)
User is offlineProfile CardPM
+Quote Post

Joshnathan
RE: Centering Problem
25 May, 2007 - 09:56 AM
Post #3

New D.I.C Head
*

Joined: 25 May, 2007
Posts: 18


My Contributions
QUOTE(xlivegamingx @ 25 May, 2007 - 10:51 AM) *

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. smile.gif
User is offlineProfile CardPM
+Quote Post

no2pencil
RE: Centering Problem
25 May, 2007 - 10:00 AM
Post #4

My fridge be runnin OH NOEZ!
Group Icon

Joined: 10 May, 2007
Posts: 7,124



Thanked: 76 times
Dream Kudos: 2425
Expert In: Goofing Off

My Contributions
QUOTE(Joshnathan @ 25 May, 2007 - 10:48 AM) *

CODE

#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.zachgraeve.com/2006/10/01/cente...e-position-div/
User is online!Profile CardPM
+Quote Post

xlivegamingx
RE: Centering Problem
25 May, 2007 - 10:00 AM
Post #5

New D.I.C Head
*

Joined: 24 May, 2007
Posts: 5


My Contributions
QUOTE(Joshnathan @ 25 May, 2007 - 10:56 AM) *

QUOTE(xlivegamingx @ 25 May, 2007 - 10:51 AM) *

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. smile.gif



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.
User is offlineProfile CardPM
+Quote Post

Joshnathan
RE: Centering Problem
25 May, 2007 - 10:07 AM
Post #6

New D.I.C Head
*

Joined: 25 May, 2007
Posts: 18


My Contributions
QUOTE(xlivegamingx @ 25 May, 2007 - 11:00 AM) *

QUOTE(Joshnathan @ 25 May, 2007 - 10:56 AM) *

QUOTE(xlivegamingx @ 25 May, 2007 - 10:51 AM) *

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. smile.gif



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 smile.gif It is based on a 1024x768 as it's the most common though.



QUOTE(no2pencil @ 25 May, 2007 - 11:00 AM) *

QUOTE(Joshnathan @ 25 May, 2007 - 10:48 AM) *

CODE

#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.zachgraeve.com/2006/10/01/cente...e-position-div/


You're the man tongue.gif Thx, works great
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 09:07PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month