Dos <DIV> dentro de un <DIV>

nachopro · #1 (**permalink**) 10/07/2005, 00:24

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>

xeonmx · #2 (**permalink**) 10/07/2005, 00:51

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.

nachopro · #3 (**permalink**) 10/07/2005, 07:51

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

Durgeoble · #4 (**permalink**) 10/07/2005, 09:35

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 :Þ)

nachopro · #5 (**permalink**) 10/07/2005, 09:41

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

Durgeoble · #6 (**permalink**) 10/07/2005, 09:58

#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)

nachopro · #7 (**permalink**) 10/07/2005, 10:34

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

Durgeoble · #8 (**permalink**) 10/07/2005, 11:22

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

nachopro · #9 (**permalink**) 10/07/2005, 11:57

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

nachopro · #10 (**permalink**) 10/07/2005, 12:16

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;
}
-->

Durgeoble · #11 (**permalink**) 10/07/2005, 12:38

cambiale a #barra el valor de position:relative ; por position: absolute;

nachopro · #12 (**permalink**) 10/07/2005, 12:42

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