Jump to content

Archived

This topic is now archived and is closed to further replies.

Twentyoneth

vAlign

Recommended Posts

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:

[code]               </td>
            </tr>

            <tr>
               <td>[/code]

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.]

Share this post


Link to post
Share on other sites
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...
[code]<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>[/code]

Actually, I think it’s ridicules because from my perspective, it shouldn’t be doing that.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.