0

buenas noches amigos, verán estoy haciendo un sitio separado en tres secciones principales, el formato se repite en otras 2 páginas.

[Menu]
[Contenido]
[Pie]

Usando un css les di formato a cada sección, sin embargo, al insertar un iframe con una ubicación en mi segunda página, lo que se encuentra en [Contenido] se superpone a lo que tengo en mi [Footer] sin respetar el tamaño variante del [Contenido].

En mi tercera página si está respetando el tamaño de lo que hay en [Contenido], siendo aún más grande que lo que se encuentra en mi segunda página.

Así es como tengo mi CSS:

contenido {
    margin-top:6em;
    margin-left: 10%;
    margin-right: 10%;
    background-color:#5A5A5A;
    color:#FFFFFF;
    padding:1em;
    width:80%;
    border: solid #FFFFFF;
}
pie {
    margin-left: 10%;
    margin-top: 1em;
    width:80%;
    background-color:#840002;
    color:#FFFFFF;
    font-size:1.5em;
    text-align:center;
    border: solid #FFFFFF;
    clear: both;
        }

Espero alguien pueda decirme que es lo que estoy implementando y una forma de corregirlo, sólo es ese pequeño detalle, de ante mano gracias :D

1 respuesta 1

0

Intenta no utilizar float o position:absolute si no quieres que se superponga el contenido.

Te recomiendo utilizar Normalize como base en tu web para el css: https://necolas.github.io/normalize.css/

Prueba con este código y utiliza solo lo que necesites:

section {
    margin:6em auto 0 auto; /* centra section */
    background-color:#5A5A5A;
    color:#FFFFFF;
    padding:1em;
    width:80%;
    border: solid #FFFFFF;
}
		
footer {
    margin:6em auto 0 auto; /* centra section */
    width:80%;
    background-color:#840002;
    color:#FFFFFF;
    font-size:1.5em;
    text-align:center;
    border: solid #FFFFFF;
}
<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Menú</li>
			</ul>
		</nav>
	</header>
	
	<section>
		Contenido
	</section>

	<footer>
		Pie
	</footer>

</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.