Foros del Web » Creando para Internet » CSS »

CSS básico, por favor, ayuda!!!

Estas en el tema de CSS básico, por favor, ayuda!!! en el foro de CSS en Foros del Web. Hola. Soy novato en CSS y creo que tengo un problema muy básico pero llevo horas y no consigo arreglarlo. La cuestion es que tengo ...
  #1 (permalink)  
Antiguo 04/07/2007, 12:43
 
Fecha de Ingreso: abril-2007
Mensajes: 44
Antigüedad: 10 años, 7 meses
Puntos: 0
CSS básico, por favor, ayuda!!!

Hola.
Soy novato en CSS y creo que tengo un problema muy básico pero llevo horas y no consigo arreglarlo.
La cuestion es que tengo una capa contenedora llamada "contenido" con las propiedades de borde 1px color verde y con color de fondo gris.
Dentro de esta capa contenedora tengo dos capas, una que flota a la izquierda y otra a la derecha.
Pues el problema es que la capa contenedora no engobla a estas dos capas ya que estas dos no tienen el fondo y borde de la capa contenedora.

EL CODIGO (muy sencillo)

<style type="text/css">

#contenido {
border:1px solid #66FF66;
background-color:#CCCCCC;
}
#leftcol {
width: 18%;
float: left;
}

#rightcol {
float:right;
width:81.3%;
}
</style>
<div id="contenido">
<div id="leftcol">
Esto es la parte izquierda<br />
dsadsadsa
</div>
<div id="rightcol">
Esto es la parte derecha
<br />
dadsadsa
</div>
</div>

Pues al ejecutarlo no me sale el color de fondo del contenedor ni el borde en las dos capas que engloba.

Estoy desesperado y si alguien me puede ayudar se lo agradecería bastante..
Saludos y muchas gracias de antemano
  #2 (permalink)  
Antiguo 04/07/2007, 15:06
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: CSS básico, por favor, ayuda!!!

Prueba a ponerle a todo position: relative;
Saludos
  #3 (permalink)  
Antiguo 04/07/2007, 16:03
 
Fecha de Ingreso: abril-2007
Mensajes: 44
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: CSS básico, por favor, ayuda!!!

Hola.
Poner position:relative ya lo he probado y nada... todo sigue igual.
Saludos
  #4 (permalink)  
Antiguo 04/07/2007, 16:36
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Re: CSS básico, por favor, ayuda!!!

Probá poniendole al Div Contenedor esto:
Código:
#contenido {
position:absolute;
border:1px solid #66FF66;
background-color:#CCCCCC;
}
Espero que te sirva.
Saludos!
__________________
I'm gonna start a revolution from my bed...
  #5 (permalink)  
Antiguo 06/07/2007, 14:06
 
Fecha de Ingreso: julio-2007
Mensajes: 17
Antigüedad: 10 años, 5 meses
Puntos: 0
Re: CSS básico, por favor, ayuda!!!

El problema de siempre, no has aclarado el float y eso es lo que pasa, cuando flotas un elemento rompes el flow de pagina, asi que hay que devolverselo, mira usa este codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Comienza id #menu */
.clear {
clear: both;
height: 0;
}

#contenido {
border:1px solid #66FF66;
background-color:#CCCCCC;
}
#leftcol {
width: 18%;
float: left;
}
#rightcol {
float:right;
width:81.3%;
}
</style>
<title></title>
</head>
<body>
<div id="contenido">
<div id="leftcol">
Esto es la parte izquierda<br />
dsadsadsa
</div>
<div id="rightcol">
Esto es la parte derecha
<br />
dadsadsa
</div><br class="clear" />
</div>
</body>
</html>
  #6 (permalink)  
Antiguo 19/07/2007, 13:33
 
Fecha de Ingreso: abril-2007
Mensajes: 44
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: CSS básico, por favor, ayuda!!!

Cita:
Iniciado por padapapoulos Ver Mensaje
El problema de siempre, no has aclarado el float y eso es lo que pasa, cuando flotas un elemento rompes el flow de pagina, asi que hay que devolverselo, mira usa este codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Comienza id #menu */
.clear {
clear: both;
height: 0;
}

#contenido {
border:1px solid #66FF66;
background-color:#CCCCCC;
}
#leftcol {
width: 18%;
float: left;
}
#rightcol {
float:right;
width:81.3%;
}
</style>
<title></title>
</head>
<body>
<div id="contenido">
<div id="leftcol">
Esto es la parte izquierda<br />
dsadsadsa
</div>
<div id="rightcol">
Esto es la parte derecha
<br />
dadsadsa
</div><br class="clear" />
</div>
</body>
</html>
Hola.. primero pedir perdon por la tardanza en la respuesta.

Pues de esta forma me va bien, darte las gracias compañero.

Saludos
  #7 (permalink)  
Antiguo 19/07/2007, 17:58
 
Fecha de Ingreso: junio-2002
Ubicación: Madrid, España
Mensajes: 22
Antigüedad: 15 años, 5 meses
Puntos: 2
Re: CSS básico, por favor, ayuda!!!

Prueba a FLOTAR también EL CONTENEDOR (#contenido) a la izquierda y quita el <br /> (y ahórrate de paso la clase .clear).

Además de que el <br /> es innecesario y poco semántico, el atributo "clear" es inválido en las nuevas especificaciones de XHTML (tanto en la 1.0 estricta como en la 1.1), así que evítate tener que arreglarlo tarde o temprano y prueba lo que te digo.

(Como todo en este imprevisible mundo del CSS, no te aseguro que funcione al 100%, pero te puedes llevar una sorpresa y siempre es mejor no andarse con trucos cuando no hace falta).

¡Dinos si funciona!

Un saludo,
Paco Blanchart
  #8 (permalink)  
Antiguo 21/07/2007, 10:06
 
Fecha de Ingreso: abril-2007
Mensajes: 44
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: CSS básico, por favor, ayuda!!!

Cita:
Iniciado por blanchrt Ver Mensaje
Prueba a FLOTAR también EL CONTENEDOR (#contenido) a la izquierda y quita el <br /> (y ahórrate de paso la clase .clear).

Además de que el <br /> es innecesario y poco semántico, el atributo "clear" es inválido en las nuevas especificaciones de XHTML (tanto en la 1.0 estricta como en la 1.1), así que evítate tener que arreglarlo tarde o temprano y prueba lo que te digo.

(Como todo en este imprevisible mundo del CSS, no te aseguro que funcione al 100%, pero te puedes llevar una sorpresa y siempre es mejor no andarse con trucos cuando no hace falta).

¡Dinos si funciona!

Un saludo,
Paco Blanchart

Hola.

Pues de esta forma me funciona en IE pero en firefox no.

Saludos y gracias por el aporte
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 14:37.