Foros del Web » Creando para Internet » CSS »

Dos <DIV> dentro de un <DIV>

Estas en el tema de Dos <DIV> dentro de un <DIV> en el foro de CSS en Foros del Web. he logrado superar grandes obstaculos al migrar mi sitio (100% tablas) a CSS... estoy en el último trecho y no sé que más leer o ...
  #1 (permalink)  
Antiguo 10/07/2005, 01:24
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
Desacuerdo Dos <DIV> dentro de un <DIV>

he logrado superar grandes obstaculos al migrar mi sitio (100% tablas) a CSS...
estoy en el último trecho y no sé que más leer o tocar

como ven en la imagen adjunta, quiero que esa columna en donde está la flecha blanca continúe siendo gris hasta entrar en contacto con el div del fondo...

se les ocurre cómo estirar dicho div??

les muestro mi código:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>nachopro.com.ar &gt;&gt; sdsd (edici&oacute;n CSS)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #CCCC99;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
form {
	margin: 0px;
}
#encabezado {
	text-align: center;
	background-color: #666666;
	color: #FFFFFF;
	width: 100%;
	height: 100%;
}
#titulo {
	height: 80px;
	background-image: url(imagenes/globales/logo.gif);
	background-repeat: no-repeat;
	width: 100%;
}
#titulo div {
	width: 240px;
	height: auto;
	margin-top: auto;
	margin-right: 25px;
	margin-bottom: auto;
	margin-left: auto;
	font-size: 10px;
	padding-top: 23px;
	padding-bottom: 23px;
}
#titulo input {
	font-size: 10px;
}
#cuerpo {
	z-index:2;
	position:relative;
	clear:both;
	width: 100%;
}
#barra {
	width: 170px;
	float: left;
	background-color: #666666;
	height: 100%;
}
#contenido {
	width: 594px;
	margin-left: 180px;
	float: none;
}
#contenido div.bajada {
	margin: 0px 5px 5px;
	padding: 0px;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #000000;
}
#contenido div.contenido {
	margin: 5px;
	min-height:202px;
	border: thin solid;
}
#pie {
	background-image: url(imagenes/globales/finbarra.gif);
	background-repeat: no-repeat;
	padding-top: 10px;
	width: 100%;
}
#pie p {
	background-color: #666666;
	text-align: center;
	color: #FFFFFF;
	margin: 0px;
	font-size: 10px;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 5px;
}


-->
</style></head>
<body>
<div id="encabezado">Este es un grandioso encabezado</div>
<div id="titulo"><div>BÚSQUEDA</div></div>
<div id="cuerpo">
  <div id="barra">menú aquí</div>
  <div id="contenido">
  <img src="imagenes/titulos/titulo.gif" alt="bla">
  <div class="bajada">Texto de bajada</div>
  <div class="contenido"><img src="imagenes/imgagen.jpg" class="seccionimg">Texto BLA BLA</div>
  </div>
</div>
  <div id="pie"><p>TranceWay / NP :: 1999-2005</p></div>
</body>
</html> 
  #2 (permalink)  
Antiguo 10/07/2005, 01:51
 
Fecha de Ingreso: julio-2005
Ubicación: Juarez, Chih. Mexico
Mensajes: 5
Antigüedad: 12 años, 5 meses
Puntos: 0
Te recomiendo que uses una tabla principal que contenga las capas (DIV) que estas usando, el usar CSS no te limita en lo absoluto a usar tablas, una vez que tengas
la capa dentro de una celda todo sera mas facil te lo aseguro.

No encuentro otra opcion.

Espero te sirva de algo.
  #3 (permalink)  
Antiguo 10/07/2005, 08:51
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
Gracias por la sujerencia, pero prefiero creer que algo se puede hacer en CSS...
además, deseo impresionar a la chica que me gusta con un site 100% CSS
  #4 (permalink)  
Antiguo 10/07/2005, 10:35
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
nachopro e intentado trabajar con el codigo pero me he quedado un poco limitado por no disponer de las imagenes, puedes linkar tu pagina o subirla a algun sitio.

Por cierto si se puede sin embargo me gustaria ver las imagenes para poder indicarte como hacer algunas cosas de la forma mas adecuada (no me gusta como usas los divs, parece que estes usando tablas aun :Þ)
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #5 (permalink)  
Antiguo 10/07/2005, 10:41
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
por su puesto .. aquí te dejo el enlace directo
le he puesto bordes a ambos DIVs para que se te haga más fácil verlo

http://npserver.no-ip.org/nachopro_r...Untitled-1.php

las imágenes que utilizo son a fin de lograr el efecto de curva

bueno, gracias por la ayuda..

espero tu respuesta
  #6 (permalink)  
Antiguo 10/07/2005, 10:58
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
#cuerpo {border-left: 170px #666666 solid; }
#barra { position:relative; left: -170px; }
#contenido { margin-left: 10px }

no te preocupes, tengo herramientas para separar y ver cualquier div ;) aunque gracias :)
en cuanto al efecto curva cuando lleguen las css3 vendra como propiedad (mozilla//firefox ya lo tienen)
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #7 (permalink)  
Antiguo 10/07/2005, 11:34
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
grandioso!!
muchas gracias

pero creo que he fastidiado mi código
siempre me faltan 5 centavos para llegar al peso

creo que toqué todo lo que debía tocar, pero si ves en http://npserver.no-ip.org/nachopro_reedit/ los divs dentro de #cuerpo quedan uno bajo el otro y no al costado

probé con floats pero no hubo caso
  #8 (permalink)  
Antiguo 10/07/2005, 12:22
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
lo que ocurre es que el codigo que te puse debia añadirse o corregir el que ya tenias no substituirlo por completo
elimina los comentarios /* */ y metelo dentro de las reglas que le corresponden y te ira todo XD
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #9 (permalink)  
Antiguo 10/07/2005, 12:57
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
sí sí, eso pensé en un principio.. pero no hubo caso así que intenté varias combinaciones antes de volver a molestarte

pero no hay caso, http://npserver.no-ip.org/nachopro_reedit/ << puedes ver lo que me pasa allí :(

es lo mismo para FireFox como IE
  #10 (permalink)  
Antiguo 10/07/2005, 13:16
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
afinando el lápiz

veamos: encontré (en tu firma) cosas muy útiles como el webdeveloper para firefox

probando y probando, noté que el ancho de #barra se empieza a contar desde el fin del Solid de 170px de #cuerpo.. estoy deforma al pobrecillo #contenido

seguiré intentándolo.. si se te ocurre algo me avisas

la "solución" que encontré es esta:
Código HTML:
<!--
#cuerpo {
	/*z-index:2;*/
	/*position:relative;*/
	/*clear:both;
	width: 100%;*/
	border-left-color: #666666;
	border-left-style: solid;
	border-left-width: 170px;
}
#barra {
	float: left;
	border: thin solid #FF0000;
	position: relative;
	left: -170px;
	width: 1px; /* es correcto dejarlo así?? */
}
#contenido {
	width: 594px;
	float: none;
	border: thin solid #00FF00;
	padding: 0px;
	margin-left: 10px;
}
--> 
  #11 (permalink)  
Antiguo 10/07/2005, 13:38
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
cambiale a #barra el valor de position:relative ; por position: absolute;
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #12 (permalink)  
Antiguo 10/07/2005, 13:42
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
jaja, que pancho que soy!!

mirá que probé esa opción, pero siempre con el margin -170px

ahora sÍ!!!

mil millones de gracias ;)

espero no tener que volver a molestarte:P

en cuanto el sitio esté terminado, te lo notificaré para que "te rías de janeiro"

saluoooos :saludo
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 17:50.