Foros del Web » Creando para Internet » CSS »

Problema maquetando

Estas en el tema de Problema maquetando en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/07/2011, 13:54
ie8
 
Fecha de Ingreso: febrero-2011
Mensajes: 25
Antigüedad: 6 años, 5 meses
Puntos: 0
Problema maquetando

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
  #2 (permalink)  
Antiguo 23/07/2011, 14:31
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

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:
Ver original
  1. <div id="boxTema">
  2. <h4>contactoTemas</h4>
  3. </div>
  4. <div id="boxTema"><!-- fallo -->
  #3 (permalink)  
Antiguo 23/07/2011, 14:32
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

Perdon tienes 3 DIV con el mismo identificador, fijate en eso.
  #4 (permalink)  
Antiguo 23/07/2011, 14:43
ie8
 
Fecha de Ingreso: febrero-2011
Mensajes: 25
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema maquetando

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>

Última edición por ie8; 23/07/2011 a las 14:52 Razón: duda
  #5 (permalink)  
Antiguo 23/07/2011, 14:55
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

No pasa nada por el error.

Modificaste algo de los estilos?
  #6 (permalink)  
Antiguo 23/07/2011, 14:59
ie8
 
Fecha de Ingreso: febrero-2011
Mensajes: 25
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema maquetando

He editado la anterior respuesta, con el código actual de CSS y HTML y el resultado(imagen).
  #7 (permalink)  
Antiguo 23/07/2011, 15:07
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

Bueno es normal por que en los estilos de tu <hr /> tienes fijado el margin a 10 px de span.
Código CSS:
Ver original
  1. .cuerpo .boxTema hr
  2. {
  3. margin: 10px 0 10px 0; /*error*/
  4. display:block;
  5. }

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.
  #8 (permalink)  
Antiguo 23/07/2011, 15:18
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 41
Antigüedad: 6 años, 1 mes
Puntos: 2
Respuesta: Problema maquetando

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>
  #9 (permalink)  
Antiguo 23/07/2011, 15:44
ie8
 
Fecha de Ingreso: febrero-2011
Mensajes: 25
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema maquetando

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?
  #10 (permalink)  
Antiguo 23/07/2011, 15:49
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

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

Es mejor usar DIV por que es son mas moldeables.
  #11 (permalink)  
Antiguo 23/07/2011, 15:55
ie8
 
Fecha de Ingreso: febrero-2011
Mensajes: 25
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema maquetando

Cita:
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>.

Cita:
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.

  #12 (permalink)  
Antiguo 23/07/2011, 16:13
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

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:
Ver original
  1. .cuerpo .boxTema h4
  2. {
  3. background-color:#336666;
  4. margin: 0px;
  5. }

Saludos
  #13 (permalink)  
Antiguo 23/07/2011, 16:16
ie8
 
Fecha de Ingreso: febrero-2011
Mensajes: 25
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Problema maquetando

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

Gracias de nuevo.
  #14 (permalink)  
Antiguo 23/07/2011, 16:19
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 10 meses
Puntos: 63
Respuesta: Problema maquetando

Cita:
Iniciado por ie8 Ver Mensaje
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
  #15 (permalink)  
Antiguo 23/07/2011, 19:56
 
Fecha de Ingreso: mayo-2011
Ubicación: Buenos Aires
Mensajes: 41
Antigüedad: 6 años, 1 mes
Puntos: 2
Respuesta: Problema maquetando

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.

Etiquetas: fondo
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 10:26.