Barra superior 100% a todo el ancho

asinox · #1 (**permalink**) 18/03/2009, 01:43

Hola, que tal, estoy necesitando hacer una barra superior al 100% de ancho, pero no logro hacerla, la verdad es que si trato de mover el ancho del navegador manualmente veo que la barra se va alejando del lado derecho...

alguen tiene un tips para hacer una barra superior 100% de ancho?

Gracias

Newbie001 · #2 (**permalink**) 18/03/2009, 03:07

y es tan facil como hacer un <div style="width:100%">

=/

pd: los otros divs que contengan a este deben de ocupar el 100% del ancho tambien
pd2: fijate que otras propiedades no te esten afectando el comportamiento del div

Wing · #3 (**permalink**) 18/03/2009, 05:50

Asegúrate que ese Div está fuera de cualqueir otro div, porque si no igual está heredando propiedades.

asinox · #4 (**permalink**) 18/03/2009, 10:58

ejejej que chistosos, ejjeej, pues claro ya he tratado con solo el 100% width (ni modo jejee), pero sucede que la barra se extiende, claro , jejeje (ustedes tan pasao!!! ejejej, jeje), pero si yo muevo el navegador y lo achico manualmente la barra se aleja del lado derecho...

Saludos

JavierB · #5 (**permalink**) 18/03/2009, 11:08

Hola asinox

Prueba este ejemplo:

Código css:

Ver original<html>
<head>
<style type="text/css">
body, html {margin:0; padding:0}
#barra {width:100&#37;; height:50px; border:1px solid red}
</style>
</head>
<body>
<div id="barra"></div>
</body>
</html>

Saludos,

asinox · #6 (**permalink**) 18/03/2009, 11:11

Gracias, pero no, eso ya lo tengo, voy a revisar todo mi codigo, por que en verdad yo se qeu esto es facil, no es mi primer site basado en css, algo debo tener que esta invidiendome el 100%

Saludos

Dalvenjha · #7 (**permalink**) 18/03/2009, 11:19

Cita:

Iniciado por asinox

ejejej que chistosos, ejjeej, pues claro ya he tratado con solo el 100% width (ni modo jejee), pero sucede que la barra se extiende, claro , jejeje (ustedes tan pasao!!! ejejej, jeje), pero si yo muevo el navegador y lo achico manualmente la barra se aleja del lado derecho...

Saludos

o_O perdón? no entendí nada, y por como te explicas peor aún. No puedes poner imágenes?.

Welling · #8 (**permalink**) 18/03/2009, 11:36

Prueba con un

Código:

* { margin: 0; }

pero lo cierto es que no te entiendo muy bien lo que dices, puede ser que esté herando otra propiedad ese div...

asinox · #9 (**permalink**) 18/03/2009, 16:11

Cita:

Iniciado por Dalvenjha

o_O perdón? no entendí nada, y por como te explicas peor aún. No puedes poner imágenes?.

jejee nunca has cambiado el tamaño del navegador manualmente? jejeej, en fin

el problema ya se cual es, estoy usando blueprint como framework css, y he notado que da mas problemas que hacer toda la estructura por uno mismo, blueprint quiere sobre-escribir el codigo que yo coloco.

Saludos

asinox · #10 (**permalink**) 18/03/2009, 16:13

si lo quieren ver y probar (no IE6 hasta que yo lo diga jejeje) http://raptitud.noxmediastudio.com

traten de achicar el navegador manualmente y veran que la barra horizontal se aleja del lado derecho.

Saludos

jomaruro · #11 (**permalink**) 18/03/2009, 16:39

Hola:

He hecho dos pruebas. La primera en FF, la barra horizontal (si es el menú, como pienso) no se mueve.

La segunda con IE7, la barra horizontal no se mueve, pero he detectado que las imagenes que salen debajo del menú no se mueven solo se ven dos, una debajo de otra. A la derecha se ven de arriba a abajo tres recuadros de esos que aparecen cuando una imagen no aparece. La imagen y el texto de Literatura 2 se ve mezclado con las imágenes.

Saludos.

asinox · #12 (**permalink**) 18/03/2009, 16:43

bueno la barra horizontal (que no es el menu) es la barra superior (TOP) que esta encima del header negro.

Las imagenes deberian verse, es un jquery, y me ha funcionado sin problema en mis 4 naegadores y en el iphone... pero igual talvez no dejas que todo cargara bien y/o javascript activado.

Gracias

Saludos

Mikmoro · #13 (**permalink**) 18/03/2009, 17:14

No ha sido fácil entenderlo hasta ver el enlace.
El asunto que tienes la barrra en esta caja:

Cita:

div#top_bar div {display:block;
margin:0pt auto;
width:875px;
}

centrada y con 875 de ancho, mientras que la caja general que está debajo:

Cita:

div#body {rap_estilo.css (line 194)
background-image:url(../wwwimages/bg_body.png);
background-position:center top;
background-repeat:repeat-y;
height:auto !important;
margin:0pt auto;
min-height:1700px;
width:933px;
}

tienen un ancho mayor (933px) por lo que cuando la parte de abajo queda clavada y no encoje, la de arriba todavía sigue haciéndolo y no es que se aleje del lado derecho, es que se sigue centrando si te fijas bien.

Sólo ponle a la de arriba 933px para que veas que es ese el problema y puedas pensar cómo solucionarlo.