tables and include files

  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

i have a site that im building that has include files for some reaso this is leaving a space on my page... the space is causing my page to my page to be divided with space between the nav bar (top half) and the featured homes (bottom half)....can anyone help i will include script and link to page: http://www.getflap.com/getflap2/index2.php



Code: [ Select ]
<html>
<head>
<title>index2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index2.psd) -->
<table id="Table_01" width="775" height="716" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="6">&nbsp;</td>
        <td><img src="images/logo.jpg" width="212" height="99"></td>
        <td><img src="images/index.jpg" width="284" height="99"></td>
        <td colspan="3" valign="bottom"><p>
         <?php include('TtopNav.php'); ?>
      </td>
 <td rowspan="6">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/topLine.jpg" width="725" height="10" alt=""></td>
    </tr>
    <tr>
        <td height="234" colspan="4" valign="top">
            <img src="includePages/images/index2_07.png" width="550" height="234" alt=""></td>
        <td rowspan="4" valign="top"><p>
         <?php include('Tsearch.php'); ?>
<?php include('Ttestimonials.php'); ?>
</td>
 </tr>
    <tr>
        <td colspan="4"><?php include('TnavBar.php'); ?></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td valign="top"><?php include('TfeaturedProperties.php'); ?></td>
      <td valign="top"><p>
       <?php include('ThomeBody.php'); ?>      </td>
     </tr>
    </table></td>
        <td>
            <img src="includePages/images/navBar-12.png" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="includePages/images/index2_12.png" width="1" height="295" alt=""></td>
    </tr>
    <tr>
        <td colspan="7"><?php include('TfooterNav.php'); ?></td>
    </tr>
    <tr>
        <td>
            <img src="includePages/images/spacer.gif" width="25" height="1" alt=""></td>
        <td>
            <img src="includePages/images/spacer.gif" width="212" height="1" alt=""></td>
        <td>
            <img src="includePages/images/spacer.gif" width="284" height="1" alt=""></td>
        <td>
            <img src="includePages/images/spacer.gif" width="53" height="1" alt=""></td>
        <td>
            <img src="includePages/images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="includePages/images/spacer.gif" width="175" height="1" alt=""></td>
        <td>
            <img src="includePages/images/spacer.gif" width="25" height="1" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
  1. <html>
  2. <head>
  3. <title>index2</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </head>
  6. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  7. <!-- ImageReady Slices (index2.psd) -->
  8. <table id="Table_01" width="775" height="716" border="0" cellpadding="0" cellspacing="0">
  9.     <tr>
  10.         <td rowspan="6">&nbsp;</td>
  11.         <td><img src="images/logo.jpg" width="212" height="99"></td>
  12.         <td><img src="images/index.jpg" width="284" height="99"></td>
  13.         <td colspan="3" valign="bottom"><p>
  14.          <?php include('TtopNav.php'); ?>
  15.       </td>
  16.  <td rowspan="6">&nbsp;</td>
  17.     </tr>
  18.     <tr>
  19.         <td colspan="5">
  20.             <img src="images/topLine.jpg" width="725" height="10" alt=""></td>
  21.     </tr>
  22.     <tr>
  23.         <td height="234" colspan="4" valign="top">
  24.             <img src="includePages/images/index2_07.png" width="550" height="234" alt=""></td>
  25.         <td rowspan="4" valign="top"><p>
  26.          <?php include('Tsearch.php'); ?>
  27. <?php include('Ttestimonials.php'); ?>
  28. </td>
  29.  </tr>
  30.     <tr>
  31.         <td colspan="4"><?php include('TnavBar.php'); ?></td>
  32.     </tr>
  33.     <tr>
  34.         <td colspan="3" rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  35.      <tr>
  36.       <td valign="top"><?php include('TfeaturedProperties.php'); ?></td>
  37.       <td valign="top"><p>
  38.        <?php include('ThomeBody.php'); ?>      </td>
  39.      </tr>
  40.     </table></td>
  41.         <td>
  42.             <img src="includePages/images/navBar-12.png" width="1" height="1" alt=""></td>
  43.     </tr>
  44.     <tr>
  45.         <td>
  46.             <img src="includePages/images/index2_12.png" width="1" height="295" alt=""></td>
  47.     </tr>
  48.     <tr>
  49.         <td colspan="7"><?php include('TfooterNav.php'); ?></td>
  50.     </tr>
  51.     <tr>
  52.         <td>
  53.             <img src="includePages/images/spacer.gif" width="25" height="1" alt=""></td>
  54.         <td>
  55.             <img src="includePages/images/spacer.gif" width="212" height="1" alt=""></td>
  56.         <td>
  57.             <img src="includePages/images/spacer.gif" width="284" height="1" alt=""></td>
  58.         <td>
  59.             <img src="includePages/images/spacer.gif" width="53" height="1" alt=""></td>
  60.         <td>
  61.             <img src="includePages/images/spacer.gif" width="1" height="1" alt=""></td>
  62.         <td>
  63.             <img src="includePages/images/spacer.gif" width="175" height="1" alt=""></td>
  64.         <td>
  65.             <img src="includePages/images/spacer.gif" width="25" height="1" alt=""></td>
  66.     </tr>
  67. </table>
  68. <!-- End ImageReady Slices -->
  69. </body>
  70. </html>
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2122

Post 3+ Months Ago

The page loads EXTREMELY slow and my connection is pretty good.

The space on the page looks to be caused by the submit button thats stuck in between the header and content part.

Also, your source code is majorly confusing.. I've never seen anything like it. :shock:
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

no not button causing it thats just there for testing...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

Firstly, I would suggest moving away from tables asap ... I can't see the issue (viewed in IE7 and FF2) ... all that I can see, is that the image (index2_07.png) is missing ...
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

u cant see the big gap between the featured box and the navbar .....................so u suggest that i use layers
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I don't see a gap ... which browser are you using?
And no, I didn't say anything about layers ... I said you should stop using table based layouts ... and rather switch to using CSS for your layout and putting the content in DIV's ...
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

ok ill take out the submit button and you will see th gap in the middle of the page, was going to learn that but that takes to much time right...
http://www.getflap.com/getflap2/index2.php
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

oh its seen in firefox and IE
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I can't see what you're talking about ... Again, I'm looking at the page in IE7 and FF2 and they look exactly the same ... with some images missing ...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I can't see what you're talking about ... Again, I'm looking at the page in IE7 and FF2 and they look exactly the same ... with some images missing ...
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

if u look in the middle of the page bellow the navigation bar and above the welcome that white open space is not supposed to be there...the there should be no split in the page
  • Suikolove
  • Newbie
  • Newbie
  • Suikolove
  • Posts: 9

Post 3+ Months Ago

I hope you're not designing sites for money. If you are, then you need to stop. Right now, and take a break until you become intermediate with CSS and Divs.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

ok thanks for that input and vote of confidence....but anyway can u help...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

How about this: firstly fix your 51 validation errors and add a DOCTYPE, because your code is pretty screwed up ... That should help you already ... and us ... for a DOCTYPE, if I were you, I would use HTML 4.0 transitional ... it's the easiest to start off with ...
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

ok can anyone help me with this problem, i just wanted to know y this was happening i am currently learning css i do development work my webdesigner is out for awhile so i thought i could learn this im old school when it comes to webdesign im sorry but please dont talk bad to me ok thanks now can i please get some help or what...thanks
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

I'm not talking bad to you, I'm just saying that your code is hard to understand ... and by fixing that validation errors you'll know it's not something silly that you missed or a tag that you forgot to close or something like that ...
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2122

Post 3+ Months Ago

The reason your page isn't working properly is because you have about 18 <body> tags in there. You only need ONE to open and close. I have no idea what you were thinking when you coded that site, but its wrong, wrong, wrong!

If you want your site to WORK for everyone, you need to redesign it properly. Validate it, and then if you have a problem, come and ask, cos at the moment, no one can help you.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

ok can u tell me how to fix this then its in div css now but how do i fix this please look at how this appears in the browser
http://www.getflap.com/getflap2/index.php

Code: [ Select ]
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (index.psd) -->
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:775px;
    height:735px;
}

#index-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:25px;
    height:668px;
}

#logo {
    position:absolute;
    left:25px;
    top:0px;
    width:212px;
    height:99px;
}

#index-03 {
    position:absolute;
    left:237px;
    top:0px;
    width:284px;
    height:99px;
}

#index-04 {
    position:absolute;
    left:521px;
    top:0px;
    width:229px;
    height:99px;
}

#index-05 {
    position:absolute;
    left:750px;
    top:0px;
    width:25px;
    height:668px;
}

#index-06 {
    position:absolute;
    left:25px;
    top:99px;
    width:725px;
    height:10px;
}

#index-07 {
    position:absolute;
    left:25px;
    top:109px;
    width:550px;
    height:234px;
}

#index-08 {
    position:absolute;
    left:575px;
    top:109px;
    width:175px;
    height:263px;
}

#navBar {
    position:absolute;
    left:25px;
    top:343px;
    width:550px;
    height:29px;
}

#featuredHomes {
    position:absolute;
    left:25px;
    top:372px;
    width:176px;
    height:296px;
}

#body {
    position:absolute;
    left:201px;
    top:372px;
    width:373px;
    height:296px;
}

#testimonials {
    position:absolute;
    left:574px;
    top:372px;
    width:176px;
    height:218px;
}

#index-13 {
    position:absolute;
    left:574px;
    top:590px;
    width:176px;
    height:78px;
}

#footerNav {
    position:absolute;
    left:0px;
    top:668px;
    width:775px;
    height:67px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (index.psd) -->
<div id="Table_01">
    <div id="index-01">
        <img src="images/index_01.jpg" width="25" height="668" alt="">
    </div>
    <div id="logo">
        <img src="images/logo.jpg" width="212" height="99" alt="">
    </div>
    <div id="index-03">
        <img src="images/index_03.jpg" width="284" height="99" alt="">
    </div>
    <div id="index-04">
        <img src="images/index_04.jpg" width="229" height="99" alt="">
    </div>
    <div id="index-05">
        <img src="images/index_05.jpg" width="25" height="668" alt="">
    </div>
    <div id="index-06">
        <img src="images/index_06.jpg" width="725" height="10" alt="">
    </div>
    <div id="index-07">
        <img src="images/index_07.jpg" width="550" height="234" alt="">
    </div>
    <div id="index-08"><?php include('Tsearch.php'); ?></div>
    <div id="navBar">
        <img src="images/navBar.jpg" width="550" height="29" alt="">
    </div>
    <div id="featuredHomes">
        <img src="images/featuredHomes.jpg" width="176" height="296" alt="">
    </div>
    <div id="body">
        <img src="images/body.jpg" width="373" height="296" alt="">
    </div>
    <div id="testimonials">
        <img src="images/testimonials.jpg" width="176" height="218" alt="">
    </div>
    <div id="index-13">
        <img src="images/index_13.jpg" width="176" height="78" alt="">
    </div>
    <div id="footerNav">
        <img src="images/footerNav.jpg" width="775" height="67" alt="">
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
  1. <html>
  2. <head>
  3. <title>index</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <!-- ImageReady Styles (index.psd) -->
  6. <style type="text/css">
  7. <!--
  8. #Table_01 {
  9.     position:absolute;
  10.     left:0px;
  11.     top:0px;
  12.     width:775px;
  13.     height:735px;
  14. }
  15. #index-01 {
  16.     position:absolute;
  17.     left:0px;
  18.     top:0px;
  19.     width:25px;
  20.     height:668px;
  21. }
  22. #logo {
  23.     position:absolute;
  24.     left:25px;
  25.     top:0px;
  26.     width:212px;
  27.     height:99px;
  28. }
  29. #index-03 {
  30.     position:absolute;
  31.     left:237px;
  32.     top:0px;
  33.     width:284px;
  34.     height:99px;
  35. }
  36. #index-04 {
  37.     position:absolute;
  38.     left:521px;
  39.     top:0px;
  40.     width:229px;
  41.     height:99px;
  42. }
  43. #index-05 {
  44.     position:absolute;
  45.     left:750px;
  46.     top:0px;
  47.     width:25px;
  48.     height:668px;
  49. }
  50. #index-06 {
  51.     position:absolute;
  52.     left:25px;
  53.     top:99px;
  54.     width:725px;
  55.     height:10px;
  56. }
  57. #index-07 {
  58.     position:absolute;
  59.     left:25px;
  60.     top:109px;
  61.     width:550px;
  62.     height:234px;
  63. }
  64. #index-08 {
  65.     position:absolute;
  66.     left:575px;
  67.     top:109px;
  68.     width:175px;
  69.     height:263px;
  70. }
  71. #navBar {
  72.     position:absolute;
  73.     left:25px;
  74.     top:343px;
  75.     width:550px;
  76.     height:29px;
  77. }
  78. #featuredHomes {
  79.     position:absolute;
  80.     left:25px;
  81.     top:372px;
  82.     width:176px;
  83.     height:296px;
  84. }
  85. #body {
  86.     position:absolute;
  87.     left:201px;
  88.     top:372px;
  89.     width:373px;
  90.     height:296px;
  91. }
  92. #testimonials {
  93.     position:absolute;
  94.     left:574px;
  95.     top:372px;
  96.     width:176px;
  97.     height:218px;
  98. }
  99. #index-13 {
  100.     position:absolute;
  101.     left:574px;
  102.     top:590px;
  103.     width:176px;
  104.     height:78px;
  105. }
  106. #footerNav {
  107.     position:absolute;
  108.     left:0px;
  109.     top:668px;
  110.     width:775px;
  111.     height:67px;
  112. }
  113. -->
  114. </style>
  115. <!-- End ImageReady Styles -->
  116. </head>
  117. <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
  118. <!-- ImageReady Slices (index.psd) -->
  119. <div id="Table_01">
  120.     <div id="index-01">
  121.         <img src="images/index_01.jpg" width="25" height="668" alt="">
  122.     </div>
  123.     <div id="logo">
  124.         <img src="images/logo.jpg" width="212" height="99" alt="">
  125.     </div>
  126.     <div id="index-03">
  127.         <img src="images/index_03.jpg" width="284" height="99" alt="">
  128.     </div>
  129.     <div id="index-04">
  130.         <img src="images/index_04.jpg" width="229" height="99" alt="">
  131.     </div>
  132.     <div id="index-05">
  133.         <img src="images/index_05.jpg" width="25" height="668" alt="">
  134.     </div>
  135.     <div id="index-06">
  136.         <img src="images/index_06.jpg" width="725" height="10" alt="">
  137.     </div>
  138.     <div id="index-07">
  139.         <img src="images/index_07.jpg" width="550" height="234" alt="">
  140.     </div>
  141.     <div id="index-08"><?php include('Tsearch.php'); ?></div>
  142.     <div id="navBar">
  143.         <img src="images/navBar.jpg" width="550" height="29" alt="">
  144.     </div>
  145.     <div id="featuredHomes">
  146.         <img src="images/featuredHomes.jpg" width="176" height="296" alt="">
  147.     </div>
  148.     <div id="body">
  149.         <img src="images/body.jpg" width="373" height="296" alt="">
  150.     </div>
  151.     <div id="testimonials">
  152.         <img src="images/testimonials.jpg" width="176" height="218" alt="">
  153.     </div>
  154.     <div id="index-13">
  155.         <img src="images/index_13.jpg" width="176" height="78" alt="">
  156.     </div>
  157.     <div id="footerNav">
  158.         <img src="images/footerNav.jpg" width="775" height="67" alt="">
  159.     </div>
  160. </div>
  161. <!-- End ImageReady Slices -->
  162. </body>
  163. </html>
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I can't see it - says 'page cannot be found....' I tried to open it in dreamweaver and I can see the divs but not any of the images or text, so I don't know what you need.... if you can make the link work I can help more maybe
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

my bad here it is...http://www.getflap.com/index.php
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1415
  • Loc: 55° N, 3° W

Post 3+ Months Ago

One of the best things you can do is to make sure your markup at least has some semblance of valididty to it. Your code is all messed up - and so expecting a browser to deal with this and know what you want is not going to be an easy thing to achieve. Finding "fixes" here is really just going to be hiding the errors and not helping you in the long run. Any subsequent changes you make after a fix will likey blow the thing apart again. You need to get the code cleaned up and valid as a first priority.

Use the w3c markup validation service.

Secondly, since this (that site) is a business I would strongly suggest doing this project in a more "standard" manner. If it's your business then this is even more important. Ditch the ImageReady stuff ... all that slicing and dicing is not doing you any favours at all. There are many free tools to make websites that give far more friendly results than a graphics program ever can. 385 Kb's worth of sliced images is a bit crazy (and totally unnecessary) for such a simple-to-achieve-by-other-means design. For a property site, your design is not great but does fit into the crowd well (that's not an insult, I just mean that it looks like a property site if you know what I mean?) so there is no major problem in this regard. But under the hood it kinda stinks.

Just my thoughts.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I don't want to sound redundant, but the first step to any web page problem-solving should be validating the code with the W3C. Not only will it potentially fix the problem, but it will help you understand all that wacky code that Imageready is kicking out.

A good learning tool would be to rename all those divs so they mean something to you. That'll help you understand what everything on your page is doing.

As cool as PHP includes are, I think it's important to have a solid fundamental understanding of HTML and CSS before trying to incorporate something like PHP in.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6231
  • Loc: South-Africa

Post 3+ Months Ago

Nicely said Jameson5555 ... *applauds*
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

Suikolove wrote:
I hope you're not designing sites for money. If you are, then you need to stop. Right now, and take a break until you become intermediate with CSS and Divs.


i dont think its nice to tell him to not make sites, we all have our own unique ways of design and one only learns when once does ;)
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

thank you i am new to using css and divs my main specialty is programming....
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

olm75 wrote:
thank you i am new to using css and divs my main specialty is programming....

Welcome to the world of CSS :)

I think you'll like it a lot once you start seeing the logic behind it. It's so much easier to work with than tables.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

thats what im trying to do im finding out with exeption of some stuff its not that complicated, and another thing is it wise to us photoshop to send the page to dreamweaver...
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

olm75 wrote:
thats what im trying to do im finding out with exeption of some stuff its not that complicated, and another thing is it wise to us photoshop to send the page to dreamweaver...

That's how I used to do it back in the day. Dreamweaver makes it pretty easy to change some of the images from foreground images to background images and add actual text on top of them without having to know any code.

I do think hand-coding is the best way to get perfect code, but Dreamweaver is definitely a step in the right direction!
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

i am having trouble with the layout from photoshop, how do u do it
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

olm75 wrote:
i am having trouble with the layout from photoshop, how do u do it

You mean you're having trouble getting it into dreamweaver or editing it once you're in there or something else?
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

no im having trouble editing it im just trying to make a template for now of the photoshop design and the with a template i can just add editable regions and then include files and use for other pages....i also have programs like webassist now that adds forms into your pages and easier if your pages are templates, but im mostly having trouble with getting the footer to move or expand when the above divs are expanded. please help with advise thanks dude...im new to the css div world and trying to practice designing and implementing some sites now using divs and tables inside divs for now with css
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

im trying to make the footer move when the body or and div expands...
i know i need to change some of the css and get ride of some of the black spaces...but can anyone help

Code: [ Select ]
<html>
<head>
<title>index3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (index3.psd) -->
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:775px;
    height:735px;
}

#container {
    position:absolute;
    left:0px;
    top:0px;
    width:25px;
    height:667px;
}

#logo {
    position:absolute;
    left:25px;
    top:0px;
    width:175px;
    height:98px;
}

#container003 {
    position:absolute;
    left:200px;
    top:0px;
    width:254px;
    height:98px;
}

#topNav {
    position:absolute;
    left:454px;
    top:0px;
    width:297px;
    height:98px;
}

#container005 {
    position:absolute;
    left:751px;
    top:0px;
    width:24px;
    height:667px;
}

#index3-06 {
    position:absolute;
    left:25px;
    top:98px;
    width:725px;
    height:12px;
}

#container007 {
    position:absolute;
    left:750px;
    top:98px;
    width:1px;
    height:569px;
}

#header {
    position:absolute;
    left:25px;
    top:110px;
    width:550px;
    height:233px;
}

#search {
    position:absolute;
    left:575px;
    top:110px;
    width:175px;
    height:263px;
}

#navMenu {
    position:absolute;
    left:25px;
    top:343px;
    width:550px;
    height:30px;
}

#featuredHomes {
    position:absolute;
    left:25px;
    top:373px;
    width:174px;
    height:294px;
}

#index3-12 {
    position:absolute;
    left:199px;
    top:373px;
    width:376px;
    height:294px;
}

#index3-13 {
    position:absolute;
    left:575px;
    top:373px;
    width:175px;
    height:216px;
}

#container014 {
    position:absolute;
    left:575px;
    top:589px;
    width:175px;
    height:1px;
}

#index3-15 {
    position:absolute;
    left:575px;
    top:590px;
    width:175px;
    height:77px;
}

#footer {
    position:absolute;
    left:0px;
    top:667px;
    width:775px;
    height:68px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (index3.psd) -->
<div id="Table_01">
    <div id="container">
        <img src="templates/images/container.jpg" width="25" height="667" alt="">
    </div>
    <div id="logo"><img src="templates/images/logo.jpg" width="175" height="98" alt=""></div>
<div id="container003">
        <img src="templates/images/container-03.jpg" width="254" height="98" alt="">
    </div>
    <div id="topNav">
        <img src="templates/images/topNav.jpg" width="297" height="98" alt="">
    </div>
    <div id="container005">
        <img src="templates/images/container-05.jpg" width="24" height="667" alt="">
    </div>
    <div id="index3-06">
        <img src="templates/images/index3_06.jpg" width="725" height="12" alt="">
    </div>
    <div id="container007">
        <img src="templates/images/container-07.jpg" width="1" height="569" alt="">
    </div>
    <div id="header"><!-- TemplateBeginEditable name="header" --><img src="templates/images/header.jpg" width="550" height="233" alt=""><!-- TemplateEndEditable --></div>
<div id="search">
        <img src="templates/images/search.jpg" width="175" height="263" alt="">
    </div>
    <div id="navMenu">
        <img src="templates/images/navMenu.jpg" width="550" height="30" alt="">
    </div>
    <div id="featuredHomes">
        <img src="templates/images/featuredHomes.jpg" width="174" height="294" alt="">
    </div>
    <div id="index3-12"><!-- TemplateBeginEditable name="body" --><img src="templates/images/index3_12.jpg" width="376" height="294" alt=""><!-- TemplateEndEditable --></div>
    <div id="index3-13"><!-- TemplateBeginEditable name="testimonials" --><img src="templates/images/index3_13.jpg" width="175" height="216" alt=""><!-- TemplateEndEditable --></div>
<div id="container014">
        <img src="templates/images/container-14.jpg" width="175" height="1" alt="">
    </div>
    <div id="index3-15">
        <img src="templates/images/index3_15.jpg" width="175" height="77" alt="">
    </div>
    <div id="footer">
        <img src="templates/images/footer.jpg" width="775" height="68" alt="">
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
  1. <html>
  2. <head>
  3. <title>index3</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <!-- ImageReady Styles (index3.psd) -->
  6. <style type="text/css">
  7. <!--
  8. #Table_01 {
  9.     position:absolute;
  10.     left:0px;
  11.     top:0px;
  12.     width:775px;
  13.     height:735px;
  14. }
  15. #container {
  16.     position:absolute;
  17.     left:0px;
  18.     top:0px;
  19.     width:25px;
  20.     height:667px;
  21. }
  22. #logo {
  23.     position:absolute;
  24.     left:25px;
  25.     top:0px;
  26.     width:175px;
  27.     height:98px;
  28. }
  29. #container003 {
  30.     position:absolute;
  31.     left:200px;
  32.     top:0px;
  33.     width:254px;
  34.     height:98px;
  35. }
  36. #topNav {
  37.     position:absolute;
  38.     left:454px;
  39.     top:0px;
  40.     width:297px;
  41.     height:98px;
  42. }
  43. #container005 {
  44.     position:absolute;
  45.     left:751px;
  46.     top:0px;
  47.     width:24px;
  48.     height:667px;
  49. }
  50. #index3-06 {
  51.     position:absolute;
  52.     left:25px;
  53.     top:98px;
  54.     width:725px;
  55.     height:12px;
  56. }
  57. #container007 {
  58.     position:absolute;
  59.     left:750px;
  60.     top:98px;
  61.     width:1px;
  62.     height:569px;
  63. }
  64. #header {
  65.     position:absolute;
  66.     left:25px;
  67.     top:110px;
  68.     width:550px;
  69.     height:233px;
  70. }
  71. #search {
  72.     position:absolute;
  73.     left:575px;
  74.     top:110px;
  75.     width:175px;
  76.     height:263px;
  77. }
  78. #navMenu {
  79.     position:absolute;
  80.     left:25px;
  81.     top:343px;
  82.     width:550px;
  83.     height:30px;
  84. }
  85. #featuredHomes {
  86.     position:absolute;
  87.     left:25px;
  88.     top:373px;
  89.     width:174px;
  90.     height:294px;
  91. }
  92. #index3-12 {
  93.     position:absolute;
  94.     left:199px;
  95.     top:373px;
  96.     width:376px;
  97.     height:294px;
  98. }
  99. #index3-13 {
  100.     position:absolute;
  101.     left:575px;
  102.     top:373px;
  103.     width:175px;
  104.     height:216px;
  105. }
  106. #container014 {
  107.     position:absolute;
  108.     left:575px;
  109.     top:589px;
  110.     width:175px;
  111.     height:1px;
  112. }
  113. #index3-15 {
  114.     position:absolute;
  115.     left:575px;
  116.     top:590px;
  117.     width:175px;
  118.     height:77px;
  119. }
  120. #footer {
  121.     position:absolute;
  122.     left:0px;
  123.     top:667px;
  124.     width:775px;
  125.     height:68px;
  126. }
  127. -->
  128. </style>
  129. <!-- End ImageReady Styles -->
  130. </head>
  131. <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
  132. <!-- ImageReady Slices (index3.psd) -->
  133. <div id="Table_01">
  134.     <div id="container">
  135.         <img src="templates/images/container.jpg" width="25" height="667" alt="">
  136.     </div>
  137.     <div id="logo"><img src="templates/images/logo.jpg" width="175" height="98" alt=""></div>
  138. <div id="container003">
  139.         <img src="templates/images/container-03.jpg" width="254" height="98" alt="">
  140.     </div>
  141.     <div id="topNav">
  142.         <img src="templates/images/topNav.jpg" width="297" height="98" alt="">
  143.     </div>
  144.     <div id="container005">
  145.         <img src="templates/images/container-05.jpg" width="24" height="667" alt="">
  146.     </div>
  147.     <div id="index3-06">
  148.         <img src="templates/images/index3_06.jpg" width="725" height="12" alt="">
  149.     </div>
  150.     <div id="container007">
  151.         <img src="templates/images/container-07.jpg" width="1" height="569" alt="">
  152.     </div>
  153.     <div id="header"><!-- TemplateBeginEditable name="header" --><img src="templates/images/header.jpg" width="550" height="233" alt=""><!-- TemplateEndEditable --></div>
  154. <div id="search">
  155.         <img src="templates/images/search.jpg" width="175" height="263" alt="">
  156.     </div>
  157.     <div id="navMenu">
  158.         <img src="templates/images/navMenu.jpg" width="550" height="30" alt="">
  159.     </div>
  160.     <div id="featuredHomes">
  161.         <img src="templates/images/featuredHomes.jpg" width="174" height="294" alt="">
  162.     </div>
  163.     <div id="index3-12"><!-- TemplateBeginEditable name="body" --><img src="templates/images/index3_12.jpg" width="376" height="294" alt=""><!-- TemplateEndEditable --></div>
  164.     <div id="index3-13"><!-- TemplateBeginEditable name="testimonials" --><img src="templates/images/index3_13.jpg" width="175" height="216" alt=""><!-- TemplateEndEditable --></div>
  165. <div id="container014">
  166.         <img src="templates/images/container-14.jpg" width="175" height="1" alt="">
  167.     </div>
  168.     <div id="index3-15">
  169.         <img src="templates/images/index3_15.jpg" width="175" height="77" alt="">
  170.     </div>
  171.     <div id="footer">
  172.         <img src="templates/images/footer.jpg" width="775" height="68" alt="">
  173.     </div>
  174. </div>
  175. <!-- End ImageReady Slices -->
  176. </body>
  177. </html>
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

It's hard to really see what you're talking about without the images, but... are you saying you want the image you're using as the footer to expand when the page expands?

I wouldn't think your page would even be able to expand because you have everything set to fixed widths and absolute positioning.

This might help for starters. Change:
Code: [ Select ]
#Table_01 {
  position:absolute;
  left:0px;
  top:0px;
  width:775px;
  height:735px;
}
  1. #Table_01 {
  2.   position:absolute;
  3.   left:0px;
  4.   top:0px;
  5.   width:775px;
  6.   height:735px;
  7. }

to
Code: [ Select ]
#Table_01 {
  position:relative;
  margin-left:auto;
  margin-right:auto;
  width:775px;
  height:735px;
}
  1. #Table_01 {
  2.   position:relative;
  3.   margin-left:auto;
  4.   margin-right:auto;
  5.   width:775px;
  6.   height:735px;
  7. }

That'll center your page.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

ok so how about the footer because right now to get that accomplished i am using a table within a div so when the body expands the footer will to...
and also sometime the page doesnt wanna scroll how can i fix this too...
like here:
http://www.getflap.com/userProperties_Update.php
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

olm75 wrote:
ok so how about the footer because right now to get that accomplished i am using a table within a div so when the body expands the footer will to...
and also sometime the page doesnt wanna scroll how can i fix this too...
like here:
http://www.getflap.com/userProperties_Update.php

You should just be able to set the footer width to
Code: [ Select ]
width:100%;

It looks like the page isn't scrolling in IE6.. if you just get rid of that "overflow:visible;" that you have in the body, that should fix it.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

i want to make the footer move with the body when it extends downword...
here is my code all cleaned and filtered up i am trying to learn so here we go:
Code: [ Select ]
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>index3</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (index3.psd) -->
<style type="text/css">
<!--

#container {
    position:absolute;
    left:0px;
    top:0px;
    width:775px;
    height:735px;
}

#left_blank {
    position:absolute;
    left:0px;
    top:0px;
    width:25px;
    height:667px;
}

#logo {
    position:absolute;
    left:25px;
    top:0px;
    width:175px;
    height:98px;
}

#leftBlank {
    position:absolute;
    left:200px;
    top:0px;
    width:254px;
    height:98px;
}

#topNav {
    position:absolute;
    left:454px;
    top:0px;
    width:297px;
    height:98px;
}

#rightBlank {
    position:absolute;
    left:751px;
    top:0px;
    width:24px;
    height:667px;
}

#topLineDivider {
    position:absolute;
    left:25px;
    top:98px;
    width:725px;
    height:12px;
}

#header {
    position:absolute;
    left:25px;
    top:110px;
    width:550px;
    height:233px;
}

#search {
    position:absolute;
    left:575px;
    top:110px;
    width:175px;
    height:263px;
}

#navMenu {
    position:absolute;
    left:25px;
    top:343px;
    width:550px;
    height:30px;
}

#featuredHomes {
    position:absolute;
    left:25px;
    top:373px;
    width:174px;
    height:294px;
}

#body {
    position:absolute;
    left:199px;
    top:373px;
    width:376px;
    height:294px;
}

#testimonials {
    position:absolute;
    left:575px;
    top:373px;
    width:175px;
    height:216px;
}

#constantContact {
    position:absolute;
    left:575px;
    top:590px;
    width:175px;
    height:77px;
}

#footer {
    position:absolute;
    left:0px;
    top:667px;
    width:775px;
    height:68px;
}

-->
</style>
<!-- End ImageReady Styles -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (index3.psd) -->
<div id="container">
 <div id="logo"><img src="images/logo.jpg" width="175" height="98" alt=""></div>
<div id="leftBlank"></div>
<div id="topNav">
 <?php require_once('../topNav.php'); ?>
</div>
 <div id="rightBlank"></div>
<div id="topLineDivider">
        <img src="images/index3_06.jpg" width="725" height="12" alt="">
    </div>
    <div id="header"><!-- TemplateBeginEditable name="header" --><img src="images/header.jpg" width="550" height="233" alt=""><!-- TemplateEndEditable --></div>
<div id="search"><!-- TemplateBeginEditable name="search" --><img src="images/search.jpg" width="175" height="263" alt=""><!-- TemplateEndEditable --></div>
<div id="navMenu">
        <img src="images/navMenu.jpg" width="550" height="30" alt="">
 </div>
    <div id="featuredHomes"><!-- TemplateBeginEditable name="featuredHomes" --><img src="images/featuredHomes.jpg" width="174" height="294" alt=""><!-- TemplateEndEditable --></div>
 <div id="body"><!-- TemplateBeginEditable name="body" --><img src="images/index3_12.jpg" width="376" height="294" alt=""><!-- TemplateEndEditable --></div>
    <div id="testimonials"><!-- TemplateBeginEditable name="testimonials" --><img src="images/index3_13.jpg" width="175" height="216" alt=""><!-- TemplateEndEditable --></div>

<div id="constantContact"><!-- TemplateBeginEditable name="constantContact" --><img src="images/index3_15.jpg" width="175" height="77" alt=""><!-- TemplateEndEditable --></div>
<div id="footer">
 <?php require_once('../footerNav.php'); ?>
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
  1. <html>
  2. <head>
  3. <!-- TemplateBeginEditable name="doctitle" -->
  4. <title>index3</title>
  5. <!-- TemplateEndEditable -->
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <!-- ImageReady Styles (index3.psd) -->
  8. <style type="text/css">
  9. <!--
  10. #container {
  11.     position:absolute;
  12.     left:0px;
  13.     top:0px;
  14.     width:775px;
  15.     height:735px;
  16. }
  17. #left_blank {
  18.     position:absolute;
  19.     left:0px;
  20.     top:0px;
  21.     width:25px;
  22.     height:667px;
  23. }
  24. #logo {
  25.     position:absolute;
  26.     left:25px;
  27.     top:0px;
  28.     width:175px;
  29.     height:98px;
  30. }
  31. #leftBlank {
  32.     position:absolute;
  33.     left:200px;
  34.     top:0px;
  35.     width:254px;
  36.     height:98px;
  37. }
  38. #topNav {
  39.     position:absolute;
  40.     left:454px;
  41.     top:0px;
  42.     width:297px;
  43.     height:98px;
  44. }
  45. #rightBlank {
  46.     position:absolute;
  47.     left:751px;
  48.     top:0px;
  49.     width:24px;
  50.     height:667px;
  51. }
  52. #topLineDivider {
  53.     position:absolute;
  54.     left:25px;
  55.     top:98px;
  56.     width:725px;
  57.     height:12px;
  58. }
  59. #header {
  60.     position:absolute;
  61.     left:25px;
  62.     top:110px;
  63.     width:550px;
  64.     height:233px;
  65. }
  66. #search {
  67.     position:absolute;
  68.     left:575px;
  69.     top:110px;
  70.     width:175px;
  71.     height:263px;
  72. }
  73. #navMenu {
  74.     position:absolute;
  75.     left:25px;
  76.     top:343px;
  77.     width:550px;
  78.     height:30px;
  79. }
  80. #featuredHomes {
  81.     position:absolute;
  82.     left:25px;
  83.     top:373px;
  84.     width:174px;
  85.     height:294px;
  86. }
  87. #body {
  88.     position:absolute;
  89.     left:199px;
  90.     top:373px;
  91.     width:376px;
  92.     height:294px;
  93. }
  94. #testimonials {
  95.     position:absolute;
  96.     left:575px;
  97.     top:373px;
  98.     width:175px;
  99.     height:216px;
  100. }
  101. #constantContact {
  102.     position:absolute;
  103.     left:575px;
  104.     top:590px;
  105.     width:175px;
  106.     height:77px;
  107. }
  108. #footer {
  109.     position:absolute;
  110.     left:0px;
  111.     top:667px;
  112.     width:775px;
  113.     height:68px;
  114. }
  115. -->
  116. </style>
  117. <!-- End ImageReady Styles -->
  118. <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
  119. </head>
  120. <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
  121. <!-- ImageReady Slices (index3.psd) -->
  122. <div id="container">
  123.  <div id="logo"><img src="images/logo.jpg" width="175" height="98" alt=""></div>
  124. <div id="leftBlank"></div>
  125. <div id="topNav">
  126.  <?php require_once('../topNav.php'); ?>
  127. </div>
  128.  <div id="rightBlank"></div>
  129. <div id="topLineDivider">
  130.         <img src="images/index3_06.jpg" width="725" height="12" alt="">
  131.     </div>
  132.     <div id="header"><!-- TemplateBeginEditable name="header" --><img src="images/header.jpg" width="550" height="233" alt=""><!-- TemplateEndEditable --></div>
  133. <div id="search"><!-- TemplateBeginEditable name="search" --><img src="images/search.jpg" width="175" height="263" alt=""><!-- TemplateEndEditable --></div>
  134. <div id="navMenu">
  135.         <img src="images/navMenu.jpg" width="550" height="30" alt="">
  136.  </div>
  137.     <div id="featuredHomes"><!-- TemplateBeginEditable name="featuredHomes" --><img src="images/featuredHomes.jpg" width="174" height="294" alt=""><!-- TemplateEndEditable --></div>
  138.  <div id="body"><!-- TemplateBeginEditable name="body" --><img src="images/index3_12.jpg" width="376" height="294" alt=""><!-- TemplateEndEditable --></div>
  139.     <div id="testimonials"><!-- TemplateBeginEditable name="testimonials" --><img src="images/index3_13.jpg" width="175" height="216" alt=""><!-- TemplateEndEditable --></div>
  140. <div id="constantContact"><!-- TemplateBeginEditable name="constantContact" --><img src="images/index3_15.jpg" width="175" height="77" alt=""><!-- TemplateEndEditable --></div>
  141. <div id="footer">
  142.  <?php require_once('../footerNav.php'); ?>
  143.     </div>
  144. </div>
  145. <!-- End ImageReady Slices -->
  146. </body>
  147. </html>
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

i also wanna put the css in its own file do i just copy and paste it in a css file and include and were do i put it....
excuse me for asking alot but i learn pretty fast...
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

an the cenering doesnt work in IE...
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

se im trying to prevent this: http://www.getflap.com/templates/home.dwt.php
from happening
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

copy the css into its own file and call it styles.css or something, and take it out of the HTML. Then link it into your document like this: (the following line goes into the <head> of your HTML).

Code: [ Select ]
<link href="styles.css" rel="stylesheet" type="text/css" />
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

olm75 wrote:
i want to make the footer move with the body when it extends downword...

To get the footer to always be underneath the rest of the divs, you would need to take it out from inside the container div and put it at the bottom. Then put "clear:both;" in the CSS for the footer.

Part of the problem you're having I think is that Imageready gave you all the code as absolutely positioned with fixed sizes. Try experimenting with removing the "position:absolute;" from your divs to see what effect it has.

Here is a great article about positioning with CSS. It helped me out a ton when I was learning this stuff.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

so what you are saying is that i shouldnt use photoshop to do this huh
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

olm75 wrote:
so what you are saying is that i shouldnt use photoshop to do this huh

No, I'm not saying that at all. Photoshop and Imageready are powerful software, and can be great tools to help with building a web page.

All I'm saying is that if you just take whatever code Imageready gives you, you're always gonna have issues trying to get it to do exactly what you want. With a little knowledge of CSS positioning and the box model, though, you could make a few quick changes to the Imageready code and have complete control.
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

do u have any tutorials that may assist me because this is very frustrating working with divs layers...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

http://www.w3schools.com/css/default.asp
  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

thank you i'll read

Post Information

  • Total Posts in this topic: 46 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2016. Ozzu® is a registered trademark of Unmelted, LLC.