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

Maicro · #1 (**permalink**) 20/08/2009, 03:36

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.

iulius · #2 (**permalink**) 20/08/2009, 04:06

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)

Maicro · #3 (**permalink**) 20/08/2009, 04:50

¡Coñe! ¡Que buena idea. Muchas gracias, me lo agencio y te cuento ;)

Maicro · #4 (**permalink**) 20/08/2009, 04:53

Lo sigue haciendo :( De todas formas, gracias, me ha gustado la idea.

iulius · #5 (**permalink**) 20/08/2009, 05:57

Cita:

Iniciado por Maicro

Lo sigue haciendo :( De todas formas, gracias, me ha gustado la idea.

Mmm... si me pasas la url puedo echarle un ojo si quieres

kseso? · #6 (**permalink**) 20/08/2009, 06:19

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

Un saludo

Maicro · #7 (**permalink**) 20/08/2009, 08:13

¡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:

kseso? · #8 (**permalink**) 20/08/2009, 08:18

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

Y gracias por ummmh?

bueno, lo dejamos sin el "por"

Maicro · #9 (**permalink**) 20/08/2009, 08:26

De nada, gracias a ti, de nuevo.

iulius · #10 (**permalink**) 20/08/2009, 09:14

jusjusjus, gracias XD. Se ve maja la cabecera :O)

webosiris · #11 (**permalink**) 20/08/2009, 09:21

Cita:

Iniciado por iulius

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*{ blabla }

El * es lo que se llama un selector universal, representa a todos los elementos existentes.

Maicro · #12 (**permalink**) 20/08/2009, 09:32

Cita:

Iniciado por iulius

jusjusjus, gracias XD. Se ve maja la cabecera :O)

Gracias. [Modo="No tengo abuela"]Pues cuando veas el resto...[/Modo]

Maicro · #13 (**permalink**) 20/08/2009, 09:33

Cita:

Iniciado por webosiris

todo eso lo puedes sustituir por esto:

Código css:

Ver original*{ 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.

webosiris · #14 (**permalink**) 20/08/2009, 10:16

Cita:

Iniciado por Maicro

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

iulius · #15 (**permalink**) 20/08/2009, 10:31

Gracias Webosiris :O)

Maicro · #16 (**permalink**) 20/08/2009, 11:31

Nada, hombre. Es que tantas birritas no son buenas

kseso? · #17 (**permalink**) 20/08/2009, 12:41

Cita:

Iniciado por webosiris

FAIL mio, no había leido a Kseso

Hay quien quería echarle mano a ella opss!

Maicro · #18 (**permalink**) 24/08/2009, 05:11

¡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

kseso? · #19 (**permalink**) 24/08/2009, 06:40

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

Maicro · #20 (**permalink**) 24/08/2009, 07:47

¡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 ;)