6
Soy nuevo en el mundo de la codificación y CSS, y esta es la primera página que he reunido y que me exigió el uso de valores negativos. Recuerdo haber leído en algún lugar hace algún tiempo que lo mejor es evitar el uso de valores negativos. No estoy seguro de por qué ya que no puedo encontrar ese artículo más.¿Es aceptable usar valores negativos en CSS?
Agradecería también sus comentarios sobre el uso de valores negativos en mi código a continuación. He evitado el uso de marcos o similares para poder captar el concepto de qué es la codificación CSS.
También he utilizado una hoja de estilo interna para poder modificar mi código rápidamente en lugar de cambiar entre 2 archivos diferentes. Definitivamente usaría una hoja de estilo externa cuando desarrolle una página del mundo real. En segundo lugar, esta es la primera vez que utilizo una hoja de estilo de reinicio mediante importación.
CÓDIGO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
font-family: Georgia;
font-size: 1em;
}
#wrapper {
/* background-color: #FAEBD7; */
width: 960px;
margin: 0px auto;
}
#innerwrapper {
/* background-color: #CDC0B0; */
overflow: auto;
}
#header {
/* background-color: #8B8378; */
}
#logo {
background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
#topnav {
/* background-color: #8B8970; */
float: right;
margin-top: 50px;
width: 300px;
text-align: right;
}
#status {
/* background-color: #808080; */
width: 100px;
position: relative;
top: -80px;
left: 800px;
text-align: center;
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
display: inline;
}
#separator {
border-bottom: 1px dashed gray;
margin-top: 20px;
}
#content {
/* background-color: #68838B; */
overflow: hidden;
margin-top: 60px;
}
#innercontent {
/* background-color: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="status">login</div>
</div>
</div>
<div id="separator"></div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="rightcol">
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDITAR - Actualizado código según la sugerencia de WDM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
font-family: Georgia;
font-size: 1em;
}
#wrapper {
/* background-color: #FAEBD7; */
width: 960px;
margin: 0px auto;
}
#innerwrapper {
/* background-color: #CDC0B0; */
overflow: auto;
}
#header {
/* background-color: #8B8378; */
}
#logo {
background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
#status {
/* background-color: #808080; */
position: relative;
top: -85px;
left: 780px;
width: 100px;
text-align: center;
}
#topnav {
/* background-color: #8B8970; */
float: right;
width: 300px;
margin-top: -70px;
text-align: right;
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
display: inline;
}
#separator {
border-bottom: 1px dashed gray;
margin-top: 20px;
}
#content {
/* background-color: #68838B; */
overflow: hidden;
margin-top: 60px;
}
#innercontent {
/* background-color: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="status">Logged in</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div id="separator"></div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="rightcol">
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Los valores negativos son perfectamente aceptables, pero los usaría con moderación. Definitivamente son útiles en ciertas situaciones. – wdm
@wdm - ¿Para qué situaciones son útiles? ¿Es aceptable mi uso de un valor negativo? – PeanutsMonkey
Posible duplicado de http://stackoverflow.com/questions/1623163/is-negative-margin-or-padding-invalid-css-according-to-w3c? –