Ayuda CSS

[neodani]

Buenas compañeros,

Estoy un poco al borde de los nervios, no consigo que me salga bien alineado el contenido de mi pie de pagina.

Os explico, tengo una capa que es el pie de pagina que es de largo lo que ocupa la pantalla.
Pues bien, dentro de ella quiero que aparezca 3 lineas horizontales,
la primera contendrá botones de las secciones.
La segunda los botones de politica de privacidad y terminos y condiciones... etc...
Y la tercera el copiright.

Pues como puedo poner estas 3 lineas de botones?

Ahora mismo tengo creado 3 capas una para cada linea de botones, pero no creo que sea la mejor opcion. Además mi problema realmente es que no consigo alinear el texto de cada linea en la capa principal.

No se que más hacerle, para que cada linea de botones esté centrada dentro de la capa principal del pie de pagina.

Gracias!

[cleft]

Pues, existen muchas maneras eh. Por mencionar una:

-Creas una lista para cada division de botones. Si deseas, tambien le puede agregar un titulo antes de cada lista (y ocultarlo via CSS) para que al verla sin estilos o en un dispositivo que no soporte estilos, se entienda mas cada seccion.

-Con CSS le defines un "text-align: center;" para tu capa "pie_de_pagina". De esa forma, todo el texto dentro de la misma se centrara.

-No olvides definir un "display: inline" para los elementos <li> de las listas, y de esa forma saldran horizontalmente.

-La etiqueta <p> puedes obviarla, puesto que el contenido esta dentro de un elemento de tipo bloque (div) y no habria problema. La he agregado por si deseas darle estilo en especial.

Código:

<div id="pie_de_pagina">

	<!-- Lista de Botones para secciones -->
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
	
	<!-- Lista para Politicas de Privacidad -->
	<ul>
		<li><a href="#">Politicas</a></li>
		<li><a href="#">Legal</a></li>
	</ul>
	
	<!-- Derechos de Autor -->
	
	<p>Todos los Derechos Reservados</p>

</div>

[neodani]

Iniciado por cleft

Pues, existen muchas maneras eh. Por mencionar una:

-Creas una lista para cada division de botones. Si deseas, tambien le puede agregar un titulo antes de cada lista (y ocultarlo via CSS) para que al verla sin estilos o en un dispositivo que no soporte estilos, se entienda mas cada seccion.

-Con CSS le defines un "text-align: center;" para tu capa "pie_de_pagina". De esa forma, todo el texto dentro de la misma se centrara.

-No olvides definir un "display: inline" para los elementos <li> de las listas, y de esa forma saldran horizontalmente.

-La etiqueta <p> puedes obviarla, puesto que el contenido esta dentro de un elemento de tipo bloque (div) y no habria problema. La he agregado por si deseas darle estilo en especial.

Código:

<div id="pie_de_pagina">

	<!-- Lista de Botones para secciones -->
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
	
	<!-- Lista para Politicas de Privacidad -->
	<ul>
		<li><a href="#">Politicas</a></li>
		<li><a href="#">Legal</a></li>
	</ul>
	
	<!-- Derechos de Autor -->
	
	<p>Todos los Derechos Reservados</p>

</div>

Pues que lo hago así y no funciona! todo a la izquierda.

Lo pruebo en una pagina vacia con solo el pie de pagina y la capa de pie de pagina con los elementos en lista como me indicas y funciona perfectamente se centra.

Pero copio y pego el trozo de capas y contenidos en mi web y no hay manera sigue igual.

Puede ser que lo herede de otra capa?? me las he revisado todas he ido probando poniendo en las demas capas que esté alineado el texto y nada xDD

Alguna sugerencia?

[cleft]

Pues, solo que nos muestres tanto tu codigo HTML como CSS, para efectivamente confirmar que no este heredando ese comportamiento.

[neodani]

Iniciado por cleft

Pues, solo que nos muestres tanto tu codigo HTML como CSS, para efectivamente confirmar que no este heredando ese comportamiento.

Lo tengo dividido en varias paginas... que si style, que si print... que si reset...

No es pequeño xD

DEFAULT.CSS

Código HTML:

															/** BODY ELEMENTS **/
body {
	padding: 0 1% 0 1%; /* MARGEN DE LA VENTANA */
	font-size: .75em;
	text-align: center;
	}


															/** MAIN CONTAINERS **/
div#container {
	width: 983px;
	margin: 0 auto;
	text-align: left;
	}
	body.fullwidth div#container { width: 100%; } /* Utilizando esta ocupa todo el ancho de la pantalla*/
	body.1024width div#container { width: 983px; } /* Adaptada a una resolucion de 1280x1024 pixels */
	div#header {
		
		}
		div#header-in {
			
			}
	div#content-wrap {
		
		}
		div.content {
			
			}
		div.rlcol div.content 	{ margin: 0 210px; }			/* three column */
			div.content-in {
				
				}
						
			
		div.column {
			width: 50px;
			}
		div.rlcol div.cleft 	{ float: left; }				/* three column left */
		div.rlcol div.cright 	{ float: right; }				/* three column right */
			div.column-in {
				
				}
	div#footer {
		
		}
		div#footer-in {
			
			}

STYLING.CSS

Código HTML:

															/** BODY ELEMENTS **/
body {
	color: #333;
	background-color: #eee;
	}

															/** MAIN CONTAINERS **/
div#container {
	margin: 2em auto; /* MARGEN DE ARRIBA DE LA VENTANA */
	}
	div#header {
		color: inherit;
		background-color: #fff;
		border: 1px solid #e5e5e5;
		border-width: 0 2px 2px 0;
		height:150px; /* TAMAÑO CABECERA */
		}
		div#header-in {
			padding: 10px 0 0 20px; /*margen izquierdo */
			}
	div#nav_menu {
		color: inherit;
		background-color: #60B6EF;
		border: 1px solid #e5e5e5;
		border-width: 0 2px 2px 0;
		height:30px; /* TAMAÑO MENU */
		margin-top:30px; /* Posicion desde arriba */
		padding-left: 20px;
		}
		
	div#content-wrap {
		padding: 5px 0; /* Margen desde la cabecera 5px */
		}
		
		div#nav_login {
		color: inherit;
		background-color: #CEEF9C;
		border: 1px solid #e5e5e5;
		border-width: 0 2px 2px 0;
		height:50px; /* TAMAÑO MENU */
		margin-top:0px; /* Posicion desde arriba */
		padding-left: 20px;
		margin-bottom: 10px;
		}
		div#form_login{
		background-color: yellow;
		width: 200px;
		}
		
		div.content {
			color: inherit;
			background-color: #fff;
			border: 1px solid #e5e5e5;
			border-width: 0 2px 2px 0;
			}
			div.content-in {
				padding: 20px; /* margen interior del contenido*/
			}
				
				
			
		div.column {
			width: 200px; /* ancho de las columnas, las dos iguales, con 205 quedan mas pegadas*/
			color: inherit;
			background-color: #fff;
			border: 1px solid #e5e5e5;
			border-width: 0 2px 2px 0;
			}
			div.column-in {
				padding: 20px; /* margen interior del contenido de las columnas*/
				}
	div#footer {
		color: inherit;
		background-color: #fff;
		border: 1px solid #e5e5e5;
		border-width: 0 2px 2px 0;
		text-align:center;
		}
		#footer-in li {
			display:inline;
			list-style-image:none;
			list-style-position:outside;
			list-style-type:none;
			font-size:11px;
			background:red;
			}
		#footer-in a {
			font-weight:bold;
			padding:0pt 10px;
			text-transform:uppercase;
			text-decoration:none;
			}
		#footer-in a:hover {
			color:#656565;
			text-decoration:underline;
			}

PRINT.CSS

Código HTML:

															/** BODY ELEMENTS **/
body {
	font-family: sans-serif;
	font-size: 12pt;
	}

															/** MAIN CONTAINERS **/
div#container {
	
	}

PAGINA.PHP

Código PHP:

   
<body class="1024width"> 
    <div id="container"> 
        <div id="header"> 
            <div id="header-in"> 
                <h1>TITULO</h1> 
                <h6>ESLOGAN</h6> 
            </div> <!-- end #header-in --> 
             
            <div id="nav_menu"> 
                BOTONES | BOTONES | BOTONES | BOTONES  |BOTONES |  
            </div> <!-- end #nav_menu --> 
             
        </div> <!-- end #header --> 
 
        <div id="content-wrap" class="clear rlcol"> 
            <div id="nav_login"> <!-- Barra de login y busqueda --> 
                <div id="frmlogin"> 
                    <form name="loginBox" method="post" action="login.php"> 
                                                 
                 
                    </form> 
                </div> <!-- fin de la parte de login --> 
 
            </div> <!-- end #nav_login --> 
             
            <div class="column cleft"> 
 
                <div class="column-in"> 
 
                    column one 
 
                </div> <!-- end .column-in --> 
 
            </div> <!-- end .column --> 
 
            <div class="column cright"> 
 
                <div class="column-in"> 
 
                    column two 
 
                </div> <!-- end .column-in --> 
            </div> <!-- end .column --> 
             
            <!----------------------------------------------------- EMPIEZA EL CONTENIDO -------------------------------------------------------------> 
            <div class="content"> 
                <div class="content-in"> 
 
                 
                     
                     
 
                </div> <!-- end .content-in --> 
            </div> <!-- end .content --> 
        </div> <!-- end #content-wrap --> 
 
        <div class="clear"></div> 
         
        <!----------------------------------------------------- FOOTER-------------------------------------------------------------> 
        <div id="footer">             
                <!-- Lista de Botones para secciones --> 
                <ul id="footer-in"> 
                    <li><a href="/">Home</a>|</li> 
                    <li><a href="/tenis/">Conocimiento</a>|</li> 
                </ul> 
                 
                <!-- Lista para Politicas de Privacidad --> 
                <h6>Términos y Condiciones - Politica de privacidad - Afiliados - Sobre nosotros - Contactar </h6> 
                 
                <div id="footer-in"> 
                    <a href="http://www.WEB.com/sitemap/" class="sitemap-mini" title="Sitemap">Sitemap</a>  
                    <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.WEB.com&amp;usermedium=all" class="validcss-mini" title="This site is coded with validate CSS">CSS</a>  
                    <a href="http://validator.w3.org/check?uri=referer" class="validhtml-mini" title="This site is W3C compliant">XHTML</a>  
                    <a href="http://feeds.feedburner.com/WEB" class="rss-mini" title="Subscribe my RSS provided by Feedburner">RSS</a> 
                </div> 
                <!--<img src="imagenes/online-payments.jpg" alt="Pagos Online" title="Pagos Online" />--> 
                 
                <!-- Derechos de Autor --> 
                <div class="footer_nav3">Copyright &copy; 2008-2009 WEB.com. Todos los derechos reservados.</div> 
                 
             
 
        </div> <!-- ACABA  #footer --> 
 
    </div> <!-- end div#container --> 
 
 
 
 
 
 
</body> 
</html>  
   

Se entiende algo?

[cleft]

Es raro, copiando tu codigo a mi si me funciona.

Nada mas dos observaciones:
1. Modificar estas lineas de comentarios, para que queden tal y como debe ser "<!-- " eso abre, " -->" eso cierra. Nota el espacio antes y despues de dos guiones "--" y no pegado como lo tienes:

Código:

<!----------------------------------------------------- FOOTER------------------------------------------------------------->

2. Estas utilizando dos veces el id "footer-in". Si lo necesitas usar mas de una vez, hazlo una clase.

Código:

<ul class="footer-in">
...
<div class="footer-in">

Pero bueno, sugeriria revisar si el codigo que ingresas via php abre y cierra correctamente las etiquetas que utilice, no sea que deje abierto algun <div> y te este dando conflicto luego.

[neodani]

Iniciado por cleft

Es raro, copiando tu codigo a mi si me funciona.

Nada mas dos observaciones:
1. Modificar estas lineas de comentarios, para que queden tal y como debe ser "<!-- " eso abre, " -->" eso cierra. Nota el espacio antes y despues de dos guiones "--" y no pegado como lo tienes:

Código:

<!----------------------------------------------------- FOOTER------------------------------------------------------------->

2. Estas utilizando dos veces el id "footer-in". Si lo necesitas usar mas de una vez, hazlo una clase.

Código:

<ul class="footer-in">
...
<div class="footer-in">

Pero bueno, sugeriria revisar si el codigo que ingresas via php abre y cierra correctamente las etiquetas que utilice, no sea que deje abierto algun <div> y te este dando conflicto luego.

Gracias cleft!

Me puse a mirar el codigo reset.css y encontré la respuesta! resulta que tenia esto definido.

Código:

*, .x {												/* .x removes any inherent styling to elements below */
	margin: 0;
	padding: 0;
	color: #333;
	background: transparent;
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 101%;
	font-weight: normal;
	font-style: normal;
	line-height: 1.60em;
	text-decoration: none;
	text-align: left;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	}

He eliminado esa linea y ahora si que me detecta la alineacion del footer centrado

Uhm y sobre lo que me dices de retocar tomo nota.

He cambiado y lo he hecho clase el footer-in

Y lo del comentario del footer cambiado tb!

Gracias !!