Volver al Foro de Diseño de páginas Web

CSS div alinear texto

  • GhostScript
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Oct 29, 2010
  • Mensajes: 13
  • Status: Offline

Nota Febrero 8th, 2011, 8:43 pm

Hola,

He estado jugando con una plantilla de CSS que recibí de un sitio web. Aquí está el código:
Código: [ 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/">
  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{height:100px; background-color:#827264;margin:0px; padding:0px;}
  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>
  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. -->
  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. -->
  85. <SCRIPT language="Javascript">
  86. <!--
  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)).
  94.   var sWayBackCGI = "http://**************web/20080622194055/";
  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:") == -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.   }
  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.   }
  145. //-->
  146. </SCRIPT>
  148. </html>


Básicamente, donde en el div en la línea 26 donde dice "Pie de imprenta", los valores predeterminados de texto al principio, pero quiero que se alinean con la parte inferior. Si se tratara de tablas iba a escribir "valign = abajo", por lo que estoy buscando el equivalente para el div cabecera.

Gracias
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Febrero 8th, 2011, 8:43 pm

  • Karolis
  • Novice
  • Novice
  • No Avatar
  • Registrado: Sep 30, 2010
  • Mensajes: 18
  • Status: Offline

Nota Febrero 15th, 2011, 12:01 pm

1. La línea 26 es la etiqueta de párrafo utilizado <p>

2. id = "cabecera" (id = "" se puede utilizar con JavaScript y CSS, lo que significa id = "algo" puede hacer nada, porque "id" etiquetas le permiten hacer cambios dentro del archivo HTML, pero tiene que hacer todo dentro de la codificación de CSS archivo u otro archivo en su interior.
Para el uso de etiquetas de identificación dentro del archivo HTML, debe vincular el archivo html con los suyos archivo CSS.

3. Para utilizar sólo un párrafo que no es necesario el uso de etiquetas de identificación, pero si quieres hacer el apartado personalizado (p), debe usar el archivo CSS y etiquetas insertar Identificación.

4. div etiquetas

La etiqueta <div> define una división o una sección en un documento HTML.

La etiqueta <div> a menudo se utiliza para agrupar bloques de elementos para darles formato con los estilos.

Para obtener más información acerca de etiquetas div y otras etiquetas que puede ver en "w3schools" sitio web.

5. También para comprobar su página web para su uso errores: el servicio de validación HTML.

6. Para establecer un vínculo HTML con CSS se puede utilizar el código siguiente: <link rel="stylesheet" type="text/css" href="css/style.css" media="all">

(Style.css es el nombre del archivo)

7. Para hacerlo más fácil, en primer lugar aprender HTML y después de CSS. Obtener algunas experiencias sobre el uso de tablas, p, a, id, y descubrir, cómo elegir DOCTYPE para su sitio web.

8. Dentro del Reino Unido de búsqueda Google para obtener información sobre cómo elegir un tipo de documento y leer la información hasta que se entienda lo que las diferencias entre el tipo de documento de transición, estricto y de marcos.

9. Algunos códigos no son adecuados para algunos códigos de transición, pero no son adecuados para estricto.

10. información útil que usted puede encontrar a través de Google, sino también tratar de no copiar ejemplos de otras personas como esta "por encima" pero en primer lugar tratar de entender cómo los códigos de trabajo y hacer que su página web por su cuenta propia. Por ejemplo, index.html y hacer otro archivo style.css. Enlace su archivo HTML con el archivo CSS (a. crear la carpeta b. hacer index.htm o index.html c. hacer otra carpeta y d. crear el archivo style.css)
Introduzca el código que está abajo y el archivo HTML debería funcionar perfectamente con el archivo CSS:
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">

CSS usando el archivo usted puede fácil trabajar con "id" etiquetas.

11. Para pedir ayuda someones es útil para cargar una imagen de su sitio web ya que para otros es más fácil de entender qué es exactamente lo que desea cambiar.

12. Si usted tiene alguna pregunta más, no dude en preguntar.

Vengo a iluminar, sobre cómo trabajar con HTML y CSS, ya que es muchas maneras de hacer que su sitio web un aspecto diferente y una cosa específica utilizando HTML y CSS.

14. Oh sí, conseguir Macromedia Dream Weaver 8 o más reciente, ya que su software muy bueno para la construcción de sitios web y muy, muy útil para los principiantes y los programadores avanzados web o diseñadores.

¿Alguna pregunta?
  • GhostScript
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Oct 29, 2010
  • Mensajes: 13
  • Status: Offline

Nota Febrero 17th, 2011, 3:49 pm

Gracias Karolis por su respuesta. Por lo que su valor que se encontró una solución que consistía en sustituir p en la línea 26 con otro ejemplo, que es simplemente para el marcado estricta tabla HTML:

Código: [ 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-->
  3. <table id="...">
  5.     <!-- Table header -->
  7.         <thead>
  8.             <tr>
  9.                 <th scope="col" id="...">...</th>
  10.                 ...
  11.             </tr>
  12.         </thead>
  14.     <!-- Table footer -->
  16.         <tfoot>
  17.         <tr>
  18.            <td>...</td>
  19.         </tr>
  20.         </tfoot>
  22.     <!-- Table body -->
  24.         <tbody>
  25.             <tr>
  26.                 <td>...</td>
  27.                 ...
  28.             </tr>
  29.             ...
  30.         </tbody>
  32. </table>


Entonces me puse las tablas dentro de tablas, con los estilos en línea para alinear vertical, algo como esto (línea 21):

Código: [ 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">
  5.     <!-- Table body -->
  7.         <tbody>
  8.             <tr>
  9.                 <td style="align:right; margin:0px; padding:0px;border:none;">
  11. <table id="masthead2">
  15.     <!-- Table body -->
  18. <form><!-- Table body -->
  19. <tbody>
  20. <tr>
  21. <td style="vertical-align: bottom">
  22. ...
  23. </td>
  24. </tr>
  25. </tbody>
  26. </table>
  29.                 </td>
  30.             </tr>
  31.             
  32.         </tbody>
  34. </table>
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8212
  • Loc: USA
  • Status: Offline

Nota Febrero 17th, 2011, 8:29 pm

Usted no tiene que ir a las tablas...sólo tiene que utilizar el siguiente código:
HTML Código: [ 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.  

Todos los he hecho es cambiar los siguientes (Línea 15):
CSS Código: [ Select ]
#masthead{height:100px; background-color:#827264; margin:0px; padding:0px;}
a
CSS Código: [ Select ]
#masthead{background-color:#827264; margin:0px; padding:0px; padding-top:90px;}

Lo que he hecho es eliminar el height: 100px; y lo reemplazó con padding-top: 90px;
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Marzo 3rd, 2011, 7:13 pm

Otra solución, ya que el "tope" del párrafo es sólo una sola línea, usted puede utilizar la línea de altura dentro de sus estilos:

CSS Código: [ 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.  


Me gustaría permanecer lejos de las tablas usando menos que el texto dentro de la tabla se va a tabular los datos, de esa manera a mantener el marcado semántico y mantener los motores de búsqueda feliz.

Bogies solución también es un grande, pero si usted necesita altura perfecta de píxeles, tendrá que saber la altura de la tapa de su texto.
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8212
  • Loc: USA
  • Status: Offline

Nota Marzo 4th, 2011, 1:37 am

mindfullsilence escribió:
Bogies solución también es un grande, pero si usted necesita altura perfecta de píxeles, tendrá que saber la altura de la tapa de su texto.

Eso es "Bogey" :x:x:x
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Marzo 4th, 2011, 6:18 pm

oops lol
Use your words like arrows to shoot toward your goal.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 7 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 91 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC