使用“position:absolute”部分使页脚进入流程

时间:2014-10-14 07:52:10

标签: html css html5 css-position

我是CSS新手,当我尝试使用position: absolute;定位我的框时遇到问题。我的网页完全由position: absolute;构建(我知道这不是一个好方法),但我希望我的页脚能够适应我的部分框。

CSS

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;
}

HTML

<!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>

我的部分位于屏幕中间,我放置了所有文字。所以我需要调整我的页脚,以便它与我的部分一起流动。

谢谢。

1 个答案:

答案 0 :(得分:0)

你的意思是你喜欢它的宽度是一样的吗?如果是这样,只需在页脚上加一个宽度。

这是在0.01%的情况下构建网站的错误方法。说真的,使用浮点数或弹性框等其他方法。