Problema maquetando

[ie8]

Hola estoy intentando maquetar/diseñar mi web pero tengo el siguiente problema:

Esto es lo que obtengo:


Y lo que me gustaría a mi sería(con sus correspondientes colorines pero eso es lo de menos):

Sugerencias
Nombre: as -
this a test222
[Linea(</hr>)]

Código en html

Código:

<div class="cuerpo">
<div id="boxTema">
<h4>contactoTemas</h4>
</div>
<div id="boxTema">
<h4>Sugerencias</h4>
<p class="nombre">Nombre: as - </p>
<p class="cuerpo">this a test222</p>
<hr/>
</div>
<div id="boxTema">
<h4>Publicidad</h4>
</div>
</div>
</div>

Y su correspondiente estilo:

Código:

.cuerpo
{
	float:left;
}
.cuerpo #boxTema h4
{
background-color:#336666;
}
.cuerpo #boxTema
{
background-color:#999999;
}
.cuerpo #boxTema .nombre, .cuerpo #boxTema .usuario
{
background-color:#CCCCCC;
display:block;
}
.cuerpo #boxTema .cuerpo
{
background-color:#00FFFF;
display:block;
}

Sólo busco una ayuda para saber donde me estoy equivocando para buscar por ahi

[Batan]

A simple vista hay un fallo grave.
Tienes identificado dos Div con el mismo id. Y no puede tener dos etiquetas identificado con el mismo id. O te creas un clase especial para el segundo id o le das un identificador distinto.

Código HTML:

<div id="boxTema">
<h4>contactoTemas</h4>
</div>
<div id="boxTema"><!-- fallo -->
 

[Batan]

Perdon tienes 3 DIV con el mismo identificador, fijate en eso.

[ie8]

Ok, muchas gracias menudo error más estúpido, pero me había cegado. Lamento las molestias.

Una duda, porque hay un espacio entre el h4 y el span?



No encuentro la forma de quitar la franja esa.
css

Código:

.cuerpo .boxTema h4
{
background-color:#336666;
}
.cuerpo .boxTema
{
background-color:#999999;
}
.cuerpo .boxTema .nombre, .cuerpo .boxTema .usuario
{
background-color:#CCCCCC;
display:block;
}
.cuerpo .boxTema .cuerpoMensaje
{
background-color:#00FFFF;
display:block;
}
.cuerpo .boxTema hr
{
margin: 10px 0 10px 0;
display:block;
}

html

Código:

<div class="cuerpo">
<div class="boxTema">
<h4>Sugerencias</h4>
<span class="usuario">Usuario: <a href="">admin</a> - 127.0.0.1</span>

<span class="cuerpoMensaje">as</span>
<hr/>
<span class="usuario">Usuario: <a href="">admin</a> - 127.0.0.1</span>
<span class="cuerpoMensaje">asd</span>
<hr/>
</div>
</div>

[Batan]

No pasa nada por el error.

Modificaste algo de los estilos?

[ie8]

He editado la anterior respuesta, con el código actual de CSS y HTML y el resultado(imagen).

[Batan]

Bueno es normal por que en los estilos de tu <hr /> tienes fijado el margin a 10 px de span.

Código CSS:

.cuerpo .boxTema hr
{
margin: 10px 0 10px 0; /*error*/
display:block;
}
 

Si lo cambias por margin: 0px 0 10px 0px. Le esta dando un margin de 10px de distancia respecto a ese span
Te quitara el espacio. Te explicaria todo eso pero me tengo que ir a cenar xD sorry.

[mar_x4_superxv]

No te recomiendo usar hr por el tema de las compatibilidad en los navegadores (ie) te conviene darle al div un border-bottom o bien crear un div con 1px de alto para mostrar esa linea.
Tenias un </div> de mas. Bueno igual lo dejo.
.cuerpo
{
float:left;
height:191px;
width:101px
}
.contacto,.Sugerencias,.publicidad
{
background-color:#336666;
font-weight:bold;
}
.contacto
{
margin-bottom:23px;
}
.gris
{
background-color:#999999;
height:78px;
width:101px;
border-bottom:1px solid black;
margin-bottom:23px;
}
.Nombre
{
background-color:#CCCCCC;
}

.test
{
background-color:#00FFFF;
}
.publicidad
{
height:49px;
width:101px
}

<div class="cuerpo">
<div class="contacto">contactoTemas</div>

<div class="gris">
<div class="Sugerencias">Sugerencias</div>
<div class="Nombre">Nombre: as - </div>
<div class="test">this a test222</div>
</div>
<div class="publicidad">
Publicidad
</div>
</div>

[ie8]

hola primero de todo gracias a los dos por responder.

A Batan, no me refiero a esa franja sino a la que se creaba entre:

Código:

<h4>Sugerencias</h4>
<span class="usuario">Usuario: <a href="">admin</a> - 127.0.0.1</span>

A la franja que se crea entre lo anterior.

Para mar_x4_superxv con el código que tu me pasas se soluciona todo, y tienes razón con lo de usar </hr> muchas gracias lo tendré en cuenta.
Sólo una cosilla, no es perjudicial usar tanto div?

[Batan]

Perdona, no entendi bien, me llamaban desde hace un momento para cenar.

Es mejor usar DIV por que es son mas moldeables.

[ie8]

Es mejor usar DIV por que es son mas moldeables.

Sí pero para introducir texto también?, yo creía que era mejor en <p> y <span>.

Perdona, no entendi bien, me llamaban desde hace un momento para cenar.

tu te refieres a la franja 2 yo a la franja 1. Quiero eliminar esa franja 1.

[Batan]

Ok, pues el creo que el h4 tiene por defecto un margin, no lo se bien la verdad.
Pon margin: 0; a la etiqueta h4 y solucionado.

Código CSS:

.cuerpo .boxTema h4
{
background-color:#336666;
margin: 0px;
}
 

Saludos

[ie8]

Muchisimas gracias Batan, al parecer tenía ese margin. yo también me acabo de enterar ahora mismo -.-

Gracias de nuevo.

[Batan]

Iniciado por ie8

Sí pero para introducir texto también?, yo creía que era mejor en <p> y <span>.

Puedes ponerlos dentro de un Div, y dentro de este darle sus estilos propios, y asi moldeas el div a tu gusto y sin problemas, claro que no siempre hay que usar div xD

Saludos y suerte

[mar_x4_superxv]

Esta bien que uses <p> y <span> para el texto. Pero en este caso como no quedaba en la posicion que vos querias te convenia meterlo adentro de un div.
Cada ves que crees un div dale siempre estas 3 propiedades: width, height y float. Ademas del margin o position si queres cambiar su ubicacion.