Ayuda posicionamiento del footer

tOWERR #1 Mar '13

Hola buenas, estoy haciendo una estructura y a la hora de poner el footer se me pone entre medias del section, os dejo una imagen de como queda y os pongo el codigo de como lo tengo:

imagen

codigo css

@font-face{
font-family: ubuntuRegular;
src: url(fuentes/Ubuntu-R.ttf) format('truetype');
}

@font-face{
font-family: ubuntuBold;
src: url(fuentes/Ubuntu-B.ttf) format('truetype');
}

@font-face{
font-family: ubuntuItalic;
src: url(fuentes/Ubuntu-I.ttf) format('truetype');
}

@font-face{
font-family: ubuntuBoldItalic;
src: url(fuentes/Ubuntu-BI.ttf) format('truetype');
}

/* Estilos basicos */

h1,h2,h3,h4,h5{
font-family: ubuntuBold;
}

h6{font-family: ubuntuRegular;}

header{
	width:90%;
	height:30%;
	border:1px #000000 solid;
	margin:auto;
	background:#900;
	-moz-border-radius:20px 20px 0px 0px; /* Firefox */
	-webkit-border-radius:20px 20px 0px 0px; /* Safari y Chrome */
}

nav{
	width:90%;
	margin:auto;
}

section{
	width:90%;
	margin:auto;
	height:60%;
	margin-top:0.2%;
}

#movies_not_download{
	width: 33%;
	border: 1px #000000 solid;
	float: left;
	background-color: #ffffff;
	border-radius:5px;
	-moz-border-radius:5px; /* Firefox */
	-webkit-border-radius:5px; /* Safari y Chrome */
}

#movies_not_watch{
	width: 33%;
	border: 1px #000000 solid;
	float: left;
	margin-left: 0.3%;
	background-color: #ffffff;
	border-radius:5px;
	-moz-border-radius:5px; /* Firefox */
	-webkit-border-radius:5px; /* Safari y Chrome */
}

#movies_watch{
	width: 33%;
	border: 1px #000000 solid;
	float: right;
	background-color: #ffffff;
	border-radius:5px;
	-moz-border-radius:5px; /* Firefox */
	-webkit-border-radius:5px; /* Safari y Chrome */
}

footer{
	width:90%;
	margin:auto;
	border:1px #000000 solid;
	border-radius:0px 0px 20px 20px;
	-moz-border-radius:0px 0px 20px 20px; /* Firefox */
	-webkit-border-radius:0px 0px 20px 20px; /* Safari y Chrome */
	margin-top:1%;
	
}

codigo html

<!DOCTYPE html>
<html lang="es">
<?php
	include 'page/conexion.php';
?>
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el t&iacute;tulo del documento</title>
<link rel="stylesheet" href="css/estilo.css">

<!-- Hoja de estilos menu -->
<link href="css/menu_assets/styles.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<!-- inicio header -->
<header>
    <img src="img/claqueta.png" width="200px" height="140px" style="float: right;" />
    <h1 style="margin-left:0.5%;">Videoteca</h1>
    <h2 style="margin-left:1%;">aaronuX</h2>
</header>
<!-- fin header -->

<!-- inicio nav -->
<nav id="cssmenu">
	<ul>
		<li><a href='index.php'><span>Home</span></a></li>
		<li class='has-sub '><a href='#'><span>Películas</span></a>
		<ul>
			<li class='has-sub '><a href='page/addMovie.php'><span>Añadir película</span></a>
				<ul>
					<li><a href='#'><span>Sub Product</span></a></li>
			        <li><a href='#'><span>Sub Product</span></a></li>
			    </ul>
			</li>
		</ul>
		</li>
	</ul>
</nav>
<!-- fin nav -->

<!-- inicio section -->
<section>

<article id="movies_not_download">
<h3 style="text-align:center;">Películas por descargar</h3>
				<table width="100%" align="center">
				<?php
					$local = mysql_query("SELECT * FROM Movies WHERE downloaded = true");
					$valores = mysql_num_rows($local);
					if($valores != 0){
						while($key = mysql_fetch_array($local)){
							echo "<tr>";
								echo "<td style='font-family:ubuntuRegular;padding-left:2px;'><img src='img/icon_download.png' /></td>";
								echo "<td style='font-family:ubuntuRegular;'>".$key['title']."</td>";
								echo "<td style='font-family:ubuntuRegular;'><a href='page/showMovie.php?id=".$key['id']."'>Ver</a></td>";
							echo "</tr>";
						}
					}else{
						echo "<tr>";
						echo "<td colspan='2' style='text-align:center;'>";
						echo "<p style='font-family:ubuntuRegular;'>No hay ninguna.</p>";
						echo "</td>";
					}

			?>
			</table>
</article>

<article id="movies_not_watch">
<h3 style="text-align:center;">Películas por ver</h3>
				<table width="100%" align="center">
				<?php
					$local = mysql_query("SELECT * FROM Movies WHERE watched = true");
					$valores = mysql_num_rows($local);
					if($valores != 0){
						while($key = mysql_fetch_array($local)){
							echo "<tr>";
								echo "<td style='font-family:ubuntuRegular;padding-left:2px;'><img src='img/icon_no.png' /></td>";
								echo "<td style='font-family:ubuntuRegular;'>".$key['title']."</td>";
								echo "<td style='font-family:ubuntuRegular;'><a href='page/showMovie.php?id=".$key['id']."'>Ver</a></td>";
							echo "</tr>";
						}
					}else{
						echo "<tr>";
						echo "<td colspan='3' style='text-align:center;'>";
						echo "<p style='font-family:ubuntuRegular;'>No hay ninguna.</p>";
						echo "</td>";
					}

			?>
			</table>
</article>

<article id="movies_watch">
<h3 style="text-align:center;">Películas vistas</h3>
				<table width="100%" align="center">
				<?php
					$local = mysql_query("SELECT * FROM Movies WHERE downloaded = true");
					$valores = mysql_num_rows($local);
					if($valores != 0){
						while($key = mysql_fetch_array($local)){
							echo "<tr>";
								echo "<td style='font-family:ubuntuRegular;padding-left:2px;'><img src='img/icon_view.png' /></td>";
								echo "<td style='font-family:ubuntuRegular;'>".$key['title']."</td>";
								echo "<td style='font-family:ubuntuRegular;'><a href='page/showMovie.php?id=".$key['id']."'>Ver</a></td>";
							echo "</tr>";
						}
					}else{
						echo "<tr>";
						echo "<td colspan='2' style='text-align:center;'>";
						echo "<p style='font-family:ubuntuRegular;'>No hay ninguna.</p>";
						echo "</td>";
					}

			?>
			</table>
</article>

</section>
<!-- fin section -->

<!-- inicio footer -->
<footer>
	<p style="text-align:center;">Design by aaronuX (2013)</p>
</footer>
<!-- fin footer -->

</body>
</html>

Espero que alguien me ayude, un saludo.

tOWERR #2 Mar '13

Otra cosa que me pasa que le doy un height al header o ha cualquier sección y no me coge el height que le asigno se queda como en auto, ¿Porqué me pasa eso también?

alterego #3 Mar '13

#1 Prueba poniendo al footer clear: both;
Al usar floats, los siguientes elementos, contenedores, en este caso footer, también se vera afectado por el float, para romper, terminar con el float hay que añadirle clear:both

Estas dando altura en %, prueba a darselo en px o em y si que te funcionará.
Ten encuenta que el ancho del documento si esta definido, pero el height no lo está, si pones 50% no tiene ninguna referencia para aplicar ese porcentaje.

Tienes dos opciones, o meterlo todo dentro de contendor y aplicar a este una altura, o definir la altura del body y html, no la hace de forma automática:

html, body {
   height: 100%;
   width: 100%;
}

1 respuesta

tOWERR #4 Mar '13

#3 Gracias, era eso. ¿Que hace la propiedad clear?
Y sobre lo del alto de lo que pregunto en el post #2 ¿Porqué no coge el que le indico?

1 respuesta

eXtreM3 #5 Mar '13

#4 el clear both limpia flotabilidades que hayas creado anteriormente. Como es el caso de tus 3 capas flotantes, le metes el clear both y ya se "resetea" la estructura para seguir ^^

Por cierto, no mezcles php por ahí por mitad del html !! Se aconseja ponerlo todo en un archivo aparte, o en su defecto arriba del todo, antes de cualquier código html, y ya luego debajo llamas a lo que tengas que llamar.

Suerte!

1 respuesta

tOWERR #6 Mar '13

#5 Gracias por la ayuda. Sobre lo del PHP arriba del todo, ¿Te refieres a meterlo en funciones y despues llamarlas en mitad del codigo HTML?

1 respuesta

eXtreM3 #7 Mar '13

#6 sí, sobre todo intentar separar el código php de la vista (html) todo lo que puedas. Es decir, hay momentos forzosos en los que tienes que meter php, para pintar datos.

Todo lo que sea parte del servidor (consultas a la base de datos, algoritmos, funciones...) intenta hacerlo en tu archivo php aparte.

Y otra cosa, para los estilos usa el css que para eso está. No pongas un chorizo con style="blablalba", a Google no le gusta.

!

2 respuestas

tOWERR #8 Mar '13

#7 Ok, gracias por los consejos.

Wasd #9 Mar '13

#7 Entonces a Google no le gusta que modifiques estilos del DOM mediante JavaScript?

1 respuesta

eXtreM3 #10 Mar '13

#9 creo que en ese caso no importa, añadir o quitar clases con jquery no afecta.

Usuarios habituales