Pie de página con CSS y XHTML.

PabloManuel · #1 (**permalink**) 18/10/2011, 04:42

Hola, tengo que hacer un pie de página estándard para todas mis páginas. Actualmente lo tengo hecho con tablas y html a mano, es decir, no leo información de una BD.

Os imaginaréis el engorro de las tablas, por eso quiero hacerlo con CSS y cuando ya lo tenga listo crear una tabla en la BD para que mis mismos clientes puedan modificar los enlaces a su gusto.

El diseño es este:

[URL=http://imageshack.us/photo/my-images/810/dibujozae.jpg/][IMG]http://img810.imageshack.us/img810/6116/dibujozae.jpg[/IMG][/URL]

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

Como véis muy sencillo, cuatro grupos, la primera línea de distinto color y poco más.

He estado intentando que el código sea lo más resumido posible y que evidentemente el diseño esté totalmente en la correspondiente hoja de estilo. De esta manera cuando quiera generar el pie a través de una consulta SQL y un bucle me será bastante más sencillo.

La duda es la siguiente: He intentado hacer dicho pie con una sola lista <ul> pero no he encontrado la manera de que la primera línea tenga un formato distinto ni tampoco hacer los 4 grupos.

Lo he conseguido hacer parecido, pero con cuadro <DIV> con el Float en Left y dentro de cada <DIV> hacer una lista independiente.

¿no se puede hacer más sencillo y con una sola lista?

PabloManuel · #2 (**permalink**) 18/10/2011, 04:43

¿Por qué no sale la imagen?
En la vista previa si me sale....

PabloManuel · #3 (**permalink**) 18/10/2011, 05:33

Esto es lo que he conseguido a falta de los enlaces, se ve igual que con las tablas pero creo que son demasiadas líneas ¿Lo sabéis hacer más sencillo?:

Código HTML:

Ver original<div id="pieindex">
            <div>
                Nuestra Compañía<br/><br/>
                <ul>
                    <li>Como Localizarnos</li>
                    <li>Contacta con nosotros</li>
                    <li>Aviso Legal</li>
                    <li>¿Quién somos?</li>
                </ul>
            </div>
            
            <div>
                Nuestros Fabricantes<br/><br/>
                <ul>
                    <li>Giant</li>
                    <li>Cannondale</li>
                </ul>
            </div>
 
            <div>
                Secciones de la Web<br/><br/>
                <ul>
                    <li>Documentos en PDF</li>
                    <li>Sección de Noticias</li>
                    <li>Encuestas de interés</li>
                </ul>
            
            </div>
            <div>
                Otras Secciones<br/><br/>
                <ul>
                    <li>Boletines Informativos</li>
                    <li>Promociones Vigentes</li>
                </ul>
            
            </div>                      
        </div>

Y aquí los estilos:

Código CSS:

Ver original#pieindex{
    padding: 5px 0px 5px 0px;
}
 
#pieindex div{
    font: normal normal bold 12px Verdana, Geneva, Tahoma, sans-serif;
    float: left;
    width: 237.50px;
    color: #6B0303;
}
 
#pieindex ul{
    font: normal normal normal 9.5px Verdana, Geneva, Tahoma, sans-serif;
    list-style: none;
    color: #000000;
}

¿Habría manera de quitar los <br/> sin tener que crear otro <DIV>?

PabloManuel · #4 (**permalink**) 18/10/2011, 09:14

Creo que me he equivocado al publicar el tema ¿Algún moderador me lo puede mover al foro de CSS?

abimaelrc · #5 (**permalink**) 18/10/2011, 09:53

Podrías hacer algo así

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style>
*{ margin: 0; padding: 0; }
 
ul{ list-style: none; }
 
#footer{ border-top: 1px solid #ff0000; }
#footer li{
    float: left;
    padding: 10px;
}
#footer li li{
    clear: both;
    padding: 0;
}
</style>
 
</head>
<body>
 
<div id="footer">
    <ul>
        <li>
            <h2>Foo</h2>
            <ul>
                <li>Foo1</li>
                <li>Foo2</li>
                <li>Foo3</li>
                <li>Foo4</li>
            </ul>
        </li>
        <li>
            <h2>Bar</h2>
            <ul>
                <li>Bar1</li>
                <li>Bar2</li>
                <li>Bar3</li>
                <li>Bar4</li>
            </ul>
        </li>
        <li>
            <h2>Baz</h2>
            <ul>
                <li>Baz1</li>
                <li>Baz2</li>
                <li>Baz3</li>
                <li>Baz4</li>
            </ul>
        </li>
    </ul>
</div>
 
</body>
</html>

PabloManuel · #6 (**permalink**) 18/10/2011, 10:13

Claro.... de lujo, unas listas dentro de otras. Bien pensado, tengo dudas con respecto a formatear.

¿Se puede crear un identificador así?

#identificador ul ul{
...
}

¿Funciona con todos los navegadores?

abimaelrc · #7 (**permalink**) 18/10/2011, 10:34

Te recomiendo esta lectura http://librosweb.es/css/capitulo2/se...r_descendiente

PabloManuel · #8 (**permalink**) 18/10/2011, 11:22

Gracias por el enlace, lo guardaré en mi carpeta.

Bueno, ya lo tengo listo, al final me le liado aninando listas y he preferido dejarlo con los DIV. Esta es la hoja de estilo final:

Código CSS:

Ver original#pie {
    width: 100%;
    margin: auto ;
    text-align: center;
    height: 200px;
    background-image: url('images/Pie.jpg');
    position: relative ;
}
 
#pieindex{
    margin: 15px 0px 5px 0px;
    padding: 15px 0px 0px 0px;    
    width: 950px;
    text-align: left;
    margin: auto ;
}
 
#pieindex div{
    font: normal normal bold 12px Verdana, Geneva, Tahoma, sans-serif;
    float: left;
    width: 227.5px;
    color: #6B0303;
    padding: 20px 0px 0px 10px;
}
 
#pieindex ul{
    list-style: none;
}
 
#pieindex ul a{
    font: normal normal normal 9.5px Verdana, Geneva, Tahoma, sans-serif;
    list-style: none;
    color: #000000;
    text-decoration: none;
}
 
#pieindex ul a:hover {
    color: #6B0303;
}
 
#pieindex p{
    background-image: url('Images/pieindex.gif');
    height: 60px;
    display: block;
    clear: both;
    color: #C0FF2C;
    vertical-align: text-bottom;
}
 
#pieindex span{
    background-image: url('Images/pieindex_superior.gif');
    height: 8px;
    display: block;
    clear: both;
}

Y este el código XHTML Estricto:

Código HTML:

Ver original<div id="pie">
        <div id="pieindex">
 
            <span></span>
 
            <div>
                Nuestra Compañía<br/><br/>
                <ul>
                    <li><a href="localizacion.asp" >Como Localizarnos</a></li>
                    <li><a href="contactar.asp" >Contacta con nosotros</a></li>
                    <li><a href="avisolegal.asp" >Aviso Legal</a></li>
                    <li><a href="quequeremos.asp" >¿Quién somos?</a></li>
                </ul>
            </div>
            
            <div>
                Nuestros Fabricantes<br/><br/>
                <ul>
                    <li><a href="http://www.giant-bicycles.com" >Giant</a></li>
                    <li><a href="http://www.cannondale.com" >Cannondale</a></li>
                </ul>
            </div>
 
            <div>
                Secciones de la Web<br/><br/>
                <ul>
                    <li><a href="articulos.asp" >Documentos en PDF</a></li>
                    <li><a href="noticias.asp" >Sección de Noticias</a></li>
                    <li><a href="encuestas.asp" >Encuestas de interés</a></li>
                </ul>
            
            </div>
            <div>
                Otras Secciones<br/><br/>
                <ul>
                    <li><a href="boletines.asp" >Boletines Informativos</a></li>
                    <li><a href="promociones.asp" >Promociones Vigentes</a></li>
                </ul>
            
            </div>
            
            <p>
            Copyright 2011 --Nombre Comercial-- (Razón Social, S.L.) CIF: B21000000 | Admin
            </p>    
                                
        </div>
</div>

Y este es el resultado:

como veis, hay un fallo, no consigo que la línea "Copyright 2011 --Nombre Comercial-- (Razón Social, S.L.) CIF: B21000000 | Admin" aparezca en el pie.

El párrafo tiene la propiedad vertical-align: text-bottom; ¿Por qué no me aparece abajo?

abimaelrc · #9 (**permalink**) 20/10/2011, 02:41

Podrias hacer algo así

Código HTML:

Ver original<style>
#pie {
    width: 100%;
    margin: auto ;
    text-align: center;
    height: 200px;
    /* background-image: url('images/Pie.jpg'); */
    position: relative ;
}
 
#pieindex{
    margin: 15px 0px 5px 0px;
    padding: 15px 0px 0px 0px;    
    width: 950px;
    text-align: left;
    margin: auto ;
}
 
#pieindex div.links{
    font: normal normal bold 12px Verdana, Geneva, Tahoma, sans-serif;
    float: left;
    width: 227.5px;
    color: #6B0303;
    padding: 20px 0px 0px 10px;
}
 
#pieindex ul{
    list-style: none;
}
 
#pieindex ul a{
    font: normal normal normal 9.5px Verdana, Geneva, Tahoma, sans-serif;
    list-style: none;
    color: #000000;
    text-decoration: none;
}
 
#pieindex ul a:hover {
    color: #6B0303;
}
 
#pieindex div.pieindex_superior{
    /* background-image: url('Images/pieindex_superior.gif');*/
    height: 8px;
    display: block;
    clear: both;
}
 
#pieindex div.copyright{
    /* background-image: url('Images/pieindex.gif'); */
    height: 60px;
    clear: both;
    color: #C0FF2C;
    display: table;
    border: 1px solid #000000;
    width: 100%;
}
#pieindex div.copyright div{
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
}
</style>
<div id="pie">
    <div id="pieindex">
 
        <div class="pieindex_superior"></div>
 
        <div class="links">
            Nuestra Compañía<br/><br/>
            <ul>
                <li><a href="localizacion.asp" >Como Localizarnos</a></li>
                <li><a href="contactar.asp" >Contacta con nosotros</a></li>
                <li><a href="avisolegal.asp" >Aviso Legal</a></li>
                <li><a href="quequeremos.asp" >¿Quién somos?</a></li>
            </ul>
        </div>
        
        <div class="links">
            Nuestros Fabricantes<br/><br/>
            <ul>
                <li><a href="http://www.giant-bicycles.com" >Giant</a></li>
                <li><a href="http://www.cannondale.com" >Cannondale</a></li>
            </ul>
        </div>
 
        <div class="links">
            Secciones de la Web<br/><br/>
            <ul>
                <li><a href="articulos.asp" >Documentos en PDF</a></li>
                <li><a href="noticias.asp" >Sección de Noticias</a></li>
                <li><a href="encuestas.asp" >Encuestas de interés</a></li>
            </ul>
        
        </div>
        <div class="links">
            Otras Secciones<br/><br/>
            <ul>
                <li><a href="boletines.asp" >Boletines Informativos</a></li>
                <li><a href="promociones.asp" >Promociones Vigentes</a></li>
            </ul>
        
        </div>
 
        <div class="copyright">
            <div>Copyright 2011 --Nombre Comercial-- (Razón Social, S.L.) CIF: B21000000 | Admin</div>
        </div>
    </div>
</div>

La explicación la puedes ver en http://www.csslab.cl/2009/05/18/ente...ertical-align/

Tecna · #10 (**permalink**) 20/10/2011, 07:33

Buenas,

una estructura más sencilla sería una lista de glosario, es decir:

Código HTML:

Ver original<dl>
    <dt>Empresa</dt>
    <dd>Localizar</dd>
    <dd>Contactar</dd>
    <dd>Aviso</dd>
 
    <dt>Fabricantes</dt>
    <dd>Uno</dd>
    <dd>Otro</dd>
 
    <dt>Otras secciones</dt>
    <dd>Una</dd>
    <dd>Otra</dd>
 
</dl>

se pueden añadir enlaces y poner ids para dar estilos diferentes a cada elemento. Los divs están de más. Y para no usar los <br/> hay que usar elementos en bloque, es decir meter el texto dentro de un <p> por ejemplo o como un <li> más.

PabloManuel · #11 (**permalink**) 20/10/2011, 12:35

Ya veo, esto último está genial, siempre hay una manera más sencilla... siempre.

Yo acabo de pasar de tablas a CSS y veo que uso demasiadas etiqueta y a cada etiqueta un identificador o clase.

No acabo de pillarle el truco y de hacerlo todo más sencillo.

Voy a probar con estas dos soluciones y os comento.