Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can somebody redesign this a little bit?

    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? Here is the corresponding code I am talking about:

    Code:
    <?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.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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:

    Code:
    <html>
    <head>
    <title>My Page title</title>
    Stylesheets and embedded Styles here
    </head>
    <body>
    
    All Content Goes here
    </body>
    </html
    Last edited by teedoff; 11-19-2010 at 03:47 PM.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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:

    Code:
    <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

    Code:
    <?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>

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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 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:

    Code:
    <body>
    <div id="wrapper">
    All page content here
    </div>
    </body>
    Then in your styles, place this:

    Code:
    #wrapper {
          width: 80%;
          margin: auto;
    }
    Last edited by teedoff; 11-19-2010 at 05:50 PM.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried! But it didn't work =( Maybe because the fixed positioning?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •