Ajustar bien dos elementos

mechaz · #1 (**permalink**) 29/06/2012, 12:20

Bueno primero que todo me gustaría compartir una imagen, para poder mostrar mejor el problema que tengo:

Como se puede ver en la imagen, el comentario "1", está posicionado, como deseo que queden todos (con un display:inline;), pero los comentarios mas cortos, envesde alinearsen arriba, se alinean abajo, y pues yo deseo lo contrario.

Eso es todo, y pues se agradece cualquier respuesta.

kseso? · #2 (**permalink**) 29/06/2012, 14:06

Hecho!!!!

¿No vio acaso que estamos en el foro de CSS?

mechaz · #3 (**permalink**) 29/06/2012, 14:36

Claro que se que es foro de CSS, mi idea no es arreglar la imagen, con la imagen solo quería mostrar mi idea que era alinear esos elementos mediante CSS, y dejarlos tal cual tu los pusistes en tu imagen, pero mediante codigo, lo intente con floats, con display y con positions, pero no logre hacerlo (seguramente hacia algo mal).

kseso? · #4 (**permalink**) 29/06/2012, 14:50

Bien.
No todo está perdido. Dice que sabe que estamos en el foro de css.
La duda que tengo ahora es si sabe con qué se trabaja en este foro.
Una pista: empieza por có, termina por go, y en medio tiene una d y i.

¿Va a seguir con perogrulladas o va a hacer lo que debería haber hecho desde un inicio?
O necesita que se le explique porqué el adivino se despidió.

mechaz · #5 (**permalink**) 29/06/2012, 15:21

El código está diferente al de la primera imagen, ya que estaba intentando arreglarlo y pues lo deje peor, pero la idea perdura, ademas de contener imágenes de fondo, y código del lado del servidor...

HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div class="com1">
   		<div id="comentDatos"><span class="por">@usuario</span><span class="comentHora">Hora Minuto...</span></div>
       	<br />
        <div id="avatar"><img src="http://i.imgur.com/eZTJC.jpg" alt="" /></div>	
            <div id="contenidoComent">
            Cualquier comentario...
          	</div>
</div>
</body>
</body>
</html>

CSS...

Código:

@charset "utf-8";
/* CSS Document */

#comentDatos {
	display:block;	
}

#avatar img{
	border:1px solid #000;
	display:inline;
	position:relative;
	left:20px;
	top:10px;
	max-width:100px;	
	max-height:70px;
}

#contenidoComent {
	display:inline;
	margin-left:60px;
	margin-bottom:10px;
	width:480px;
}

.com1 {
	background-color:rgba(200,200,200,0.2);
	border-bottom:4px dotted #F00;	
	margin-top:20px;
}

.com1 .por {
	background-color:#0CF;
	border-radius:10px;
	color:#000;
	font-family:arial, Verdana, Geneva, sans-serif;	
	font-weight:bold;
	padding:5px 15px;
	text-align:center;
}

.com1 .comentHora {
	background-color:#0CF;
	border-radius:10px;
	color:#000;
	font-family:arial, Verdana, Geneva, sans-serif;	
	font-weight:bold;
	margin-left:20px;
	margin-top:40px;
	padding:5px 15px;
	text-align:center;
}

.nombre, .fecha, .titulo {
	background-color:#000;
	border:1px solid #000;
	border-radius:0;
	color:#FFF;
	padding:5px 20px;
}

.titulo {
	background-color:#0C72A5;
	display:block;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	word-wrap:break-word;
}

(Está desordenado, pero se entiende...)

Respecto al último comentario, mi idea no era que me dieras el código ya hecho, simplemente con decirme que debía estudiar para arreglar dicho problema sería suficiente.

Que tu trabajes con "código", no quiere decir que todos hagan lo mismo, yo di unos recursos para hacerme entender, si no es tu forma de trabajar, simplemente dale click al botón "atrás", o cierra la pestaña (ya que no ahí una regla en la cual se diga que es obligatorio publicar el código)...

kseso? · #6 (**permalink**) 29/06/2012, 15:31

Cita:

Iniciado por mechaz

Respecto al último comentario, mi idea no era que me dieras el código ya hecho, simplemente con decirme que debía estudiar para arreglar dicho problema sería suficiente.

Que tu trabajes con "código", no quiere decir que todos hagan lo mismo, yo di unos recursos para hacerme entender, si no es tu forma de trabajar, simplemente dale click al botón "atrás", o cierra la pestaña (ya que no ahí una regla en la cual se diga que es obligatorio publicar el código)...

Gracias por liberarme de la obligación moral de ayudarle que había contraído conmigo mismo.

Suerte.

Edito y amplío:
Así es como se debe plantear una consulta. Vea y aprenda.
Y creo que ésta es la mejor ayuda que se le puede dar si es su intención convertirse en un usuario considerado (bien) de estos foros.

kseso? · #7 (**permalink**) 29/06/2012, 16:21

Si es que ni aprendo ni consigo enseñar un mínimo :palm:
Pues no estaba picando códigos (depurando html y css) y cuando venía con ellos me encuentro la impertinencia en forma de -k a mi primer comentario. ¡Cuando ya íbamos por el #6!

Así que como lo soy pero no tanto, me limito a mostrarle lo que había realizado, mechaz, pero en imagen, para que vea que es sencillo:

Para todo lo demás: www.librosweb.es y google y las especificaciones

Lo dicho: suerte en su estancia por el foro.
Para todo lo demás está el ignore

mechaz · #8 (**permalink**) 29/06/2012, 17:31

Bueno, ya logre aclarar mi duda, y me gustaría dejarla acá, por si a alguna persona se le presenta esté error, o bien quiere alinear dos divs, sin necesidad de usar los floats (que a mi punto de vista son algo incómodos).

Acá os dejo el código:

HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div class="com1">
<div id="comentDatos">
 	<span class="por">@usuario</span><span class="comentHora">Hora Minuto...</span>
</div>
<br />
    <div id="avatar">
      	<img src="http://i.imgur.com/eZTJC.jpg" alt="" />
    </div>	
            <div id="contenidoComent">
            Cualquier comentario...
         	</div>         
</div>
</body>
</html>

CSS

Código:

@charset "utf-8";
/* CSS Document */

#comentDatos {
	display:block;	
}

#avatar {
	display:inline-block;
	vertical-align:top;
}

#avatar img{
	max-width:100px;	
	max-height:70px;
}

#contenidoComent {
	display:inline-block;
	vertical-align:central;
	width:480px;
}

.com1 {
	background-color:rgba(200,200,200,0.2);
	border-bottom:4px dotted #F00;	
	clear:both;
	margin-top:20px;
}

.com1 .por {
	background-color:#0CF;
	border-radius:10px;
	color:#000;
	font-family:arial, Verdana, Geneva, sans-serif;	
	font-weight:bold;
	padding:5px 15px;
	text-align:center;
}

.com1 .comentHora {
	background-color:#0CF;
	border-radius:10px;
	color:#000;
	font-family:arial, Verdana, Geneva, sans-serif;	
	font-weight:bold;
	margin-left:20px;
	margin-top:40px;
	padding:5px 15px;
	text-align:center;
}

.nombre, .fecha, .titulo {
	background-color:#000;
	border:1px solid #000;
	border-radius:0;
	color:#FFF;
	padding:5px 20px;
}


#piePagina {
	clear:both;
}

Lo que hace el "display:inline-block;" es evitar que la caja, se tome todo el espacio horizontalmente, y el "vertical-align:top;", lo que hace es alinear los divs verticalmente en lo mas alto de la página.

Mi problema radicaba en que no usaba el "vertical-align:top;", y el segundo div me salia muy abajo.

Edito: Agrego una imagen.