Foros del Web » Creando para Internet » CSS »

¿Por qué 300+300+300‡900?

Estas en el tema de ¿Por qué 300+300+300‡900? en el foro de CSS en Foros del Web. Hola buenas. Disculpas por mi ignorancia. Veréis, estoy maquetando mi página. Como cabecera, contendrá tres imágenes, especificadas con un ancho de 300 pixeles cada una. ...
  #1 (permalink)  
Antiguo 20/08/2009, 04:36
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Pregunta ¿Por qué 300+300+300‡900?

Hola buenas. Disculpas por mi ignorancia. Veréis, estoy maquetando mi página. Como cabecera, contendrá tres imágenes, especificadas con un ancho de 300 pixeles cada una.

Código HTML:
<img src="altiz.jpg" width ="300 px" height ="75 px" alt="Cabecera" /> 
El estilo para las imágenes es:

Código HTML:
img {
 border : none;
 margin : 0 px 0px;
 padding : 0 px 0 px;
 }
La cabecera está en una capa cuyo ancho lo he estipulado en 900 pixeles.

Código HTML:
div#contenido {
 margin : 0px auto;
 width : 900px;
}
Pues a pesar de quitar los márgenes interiores y exteriores de las imágenes y sus bordes, las tres imágenes no me entran en una misma línea de la capa. Tengo que reducir una a 288 pixeles de ancho para que entre.

Aclaro que una de las imágenes es un enlace.

¿Se os ocurre cuál es mi fallo? Muchas gracias. Saludos.
  #2 (permalink)  
Antiguo 20/08/2009, 05:06
 
Fecha de Ingreso: enero-2006
Ubicación: Madrid
Mensajes: 74
Antigüedad: 11 años, 10 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Quizá sea el enlace o quizá el div contenedor. Una buena práctica es "resetear" los estilos al principio de tu hoja de estilos CSS para que no te tome nada (o lo menos posible) de los valores predeterminados por los navegadores. Puedes buscar estos códigos de reset en Internet, yo uso éste al principio de mi hoja de estilos:

/* --- CSS Reset --- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

Y a partir de ahí ya tienes la seguridad de que trabajas sobre un CSS más o menos "limpio" ;O)
__________________
Iulius
La diminuta consultoría web de Iulius -> http://iulius.net
http://nodulos.blogspot.com
  #3 (permalink)  
Antiguo 20/08/2009, 05:50
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

¡Coñe! ¡Que buena idea. Muchas gracias, me lo agencio y te cuento ;)
  #4 (permalink)  
Antiguo 20/08/2009, 05:53
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Lo sigue haciendo :( De todas formas, gracias, me ha gustado la idea.
  #5 (permalink)  
Antiguo 20/08/2009, 06:57
 
Fecha de Ingreso: enero-2006
Ubicación: Madrid
Mensajes: 74
Antigüedad: 11 años, 10 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Cita:
Iniciado por Maicro Ver Mensaje
Lo sigue haciendo :( De todas formas, gracias, me ha gustado la idea.
Mmm... si me pasas la url puedo echarle un ojo si quieres
__________________
Iulius
La diminuta consultoría web de Iulius -> http://iulius.net
http://nodulos.blogspot.com
  #6 (permalink)  
Antiguo 20/08/2009, 07:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Por qué 300+300+300‡900?

Posiblemente lo soluciones si al selector de img añades un "float:left", borrando el espacio en blanco que tienes entre 0 px (0px) o mejor aún, cuando un valor es cero, no necesitas especificar la unidad (es cero ya sean px, em, %...)

Mira este código. Redimensiono las imágenes via css porque son mayores y tomadas de la red para el ejemplo:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
  6. body {background: #cdcdcd}
  7. #contenido {
  8. margin:0 auto;
  9. overflow:hidden;
  10. width:900px;
  11. }
  12. #contenido img {float: left; width: 300px; height: 200px;}
  13.  
  14. </head>
  15. <div id="contenido">
  16. <img src="http://e-nimals.com/wp-content/uploads/2008/05/el-pajaro-mosca.jpg" alt="1" />
  17. <img src="http://www.afotos.net/public/albunes/468/pajaro.jpg" alt="2" />
  18. <img src="http://www.fotografia-digital.info/pajaros/pajaro-4.jpg" alt="3" />
  19. </div>
  20. </body>
  21. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 20/08/2009, 09:13
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

¡RESUELTO!



Muchas gracias, Kseso?, esto es lo que me lo ha solucionado:

Código HTML:
#contenido img {
 float: left;
 width: 300px;
 height: 75px;
}
por cierto, Kseso?, esto que pones:

Código HTML:
* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
¿es lo mismo que me ha dicho iulius para resetear cualquier estilo que tuviera el navegador?, ¿el * es un comodín que englobe a todos los elementos?

Muchas gracias.

Iulius, la página está muy verde, es esta: www.maicro.es/classicco. Gracias por tu ayuda. Para ti y para Kseso:

  #8 (permalink)  
Antiguo 20/08/2009, 09:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Por qué 300+300+300‡900?

Efectivamente, Maicro, es un "mini-reset", que para estos casos me vale.

Y gracias por ummmh? bueno, lo dejamos sin el "por"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 20/08/2009, 09:26
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

De nada, gracias a ti, de nuevo.
  #10 (permalink)  
Antiguo 20/08/2009, 10:14
 
Fecha de Ingreso: enero-2006
Ubicación: Madrid
Mensajes: 74
Antigüedad: 11 años, 10 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

jusjusjus, gracias XD. Se ve maja la cabecera :O)
__________________
Iulius
La diminuta consultoría web de Iulius -> http://iulius.net
http://nodulos.blogspot.com
  #11 (permalink)  
Antiguo 20/08/2009, 10:21
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: ¿Por qué 300+300+300‡900?

Cita:
Iniciado por iulius Ver Mensaje
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{ blabla }
todo eso lo puedes sustituir por esto:
Código css:
Ver original
  1. *{ blabla }
El * es lo que se llama un selector universal, representa a todos los elementos existentes.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #12 (permalink)  
Antiguo 20/08/2009, 10:32
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Cita:
Iniciado por iulius Ver Mensaje
jusjusjus, gracias XD. Se ve maja la cabecera :O)
Gracias. [Modo="No tengo abuela"]Pues cuando veas el resto...[/Modo]
  #13 (permalink)  
Antiguo 20/08/2009, 10:33
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Cita:
Iniciado por webosiris Ver Mensaje
todo eso lo puedes sustituir por esto:
Código css:
Ver original
  1. *{ blabla }
El * es lo que se llama un selector universal, representa a todos los elementos existentes.
Sí, sí, ya me había quedado claro con lo que me dijo Kseso? Lo supuse del *.* del DOS... Tiempos aquellos... Gracias.
  #14 (permalink)  
Antiguo 20/08/2009, 11:16
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Respuesta: ¿Por qué 300+300+300‡900?

Cita:
Iniciado por Maicro Ver Mensaje
Sí, sí, ya me había quedado claro con lo que me dijo Kseso? Lo supuse del *.* del DOS... Tiempos aquellos... Gracias.
FAIL mio, no había leido a Kseso
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #15 (permalink)  
Antiguo 20/08/2009, 11:31
 
Fecha de Ingreso: enero-2006
Ubicación: Madrid
Mensajes: 74
Antigüedad: 11 años, 10 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Gracias Webosiris :O)
__________________
Iulius
La diminuta consultoría web de Iulius -> http://iulius.net
http://nodulos.blogspot.com
  #16 (permalink)  
Antiguo 20/08/2009, 12:31
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

Nada, hombre. Es que tantas birritas no son buenas
  #17 (permalink)  
Antiguo 20/08/2009, 13:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Por qué 300+300+300‡900?

Cita:
Iniciado por webosiris Ver Mensaje
FAIL mio, no había leido a Kseso
Hay quien quería echarle mano a ella opss!
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 24/08/2009, 06:11
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

¡MUCHO CUIDADO!

Código HTML:
* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
Este código me ha tenido un día loco. En el CSS y visualizando la página en IE6, hace inservibles las barras de desplazamiento y bloquea la página de manera que es imposible descender por su contenido. Desconozco el porqué, pero lo advierto por si es empleado por la gente y le pasa lo mismo. Desconozco si versiones superiores de IE presentan el mismo problema. De nada
  #19 (permalink)  
Antiguo 24/08/2009, 07:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Por qué 300+300+300‡900?

Hola Maicro
Tampoco es necesario gritar tan alto y en colores cuando uno se topa con un bug documentado de ie6 y ya publicada la solución oportuna.

Una pequeña jaculatoria a google.

Y la solución es tan simple como añadir a continuación del selector universal * la siguiente línea:
Cita:
* html, * body { height: 100%; overflow:auto;}
También funciona sin el * que precede a html y body.
Ahora sólo es cuestión de cada cual y de cada proyecto en el que se esté trabajando evaluar si se utiliza "position: relative" en el selector universal o no.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 24/08/2009 a las 07:50
  #20 (permalink)  
Antiguo 24/08/2009, 08:47
Avatar de Maicro  
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 8 años, 4 meses
Puntos: 2
Respuesta: ¿Por qué 300+300+300‡900?

¡Ejem! Es que después del quebradero de cabeza que me ha dado, no quería que algún indocumentado como yo emplease el código y tuviese el problema que he tenido yo. Disculpas.

No sabía que fuese un error conocido de Güindos. Es la primera página que hago desde hace mucho y la primero que intento que sea estándar y no dé problemas. Es para un gran amigo al que admiro mucho y estoy emocionado con el proyecto. De ahí mi exceso de entusiasmo. Lo siento.

Código HTML:
* html, * body { height: 100%; overflow:auto;}
Esto no lo tenía, pero esto sí:

Código HTML:
body { height: 100%; overflow:auto;}
Y aun así me daba fallo, creo recordar. De todas formas, no lo emplearé, viendo que funciona correctamente con toda la implementación que le he metido a mi hoja de estilo. No obstante, gracias por el aviso. No te niego que acabe empleándolo ;)
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 15:44.