Foros del Web » Creando para Internet » CSS »

Float

Estas en el tema de Float en el foro de CSS en Foros del Web. En esta página ( http://eordonezangulo.ifrance.com/wwwroot/ ), la caja que dice "noticias" debe estar a la derecha. Éste es su estilo: Código: .caja{ width:200px; padding:10px; margin-top:10ppx; ...
  #1 (permalink)  
Antiguo 09/03/2006, 16:16
 
Fecha de Ingreso: octubre-2005
Mensajes: 207
Antigüedad: 12 años, 2 meses
Puntos: 0
Float

En esta página (http://eordonezangulo.ifrance.com/wwwroot/), la caja que dice "noticias" debe estar a la derecha. Éste es su estilo:

Código:
.caja{
	width:200px;
	padding:10px;
	margin-top:10ppx;
	border:1px solid;
	border-color:#666633;
	background-color: #F8F8F8;
	float:right;
		}
¿Qué está mal, por qué no se refleja en la página?
  #2 (permalink)  
Antiguo 09/03/2006, 16:19
 
Fecha de Ingreso: octubre-2005
Mensajes: 207
Antigüedad: 12 años, 2 meses
Puntos: 0
un comentario más: parece que el defecto sucede en IE, porque en Firefox sí lo hace bien... (lo único es que en Firefox el padding está disparejo y en IE sí se ve como debe ser, ojalá me puedan ayudar también con ese detalle)
  #3 (permalink)  
Antiguo 09/03/2006, 19:27
 
Fecha de Ingreso: mayo-2003
Mensajes: 40
Antigüedad: 14 años, 7 meses
Puntos: 1
Hola, revisé el código de tu página, de lo que te puedo decir de inicio es que si vas a maquetar en CSS, lo hagas con todo, no solo con a medias con lo que quieras colocar en una posición en particular, ya que resulta en problemas como el que tienes (teniendo tu div flotado dentro de una table por ejemplo), no me puse a ver qué estaba mal de tu código, porque me resultaba un poco engorroso esa combinación tabla/divs
Era más complicado resolver algo que no estandar y pues en un rato de ocio y de igual forma para prácticar un poco, porque soy algo nuevo en esto te pasé lo que tienes a un diseño tableless, usando solamente css para la maquetación y resultó esto: (y que no debe darte problemas en absoluto, ya lo he probado)

CSS
Código:
body {
background-color: #EDE8E2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-indent: 20px;
line-height: 18px;
	}
div#container {
background-color:#FFFFFF;	
width:715px;
margin: 0 auto;
padding: 30px;
}
div#header {
background-color:#000000;
height: 150px;
}
div#hangel {
width:101px;
height: 150px;
}
div#hlogo {
position:absolute;
background-image:url(eoranlogo.gif);
background-repeat: no-repeat;
top:100px;
left:550px;
width:304px;
height: 34px;
}
div#hlogo h1 {
	text-indent: -1000em;
	}
div#space {
height:20px;
	}
div#body {
width:400px;
float:left;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#996600;
font-size: 22px;
font-weight:normal;
}
.caja {
width:200px;
padding:10px;
margin:10ppx;
border:1px solid;
border-color:#666633;
background-color: #F8F8F8;
float:right;
	}
HTML tu BODY
Código:
<body>
<div id="container">
	<div id="header">
		<div id="hangel">
		<img src="angel.jpg" width="101" height="150" />
		</div>
		<div id="hlogo">
		<h1>eoran.com</h1>
		</div>
	</div>
	<div id="space">
		</div>
	<div id="body">
	<h1>Bienvenido</h1>
	<p class="general">Bienvenido al sitio de Emmanuel Ord&oacute;&ntilde;ez Angulo, dise&ntilde;ador web. Aqu&iacute; puedes ver mi curr&iacute;culum vitae, los servicios que ofrezco, mi portafolio y podr&aacute;s contactarme.</p>
	</div>
	<div class="caja">
          <h1>Noticias</h1>
          <p align="justify" class="general">Aqu&iacute; encuentras noticias aqu&iacute; encuentras noticias.  aqu&iacute; puedes  encuentrar noticias <span class="general">aqu&iacute; encuentras noticias</span></p>

          </div>
		  	<div style="clear:both;">
		</div>
</div>


</body>
__________________
| Smoke citizen
  #4 (permalink)  
Antiguo 09/03/2006, 20:21
 
Fecha de Ingreso: octubre-2005
Mensajes: 207
Antigüedad: 12 años, 2 meses
Puntos: 0
Oh, muchas gracias... se ve perfecto en Firefox pero en IE se mal... la verdad no sé mucho de css (ya está comprobado :P) pero intentaré resolverlo.
  #5 (permalink)  
Antiguo 09/03/2006, 20:54
 
Fecha de Ingreso: mayo-2003
Mensajes: 40
Antigüedad: 14 años, 7 meses
Puntos: 1
ehm... yo lo probé en ambos navegadores y no tuve problemas, ayudaría un poco un "scrinchotazo" de la página en ambos navegadores o detallar qué es "se ve mal" para ver qué puede ser.

de cualquier forma, supongo que si te centras en especificar más propiedades para los elementos con los que tengas problemas, puede ayudar.

Me da la impresión que uno de los "problemas" debe ser tanto el espacio adicional entre el borde superior y el inicio del texto, y el borde inferior con el final del parrafo de la caja de Noticias. Creo que ese problema va por la incorrecta interpretación de algunas propiedades por parte de IE, de hecho puedes encontrar información al respecto en http://www.disenorama.com/articulos/...o_de_cajas.htm


Saludos
__________________
| Smoke citizen
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 12:40.