CSS div text align

  • GhostScript
  • Newbie
  • Newbie
  • GhostScript
  • Posts: 13

Post 3+ Months Ago

Hello,

I have been messing around with a CSS template I got from a website. Here is the code:
Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//*****//DTD HTML 4.01//EN" "**************/TR/html4/strict.dtd">
<html>
<head>
<BASE HREF="http://layouts.***********.org/100_percent_Layouts/layout/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta name="keywords" content="CSS, CSS templates, CSS layouts, website templates, website layouts, layouts, templates">
<meta name="description" content="Simplify your CSS designs with these easy Pure CSS Layouts">
<title>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</title>
    <link rel="SHORTCUT ICON" href="http://************"/>
    <link rel="stylesheet" type="text/css" href="********">
    <link rel="stylesheet" type="text/css" href="********">
<style type="text/css">
img{border:none;}
#masthead{height:100px; background-color:#827264;margin:0px; padding:0px;}
.main{height:300px; background-color:#CFCD9F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#secondary{height:300px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#secondaryFull{height:50px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#footer{height:50px; background-color:#828164; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
.googleAds{text-align:center;}
</style>
</head>
<body>
<div id="doc3" class="yui-t1">
    <div id="hd">
        <p id="masthead">MASTHEAD</p>
    </div>
    <div id="bd">
        <div id="yui-main">
            <div class="yui-b"> <div class="yui-gc">
            <div class="yui-u first">
                <p class="main">MAIN COLUMN 1</p>
            </div>
            <div class="yui-u">
                <p class="main">MAIN COLUMN 2</p>
            </div>
        </div> </div>
        </div>
        <div class="yui-b">
<p id="secondary">SECONDARY</p>
        </div>
    </div>
    <div id="ft">
<p id="footer">FOOTER</p>
        <hr>
        <div style="text-align:center;">
        <br>
            <script type="text/javascript"><!--
                google_ad_client = "pub-0665582725199412";
                /* 728x90, created 4/2/08 */
                google_ad_slot = "1917311706";
                google_ad_width = 728;
                google_ad_height = 90;
                //-->
                </script>
                <script type="text/javascript" src="***************"></script>
        <br>
            <h1>Layout 29</h1>
            <h3>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</h3>
            <div style="text-align:justify;">These CSS Layouts offer full Grade-A browser support. That means that these CSS Layouts will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS Layouts have been optimized to give you the best possible search engine results. Use these CSS Layouts anywhere you wish. They are perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layouts to optimize your Web Development workflow. These CSS Layouts are done in Pure CSS, not tables.</div>
            <br><br>
            <a href="layout29.zip"><img src="http://**********/images/go-down.jpg" alt="download this layout" width="32" height="32" style="vertical-align:bottom;"> <strong>Download This Layout</strong> (.zip) </a>
        </div>
        <div style="text-align:right;">
            <a href="*************/check?uri=referer"><img src="*************/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
        </div>
    </div>
</div>
<script src="http://***********/" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-484872-3";
urchinTracker();
</script>
</body>

<!-- SOME SCRIPT SRC'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->


<!-- SOME LINK HREF'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->


<SCRIPT language="Javascript">
<!--

// FILE ARCHIVED ON 20080622194055 AND RETRIEVED FROM THE
// INTERNET ARCHIVE ON 20110209031039.
// JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
// ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
// SECTION 108(a)(3)).

  var sWayBackCGI = "http://**************web/20080622194055/";

  function xResolveUrl(url) {
   var image = new Image();
   image.src = url;
   return image.src;
  }
  function xLateUrl(aCollection, sProp) {
   var i = 0;
   for(i = 0; i < aCollection.length; i++) {
     var url = aCollection[i][sProp];     if (typeof(url) == "string") {
     if (url.indexOf("mailto:") == -1 &&
       url.indexOf("javascript:") == -1
       && url.length > 0) {
      if(url.indexOf("http") != 0) {
        url = xResolveUrl(url);
      }
      url = url.replace('.wstub.************.org','');
      aCollection[i][sProp] = sWayBackCGI + url;
     }
     }
   }
  }

  xLateUrl(document.getElementsByTagName("IMG"),"src");
  xLateUrl(document.getElementsByTagName("A"),"href");
  xLateUrl(document.getElementsByTagName("AREA"),"href");
  xLateUrl(document.getElementsByTagName("OBJECT"),"codebase");
  xLateUrl(document.getElementsByTagName("OBJECT"),"data");
  xLateUrl(document.getElementsByTagName("APPLET"),"codebase");
  xLateUrl(document.getElementsByTagName("APPLET"),"archive");
  xLateUrl(document.getElementsByTagName("EMBED"),"src");
  xLateUrl(document.getElementsByTagName("BODY"),"background");
  xLateUrl(document.getElementsByTagName("TD"),"background");
  xLateUrl(document.getElementsByTagName("INPUT"),"src");
  var forms = document.getElementsByTagName("FORM");
  if (forms) {
    var j = 0;
    for (j = 0; j < forms.length; j++) {
       f = forms[j];
       if (typeof(f.action) == "string") {
         if(typeof(f.method) == "string") {
           if(typeof(f.method) != "post") {
            f.action = sWayBackCGI + f.action;
           }
         }
       }
    }
  }


//-->
</SCRIPT>

</html>
  1. <!DOCTYPE HTML PUBLIC "-//*****//DTD HTML 4.01//EN" "**************/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <BASE HREF="http://layouts.***********.org/100_percent_Layouts/layout/">
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
  6. <meta name="keywords" content="CSS, CSS templates, CSS layouts, website templates, website layouts, layouts, templates">
  7. <meta name="description" content="Simplify your CSS designs with these easy Pure CSS Layouts">
  8. <title>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</title>
  9.     <link rel="SHORTCUT ICON" href="http://************"/>
  10.     <link rel="stylesheet" type="text/css" href="********">
  11.     <link rel="stylesheet" type="text/css" href="********">
  12. <style type="text/css">
  13. img{border:none;}
  14. #masthead{height:100px; background-color:#827264;margin:0px; padding:0px;}
  15. .main{height:300px; background-color:#CFCD9F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  16. #secondary{height:300px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  17. #secondaryFull{height:50px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  18. #footer{height:50px; background-color:#828164; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  19. .googleAds{text-align:center;}
  20. </style>
  21. </head>
  22. <body>
  23. <div id="doc3" class="yui-t1">
  24.     <div id="hd">
  25.         <p id="masthead">MASTHEAD</p>
  26.     </div>
  27.     <div id="bd">
  28.         <div id="yui-main">
  29.             <div class="yui-b"> <div class="yui-gc">
  30.             <div class="yui-u first">
  31.                 <p class="main">MAIN COLUMN 1</p>
  32.             </div>
  33.             <div class="yui-u">
  34.                 <p class="main">MAIN COLUMN 2</p>
  35.             </div>
  36.         </div> </div>
  37.         </div>
  38.         <div class="yui-b">
  39. <p id="secondary">SECONDARY</p>
  40.         </div>
  41.     </div>
  42.     <div id="ft">
  43. <p id="footer">FOOTER</p>
  44.         <hr>
  45.         <div style="text-align:center;">
  46.         <br>
  47.             <script type="text/javascript"><!--
  48.                 google_ad_client = "pub-0665582725199412";
  49.                 /* 728x90, created 4/2/08 */
  50.                 google_ad_slot = "1917311706";
  51.                 google_ad_width = 728;
  52.                 google_ad_height = 90;
  53.                 //-->
  54.                 </script>
  55.                 <script type="text/javascript" src="***************"></script>
  56.         <br>
  57.             <h1>Layout 29</h1>
  58.             <h3>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</h3>
  59.             <div style="text-align:justify;">These CSS Layouts offer full Grade-A browser support. That means that these CSS Layouts will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS Layouts have been optimized to give you the best possible search engine results. Use these CSS Layouts anywhere you wish. They are perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layouts to optimize your Web Development workflow. These CSS Layouts are done in Pure CSS, not tables.</div>
  60.             <br><br>
  61.             <a href="layout29.zip"><img src="http://**********/images/go-down.jpg" alt="download this layout" width="32" height="32" style="vertical-align:bottom;"> <strong>Download This Layout</strong> (.zip) </a>
  62.         </div>
  63.         <div style="text-align:right;">
  64.             <a href="*************/check?uri=referer"><img src="*************/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
  65.         </div>
  66.     </div>
  67. </div>
  68. <script src="http://***********/" type="text/javascript">
  69. </script>
  70. <script type="text/javascript">
  71. _uacct = "UA-484872-3";
  72. urchinTracker();
  73. </script>
  74. </body>
  75. <!-- SOME SCRIPT SRC'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
  76. OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->
  77. <!-- SOME LINK HREF'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
  78. OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->
  79. <SCRIPT language="Javascript">
  80. <!--
  81. // FILE ARCHIVED ON 20080622194055 AND RETRIEVED FROM THE
  82. // INTERNET ARCHIVE ON 20110209031039.
  83. // JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
  84. // ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
  85. // SECTION 108(a)(3)).
  86.   var sWayBackCGI = "http://**************web/20080622194055/";
  87.   function xResolveUrl(url) {
  88.    var image = new Image();
  89.    image.src = url;
  90.    return image.src;
  91.   }
  92.   function xLateUrl(aCollection, sProp) {
  93.    var i = 0;
  94.    for(i = 0; i < aCollection.length; i++) {
  95.      var url = aCollection[i][sProp];     if (typeof(url) == "string") {
  96.      if (url.indexOf("mailto:") == -1 &&
  97.        url.indexOf("javascript:") == -1
  98.        && url.length > 0) {
  99.       if(url.indexOf("http") != 0) {
  100.         url = xResolveUrl(url);
  101.       }
  102.       url = url.replace('.wstub.************.org','');
  103.       aCollection[i][sProp] = sWayBackCGI + url;
  104.      }
  105.      }
  106.    }
  107.   }
  108.   xLateUrl(document.getElementsByTagName("IMG"),"src");
  109.   xLateUrl(document.getElementsByTagName("A"),"href");
  110.   xLateUrl(document.getElementsByTagName("AREA"),"href");
  111.   xLateUrl(document.getElementsByTagName("OBJECT"),"codebase");
  112.   xLateUrl(document.getElementsByTagName("OBJECT"),"data");
  113.   xLateUrl(document.getElementsByTagName("APPLET"),"codebase");
  114.   xLateUrl(document.getElementsByTagName("APPLET"),"archive");
  115.   xLateUrl(document.getElementsByTagName("EMBED"),"src");
  116.   xLateUrl(document.getElementsByTagName("BODY"),"background");
  117.   xLateUrl(document.getElementsByTagName("TD"),"background");
  118.   xLateUrl(document.getElementsByTagName("INPUT"),"src");
  119.   var forms = document.getElementsByTagName("FORM");
  120.   if (forms) {
  121.     var j = 0;
  122.     for (j = 0; j < forms.length; j++) {
  123.        f = forms[j];
  124.        if (typeof(f.action) == "string") {
  125.          if(typeof(f.method) == "string") {
  126.            if(typeof(f.method) != "post") {
  127.             f.action = sWayBackCGI + f.action;
  128.            }
  129.          }
  130.        }
  131.     }
  132.   }
  133. //-->
  134. </SCRIPT>
  135. </html>


Basically where in the div at line 26 where it says "MASTHEAD", the text defaults to the top, but I want it to align with the bottom. If it were tables I would write "valign=bottom", so I am looking for the equivalent for the masthead div.

Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Karolis
  • Novice
  • Novice
  • Karolis
  • Posts: 19

Post 3+ Months Ago

1. Line 26 is the paragraph tag used <p>

2. id="masthead" (id="" can be used with JavaScript and CSS, that means id="something" can do anything, because 'id' tag let you to make changes inside HTML file but you must do all coding inside CSS file or inside other file.
To use id tag inside html file, you must link html file with yours css file.

3. To use just a paragraph you don't need use id tag but if you want to make custom paragraph (p) you must use css file and insert id tag.

4. div tag

The <div> tag defines a division or a section in an HTML document.

The <div> tag is often used to group block-elements to format them with styles.

For more information about div tag and other tags you can find on 'w3schools' website.

5. Also to check your web page for errors use: HTML validation service.

6. To link html with css you can use this code: <link rel="stylesheet" href="css/style.css" type="text/css" media="all">

(style.css is the name of file)

7. To make it easier, first learn some html and after css. Get some experiences on how to use tables, p, a, id, and find out, how to choose DOCTYPE for your web site.

8. Inside google uk search for information about 'Choosing a DOCTYPE' and read information till you will understand what differences between DOCTYPE transitional, strict and Frameset.

9. Some codes are not suitable for transitional but some codes are not suitable for strict.

10. Many useful information you can find using google but also try don't copy other people examples like this one 'above' but first try to understand how codes work and make your webpage by your self. For example index.html and make another file style.css. Link your HTML file with css file (a. create folder b. make index.htm or index.html c. make another folder and d. create style.css file)
Insert the code which is bellow and your html file should work perfect with your css file:
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

using css file you can easy work with 'id' tags.

11. For asking someones help is useful to upload a picture of your website because for others is easier to understand what exactly you want to change.

12. If you have any more questions, feel free to ask us.

I just tried to illuminate you, on how to work with HTML and CSS, because is many different ways to make your web site look different and one specific thing using HTML and CSS.

14. Oh yea, get Macromedia Dream Weaver 8 or newer, because it's very good software for building websites and very, very useful for beginners and advanced web programmers or designers.

Any questions?
  • GhostScript
  • Newbie
  • Newbie
  • GhostScript
  • Posts: 13

Post 3+ Months Ago

Thank you Karolis for your reply. For what its worth I did find a solution which was to replace p at line 26 with another example, which is simply for strict html table markup:

Code: [ Select ]
<!-- Table markup-->

<table id="...">

    <!-- Table header -->

        <thead>
            <tr>
                <th scope="col" id="...">...</th>
                ...
            </tr>
        </thead>

    <!-- Table footer -->

        <tfoot>
        <tr>
           <td>...</td>
        </tr>
        </tfoot>

    <!-- Table body -->

        <tbody>
            <tr>
                <td>...</td>
                ...
            </tr>
            ...
        </tbody>

</table>
  1. <!-- Table markup-->
  2. <table id="...">
  3.     <!-- Table header -->
  4.         <thead>
  5.             <tr>
  6.                 <th scope="col" id="...">...</th>
  7.                 ...
  8.             </tr>
  9.         </thead>
  10.     <!-- Table footer -->
  11.         <tfoot>
  12.         <tr>
  13.            <td>...</td>
  14.         </tr>
  15.         </tfoot>
  16.     <!-- Table body -->
  17.         <tbody>
  18.             <tr>
  19.                 <td>...</td>
  20.                 ...
  21.             </tr>
  22.             ...
  23.         </tbody>
  24. </table>


Then I put tables within tables, with styles inline for vertical align, something like this ( line 21 ):

Code: [ Select ]
<table id="masthead">



    <!-- Table body -->

        <tbody>
            <tr>
                <td style="align:right; margin:0px; padding:0px;border:none;">

<table id="masthead2">



    <!-- Table body -->


<form><!-- Table body -->
<tbody>
<tr>
<td style="vertical-align: bottom">
...
</td>
</tr>
</tbody>
</table>


                </td>
            </tr>
            
        </tbody>

</table>
  1. <table id="masthead">
  2.     <!-- Table body -->
  3.         <tbody>
  4.             <tr>
  5.                 <td style="align:right; margin:0px; padding:0px;border:none;">
  6. <table id="masthead2">
  7.     <!-- Table body -->
  8. <form><!-- Table body -->
  9. <tbody>
  10. <tr>
  11. <td style="vertical-align: bottom">
  12. ...
  13. </td>
  14. </tr>
  15. </tbody>
  16. </table>
  17.                 </td>
  18.             </tr>
  19.             
  20.         </tbody>
  21. </table>
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

You don't have to go to tables... just use the following code:
HTML Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//*****//DTD HTML 4.01//EN" "**************/TR/html4/strict.dtd">
<html>
<head>
<BASE HREF="http://layouts.***********.org/100_percent_Layouts/layout/">
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta name="keywords" content="CSS, CSS templates, CSS layouts, website templates, website layouts, layouts, templates">
<meta name="description" content="Simplify your CSS designs with these easy Pure CSS Layouts">
<title>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</title>
   <link rel="SHORTCUT ICON" href="http://************"/>
   <link rel="stylesheet" type="text/css" href="********">
   <link rel="stylesheet" type="text/css" href="********">
<style type="text/css">
img{border:none;}
#masthead{background-color:#827264;margin:0px; padding:0px;padding-top:90px;}
.main{height:300px; background-color:#CFCD9F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#secondary{height:300px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#secondaryFull{height:50px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
#footer{height:50px; background-color:#828164; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
.googleAds{text-align:center;}
</style>
</head>
<body>
<div id="doc3" class="yui-t1">
   <div id="hd">
      <p id="masthead">MASTHEAD</p>
   </div>
   <div id="bd">
      <div id="yui-main">
         <div class="yui-b"> <div class="yui-gc">
         <div class="yui-u first">
            <p class="main">MAIN COLUMN 1</p>
         </div>
         <div class="yui-u">
            <p class="main">MAIN COLUMN 2</p>
         </div>
      </div> </div>
      </div>
      <div class="yui-b">
<p id="secondary">SECONDARY</p>
      </div>
   </div>
   <div id="ft">
<p id="footer">FOOTER</p>
      <hr>
      <div style="text-align:center;">
      <br>
         <script type="text/javascript"><!--
            google_ad_client = "pub-0665582725199412";
            /* 728x90, created 4/2/08 */
            google_ad_slot = "1917311706";
            google_ad_width = 728;
            google_ad_height = 90;
            //-->
            </script>
            <script type="text/javascript" src="***************"></script>
      <br>
         <h1>Layout 29</h1>
         <h3>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</h3>
         <div style="text-align:justify;">These CSS Layouts offer full Grade-A browser support. That means that these CSS Layouts will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS Layouts have been optimized to give you the best possible search engine results. Use these CSS Layouts anywhere you wish. They are perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layouts to optimize your Web Development workflow.  These CSS Layouts are done in Pure CSS, not tables.</div>
         <br><br>
         <a href="layout29.zip"><img src="http://**********/images/go-down.jpg" alt="download this layout" width="32" height="32" style="vertical-align:bottom;"> <strong>Download This Layout</strong> (.zip) </a>
      </div>
      <div style="text-align:right;">
         <a href="*************/check?uri=referer"><img src="*************/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
      </div>
   </div>
</div>
<script src="http://***********/" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-484872-3";
urchinTracker();
</script>
</body>
 
<!-- SOME SCRIPT SRC'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->
 
 
<!-- SOME LINK HREF'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->
 
 
<SCRIPT language="Javascript">
<!--
 
// FILE ARCHIVED ON 20080622194055 AND RETRIEVED FROM THE
// INTERNET ARCHIVE ON 20110209031039.
// JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
// ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
// SECTION 108(a)(3)).
 
  var sWayBackCGI = "http://**************web/20080622194055/";
 
  function xResolveUrl(url) {
     var image = new Image();
     image.src = url;
     return image.src;
  }
  function xLateUrl(aCollection, sProp) {
     var i = 0;
     for(i = 0; i < aCollection.length; i++) {
        var url = aCollection[i][sProp];         if (typeof(url) == "string") {
         if (url.indexOf("mailto:") == -1 &&
            url.indexOf("javascript&#058;") == -1
            && url.length > 0) {
           if(url.indexOf("http") != 0) {
               url = xResolveUrl(url);
           }
           url = url.replace('.wstub.************.org','');
           aCollection[i][sProp] = sWayBackCGI + url;
        }
        }
     }
  }
 
  xLateUrl(document.getElementsByTagName("IMG"),"src");
  xLateUrl(document.getElementsByTagName("A"),"href");
  xLateUrl(document.getElementsByTagName("AREA"),"href");
  xLateUrl(document.getElementsByTagName("OBJECT"),"codebase");
  xLateUrl(document.getElementsByTagName("OBJECT"),"data");
  xLateUrl(document.getElementsByTagName("APPLET"),"codebase");
  xLateUrl(document.getElementsByTagName("APPLET"),"archive");
  xLateUrl(document.getElementsByTagName("EMBED"),"src");
  xLateUrl(document.getElementsByTagName("BODY"),"background");
  xLateUrl(document.getElementsByTagName("TD"),"background");
  xLateUrl(document.getElementsByTagName("INPUT"),"src");
  var forms = document.getElementsByTagName("FORM");
  if (forms) {
      var j = 0;
      for (j = 0; j < forms.length; j++) {
             f = forms[j];
             if (typeof(f.action)  == "string") {
                if(typeof(f.method)  == "string") {
                    if(typeof(f.method) != "post") {
                       f.action = sWayBackCGI + f.action;
                    }
                 }
             }
       }
   }
 
 
//-->
</SCRIPT>
 
</html>
 
  1. <!DOCTYPE HTML PUBLIC "-//*****//DTD HTML 4.01//EN" "**************/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <BASE HREF="http://layouts.***********.org/100_percent_Layouts/layout/">
  5.  
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
  7. <meta name="keywords" content="CSS, CSS templates, CSS layouts, website templates, website layouts, layouts, templates">
  8. <meta name="description" content="Simplify your CSS designs with these easy Pure CSS Layouts">
  9. <title>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</title>
  10.    <link rel="SHORTCUT ICON" href="http://************"/>
  11.    <link rel="stylesheet" type="text/css" href="********">
  12.    <link rel="stylesheet" type="text/css" href="********">
  13. <style type="text/css">
  14. img{border:none;}
  15. #masthead{background-color:#827264;margin:0px; padding:0px;padding-top:90px;}
  16. .main{height:300px; background-color:#CFCD9F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  17. #secondary{height:300px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  18. #secondaryFull{height:50px; background-color:#CFB59F; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  19. #footer{height:50px; background-color:#828164; border-top:#FFFFFF 2px solid;margin:0px; padding:0px;}
  20. .googleAds{text-align:center;}
  21. </style>
  22. </head>
  23. <body>
  24. <div id="doc3" class="yui-t1">
  25.    <div id="hd">
  26.       <p id="masthead">MASTHEAD</p>
  27.    </div>
  28.    <div id="bd">
  29.       <div id="yui-main">
  30.          <div class="yui-b"> <div class="yui-gc">
  31.          <div class="yui-u first">
  32.             <p class="main">MAIN COLUMN 1</p>
  33.          </div>
  34.          <div class="yui-u">
  35.             <p class="main">MAIN COLUMN 2</p>
  36.          </div>
  37.       </div> </div>
  38.       </div>
  39.       <div class="yui-b">
  40. <p id="secondary">SECONDARY</p>
  41.       </div>
  42.    </div>
  43.    <div id="ft">
  44. <p id="footer">FOOTER</p>
  45.       <hr>
  46.       <div style="text-align:center;">
  47.       <br>
  48.          <script type="text/javascript"><!--
  49.             google_ad_client = "pub-0665582725199412";
  50.             /* 728x90, created 4/2/08 */
  51.             google_ad_slot = "1917311706";
  52.             google_ad_width = 728;
  53.             google_ad_height = 90;
  54.             //-->
  55.             </script>
  56.             <script type="text/javascript" src="***************"></script>
  57.       <br>
  58.          <h1>Layout 29</h1>
  59.          <h3>100 Percent Width, 160 Pixel Left Column, 2/3 x 1/3 Main Column.</h3>
  60.          <div style="text-align:justify;">These CSS Layouts offer full Grade-A browser support. That means that these CSS Layouts will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS Layouts have been optimized to give you the best possible search engine results. Use these CSS Layouts anywhere you wish. They are perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layouts to optimize your Web Development workflow.  These CSS Layouts are done in Pure CSS, not tables.</div>
  61.          <br><br>
  62.          <a href="layout29.zip"><img src="http://**********/images/go-down.jpg" alt="download this layout" width="32" height="32" style="vertical-align:bottom;"> <strong>Download This Layout</strong> (.zip) </a>
  63.       </div>
  64.       <div style="text-align:right;">
  65.          <a href="*************/check?uri=referer"><img src="*************/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
  66.       </div>
  67.    </div>
  68. </div>
  69. <script src="http://***********/" type="text/javascript">
  70. </script>
  71. <script type="text/javascript">
  72. _uacct = "UA-484872-3";
  73. urchinTracker();
  74. </script>
  75. </body>
  76.  
  77. <!-- SOME SCRIPT SRC'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
  78. OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->
  79.  
  80.  
  81. <!-- SOME LINK HREF'S ON THIS PAGE HAVE BEEN REWRITTEN BY THE WAYBACK MACHINE
  82. OF THE INTERNET ARCHIVE IN ORDER TO PRESERVE THE TEMPORAL INTEGRITY OF THE SESSION. -->
  83.  
  84.  
  85. <SCRIPT language="Javascript">
  86. <!--
  87.  
  88. // FILE ARCHIVED ON 20080622194055 AND RETRIEVED FROM THE
  89. // INTERNET ARCHIVE ON 20110209031039.
  90. // JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
  91. // ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
  92. // SECTION 108(a)(3)).
  93.  
  94.   var sWayBackCGI = "http://**************web/20080622194055/";
  95.  
  96.   function xResolveUrl(url) {
  97.      var image = new Image();
  98.      image.src = url;
  99.      return image.src;
  100.   }
  101.   function xLateUrl(aCollection, sProp) {
  102.      var i = 0;
  103.      for(i = 0; i < aCollection.length; i++) {
  104.         var url = aCollection[i][sProp];         if (typeof(url) == "string") {
  105.          if (url.indexOf("mailto:") == -1 &&
  106.             url.indexOf("javascript&#058;") == -1
  107.             && url.length > 0) {
  108.            if(url.indexOf("http") != 0) {
  109.                url = xResolveUrl(url);
  110.            }
  111.            url = url.replace('.wstub.************.org','');
  112.            aCollection[i][sProp] = sWayBackCGI + url;
  113.         }
  114.         }
  115.      }
  116.   }
  117.  
  118.   xLateUrl(document.getElementsByTagName("IMG"),"src");
  119.   xLateUrl(document.getElementsByTagName("A"),"href");
  120.   xLateUrl(document.getElementsByTagName("AREA"),"href");
  121.   xLateUrl(document.getElementsByTagName("OBJECT"),"codebase");
  122.   xLateUrl(document.getElementsByTagName("OBJECT"),"data");
  123.   xLateUrl(document.getElementsByTagName("APPLET"),"codebase");
  124.   xLateUrl(document.getElementsByTagName("APPLET"),"archive");
  125.   xLateUrl(document.getElementsByTagName("EMBED"),"src");
  126.   xLateUrl(document.getElementsByTagName("BODY"),"background");
  127.   xLateUrl(document.getElementsByTagName("TD"),"background");
  128.   xLateUrl(document.getElementsByTagName("INPUT"),"src");
  129.   var forms = document.getElementsByTagName("FORM");
  130.   if (forms) {
  131.       var j = 0;
  132.       for (j = 0; j < forms.length; j++) {
  133.              f = forms[j];
  134.              if (typeof(f.action)  == "string") {
  135.                 if(typeof(f.method)  == "string") {
  136.                     if(typeof(f.method) != "post") {
  137.                        f.action = sWayBackCGI + f.action;
  138.                     }
  139.                  }
  140.              }
  141.        }
  142.    }
  143.  
  144.  
  145. //-->
  146. </SCRIPT>
  147.  
  148. </html>
  149.  

All I've done is change the following (Line 15):
CSS Code: [ Select ]
#masthead{height:100px; background-color:#827264; margin:0px; padding:0px;}
to
CSS Code: [ Select ]
#masthead{background-color:#827264; margin:0px; padding:0px; padding-top:90px;}

What I've done is remove the height:100px; and replaced it with padding-top:90px;
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Another solution, since the "masthead" paragraph is only a single line, you can use line-height within your styles:

CSS Code: [ Select ]
#masthead {
height: 100px;
line-height: 100px; /* match with your "height" property */
vertical-align: bottom;
}
 
 
  1. #masthead {
  2. height: 100px;
  3. line-height: 100px; /* match with your "height" property */
  4. vertical-align: bottom;
  5. }
  6.  
  7.  


I would stay away from using tables unless the text within the table is going to be tabular data, that way you keep your markup semantical and keep the search engines happy.

Bogies solution is also a great one, but if you need pixel perfect height, you'll need to know the cap height of your text.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

mindfullsilence wrote:
Bogies solution is also a great one, but if you need pixel perfect height, you'll need to know the cap height of your text.

That's "Bogey" :x :x :x
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

lol oops

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: yasar123 and 88 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
 
 

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