Foros del Web » Creando para Internet » CSS »

100% width full

Estas en el tema de 100% width full en el foro de CSS en Foros del Web. Una pregunta expertos del foro. Mi web esta hecha en HTML y CSS. Las medidas de los div y todo esta en pixeles. El problema ...
  #1 (permalink)  
Antiguo 29/07/2009, 15:07
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
100% width full

Una pregunta expertos del foro. Mi web esta hecha en HTML y CSS. Las medidas de los div y todo esta en pixeles.
El problema es que quiero tener el pie de pagina que me ocupe todo el ancho de pantalla. Y claro, para eso tengo que utilizar , width:100% , verdad?

No tengo mucha idea de CSS, y lo que me ocurre es que vale, me ocupa el pie de pagina el 100% de la pantalla pero lo que son los span de texto que tengo dentro del div, a la que cambia de resolucion o lo hago mas o menos pequeño se me mueve todo para un lado o otro y se me desajusta.

Se que hay una propiedad para que se quede fijo tal como esta, pero no recuerdo cual es. Me hechais una mano ?

p.d.: Creo que es la manera correcta de que me ocupe toda la pantalla el pie de pagina, si hay otra manera o me recomendais otra cosa os la agradecere mucho.

Muchas gracias de verdad!
  #2 (permalink)  
Antiguo 29/07/2009, 23:47
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: 100% width full

Esta bien que uses width:100% para que tu div ocupe todo el ancho de la pantalla, recuerda poner *{margin:0; padding:0;} para que no te aparezca ese horrible margen de color blanco

margin es: distancia entre el borde de tu caja css y el objeto mas próximo
padding es: distancia entre el borde y el contenido de tu caja css

Si no lo comprendes busca en google: css box y seguro lo entenderas

Para que usas la etiqueta <span> ?
que contienes dentro de ella ?

Si lo que tienes dentro de <span> son por ejemplo enlaces y quieres que estos estén centrados, entonces:

<style>
#divpie {padding-left:25%; padding-right:25%;}
</style>

#divpie seria el selector de la id de la div (tu pie de pagina)

Y si quieres que a su vez estos enlaces tengan una separación con el borde de la div del pie no tienes mas que jugar con pading-top (distancia hacia arriba) y padding-bottom (distancia hacia abajo).

Espero te sirva, yo también soy nuevo en esto pero creo que te puedo ayudar. Cuanto mejor elabores la pregunta mejor te enterderé y por tanto sacaras mas jugo de mi respuesta

Saludos
  #3 (permalink)  
Antiguo 29/07/2009, 23:51
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: 100% width full

Esta bien que uses width:100% para que tu div ocupe todo el ancho de la pantalla, recuerda poner *{margin:0; padding:0;} para que no te aparezca ese horrible margen de color blanco

margin es: distancia entre el borde de tu caja css y el objeto mas próximo
padding es: distancia entre el borde y el contenido de tu caja css

Si no lo comprendes busca en google: css box y seguro lo entenderas

Para que usas la etiqueta <span> ?
que contienes dentro de ella ?

Si lo que tienes dentro de <span> son por ejemplo enlaces y quieres que estos estén centrados, entonces:

<style>
#divpie {padding-left:25%; padding-right:25%;}
</style>

#divpie seria el selector de la id de tu etiqueta div de tu pie de página (Ej: <div id="divpie">aqui tendrias el contenido de tu pie de pagina</div>)

Y si quieres que a su vez estos enlaces tengan una separación con el borde de la div del pie no tienes mas que jugar con pading-top (distancia hacia arriba) y padding-bottom (distancia hacia abajo).

Espero te sirva, yo también soy nuevo en esto pero creo que te puedo ayudar. Cuanto mejor elabores la pregunta mejor te enterderé y por tanto sacaras mas jugo de mi respuesta

Saludos
  #4 (permalink)  
Antiguo 30/07/2009, 01:47
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: 100% width full

Hola Gracias cristian_cena! Da gusto escuchar tan buenas explicaciones! merci :) Todo lo que me dices es correcto, pero yo por ejemplo tengo en el pie de pagina: Nombre Empresa
Email
Telefono

Dentro de span , que esta en : left .

Entonces al hacer el width 100%, depende que resolucion de pantalla, se me sale de lo que seria el 800px que lleva todo el cuerpo en general de ancho( recuerda que solo quiero el pie de pagina al 100%, todo el resto del cuerpo lo tengo a 800px de ancho ).
  #5 (permalink)  
Antiguo 30/07/2009, 05:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 100% width full

Hola xmarkx.
¿Hay alguna razón que te impida publicar los códigos (x)html y css implicados en el problema?

Creo que sería mejor para todos, especialmente para ti, si quieres obtener respuestas precisas. Pero vamos, es solo mi opinión.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 30/07/2009, 07:11
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: 100% width full

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>lalala: lalalallas lalalalalalala</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="cssparaforosdelweb.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>

<div id="contenedor">


	<div id="cabecera">
	  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','250','src','cabecerahechaenflash','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','cabecerahechaenflash' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="250">
        <param name="movie" value="cabecerahechaenflash.swf" />
        <param name="quality" value="high" />
        <embed src="cabecerahechaenflash.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="250"></embed>
      </object></noscript>
    </div>
    
  <div id="contenido"> 
    
    <h1>Lorem Ipsum is simply, <br />
Lorem Ipsum is simply </h1>
<br /><br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor faucibus leo sed mollis </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nasc. <strong>Cum sociis natoque penatibus et magnis dis parturient montes, nasc</strong></p><br />
<br />
<h3>Cum sociis natoque penatibus?</h3>

<br />
<p>¡Cum sociis natoque penatibus et magnis dis parturient montes, nasc !</p>
<p>Nam eu nisi vel leo tristique rutrum. Donec gravida mi a justo feugiat sit amet consequat nibh tincidunt. Quisque eget ipsum nulla. Aliquam tincidunt<a href="lalala.htm">lalala</a></p><br />
<br />
<h3 class="nuestromundo">Cras nec arcu odio, nec hendrerit nisl. Nam v?</h3><br /> </div>

    
<div id="pie">
    
		<span class="piemenu"><a href="lalala.htm">lalala</a></span>
		<span class="barra">|</span>
		<span><a href="lalala.htm">lalala</a></span>
		<span class="barra">|</span>
		<span><a href="lalala.html">lalala</a></span>
		<span class="barra">|</span>
		<span><a href="lalala.htm">lalala</a></span>
		<span class="barra">|</span>
		<span><a href="lalala.htm">lalala</a></span><br /><br />
		<span>lalalalalalalalalalalala</span><br />
		<span>lalala : lalalalala   /   lalalalaa </span><br />
		<span>lalala: lalalala.com</span><br />
		<span><a href="http://www.lalalalala.com">www.lalalalala.com</a></span>

    </div>


</div>

</body>
</html> 
CSS :


/* ESTILOS GENERALES */

*{margin:0;
padding:0;}

body{
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
background-image: esunaimgqueserepiteyhacequesealargelacabecera;
background-repeat:repeat-x;
}

h1{
color:#333333;

}

p{
font-size: 13px;
color: #000000;
}

h3{
color:#64a71c;
}

hr{
color: #333333;

}

a{
text-decoration:none;
color:#000000;
}

a:hover{
text-decoration:none;
color:#64a71c;
}

/* ---------------------FIN ESTILOS GENERALES ----------------------- */




/* ----------------------CONTENEDOR----------------------------------- */
#contenedor{
margin:auto;
width:800px;
background-color:#FFFFFF;

}

/* ------------------- FIN CONTENEDOR----------------------------------- */


/* ---------------------- cabecera ----------------------------------- */
#cabecera{
width:800px;
height:250px;
margin-bottom:20px;

}


/* ---------------------- fin cabecera ----------------------------------- */


/* ---------------------- CONTENIDO----------------------------------- */

#contenido{
width:800px;
height:600px;
background-image: imagendefondodelweblalala;
background-repeat:no-repeat;

}

#contenido h3.nuestromundo{
text-align:center;
}


/* ---------------------- PIE ----------------------------------- */

#pie{
width:800px;
height:100px;
background:#333333;
padding-top:15px;

}

#pie span{
color:#FFFFFF;
margin-left:20px;
}

#pie span a{
color:#FFFFFF;
border-style:none;
text-decoration:none;

}

#pie span.piemenu{
margin-left:215px;

}

#pie span.barra{
margin-left:5px;
margin-right:-10px;
}
  #7 (permalink)  
Antiguo 30/07/2009, 07:12
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: 100% width full

La cabecera no se ve porque es en flash y el fondo es blanco. Pero bueno, lo que realmente necesito es que al ser todo estructurado para width:800px; el pie de pagina que quiero que me ocupe toda la pantalla se me alargue, y que al cambiar la resolucion no se me desfigure.

MUCHAS GRCIAS KSESO?
  #8 (permalink)  
Antiguo 30/07/2009, 07:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 100% width full

pon fuera de #contenedor la caja #pie y le quitas las medidas (ancho y alto) para que ocupe todo el ancho de la ventana y si ésta es pequeña que crezca en altura para acoger los enlaces.

Por cierto, sería más indicado que utilices una lista (ul/li/a) para hacer el menú del pie
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 30/07/2009, 07:49
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: 100% width full

Y lo del texto que se me desfigura? Como lo soluciono?

Quiero decir, el texto se me sale de lo que seria el contenedor.
  #10 (permalink)  
Antiguo 30/07/2009, 08:03
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: 100% width full

Por cierto muchisimas gracias kseso?
  #11 (permalink)  
Antiguo 30/07/2009, 08:35
 
Fecha de Ingreso: julio-2008
Mensajes: 143
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: 100% width full

Haber si me explico. Quiero el pie de pagina asi : http://www.metriplica.com/

Que por mucha resolucion que cambie, el texto siempre esta en el medio de lo que es la web ( no el body!) si no la web. Gracias!
  #12 (permalink)  
Antiguo 30/07/2009, 11:05
Avatar de jackbach  
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: 100% width full

Cita:
Iniciado por xmarkx Ver Mensaje
Y lo del texto que se me desfigura? Como lo soluciono?

Quiero decir, el texto se me sale de lo que seria el contenedor.
pon otro div dentro del footer con el ancho que quieras y margin: 0 auto;

Si es poco texto puedes ponerle text-align: center; y marchando
  #13 (permalink)  
Antiguo 30/07/2009, 22:28
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: 100% width full

Como dijo jackbach puedes trabajar con text-align: center; o bien juega con las propiedades margin y padding, no le temas jeje.

sabes, margin y padding junto a la propiedad position son, a mi parecer, las herramientas mas potentes que tiene css para la maquetación.
investiga en google.

Si investigas estos 3 temitas te juro que no haras mas preguntas sobre maquetación, no porque tus preguntas molesten, todo lo contrario aqui estamos para ayudarnos, sino que cuanto mejor es que realizes en segundos algo que tardarias toda una vida en hacerlo.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:29.