linea horizontal "interminable"?

00israel · #1 (**permalink**) 14/06/2011, 09:45

No se como expresarlo. Pero quisiera crear una linea horizontal que tenga el 100% de la ventana del navegador. Pero que tampoco tiene que ser así.

Vamos a ver el grueso de la pagina va todo a la izquierda del navegador, y hay unas lineas horizontales que quiero que separen ciertos apartados y que se abra lo que se abra el navegador siempre se vean, osea que no sean de un largo determinado.

Igual pregunto una tontería como la copa de un pino, pero llevo poco tiempo maquetando con XHTML+CSS y antes con las tablas me desenvolvia con mas conocimiento.

El problema que le veo es que imaginaos quel grueso de la pagina lo tengo metido en un div contenedor de unos 950 px, pero yo quiero que la linea esa horizontal se vea mas alla de esos 950 px de ancho. Se vea todo lo que la ventana se quiera abrir

gracias y un saludo.

kseso? · #2 (**permalink**) 14/06/2011, 12:13

Lo más sencillo (menos problemático) sería sacar las líneas fuera de /contenedor/

Código HTML:

Ver original<div class="contenedor">
      <!-- contenidos -->
</div>
<hr />
<div class="contenedor">
       <!-- contenidos -->
</div>
<hr />

Código CSS:

Ver original.contenedor {width: 950px;/*resto propiedades*/}
hr {width:100%;/*resto propiedades*/}

00israel · #3 (**permalink**) 14/06/2011, 12:27

Gracias por contestarme tan rapido

osea no podria crear un contenedor donde se aloje todo, sino que tendria que ir creando contenedores luego una linea y crear otro contenedor y asi con todas las filas que quiera no?

y no podria hacerlo de otra forma?

un saludo

kseso? · #4 (**permalink**) 14/06/2011, 12:49

Veo que no me expliqué con la claridad suficiente. A ver si ahora lo logro:
Lo más sencillo (menos problemático) sería sacar las líneas fuera de /contenedor/

Me faltó añadir, según mi opinión y desconociendo la estructura de la página y sus conocimientos/dominio de css+html

00israel · #5 (**permalink**) 14/06/2011, 13:00

si te has explicado con claridad. Quizas soy yo que no he definido mi nivel de conocimiento/dominio de ccss+html, ni tampoco te he dado mas explicaciones.

Pero bueno, pense que independientemente de mis conocimientos de html+css igual si me decias como se podia hacer de otra forma, por muy complicada que fuera, yo ya me buscaria la vida para entenderla.

La estructura, mas bien el diseño y futura estructura, seria como una pagina de 950 px alineada a la izquierda creada con lo que se podria decir dos columnas y ponle que 10 filas horizontales las cuales quiero que se salgan de ese ancho de 950 pixeles. Es basicamente eso

gracias de todos modos

conexion · #6 (**permalink**) 14/06/2011, 18:35

Sin entender del todo la propuesta de 00israel y, sin ánimo de polemizar, sólo como un pequeño juego css, esta "solución" es, por lo menos, curiosa:

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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
	overflow: auto;
	position: relative;
}
#contenedor {
	width: 950px;
	height: 100%;
	border: 1px solid #444;
	position: relative;
	background-color: #444;
}
.primera_parte {
	position: relative;
	height: 120px;
	background-color: #f00;
}
.segunda_parte {
	position: relative;
	height: 120px;
	background-color: #f00;
	top: 20px;
}
.caja_mas_ancha {
	position: absolute;
	width: 200%; /* si cambias este valor por 300%, por ejemplo, el ancho total sería 2850px */
	height: 20px;
	background-color: #000;
	color: #ccc;
}
.caja_aun_mas_ancha {
	position: relative;
	top: 20px;
	width: 300%; /* si le pones un valor alto, por ejemplo 500%, te aseguras que el separador cubra el ancho de cualquier pantalla: 4750px (o mayor, cambiando el multiplicador de porcentaje) */
	height: 20px;
	background-color: #000;
	color: #ccc;
}
</style>
</head>

<body>
<div id="contenedor">
	<div class="primera_parte">Aquí coloco la primera parte de mi contenido</div>
		<div class="caja_mas_ancha">Uso este contenedor como separador y cubre toda la apantalla de ancho y más, hasta dos veces el ancho del contenedor (en este ejemplo: 1900px)</div>
	<div class="segunda_parte">Aquí coloco la segunda parte de mi contenido</div>
		<div class="caja_aun_mas_ancha">Otro separador igual al anterior pero que cubre el 300% del contenedor: 2850px (moviendo el scroll horizontal se ve el efecto)</div>
	<!-- etc, etc -->
</div>
</body>

</html>

00israel · #7 (**permalink**) 15/06/2011, 00:29

gracias por tu ejemplo conexion. Muy amable.

Ahora revisando lo que puse anoche me di cuenta de un detalle, en el que no me explique bien. Dije "ponle que 10 filas horizontales las cuales quiero que se salgan de ese ancho de 950 pixeles". Pero no es asi, ya estaba tan cansado que no exprese bien. Las llamadas "filas" tienen que tener el mismo ancho que el contenedor, osea 950 px. Lo que tiene que sobresalir son unas lineas finas que separen estas filas y que abras lo que abras el navegador se vean.

He probado lo que tu me has dicho, y es asi, pero sustituyendo esas filas que sobresalen por lineas (error mio al explicarme). Tu me lo has puesto bien.

Pero de esa forma es como me decia Kseso no?

Lo que no entiendo y asi aprendo si puedes decirmelo. Porque le indicas en el body tanto a la altura como ala anchura 100%? yo no he puesto nada solo el color de fondo y el margen.

Y otra cosa, porque voy a poner 200% o 300%, si lo que quiero es que esas ciertas lineas horizontales llegen hasta el final de la derecha de la ventana del navegador, ¿no bastaria con 100%? poniendo 200% o 300% me apareceria una barra de scroll horizontal para ver una linea eterna ¿no?

Y la ultima, yo suelo utilizar ID en lugar de class. Las class las suelo dejar para solo los textos. ¿hago bien? porque he visto que tu creabas para las distintas filas, class.

si puedes ayudarme con estas dudas te lo agradeceria.

muchas gracias por tu ayuda.

00israel · #8 (**permalink**) 16/06/2011, 04:00

por cierto añado a esto. Acabo de darme cuenta de algo que me ha pasado que no entiendo. ¿una linea horizontal <hr /> puede verse mal o tener algún problema al visualizarse dependiendo de si lo que separa por encima flota a izquierda o a derecha?

venommist · #9 (**permalink**) 16/06/2011, 08:06

hummm... se ve algo complicado lo que quieres hacer, de igual forma, no debería verse afectado por los floats, y si es así, creas un div con class="clear" y le asignas por css el clear y lo tiras por arriba de cada <hr />, así este se alíneará y no tomará en cuenta los floats....

En Cuanto a las lineas, podrías asignarle una class (por ejemplo <hr class="linea_horiontal" />) y por CSS le das las propiedades: Position:Absolute; Top:"a que tamaño quieres que esté del top"; width: "pixeles de ancho"px;

Y con respecto a lo de los porcentajes, si pones 100%, esto será el 100% de lo que tu ves en tu navegador, por ende, si le pones 300%, será 3 veces el ancho que ves en tu navegador.
Poniendolo en modo más práctico: width:300%, Navegador en 1000px de Ancho= 3000px de Ancho. Claramente, no conviene ponerle 300%, generalmente, con suerte, pasarse hasta el 150%.

Supongo que tienes tu css con reset de margin... es así?

En General, las nuevas líneas de código serían algo así:

<style>
*{
margin:0px;
padding:0px;
}

.linea_horisontal{
position:absolute;
width:100%;
}

#linea_1{
top:(pixeles de diferencia al top de la página, el tope superior);
}

#linea_2{
top:(pixeles de diferencia al top de la página, el tope superior);
}
</style>

Donde:
#Linea_(nº) es un ID que va dentro del HR además del Class, sentencia la diferencia de tamaño al top, poniendo su posición exacta, el formato debe ser en pixeles (por ej: top:300px, hará que el objeto se situe 300px por debajo del límite superior del navegador.
.Linea_horisontal (se me hecho a perder la "seta") es un class que dicta el tamaño y el position absolute, dandole la cualidad de que este objeto no siga el flujo de la página.

Si se te presentan problemas de que quedó atrás de algo, ponle al class .Linea_horisontal un "seta"-index:150; (de verdad escribe la seta, la letra).

Saludos

00israel · #10 (**permalink**) 16/06/2011, 12:01

vamos por partes, que me ha encantado la respuesta que me has dado venommist. He probado lo que me has dicho de meterle un clear y ha fundionado a las mil maravillas.

lo demas que me has explicado, estoy todavia intentado entenderlo. Pero aunque me lo tenga que releer 70 veces, voy a ponerlo en practica. Ahroa en cuento tenga un poco mas de tiempo, porque estoy un poco pillado ahora de jaleos.

por cierto he notado una cosita mas. En las propiedades de la etiquete <hr /> le pongo el grosor que quiero que tenga en "border" y le pongo "thin", pero noto que es algo mas gruesa que un borde normal de una div cualquier al cual le aplicara border thin. ¿porque? y como puedo solucionarlo para que sea igual de fino?

mil gracias venommist, voy a reeler el resto que me has puesto

un saludo

00israel · #11 (**permalink**) 16/06/2011, 16:46

he descubierto que lo de la linea se puede solucionar poniendo en las propiedades del <hr />, una altura de 1 px, y 0 px de borde, con un color de background.

Esto funciona en todos los navegadores menos en el maldito I.E 6. En este último me muestra la linea como con un borde pero enorme

venommist · #12 (**permalink**) 17/06/2011, 13:56

jaja, me alegro que te haya servido.
Con respecto a la utilidad para IE6, puedes buscar algún hack para ello...
creo que para internet explorer debes darle algo asi, aunque puedes averiguar más sobre el respecto en google.

html>.linea_horisontal{
height:1px;
border:#color thin
}

O Simplemente darle el border a un solo lado. (por ejemplo: border-top:#color thin;)

Saludos!

P.D: Vale recordar que este hack será solo para el Código que esté fallando, ya que será el problema neto de ie6, es un cacho tener que programar para tantos navegadores con lectura diferente, pero se tiene que hacer... usa los hacks SÓLO en los códigos Necesarios, ya que IE6 de igual forma está leyendo el código anterior, pero una sola linea le da la falla, SÓLO SI ES QUE NO POSEES OTROS CSS PARA LOS DEMÁS NAVEGADORES. Ejemplo: firefox.css, ophera.css, safari.css, ie6.css, ie7.css, etc. etc.

00israel · #13 (**permalink**) 19/06/2011, 16:49

no soy capaz de resolver esto. He hecho lo que me has dicho, pero no funciona y en google no encuentro nada. Pero me he dado cuenta que no solo pasa en I.E 6 sino tambien en el I.E 7

venommist · #14 (**permalink**) 20/06/2011, 07:58

bueno, estimado, realmente es un gran lío resolver los problemas de compatibilidad... yo te recomendaría que para internet explorer simplemente no lo dejaras con borde... o que crearas un div que solo se mostrara para internet explorer (con un comentario condicionado para ie). más allá no creo que se pueda lograr, ya que el software IE tiene muy poca compatibilidad, y de igual forma, al menos en los sitios en los que trabajo, no se arrojan muchos resultados de gente que use ie.6, si no más bien, chrome, firefox y ophera, aunque tampoco es un porcentaje bajo de gente que use ie.

Suerte y si veo como solucionarlo te lo comunicaré.
Saludos!

00israel · #15 (**permalink**) 20/06/2011, 11:01

Muchas gracias venommist. Justamente ahora que me contestas, hoy he encontrado exactamente lo que me has dicho tu ahora aqui. Un condicional que funcione para IE.

Y consiste en esto: Para solucionar el problema del margen en el IE, hay que meter una cifra de 7px negativos en el margin y añadirle una linea de diplay en bloque. Es decir:

Código:

hr {
	width: 100%;
	clear: both;
	background-color: #cccccc;
	height: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin: -7px 0;
	padding: 0px;
        display: block;
}

pero esto tiene un inconveniente y es que no funciona bien en el resto de navegadores. Con lo que entra en juego la codicional que seria algo asi:

Código:

<!--[if IE]>
  <link href="css/layout_ie.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->

Hay que crear dos hojas de estilo una con el margen normal "layout.css" y otra con el margen negativo: "layout_ie.css". Y listo calisto.

Aqui dejo el enlace donde lo he encontrado. Esta en ingles pero se entiende muy bien todo: http://en.blog.improveit.com.br/arti...-a-case-solved

gracias y hasta la próxima