09/03/2006, 16:16
| |||
| |||
| 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:
¿Qué está mal, por qué no se refleja en la página? .caja{
width:200px;
padding:10px;
margin-top:10ppx;
border:1px solid;
border-color:#666633;
background-color: #F8F8F8;
float:right;
}
|
|
09/03/2006, 16:19
| |||
| |||
| 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) |
|
09/03/2006, 19:27
| |||
| |||
| 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:
HTML tu BODYbody {
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;
}
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óñez Angulo, diseñador web. Aquí puedes ver mi currículum vitae, los servicios que ofrezco, mi portafolio y podrás contactarme.</p>
</div>
<div class="caja">
<h1>Noticias</h1>
<p align="justify" class="general">Aquí encuentras noticias aquí encuentras noticias. aquí puedes encuentrar noticias <span class="general">aquí encuentras noticias</span></p>
</div>
<div style="clear:both;">
</div>
</div>
</body>
__________________ | Smoke citizen |
|
09/03/2006, 20:54
| |||
| |||
| 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 |
