我是CSS新手,当我尝试使用position: absolute;
定位我的框时遇到问题。我的网页完全由position: absolute;
构建(我知道这不是一个好方法),但我希望我的页脚能够适应我的部分框。
header{
position: absolute;
left: 125px;
width: 1100px;
height: 550px;
background-image: url("../Imagenes/Convertidas/Principal.jpg");
margin-left: auto;
margin-right: auto;
}
aside{
position: absolute;
left: 125px;
top: 560px;
width: 230px;
}
section{
position: absolute;
background-color: #C3FAE7;
width: 560px;
top: 570px;
left: 380px;
border-radius: 10px;
padding: 10px;
box-shadow: #B3ABAB 0px 0px 100px;
}
#asideP{
background-color: #E1E1E1;
border-radius: 5px;
box-shadow: #B3ABAB 5px 5px 10px;
}
#asideM{
position: absolute;
left: 980px;
top: 570px;
width: 230px;
}
#aside{
list-style-type: none;
}
a:link{
text-decoration: none;
color:#7D2C2C;
}
a:visited{
text-decoration: none;
color:#7D2C2C;
}
a:hover{
color: blue;
}
footer{
position: absolute;
left: 250px;
top: 950px;
background-color: #CCDED7;
}
<!DOCTYPE html>
<head>
<title>Turismo Hondarria</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="../CSS/estilo.css"/>
<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'/>
</head>
<body>
<header>
<a href="Index.html"><img src="../Imagenes/Menu/Escudo.gif"/></a>
<nav id="principal">
<ul>
<li id="hondarribia"><a href="Hondarribia.html"><img src="../Imagenes/Menu/hondarribia.png"/></a></li>
<li id="tiempo"><a href="El tiempo.html"><img src="../Imagenes/Menu/Tiempo.jpg"/></a></li>
<li id="contacto"><a href="Contacto.html"><img src="../Imagenes/Menu/Contacto.jpg"/></a></li>
<li id="facebook"><a href="Síguenos.html"><img src="../Imagenes/Menu/Facebook.gif"/></a></li>
<li id="twitter"><a href="Síguenos.html"><img src="../Imagenes/Menu/twitter.png"/></a></li>
</ul>
</nav>
<nav id="barrios">
<ul>
<li id="partevieja"><a href="Parte Vieja.html"><img src="../Imagenes/Menu2/Parte Vieja.jpg"/></a></li>
<li id="lamarina"><a href="La Marina.html"><img src="../Imagenes/Menu2/La Marina.jpg"/></a></li>
<li id="paseobutron"><a href="Paseo Butrón.html"><img src="../Imagenes/Menu2/Paseo Butrón.jpg"/></a></li>
<li id="puerto"><a href="Puerto.html"><img src="../Imagenes/Menu2/EL Puerto.jpg"/></a></li>
<li id="playa"><a href="Playa.html"><img src="../Imagenes/Menu2/La Playa.jpg"/></a></li>
<li id="jaizkibel"><a href="Jaizkibel.html"><img src="../Imagenes/Menu2/Jaizkibel.jpg"/></a></li>
</ul>
</nav>
</header>
<section>
<article>
Fuenterrabía (en euskera y oficialmente Hondarribia) es un municipio del País Vasco, España. Cuenta con una población de 16.464 habitantes según datos del INE para el año 2010 y está situado en el extremo noreste de la provincia de Guipúzcoa, a unos 20 km al este de la capital, San Sebastián, en la desembocadura del río Bidasoa, que hace de frontera natural con Hendaya (Francia).<br><br>
Es una localidad de carácter turístico y residencial. En ella se encuentra el Aeropuerto de San Sebastián, conocido por su ubicación también como Aeropuerto de Fuenterrabía.
</article>
</section>
<aside = id = "asideP">
<ul id="aside">
<li><img src="../Imagenes/Aside/ico_lat_durmir.png"/><a href="donde alojarse.html">Dónde alojarse</a></li>
<li><img src="../Imagenes/Aside/ico_lat_comer.png"/><a href="donde comer.html">Dónde comer</a></li>
<li><img src="../Imagenes/Aside/ico_lat_facer.png"/><a href="que hacer.html">Qué hacer</a></li>
<li><img src="../Imagenes/Aside/ico_lat_visitar.png"/><a href="que visitar.html">Qué visitar</a></li>
<li><img src="../Imagenes/Aside/ico_lat_servizos.png"/><a href="servicios turísticos.html">Servicios turísticos</a></li>
<li><img src="../Imagenes/Aside/ico_lat_marisco.png"/><a href="fiestas y eventos.html">Fiestas y eventos</a></li>
<li><img src="../Imagenes/Aside/ico_lat_galeria.png"/><a href="galería multimedia.html">Galería multimedia</a></li>
<li><img src="../Imagenes/Aside/ico_lat_infoLanzada.png"/><a href="historia.html">Historia</a></li>
<li><img src="../Imagenes/Aside/ico_lat_ligazons.png"/><a href="datos de interes.html">Datos de interés</a></li>
</ul>
</aside>
<aside id = "asideM">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5800.819204160533!2d-1.795668602152656!3d43.36845882996644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1413221754661" width="240" height="200" frameborder="0" style="border:0"></iframe>
</aside>
<footer>
<span>2014. <a href="http://www.hondarribia.org/index.asp?idioma=es">Ayuntamiento de Hondarribia</a> • Oficina de Turismo • Plaza de Armas, 9 • T. 943 64 36 77 • turismo@bidasoa-activa.com</span>
</footer>
</body>
我的部分位于屏幕中间,我放置了所有文字。所以我需要调整我的页脚,以便它与我的部分一起流动。
谢谢。
答案 0 :(得分:0)
你的意思是你喜欢它的宽度是一样的吗?如果是这样,只需在页脚上加一个宽度。
这是在0.01%的情况下构建网站的错误方法。说真的,使用浮点数或弹性框等其他方法。