Foros del Web » Creando para Internet » CSS »

Error con margin CSS

Estas en el tema de Error con margin CSS en el foro de CSS en Foros del Web. Hola, veréis tengo una web en entorno LAMP, y entre ellos como es lógico hay CSS. La cuestión es que en la clase del pie ...
  #1 (permalink)  
Antiguo 02/08/2008, 09:52
Avatar de Mort20  
Fecha de Ingreso: junio-2008
Ubicación: Roca Casterly
Mensajes: 141
Antigüedad: 15 años, 10 meses
Puntos: 2
Error con margin CSS

Hola, veréis tengo una web en entorno LAMP, y entre ellos como es lógico hay CSS.
La cuestión es que en la clase del pie de página hay un margen - en el título he puesto margin aunque no estoy seguro que realmente esa sea la propiedad conflictiva - por la derecha sobrante. Y realmente no sé de dónde sale.
La cuestión es que a la hora de incluir el div con el id del pie, todas las demás clases (salvo body, claro) están cerradas.
Además, he probado con cosas que no es lo que quiero que aparezca, poniendo <div style="font-size: 50px;">... por ejemplo, y eso funciona, ¡pero no con la imagen de fondo¡ esa imagen sólo me la carga si uso la clase.
Y con la clase ignora todas las instrucciones que le de de tamaño de fuente - añadiendolo en el style.css, claro -.

He probado mil cosas, y ya no sé cual es el error y la verdad, empieza a ser frustrante. A ver si vosotros me podéis ayudar, este es el CSS - es muy extenso, lo sé pero lo pongo entero por si acaso, que nunca se sabe por dónde está el error -, el #footer está al final del todo:

Código:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: 2%;
	background: #FFFFFF url(images/img01.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #080808;
}

input, textarea {
	background: #FFFFFF url(images/img09.gif) repeat-x;
	border: 1px solid #FFFFFF;
	border-top-color: #A3A3A3;
	border-left-color: #D6D6D6;
	font: normal 1em/normal "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #6E6E6E;
}

h1, h2, h3 {
	margin-bottom: 1.5em;
	letter-spacing: -0.05em;
	font-family: Georgia, "Times New Roman", Times, serif;
}

h1, h1 a, h2, h2 a {
	text-decoration: none;
	color: black;
}

h1 a:hover, h2 a:hover {
	text-decoration: underline;
}

h1 {
	font-size: 38px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 16px;
	font-weight: normal;
	color: #939292;
}

p, ul, ol {
	margin-top: 1.5em;
	line-height: 190%;
}

ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-left: 3em;
	margin-right: 3em;
}

a {
	color: #346086;
}

a:hover {
	font-style: italic;
	text-decoration: none;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin-right: 20px;
}

img.right {
	float: right;
	margin-right: 20px;
}

hr {
	display: none;
}

/* Logo */

#logo {
	width: 960px;
        height: 150px;
	margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 10px;
	background: #FFFFFF url('images/img04.jpg') no-repeat;
}

#logo h1 {
	padding-top: 10px;
        text-align: center; 
	font-size: 30px;
	font-style: italic;
        color: #000000;
	font-family: Arial, Fantasy, Cursive, Verdana;
}

#logo a {
	text-decoration: none;
}

/* Menu */

#menu {
	width: 960px;
	height: 62px;
	margin: 0 auto;
	background: #252E3A url(images/img02.jpg) no-repeat;
}

#menu ul {
	margin: 0;
	padding: 21px 0 0 30px;
	list-style: none;
	line-height: normal;
	color: #FEFEFE;
}

#menu li {
	float: left;
	padding: 0 20px 0 22px;
	background: url(images/img03.gif) no-repeat left center;
}

#menu li.first {
	background: none;
}

#actual {
	text-decoration: underline;
}

#menu a {
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}

#menu a:hover {
	font-style: italic;
        color: #F1F1F1;
}

/* Search */

#search {
	float: right;
	width: 227px;
}

#search fieldset {
	border: none;
}

#search input {
	float: left;
}

#search #s {
	width: 136px;
	margin-right: 7px;
	padding: 2px 5px;
}

#search #x {
	background: none;
	border: none;
}

/* Banner */

#banner {
	width: 960px;
	margin: 0 auto;
	padding: 8px 0;
}

/* Page */

#page {
	width: 900px;
	margin: 0 auto;
	padding: 25px 35px 45px 25px;
	background: url(images/img05.gif) no-repeat;
}

/* Content */

#content {
	float: left;
	width: 603px;
	text-align: justify;
	margin: 0 0 20px 0;
}

.post {
}

.post .title {
	margin: 0;
	padding: 0 0px;
	font-style: italic;
}

.post .entry {
	padding: 0 10px;
}

.post p {
	text-indent: 20px;
}

.post .meta {
	height: 47px;
	margin: 20px 0 10px 0;
	padding: 10px 0 0 0;
        text-indent: 0;
	font-style: italic;
	background: url(images/img07.gif) no-repeat;
	line-height: normal;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 253px;
}

#sidebar ul {
	margin: 0; 
	padding: 0;
	list-style: none;
	line-height: normal;
	color: #6E6E6E;
}

#sidebar li {
	margin-bottom: 40px;
	padding: 0 15px 0 20px;
}

#sidebar li ul {
	padding-left: 16px;
	list-style: square;
}

#sidebar li li {
	margin: 0;
	padding: 5px 0;
	border-bottom: 1px solid #E5E5E5;
}

#sidebar li h2 {
	margin-bottom: 15px;
	font-size: 18px;
}

#sidebar a:hover {
	font-style: normal;
	font-weight: bold;
}

/* Calendar */

#sidebar .caltitle {
	text-align: center;
	font-weight: bold;
	font-family: Helvetica;
	font-size: 20px;
	margin: 0 auto;
}

#sidebar #calendar {
	padding: 0;
	background: url(images/img08.jpg) no-repeat;
	color: #1A1A1A;
}

#calendar caption {
	margin: -20px auto 0 auto;
	text-align: center;
	font-weight: bold;
}

#calendar table {
	margin: 0 auto;
	caption-side: bottom;
}

#calendar thead th {
	width: 31px;
	height: 40px;
	font-weight: bold;
	color: #FFFFFF;
}

#calendar tbody td {
	width: 31px;
	height: 31px;
	text-align: center;
	color: #3E3E3E;
}

   #calendar .today {
	font-weight: 800;
	color: #FF0000;
    }

#calendar tfoot td {
	padding-top: 20px;
	font-weight: bold;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	clear: both;
	width: 960px;
	height: 60px;
	background: url(images/img05.gif) no-repeat;
}


#footer p {
	margin: 0;
	line-height: normal;
	color: #B4B4B4;
}

#footer a {
	color: #B4B4B4;
}

#footer .legal {
	float: left;
}

#footer .credit {
	float: right;
}

#footer ul {
	margin-top: 5px;
	text-align: center;
	list-style: none;
}

#footer ul li {
	display: inline;
	padding: 0px 5px 0px 5px;
}
Aquí no hay un margin: 0 auto; en la clase, aunque al principio estaba, pero realmente, como si no estubiera, hace lo mismo. Es impresionante...
El código HTML como es una web modulada lo tengo muy dividido, así que os paso uno con el mínimo texto generado. Lo pongo en otro post, que se me queja de muchos carácteres.

Gracias por adelantado!
  #2 (permalink)  
Antiguo 02/08/2008, 09:54
Avatar de Mort20  
Fecha de Ingreso: junio-2008
Ubicación: Roca Casterly
Mensajes: 141
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Error con margin CSS

Como decía arriba, con el HTML eran demasiados carácteres, aquí os lo pongo a ver si os puede ayudar:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : FronzenAge
Description: A two-column, fixed-width template suitable for business sites and blogs.
Version    : 1.0
Released   : 20071108

Adapted by: The Penguin, 2008
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />

      <title>La Conspiraci&oacute;n de los Ping&uuml;inos</title>

   <meta name="keywords" content="Pinguino, Conspiracion, Mundopinguino, Mundo Pinguino" />
   <meta name="description" content="La Conspiracion de los pinguinos, by The Penguin" />

   <base href="http://www.mundopinguino.net/blog2/public/" />
      <link href="templates/frozenage/style.css" rel="stylesheet" type="text/css" media="screen" />
   <link href="templates/frozenage/phpbbcode.css" rel="stylesheet" type="text/css" media="screen" />
     <link href="templates/frozenage/comment_style.css" rel="stylesheet" type="text/css" media="screen" />
  
<!--[if IE]>
<style type="text/css">
#sidebar #calendar {
	background-position: 0px 20px;
}
</style>
<![endif]-->

</head>
<body>
   <div id="menu">
	<ul>

		<li class="first" ><a href="http://www.mundopinguino.net/blog/index/" accesskey="1" title="">Home</a></li>
		<li ><a href="http://www.mundopinguino.net/blog/index/aboutme" accesskey="2" title="">Sobre Mi</a></li>
		<li id="actual"><a href="http://www.mundopinguino.net/blog/index/conspiracy" accesskey="3" title="">La Conspiraci&oacute;n</a></li>
		<li ><a href="http://www.mundopinguino.net/blog/index/portfolio" accesskey="4" title="">Portfolio</a></li>
		<!--<li ><a href="http://www.mundopinguino.net/rss" accesskey="5" title="">RSS</a></li>
	--></ul>
	<div id="search">

		<form method="get" action="">
			<fieldset>
			   <input id="s" type="text" name="s" value="Desactivado" />
			   <!-- <input id="x" type="image" name="imageField" src="images/img10.jpg" /> -->
                           <input type="hidden" name="sitesearch" value="www.mundopinguino.net" />
			</fieldset>
		</form>
	</div>
  </div>

  <hr />
  <div id="logo">
       <h1>La Conspiraci&oacute;n de los Ping&uuml;inos</h1>
  </div>
<!-- start page -->
  <div id="page">
	<!-- start content -->
	<div id="content">

          <div class="post">
            <h2 class="title">Brevemente la primera entrada</h2>
	    <div class="entry">
	  	<p>Las entradas saldr&aacute;n tambi&eacute;n publicadas en la p&aacute;gina principal.</p>
	    </div>
	   </div>

	   	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
	                  <h1 class="caltitle">Calendario</h1>
		<ul>
			<li id="calendar">
				<table summary="Calendar">

					<caption>Agosto 2008</caption>
					<thead>
						<tr>
							<th abbr="Monday" scope="col" title="Lunes">L</th>
							<th abbr="Tuesday" scope="col" title="Martes">M</th>
							<th abbr="Wednesday" scope="col" title="Mi&eacute;rcoles">X</th>
							<th abbr="Thursday" scope="col" title="Jueves">J</th>

							<th abbr="Friday" scope="col" title="Viernes">V</th>
							<th abbr="Saturday" scope="col" title="S&aacute;bado">S</th>
							<th abbr="Sunday" scope="col" title="Domingo">D</th>
						</tr>
					</thead>
					<tfoot>
						<tr>

							<td class="pad">&nbsp;</td>
						</tr>
					</tfoot> 
					<tbody>
						<tr>
							<td colspan="4" class="pad">&nbsp;</td>
					   	  <td>1</td>
<td class="today" title="Hoy">2</td>
<td>3</td>

						</tr> 
			                                                               <tr><td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
					        </tr>                                                <tr><td>11</td>

<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
					        </tr>                                                <tr><td>18</td>
<td>19</td>

<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
					        </tr>                                                <tr><td>25</td>
<td>26</td>
<td>27</td>

<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="0">&nbsp;</td>					        </tr> 
					</tbody>
				</table>
			</li>
			<li>

				<h2>Especimenes</h2>
				<ul>
                                   <li><a href="http://www.mundowdg.com">El Mundo de Wardog</a></li>
            			   <li><a href="http://medusalandia.blogspot.com">Medusalandia</a></li>
                                   <li><a href="http://elarboldelinvierno.blogspot.com">El &Aacute;rbol del Invierno</a></li>
				   <li><a href="http://faustival.wordpress.com/category/uncategorized/">Hollowfausto Cannibal</a></li>

				</ul>
			</li>
                        <li>
                                <h2>Links de inter&eacute;s</h2>
                                <ul>
                                   <li><a href="http://www.nacionrolera.org">NacionRolera</a></li>
                                   <li><a href="http://www.vagos.es">Vagos</a></li>

                                   <li><a href="http://www.doperoms.com">DopeRoms</a></li>
                                   <li><a href="http://www.mozilla-europe.org">Get FireFox</a></li>
                                   <li><a href="http://www.linux.com">Linux</a></li>
                                   <li><a href="http://www.fsf.org">Free Software Fundation</a></li>
                                   <li><a href="http://www.youtube.com">YouTube</a></li>
                                </ul>

                        </li>
                        <li>
                                <h2>Utilidades</h2>
                                <ul>
                                  <li><a href="http://www.php.net">Learn PHP</a></li>
            			  <li><a href="http://www.w3schools.com">Tutoriales varios sobre la Web</a></li>
            			  <li><a href="http://www.w3c.org">W3C</a></li>

             			  <li><a href="http://www.frecsstemplates.com">CSS Templates</a></li>
                                </ul>
                        </li>
		</ul>
	</div>
	<!-- end sidebar -->
  </div>

  <!-- end page -->

<!-- start footer -->
  <div id="footer">
	<p class="legal">Theme creado por NodeThirtyThree. Licencia Creative Commons 2.5</p>
	<p class="credit">Adapted by <a href="mailto:[email protected]">The Penguin</a></p><br />
      <ul> 
       <li><a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:80px;height:15px" src="templates/frozenage/images/valid-xhtml10.gif" alt="Valid XHTML 1.0 Transitional" /></a></li>
       <li><a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"><img style="border:0;width:80px;height:15px" src="templates/frozenage/images/valid-css.gif" alt="Valid CSS" /></a></li>
<!--       <li><a href="http://feedvalidator.org/check.cgi?url=http://mundopinguino.net/rss2.php"><img style="border:0;width:80px;height:15px" src="templates/frozenage/images/valid-rss.gif" alt="Valid RSS" title="Validate my RSS feed" /></a></li> -->
     </ul>  
  </div>

<!-- end footer -->
</body>
</html>
Tengo esta misma página colgada en internet - bueno, el blog entero - no lo pongo directamente por si acaso se considera spam o vulnera alguna norma de la página. Si lo queréis me lo decís y ya os lo pongo.

De nuevo, gracias.
  #3 (permalink)  
Antiguo 02/08/2008, 10:13
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 16 años, 10 meses
Puntos: 59
Respuesta: Error con margin CSS

Pon la URL para ver el comportamiento que genera.

Saludos
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #4 (permalink)  
Antiguo 02/08/2008, 10:19
Avatar de Mort20  
Fecha de Ingreso: junio-2008
Ubicación: Roca Casterly
Mensajes: 141
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Error con margin CSS

La URL con el HTML que he puesto:
http://www.mundopinguino.net/blog/index/conspiracy

Como véis, abajo del todo en el pie hay un margen respecto al menú y la imagen con el título.
  #5 (permalink)  
Antiguo 02/08/2008, 15:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Error con margin CSS

Pues imagino que se trata de que al contenido general le pones un ancho de 960px y al pie de 870px.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 02/08/2008, 18:04
Avatar de Mort20  
Fecha de Ingreso: junio-2008
Ubicación: Roca Casterly
Mensajes: 141
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Error con margin CSS

Oh, no si estaba bien en un principio, sólo que entre tantas pruebas al final ya no sabía ni qué versión he puesto aquí xD
Pero no, eso no lo soluciona aunque sin duda es un fallo.

¿Algún otro fallo?
  #7 (permalink)  
Antiguo 03/08/2008, 03:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Error con margin CSS

Perdona pero no tengo ni idea de a qué te refieres. ¿Cuál es exactamente tu problema?
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 03/08/2008, 04:01
Avatar de Mort20  
Fecha de Ingreso: junio-2008
Ubicación: Roca Casterly
Mensajes: 141
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Error con margin CSS

Bueno, da igual, ya está solucionado :)
Gracias.

Al final el error es deprimente, que era una chorrada con el <base>..
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:43.