Foros del Web » Creando para Internet » Diseño web »

problema de maquetacion básico

Estas en el tema de problema de maquetacion básico en el foro de Diseño web en Foros del Web. Hola buenas a todos y todas, tengo un problema basico de maquetación se trata de lo siguiente: se trata de dos DIV: <div id="vacio"></div><div id="titular"></div> ...
  #1 (permalink)  
Antiguo 09/03/2009, 15:26
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
problema de maquetacion básico

Hola buenas a todos y todas,
tengo un problema basico de maquetación se trata de lo siguiente:

se trata de dos DIV:

<div id="vacio"></div><div id="titular"></div>

y sus reglas CSS:

#vacio {
width:208px;
height: 40px;
float:left;
}
#titular {
background-image:url(../img/phd.gif);
background-repeat:no-repeat;
width:700px;
height:40px;
}


el DIV con id "titular" tiene una imagen asociada en el fondo (background). Especifico el tamaño de los dos DIV en la hoja de estilos y le digo al DIV "vacio" que tenga la propiedad FLOAT a left. Cuando visualizo la pagina me coloca la imagen de fondo del segundo div en el sitio que no toca.........a ver si alguien me puede orientar

Gracias.
Ratus Brown.
  #2 (permalink)  
Antiguo 09/03/2009, 15:38
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: problema de maquetacion básico

Cuando quieras que un div respete las medidas que le estas aplicando es necesario especificar display:block;
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 09/03/2009, 16:42
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: problema de maquetacion básico

no, no forzosamente, solo tiene que tener contenido. Si está vacío no las respeta, por lo que se da el problema. Sin embargo, el problema, creo yo, va más aya. Es poco (lease nada) semántico usar un div vacío. Cual es la función del ese div? por que no nos muestras una imagen de lo que quieres lograr y quizá se te pueda sugerir una mejor forma...
__________________
twitter: @imbuzu
  #4 (permalink)  
Antiguo 09/03/2009, 17:02
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: problema de maquetacion básico

ya he comprobado que no puedo subir imágenes directamente.......intentare subir una mediante web

Última edición por Ratus-BROWN; 09/03/2009 a las 17:16
  #5 (permalink)  
Antiguo 09/03/2009, 18:41
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: problema de maquetacion básico

Bueno aqui os pongo el link con una imagen que puede orientar sobre lo que pregunto.....


ucvmastercd.com/aaronbellot/

a ver si alguien pudiera decirme donde estoy cometiendo el fallo

gracias

Ratus-Brown
  #6 (permalink)  
Antiguo 09/03/2009, 18:46
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: problema de maquetacion básico

simplemente dale un margen a tu div donde esta lo de bienvenido.

#titular {
background-image:url(../img/phd.gif);
background-repeat:no-repeat;
width:700px;
height:40px;
margin: auto auto auto 208px;
}
__________________
twitter: @imbuzu
  #7 (permalink)  
Antiguo 09/03/2009, 19:11
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 8 años, 10 meses
Puntos: 8
Respuesta: problema de maquetacion básico

Muchas gracias buzu!!

Lo he solucionado de esta manera tambien, utilizando un solo DIV:

#titular {
background-image:url(../img/phd.gif);
background-repeat:no-repeat;
background-position: 208px;
width:908px;
height:40px;

}

le doy una posicion al background. Esto funciona correctamente, pero ¿es logico hacerlo como lo he hecho yo?..........por cierto ¿porque en tu regla pones tres veces auto ?


Gracias.
Ratus-Brown

Última edición por Ratus-BROWN; 09/03/2009 a las 19:13 Razón: cambio
  #8 (permalink)  
Antiguo 09/03/2009, 20:53
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: problema de maquetacion básico

Pues es una solución, aun que lo logico, ya que lo preguntas, es que usaras una imagen <img> en lugar de un div. Es más semántico. Con respecto a lo de los auto, es por que el margin-left (o como sea) no me gusta mucho, de modo que uso margin: auto auto auto 280px; Los valores corresponden al margen superior, derecho, inferior e izquierdo en ese orden.
__________________
twitter: @imbuzu
  #9 (permalink)  
Antiguo 09/03/2009, 20:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: problema de maquetacion básico

También puedes unir todas esas reglas en una sola, por tenerlo un poco más limpio:
Código css:
Ver original
  1. #titular{
  2. background:transparent url(../img/phd.gif) no-repeat 208px;
  3. width:908px;
  4. height:40px;
  5. }
  #10 (permalink)  
Antiguo 10/03/2009, 02:06
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: problema de maquetacion básico

Si, es buena idea, aun que no se ve más limpio a mi parecer, pero si ahorra espacio y pesa menos. Se le conoce como shortland si no mal recuerdo.

Buena sugerencia Bonez.
__________________
twitter: @imbuzu
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 17:05.