[SOLUCIONADO] borde misterioso debajo de imagenes

Macro32 · #1 (**permalink**) 10/06/2013, 14:48

Hola a todos, tengo el problema que me aparece un borde debajo de las imagenes. Aca tengo un ejemplo, debajo del logo color negro queda un pequeño borde en el header.

Espero puedan ayudarme gracias!.

codigo HTML
<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title> Starbuzz: El mejor Cafe!</title>
<link type="text/css" rel="stylesheet" href="style1.css">
</head>

<body>
<div id="header"><img src="imagenes/logo.gif" alt="logo de starbuzz"></div>
<div id="footer"> STARBUzz es una marca registrada. Copyright 2013.</div>
</body>

</html>

codigo CSS

body {

background-color: white;
margin:auto;
margin-top:0px;
margin-bottom:0px;
width:800px;
padding:0px;
font-family: verdana,geneva,sans-serif;

color:rgb(0,0,0);

line-height:30px;

}

#header{
background-color: rgb(100,50,80);
padding:0px;
}

#footer{
background-color: rgb(200,50,100);
padding: 0px;
font-size:11px;
text-align: right;
color: white;

}

buzu · #2 (**permalink**) 10/06/2013, 16:36

No estoy seguro de por que pasa eso, pero para solutionarlo puede agregar esta linea al css de tu imagen:

Código CSS:

Ver originalvertical-align: bottom;

por ejemplo:

Código CSS:

Ver originalimg {
vertical-align: bottom;
}

Rafael · #3 (**permalink**) 10/06/2013, 18:15

Trata también con

Código CSS:

Ver originalimg {display: block;}

Buzu deja entrever que las imagenes son tipo inline, lo que les da una altura de linea que hay que corregir.

Macro32 · #4 (**permalink**) 10/06/2013, 21:32

gracias BUZU y RAFAEL..ambas funcionaron. Lo que no tengo muy claro aun es porque fue necesario hacer eso..pero bueno, mientras sigo avanzando! gracias.

Rafael · #5 (**permalink**) 11/06/2013, 07:06

Los elementos inline son lineas de texto. Este monito ahí parado está también sobre la misma linea de texto, por lo que comparte el espaciado entre lineas,

el interlineado. Hay que eliminar ese interlineado.

buzu · #6 (**permalink**) 11/06/2013, 19:10

Hacer el display block fue mi primer solucion, pero no me convencio por las implicaciones que conlleva. Sin saver cual era la intencion ni los elementos que podrian se colocados en algun momento junto con la imagen, decidi que vertical-align era una mejor solucion ya que es la que altera de la forma mas minima el comportamiento de la imagen. Pero, es bueno que lo mencionas ya que asi se tienen ambas soluciones y se puede elegir la que mejor se acomode.

Mi sugerencia es siempre usar reglas que alteren lo menos posible el comportamiento natural de los elementos a los que se las aplicamos. Siguiendo esa simple regla es facil ahorrarnos dolores de cabeza en el futuro.

Rafael · #7 (**permalink**) 12/06/2013, 07:18

Yo por mi parte siempre considero las imágenes como bloques, será por el diseño editorial, será por mi perfil de diseñador, alinear solamente una linea base nunca me convenció, así que nunca pense en solucionar el problema como alineación.

Cuando salió el float, lo amé.

Pero sí, la tuya es una solución que no conocía.

buzu · #8 (**permalink**) 12/06/2013, 18:13

Cad quien tiene sus razones muy validas, y creo que tu forma de ver las cosas tiene mucho sentido. Cada quien en base a su experiencia se forma distintas normas a la hora de trabajar, y siempre es bueno saber no solo la forma en que cada uno hace las cosas, sino las razones por que nos expanden la forma de pensar sobre el desarrollo.

Rafael · #9 (**permalink**) 14/06/2013, 01:47

Lo que son las cosas.
Por primera vez tuve que pasar una imagen de block a inline debido a una alineación que necesitaba. Un script me estaba impidiendo flotar, y no me pelaba el text align del conenedor.

buzu · #10 (**permalink**) 14/06/2013, 13:08

hmm... a veces la info nos llega en el momento justo jeje.

arcanisgk122 · #11 (**permalink**) 14/06/2013, 13:17

yo odie el float por los problemas en el diseño multi plataforma... y preferi ir por el display:inline-block

pzin · #12 (**permalink**) 15/06/2013, 13:07

Cita:

Iniciado por arcanisgk122

yo odie el float por los problemas en el diseño multi plataforma... y preferi ir por el display:inline-block

¿Qué problemas son esos?

buzu · #13 (**permalink**) 15/06/2013, 15:26

display: inline-block; no hace lo mismo que float. Si bien es cierto que hay ocaciones en las que podemos elegir una o otra solucion, la verdad es que siempre hay que usar la herramienta correcta para el trabajo que estamos realizando. Hay ocaciones en que display: inline-block; es lo que necesitamos, y hay otras en las que lo que necesitamos es float. Hay ocaciones cuando necesitamo usar display: block;. Todo se trata de buscar la herramienta que mejor se acomode y que nos resuelva el problema de la mejor manera sin necesidad de intoducir complicaciones innecesarias.

arcanisgk1 · #14 (**permalink**) 18/06/2013, 15:07

pasa que si usas float y la web la ves desde un móvil se te descuadra completamente al cambiar el tamaño de pantalla a una resolución inferior. en cambio con inline-block el descuadre se transforma en un salto de linea y esto hace que quede uno debajo del otro sin dañarse el diseño completamente y facilitando la lectura en columna.

http://www.ternstyle.us/blog/float-vs-inline-block

http://www.youtube.com/watch?v=a041qWURsH0

pzin · #15 (**permalink**) 18/06/2013, 15:43

Bueno, los argumentos del tipo del video son bastante lamentables. Lo que hace es crear una situación bastante tonta donde obviamente es mejor usar inline-block, pero conseguiría lo mismo poniéndole el flotado a la izquierda en lugar de a la derecha.
Luego es malo usar floats porque hay que añadirle overflow al padre pero no es tan malo usar inline-block aunque haya que usar, atención, v-align —no vertical-align.

Hay que mirar mejor de donde se nutre uno. A ver quién te quita ahora esa idea de la cabeza.

buzu · #16 (**permalink**) 18/06/2013, 19:30

Sigo con lo mismo, en cada momento hay que usar la herramienta adecuada. Eso de float vs block se me hace un debate sin sentido. Ninguno es mejor que el otro, son para cosas diferentes. Pero valla, que si les gustan ese tipo de debates, yo propongo que debatamos sobre si una papa es mejor que un martillo. Yo le voy a la papa....

Rafael · #17 (**permalink**) 18/06/2013, 23:03

A ver, dependerá si la papa es frita, y a su vez a la francesa o en rebanadas crujientes....

pzin · #18 (**permalink**) 19/06/2013, 05:35

Ya saben como termina... Nada más que argumentar.

Rafael · #19 (**permalink**) 19/06/2013, 09:09

¡NOOOooo...!

buzu · #20 (**permalink**) 19/06/2013, 15:29

pzin, por otro lado, trata de darle una mordida al martillo y me dices si es que no hay mas que argumentar jajajajajaja....