...
PDA

Can somebody redesign this a little bit?

Awesomeness
11-19-2010, 03:23 PM
Ok I'm definitely not an advanced coder! Still learning and stuff, and I made this little page. But it sure is not what I want. And I have no idea how to fix this. There's 2 points for now=

I want the whole page centered

I use so much positioning! It needs to have floats, paddings, margins, clears, displays etc. But how? :confused: Here is the corresponding code I am talking about:

<?php
session_start();
?>

<html>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<!--CASCADE STYLE SHEET-->
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:no-repeat
}

img.poschat /*for the chat*/
{
position:fixed;
left:260px;
top:544px;
width:77px;
height:53px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.poshome /*for the home*/
{
position:fixed;
left:10px;
top:544px;
width:66px;
height:51px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.posprofile /*for the profile*/
{
position:absolute;
left:100px;
top:542px;
opacity:0.4;
filter:alpha(opacity=40);
}


img.friends /*for the friends*/
{
position:absolute;
left:180px;
top:542px;
width:60px;
height:54px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.mail /*for the mail*/
{
position:absolute;
left:350px;
top:542px;
width:60px;
height:54px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.bar /*for the menubar*/
{
position:absolute;
left:0px;
top:541px;
z-index:-1;
}

form.bar
{
position:absolute;
left:440px;
top:550px;
}

</style>

</head>

<!--#########################THE MENU IMAGES###################-->
<!--The bar image-->
<img class=bar src="images/bar.jpg" id="bar" style="position: absolute; left: 0; top: 540" width="799" height="59">
<!--the chat image-->
<img class=poschat src="images/chatnormal.jpg" alt="chatnormal" id="chat"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
<!--The home image-->
<img class=poshome src="images/homenormal.jpg" alt="homenormal" id="home"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
<!--The profle image--><a href="index.php">
<img class=posprofile src="images/profilenormal.jpg" alt="profilenormal" id="profile" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
</a>
<!--The friends image--><a href="friendlist.php">
<img class=friends src="images/friendsnormal.jpg" alt="friendsnormal" id="friends" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
</a>
<!--The mail image-->
<img class=mail src="images/mailnormal.jpg" alt="mailnormal" id="mail"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
<!--The search bar-->
<form class=bar name="simple_bar" method="post" action="searchpeople.php">
<table width="400" border="0" cellpadding="5">
<tr>
<td>
<input type="hidden">
<b>Search:</b><input type="text" name="keyword" size="30" maxlength="50"><input type="submit" value="Find">
</td>
</tr>
</table>
</form>

<div style="overflow: auto; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; position:absolute; left:200; border:1px solid black;">
<table style="width: 300px" cellpadding="0" cellspacing="0" border="0">
<tr width="150">
<td width="188"><b>Name</b></td>
<td><b>City, Country</b></td>
</tr>
</table>
</div>
<br>

<?php

*

?>
<div style="overflow: auto; height: 500px; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; position:absolute; left:200; border:1px solid black;">
<table style="width: 300px;" cellpadding="0" cellspacing="0" border="0">
<?php

*

?>

<tr>
<td width="200">
<?php
*
?>
<br><br>
</td>
<td>
<?php

*

?>
<br><br>
</td>
</tr>



<?php
*

?>
</table>
</div>


</html>

EDIT:

Or give an example with the code above. For instance picture 1 and 2 you do this and that.. So I know what to do with picture 3, 4, 5, etc.
teedoff
11-19-2010, 03:44 PM
Before we worry about images, and I may have overlooked it, but I dont see any opening or closing body tags in your html. I see the WORD "body" way up in your head section, but thats not a proper body tag, nor is it in the correct place.


A common denominator for ALL html pages is like so:

<html>
<head>
<title>My Page title</title>
Stylesheets and embedded Styles here
</head>
<body>

All Content Goes here
</body>
</html
Awesomeness
11-19-2010, 05:28 PM
Before we worry about images, and I may have overlooked it, but I dont see any opening or closing body tags in your html. I see the WORD "body" way up in your head section, but thats not a proper body tag, nor is it in the correct place.


A common denominator for ALL html pages is like so:

<html>
<head>
<title>My Page title</title>
Stylesheets and embedded Styles here
</head>
<body>

All Content Goes here
</body>
</html

Thank you sir you are right! Here is the new code which I think is correct


<?php
session_start();
?>

<html>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<!--CASCADE STYLE SHEET-->
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:no-repeat
}

img.poschat /*for the chat*/
{
position:fixed;
left:260px;
top:544px;
width:77px;
height:53px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.poshome /*for the home*/
{
position:fixed;
left:10px;
top:544px;
width:66px;
height:51px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.posprofile /*for the profile*/
{
position:absolute;
left:100px;
top:542px;
opacity:0.4;
filter:alpha(opacity=40);
}


img.friends /*for the friends*/
{
position:absolute;
left:180px;
top:542px;
width:60px;
height:54px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.mail /*for the mail*/
{
position:absolute;
left:350px;
top:542px;
width:60px;
height:54px;
opacity:0.4;
filter:alpha(opacity=40);
}

img.bar /*for the menubar*/
{
position:absolute;
left:0px;
top:541px;
z-index:-1;
}

form.bar
{
position:absolute;
left:440px;
top:550px;
}

</style>

</head>

<body>

<!--#########################THE MENU IMAGES###################-->
<!--The bar image-->
<img class=bar src="images/bar.jpg" id="bar" style="position: absolute; left: 0; top: 540" width="799" height="59">
<!--the chat image-->
<img class=poschat src="images/chatnormal.jpg" alt="chatnormal" id="chat"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
<!--The home image-->
<img class=poshome src="images/homenormal.jpg" alt="homenormal" id="home"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
<!--The profle image--><a href="index.php">
<img class=posprofile src="images/profilenormal.jpg" alt="profilenormal" id="profile" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
</a>
<!--The friends image--><a href="friendlist.php">
<img class=friends src="images/friendsnormal.jpg" alt="friendsnormal" id="friends" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
</a>
<!--The mail image-->
<img class=mail src="images/mailnormal.jpg" alt="mailnormal" id="mail"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">
<!--The search bar-->
<form class=bar name="simple_bar" method="post" action="searchpeople.php">
<table width="400" border="0" cellpadding="5">
<tr>
<td>
<input type="hidden">
<b>Search:</b><input type="text" name="keyword" size="30" maxlength="50"><input type="submit" value="Find">
</td>
</tr>
</table>
</form>

<div style="overflow: auto; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; position:absolute; left:200; border:1px solid black;">
<table style="width: 300px" cellpadding="0" cellspacing="0" border="0">
<tr width="150">
<td width="188"><b>Name</b></td>
<td><b>City, Country</b></td>
</tr>
</table>
</div>
<br>

<?php

*

?>
<div style="overflow: auto; height: 500px; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; position:absolute; left:200; border:1px solid black;">
<table style="width: 300px;" cellpadding="0" cellspacing="0" border="0">
<?php

*

?>

<tr>
<td width="200">
<?php
*
?>
<br><br>
</td>
<td>
<?php

*

?>
<br><br>
</td>
</tr>



<?php
*

?>
</table>
</div>

</body>

</html>
teedoff
11-19-2010, 05:45 PM
I would suggest you get some basic knowledge. I dont know what all those php script sections are for around your table rows. You shouldn't be using tables for simple layouts, only for tabular/ dynamic data.

http://www.hotdesign.com/seybold/ will explain table layouts better.

W3schools.com (http://www.w3schools.com) is a great place to learn html.

But, to answer your question, the easiest way to center a page is with divs and css.

Wrap all your content with a div: call it wrapper like so:

<body>
<div id="wrapper">
All page content here
</div>
</body>

Then in your styles, place this:


#wrapper {
width: 80%;
margin: auto;
}
Awesomeness
11-19-2010, 06:32 PM
I tried! But it didn't work =( Maybe because the fixed positioning?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum