8
siguiendo el consejo en The 6 Most Important CSS Techniques You Need To Know, configuro font-size de mi cuerpo en 62.5%, container de div font-size a 1,4 em (ligera variación del artículo). p.tags y p.publishedfont-size está configurado en 1em.¿Cómo no funciona el tamaño de fuente aquí?
Sin embargo, esto no funciona para mí. Tanto el texto normal como el texto en p.tags y p.published tienen el mismo tamaño (16.8 píxeles calculados por Firebug). ¿Puedes explicar por qué mi código no funciona? Estoy probando en Firefox 3.6.3. El sample page mostrado por el autor funciona bien en el mismo navegador.
He reproducido toda la página a continuación: me disculpo por la longitud de la misma, pero pensé que era mejor no omitir nada.
<html>
<head>
<title>Title</title>
<style type="text/css">
body {
font-family: Georgia, "Century Schoolbook", "Times New Roman", Serif;
font-size: 62.5%;
background-color: #2B3856; /* Dark slate blue */
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Helvetica, Tahoma, "Sans Serif";
color: #2B3856;
margin-top: 2px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: #2B3856;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
text-decoration: underline;
}
div#container {
width: 800px;
font-size: 1.4em;
margin: 5px auto;
background-color: #E3E4FA; /* Lavender */
}
#sidebar {
width: 200px;
float: right;
margin: 0px;
padding: 0px;
}
#sidebar div {
padding: 0 5px 5px;
}
#sidebar div.shadowbox { margin-right: 5px; }
#content {
width: 600px;
float: left;
margin: 0px;
padding: 0px;
}
#header {
/*background-color: white;*/
background-color: #2B3856; /* #E3E4FA; Lavender */
margin-bottom: 5px;
height: 100px;
}
#header h1 {
color: #B93B8F; /* Plum */
line-height: 100px;
text-align: center;
font-size: 45px;
}
#description {
color: #7D1B7E /* Dark Orchid */
}
a {
text-decoration: underline;
color: #153E7E;
}
a:hover {
text-decoration: none;
}
div#posts {
padding: 0px;
font-size: 1.2em;
margin: 0px;
}
div#posts div.post {
padding: 5px;
margin: 0px 5px 15px 5px;
}
p.tags, p.published {
font-size: 1em;
}
.shadowbox {
background: repeat 0 0 url('http://www.jawsalgorhythmics.com/images/darkness-100x100-10pct.png');
}
.justifycenter { text-align: center; }
.floatright { float:right; }
.floatleft { float: left; }
.clearright { clear: right; }
.clearleft { clear:left; }
.clearboth { clear: both; }
.halfsidebarwidth { width: 82px; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Odds 'n Ends</h1>
</div> <!-- header -->
<div id="sidebar">
<div class="shadowbox">
<br /><p class="justifycenter"><img width="64" height="64" src="{PortraitURL-64}" /></p>
<div class="floatleft halfsidebarwidth"><a href="/archive" class="archive">Archives</a></div>
<div class="floatleft halfsidebarwidth"><a href="{RSS}" class="rss">RSS</a></div>
<div class="clearboth"></div>
</div>
</div> <!-- sidebar -->
<div id="content">
<div id="posts">
<div class="post shadowbox">
<span class="quote">
"It does not matter how slow you go so long as you do not stop."
<div class="source">Wisdom of <a href="#" title="http://en.wikipedia.org/wiki/Confucius">Confucius</a></div>
</span>
<p class="tags">Tags: #<a href="#" title="http://demo.tumblr.com/tagged/wisdom">wisdom</a> </p>
<p class="published">Posted: Nov 08, 2006 at 2:27 pm
<a href="#" title="http://demo.tumblr.com/post/236/it-does-not-matter-how-slow-you-go-so-long-as-you">Permalink</a> <a href="#" title="http://tumblr.com/xr06k">Short URL</a></p>
</div>
</div> <!-- posts -->
</div> <!-- content -->
<div class="clearboth"></div>
<div id="footer" style="text-align: justify;">
<h1>The footer</h1>
</div>
</div> <!-- container -->
</body>
</html>
Use esto en lugar de publicar una lista completa de HTML: http://jsfiddle.net/JYfqL/. – Kyle
Eso me parece una "técnica" sin sentido y posiblemente incorrecta. Las afirmaciones tales como "Configurando el tamaño de fuente del cuerpo en 62.5%, que establecerá el tamaño de su fuente en 10 píxeles" son incorrectas y no veo cómo hacer que el diseño web sea más fácil o diferente. Simplemente lleva a los problemas que estás teniendo. – RoToRa