Jump to content


Photo

vAlign


  • Please log in to reply
5 replies to this topic

#1 Twentyoneth

Twentyoneth
  • Members
  • PipPipPip
  • Advanced Member
  • 118 posts
  • LocationGlasgow, KY

Posted 23 June 2006 - 03:33 AM

I have a page, where I have everything centered and vertically aligned to the top....problem is, with everything vAligned to the top, I still get a gap.. see here: [a href=\"http://12.27.247.70:8000/csite\" target=\"_blank\"]Example[/a]

Any ideas on how to fix this?

It works if I take out this little piece of code:

               </td>
            </tr>

            <tr>
               <td>

It is inbetween the "banner" table and the "content" table...

[NOTE: Everything is aligned in the css. It still wont align correctly when aligned in html.]

#2 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 23 June 2006 - 05:25 AM

I almost hate to suggest this because I was unsuccessful in solving your problem, but I went through you CSS and HTML and retuned it. It wasn’t working quite right. It actually aligned left in FF. That void is still there no matter what I do. Hopefully you’ll be able to solve your problem.

To work on it easy I placed the css in the html...
<html>

   <head>
      <style type='text/css'>
         body {
               background-color: #000000;
               margin-top: 0px;
               margin-bottom: 0px;
              }
         div {
               background-color: #000000;
               text-align: center;
               margin-left: auto;
               margin-right: auto;
              }
         tr {
               vertical-align: top;
              }
         td {
               vertical-align: top;
              }
         .main {
               background-color: #FF0080;
               width: 700px;
               height: 100%;
               border-style: dashed;
               border-top-width: 0px;
               border-bottom-width: 0px;
               border-left-width: 2px;
               border-right-width: 2px;
               border-color: #ffffff;
               padding-top: 0px;
               padding-bottom: 0px;
               padding-left: 10px;
               padding-right: 10px;
               margin-left: auto;
               margin-right: auto;
               margin-bottom: 0px;
              }
         .banner {
               background-color: #000000;
               background-image: url("P90.jpg");
               width: 100%;
               height: 200px;
               border-style: dashed;
               border-top-width: 2px;
               border-bottom-width: 0px;
               border-left-width: 2px;
               border-right-width: 2px;
               border-color: #ffffff;
               padding-left: 0px;
               padding-right: 0px;
               padding-top: 0px;
               padding-bottom: 0px;
              }
         .content {
               width: 100%;
               height: 100%;
               background-color: #000000;
               vertical-align: top;
               margin-top: 0px;
              }
         .spacer {
               width: 100%;
               height: 100%;
               border-style: dashed;
               border-top-width: 2px;
               border-bottom-width: 0px;
               border-left-width: 0px;
               border-right-width: 0px;
               border-color: #ffffff;
              }
         .menu {
               width: 220px;
               height: 100%;
               border-style: dashed;
               border-top-width: 0px;
               border-bottom-width: 2px;
               border-left-width: 2px;
               border-right-width: 2px;
               border-color: #ffffff;
               text-align: center;
              }
         .link {
               width: 220px;
               height: 27px;
               background-image: url("P90.jpg");
               text-align: center;
               vertical-align: top;
              }
         .closepic {
               width: 437px;
               height: 319px;
               background-image: url("P90.jpg");
               filter-: alpha(oopacity=70);
               -m-oz-opacity: .70;
               border-style: dashed;
               border-width: 2px;
               border-top-width: 0px;
               border-color: #ffffff;
               vertical-align: top;
              }
      </style>
   </head>

   <body>
      <div>
         <table class='main' cellpadding='0' cellspacing='0'>
            <tr>

               <td>
                  <table class='banner' cellspacing='0' cellpadding='0'>
                     <tr>
                        <td>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr>
               <td>
                  <table class='content' cellspacing='0' cellpadding='0'>
                     <tr>
                        <td>

<!-- menu -->
<table class='menu' cellpadding='0' cellspacing='0'>
   <tr>
      <td>

         <table class='link'>
            <tr>
               <td>
                  <font style='color: #ffffff;'>
                     Link Here
                  </font>
               </td>
            </tr>
         </table>

      </td>
   </tr>
</table>
<!-- /menu -->

                        </td>
                        <td class='spacer'>
                           l
                        </td>
                        <td>

<!-- closepic -->
<table class='closepic'>
   <tr>
      <td>
      </td>
   </tr>
</table>
<!-- closepic -->

                        </td>
                     </tr>

                  </table>
               </td>
            </tr>
         </table>
      </div>
   </body>

</html>

Actually, I think it’s ridicules because from my perspective, it shouldn’t be doing that.
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#3 Twentyoneth

Twentyoneth
  • Members
  • PipPipPip
  • Advanced Member
  • 118 posts
  • LocationGlasgow, KY

Posted 23 June 2006 - 05:37 AM

I'm trying to make it so I can just edit the css to change anything. Except I don't know how to do a layout without tables.... I've seen someone on here say something about using pure css, and no tables, but I have no idea how I would do that.

#4 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 23 June 2006 - 05:56 AM

I personally would rather use tables. To each his own. I of course have my site set up so I can change the whole layout and what not with only three files. I don't like to update all of my pages to change something small, however I greatly enjoy writing html. So for me, those three files will allow me this! Others of course want to change the whole layout and what not with one file, which would be the advantages to using css to control everything!

The way you have it set up, you will be able to change the colors, size, ect. basic stuff.
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#5 foreverhex

foreverhex
  • Members
  • PipPipPip
  • Advanced Member
  • 91 posts

Posted 12 July 2006 - 01:51 PM

hey, I cant see you your site on my work computer because of its network settings but it sounds like me and you have the same problem. On IE it leaves big ugly open space inbetween a part of your border? I have found out nothing, I use firefox and everything looks wonderful but IE has an weired issue. GRR. Tell me if you come up with anything, and Ill do the same for you.

#6 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 15 July 2006 - 02:37 AM

It might be easier to solve the problem if we could actually see some code - or even view the page on an accessible server.

Could be merely a whitespace problem; could be an improperly coded table (unmatched tags, etc.); could be .. almost anything.
Legend has it that reading the manual never killed anyone.
My site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users