Foros del Web » Creando para Internet » CSS »

ajustar el ancho de un div a el tamaño del navegador

Estas en el tema de ajustar el ancho de un div a el tamaño del navegador en el foro de CSS en Foros del Web. hola amigos necesito que un div se ubique en la parte superiror de la pagina como el de facebook hasta el momento logro que se ...
  #1 (permalink)  
Antiguo 17/05/2012, 21:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 1 mes
Puntos: 6
ajustar el ancho de un div a el tamaño del navegador

hola amigos necesito que un div se ubique en la parte superiror de la pagina como el de facebook

hasta el momento logro que se ubique en la parte superior del navegador pero a los lados veo unos espacios en blanco

#banner{
position:relative;
width: 100%;
margin: 0;
padding: 0;
margin-top:-10px;
background-color:#017AB3;
height:82px;
}

<div id="banner"></div>


que estoy haciendo mal?
que debo de hacer?
  #2 (permalink)  
Antiguo 18/05/2012, 01:31
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 13 años
Puntos: 51
Respuesta: ajustar el ancho de un div a el tamaño del navegador

Hola Montes28, prueba añadiendo position:absolute y top:0

Código CSS:
Ver original
  1. #banner{
  2. position:absolute;
  3. top:0px;
  4. width: 100%;
  5. margin: 0;
  6. padding: 0;
  7. margin-top:-10px;
  8. background-color:#017AB3;
  9. height:82px;
  10. }

Saludos, Daniel
__________________
Diseño Web Jaén
  #3 (permalink)  
Antiguo 18/05/2012, 06:36
Avatar de webseficientes  
Fecha de Ingreso: enero-2005
Ubicación: Buenos Aires, Argentina
Mensajes: 320
Antigüedad: 19 años, 9 meses
Puntos: 14
Respuesta: ajustar el ancho de un div a el tamaño del navegador

En esta parte
Código HTML:
position:relative;
Te condiciona el ancho al 100% restante de lo que tenes al lado

podes usar
Código HTML:
clear:both
width:100%
y no poner el position:relative
__________________
Gerardo Benitez
Programador Web Freelance, SEO, Diseño web
  #4 (permalink)  
Antiguo 18/05/2012, 09:43
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 1 mes
Puntos: 6
Respuesta: ajustar el ancho de un div a el tamaño del navegador

garciasanchezdani y webseficientes gracias por responder


este es mi codigo pero me queda un pequeño espacio en blanco al lado derecho como lo puedo quitar

Código CSS:
Ver original
  1. #banner{
  2. position:absolute;
  3. top:0px;
  4. width: 100%;
  5. margin-top:-10px;
  6. margin-left:-8px;
  7. margin-right:-20px;
  8. background-color:#017AB3;
  9. height:82px;
  10. }

hice lo que me recomendo webseficientes

pero continua con el espacio en blanco al lado derecho , necesito que ocupe todo el ancho del navegador

Código CSS:
Ver original
  1. #banner{
  2.  
  3. clear:both
  4. width: 100%;
  5. margin-top:-50px;
  6. margin-left:-8px;
  7. margin-right:-20px;
  8. background-color:#017AB3;
  9. height:82px;
  10. }
  #5 (permalink)  
Antiguo 18/05/2012, 09:55
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 13 años
Puntos: 51
Respuesta: ajustar el ancho de un div a el tamaño del navegador

Hola!! Prueba a quitar los margin-left y margin-right

Código CSS:
Ver original
  1. #banner{
  2. position:absolute;
  3. top:0px;
  4. width: 100%;
  5. margin-top:-10px;
  6. background-color:#017AB3;
  7. height:82px;
  8. }
__________________
Diseño Web Jaén
  #6 (permalink)  
Antiguo 18/05/2012, 10:01
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 1 mes
Puntos: 6
Respuesta: ajustar el ancho de un div a el tamaño del navegador

hola garciasanchezdani ya probe tu codigo pero me aparece un espacio en la derecha y otro en la izquierda , necesito que el baner cubra todo el ancho del navegador



#banner{
position:absolute;
top:0px;
width: 100%;
margin-top:-10px;
background-color:#017AB3;
height:82px;
}
  #7 (permalink)  
Antiguo 18/05/2012, 10:13
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 13 años
Puntos: 51
Respuesta: ajustar el ancho de un div a el tamaño del navegador

Entonces tendrás otro elemento superior que contiene a #banner...
__________________
Diseño Web Jaén
  #8 (permalink)  
Antiguo 18/05/2012, 10:15
 
Fecha de Ingreso: septiembre-2011
Ubicación: Yucatán
Mensajes: 42
Antigüedad: 13 años, 2 meses
Puntos: 8
Respuesta: ajustar el ancho de un div a el tamaño del navegador

tienes puesto el html y el body sin margenes y sin padding?

html, body{
width:100%;
margin:0;
padding:0;
}
  #9 (permalink)  
Antiguo 18/05/2012, 10:16
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 1 mes
Puntos: 6
Respuesta: ajustar el ancho de un div a el tamaño del navegador

garciasanchezdani

#banner es el superior nadie lo contiene , necesito que el banner sea como el de foros del web como el banner de este post

gracias por responder
  #10 (permalink)  
Antiguo 18/05/2012, 15:54
 
Fecha de Ingreso: diciembre-2011
Ubicación: Bogota - Colombia
Mensajes: 11
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: ajustar el ancho de un div a el tamaño del navegador

No le coloques nada de margin-top:-10px; ni posicion, un saludo.
  #11 (permalink)  
Antiguo 18/05/2012, 18:20
 
Fecha de Ingreso: mayo-2012
Ubicación: Palma de Mallorca
Mensajes: 71
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: ajustar el ancho de un div a el tamaño del navegador

Hola:

Te recomiendo que uses un reseter del CSS para que no te ocurran estas cosas.

Busca en Google reseter CSS y encontrarás toda la información necesaria.

Saludos,

GMG

Etiquetas: ancho, navegador, tamaño, fondo
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 23:37.