Foros del Web » Creando para Internet » CSS »

Problema con alineación de elementos CSS

Estas en el tema de Problema con alineación de elementos CSS en el foro de CSS en Foros del Web. Buenas noches gente, he decidido crear este tema debido a que, por más que he buscado (e implementado) código que he encontrado en foros y ...
  #1 (permalink)  
Antiguo 06/08/2012, 18:42
Avatar de leoMestizo  
Fecha de Ingreso: abril-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Exclamación Problema con alineación de elementos CSS

Buenas noches gente,

he decidido crear este tema debido a que, por más que he buscado (e implementado) código que he encontrado en foros y en demás sitios de la web, ninguna de las soluciones me ha ayudado a solventar el problema del que les vengo a hablar... Espero que ustedes puedan:

Resulta que tengo el siguiente código en CSS:
Código:
body {
    color: #acc6d3;
    background: #acc6d3;
    font: 11px/20px "Diverda Sans Light", "Helvetica Neue", Calibri, Helvetica, Geneva, Arial, sans-serif;
}
ul li {
    display: inline;
}
ul li a {
    color: #fff;
    text-decoration: none;
}
ul li a:hover {
    text-decoration: underline;
}
.top-panel {
    background-color: #314046;
    width: 100%;
}
.top-panel ul li {
    display: inline;
    margin: 0 10px 0 0;
}
.header-holder {
    width: 100%;
    margin: 0 0 150px;
    background: #acc6d3;
}
.banner {
    width: 950px;
    margin: 0 auto;
    background: #fff;
    padding: 100px 15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.lista-titulo {
    list-style: none;
    font-size: 14px;
    text-spacing: no-compress;
}
.bloque-izq { /*Acá creo que tengo el problema*/
    background: black;
    float: none;
    width: 600px;
    padding: 300px 0px 300px 0px;
}
.bloque-der {
    position: relative;
}
#footer {
    width: 950px;
    margin: 0px auto;
    padding: 80px;
    background: url("../images/footer.gif") repeat-y 50% center;
}
#main {
    width: 950px;
    margin: 13px auto;
    padding: 550px 15px 50px 15px;
    background: #fff repeat-y 50%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#form-usuario {
    text-align: center;
}
#form-usuario li {
    text-align: center;
}
#list {
    text-align: right;
}
#whoami { 
    width: 950px;
    background: #acc6d3;
    margin: 10px auto 0px auto;
    padding: 10px 15px;
    text-align: center;
    color: #fff;
}
Tengo el problema en un div cuya clase es "bloque-izq", como aclaré arriba. El tema es que no puedo de ninguna manera hacer que el bloque suba a la parte superior donde yo quiero (mi idea es separar el cuerpo de la página - la que he nombrado como "main" - en dos mitades, una principal y otra lateral hacia la derecha).

Inserto el código HTML para que vean la jerarquía, por decirlo de alguna manera, de tags:
Código HTML:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/index-css.css" rel="stylesheet" type="text/css">
        <style type="text/css"> * {padding:0; margin:0;} </style>
        <!--http://tympanus.net/Tutorials/AnimatedFormSwitching/-->
    </head>
    <body>
        <div id="contenedor">
            <div id="header">
                <div class="top-panel">
                    <ul id="list">
                        <li><a href="#">Iniciar sesión</a></li>
                        <li><a href="#">Crear una nueva cuenta</a></li>
                    </ul>
                </div>
                <div class="header-holder">

                </div>
                <div class="banner">

                </div>
            </div>
            <div id="main">
                <div class="bloque-izq">

                </div>
                <div class="bloque-der">
                    <form method="POST" id="form-usuario"> <!--NO OLVIDAR action-->
                        <!--<ul><li>Login</li></ul>
                        <ul id="nombre-usuario">
                            <li><b>*</b> Usuario: </li>
                            <li><input type="text" name="username"></li>
                        </ul>
                        <ul id="password-usuario">
                            <li><b>*</b> Contraseña: </li>
                            <li><input type="password" name="password"></li>
                        </ul>
                    </form>
                </div>
            </div>
            <div id="footer">
            </div>
            <div id="whoami">
                © 2012 Todos los derechos reservados
            </div>
        </div>
    </body>
</html> 
Además, inserto una imagen para que vean qué es lo que sucede con el fin de ayudarlos con la mayor cantidad de información:



El div lo puse negro (debería ser blanco) para poder ver más fácil la posición del elemento al momento de cambiar código. Dicho elemento debería ser del total del alto y tres cuartos (o un poco menos) del ancho del main (el espacio blanco que contiene a mi bloque negro), pero no lo he agrandado porque cada vez que lo hacía la página crecía más.

Quiero aclarar que no posteo este tema para obtener ayuda de la forma más rápida ya que como aclaré arriba he estado buscando como loco alguna solución ya implementada o alguna respuesta a algún problema parecido con la mala suerte de que a la hora de ver el resultado, pensando que ya había encontrado la solución, el problema persistía. No puedo perder más tiempo ya que es una entrega para la Facultad y no quiero quedarme "atascado" con esto.

Además quiero pedir que, si se encuentra la solución, me expliquen (si pueden) el porqué de la misma para poder aprender.

Cualquier crítica a mi código con respecto a si hago algo mal o que no corresponde con algún patrón o algo por el estilo totalmente bienvenida ya que como dije, quiero aprender.

Sin más, me despido y muchas gracias.

Un saludo,
Leonardo
  #2 (permalink)  
Antiguo 06/08/2012, 22:01
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 5 meses
Puntos: 306
Respuesta: Problema con alineación de elementos CSS

Hola
Código CSS:
Ver original
  1. /*YO CREO QUE POR ACÁ ESTÁ EL PROBLEMA */
  2. #main {
  3.     width: 950px;
  4.     margin: 13px auto;
  5.     padding: 550px 15px 50px 15px; /* <-- Más especificamente en esta linea */
  6.     background: #fff repeat-y 50%;
  7.     -moz-border-radius: 5px;
  8.     -webkit-border-radius: 5px;
  9.     border-radius: 5px;
  10. }



Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 06/08/2012, 22:12
Avatar de leoMestizo  
Fecha de Ingreso: abril-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Problema con alineación de elementos CSS

Cita:
Iniciado por C2am Ver Mensaje
Hola
Código CSS:
Ver original
  1. /*YO CREO QUE POR ACÁ ESTÁ EL PROBLEMA */
  2. #main {
  3.     width: 950px;
  4.     margin: 13px auto;
  5.     padding: 550px 15px 50px 15px; /* <-- Más especificamente en esta linea */
  6.     background: #fff repeat-y 50%;
  7.     -moz-border-radius: 5px;
  8.     -webkit-border-radius: 5px;
  9.     border-radius: 5px;
  10. }



Saludos
Efectivamente! Has dado en el clavo! Pero... qué era? Qué es lo que estaba haciendo mal C2am? Pregunto para no hacerlo con futuros elementos.

De todas maneras te agradezco muchísimo!
  #4 (permalink)  
Antiguo 06/08/2012, 22:22
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 5 meses
Puntos: 306
Respuesta: Problema con alineación de elementos CSS

Bue, veo que y de acuerdo a tu respuesta solo has eliminado la linea y no has investigado el porque.
Pero no te preocupes, que te explico:

http://www.librosweb.es/referencia/css/padding.html

En consecuencia tenías
Código CSS:
Ver original
  1. #main {
  2.     padding: 550px 15px 50px 15px; /* <-- Más especificamente en esta linea */
  3.   }

Que es lo mismo que esto:
Código CSS:
Ver original
  1. #main {
  2.     padding-top: 550px
  3.    padding-right:15px;
  4. padding-bottom: 50px;
  5. padding-left:15px;
  6. }

¿Dime que es lo que estaba mal?
Rta: el padding superior de 550px (completar con su respuesta si no visualiza la mia)


saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 06/08/2012, 22:29
Avatar de leoMestizo  
Fecha de Ingreso: abril-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Problema con alineación de elementos CSS

Cita:
Iniciado por C2am Ver Mensaje
Bue, veo que y de acuerdo a tu respuesta solo has eliminado la linea y no has investigado el porque.
Pero no te preocupes, que te explico:

[url]http://www.librosweb.es/referencia/css/padding.html[/url]

En consecuencia tenías
Código CSS:
Ver original
  1. #main {
  2.     padding: 550px 15px 50px 15px; /* <-- Más especificamente en esta linea */
  3.   }

Que es lo mismo que esto:
Código CSS:
Ver original
  1. #main {
  2.     padding-top: 550px
  3.    padding-right:15px;
  4. padding-bottom: 50px;
  5. padding-left:15px;
  6. }

¿Dime que es lo que estaba mal?
Rta: el padding superior de 550px (completar con su respuesta si no visualiza la mia)


saludos
No... Sí he investigado el tema es que no me ha quedado claro del todo. Leí que el padding es para eliminar el espacio entre el borde y el contenido del elemento (asumo que al decir borde se refiere al borde del elemento padre) en w3cschools y en htmlhelp también me fijé. El problema está en que no entiendo porqué motivo me lo sigue tomando en los otros elementos que creo... Por ejemplo en "bloque-der"... Por eso supuse que me darías una explicación un tanto menos formal que la que dan en las páginas web... Yo en mi parte veo a el padding como si el elemento se empujase con el que tiene en frente, es decir, si yo pongo:

padding 50px 0 0 0;

significa que el elemento es como si se estuviera empujando de cara hacia el padre hacia atrás (corregime si me equivoco)... El problema que tengo es que a pesar de haber hecho varias pruebas con esto en mente, y sabiendo qué hacía padding, margin, float, y demás no he podido corregir yo mismo el asunto y es por eso que buscaba otra explicación.
  #6 (permalink)  
Antiguo 06/08/2012, 22:42
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 5 meses
Puntos: 306
Respuesta: Problema con alineación de elementos CSS

La explicacion está justo al lado de Rta: fijate que está en color blanco.

Bueno, ahora veamos:

Cita:
Leí que el padding es para eliminar el espacio entre el borde y el contenido del elemento
Te sugiero que si es un libro de donde lo leiste, lo quemes YA. Si es una web que la borres del historial, porque es una aberración. Pero sobre todo porque es TODO lo contrario.

La explicación formal es esta: http://www.librosweb.es/css/capitulo...y_relleno.html
Más claro que eso no creo poder ser, por eso te pongo el enlace.

Luego el padding (relleno) sirve para separar el contenido de una caja de sus limites (no pongo borde para no confundirte)

Si pones un padding-top de 550px, es lógico que todo lo que ubiques dentro de esa caja se encuentre a una distancia de 550px de su límite superior ¿o no?

Aaaaa... viste, no es tan complicado, siempre y cuando sepas la teoría.

Te recomiendo que bajes esos pdf, empezando por Introducción al Css y del XHtml.
Te garantizo que serán mucho mejores que el libro/web con la cual te estuviste informando.

PD: lee todo el Cap 4, para entender mejor.


Analogía:

Tenes una caja donde vas a poner dentro de ella cosas
El margin es la separación que dejas entre otras cajas de manera que no se toquen.
El border es el espesor del carton o material del cual está hecho la caja
El padding sería la protección (por ejemplo la sustancia blanca conocida por telgopor o poliestileno expandido) que evita que el plasma de 150"" toque las paredes de la caja.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 06/08/2012 a las 22:48
  #7 (permalink)  
Antiguo 06/08/2012, 22:55
Avatar de leoMestizo  
Fecha de Ingreso: abril-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Problema con alineación de elementos CSS

Cita:
Iniciado por C2am Ver Mensaje
La explicacion está justo al lado de Rta: fijate que está en color blanco.

Bueno, ahora veamos:


Te sugiero que si es un libro de donde lo leiste, lo quemes YA. Si es una web que la borres del historial, porque es una aberración. Pero sobre todo porque es TODO lo contrario.

La explicación formal es esta: [url]http://www.librosweb.es/css/capitulo4/margen_y_relleno.html[/url]
Más claro que eso no creo poder ser, por eso te pongo el enlace.

Luego el padding (relleno) sirve para separar el contenido de una caja de sus limites (no pongo borde para no confundirte)

Si pones un padding-top de 550px, es lógico que todo lo que ubiques dentro de esa caja se encuentre a una distancia de 550px de su límite superior ¿o no?

Aaaaa... viste, no es tan complicado, siempre y cuando sepas la teoría.

Te recomiendo que bajes esos pdf, empezando por Introducción al Css y del XHtml.
Te garantizo que serán mucho mejores que el libro/web con la cual te estuviste informando.

PD: lee todo el Cap 4, para entender mejor.
Che... Qué cosa! Y encima la había puesto en favoritos porque me parecía que era una buena fuente de información... Me he estado basando en ella desde que empecé con CSS. Menos mal que me aclaraste esto! Muchas gracias C2am!

Libro bajado y comenzando a leerlo ya mismo! Muchas gracias C2am...

EDITO: Genial la explicación de "ANALOGÍAS" muy pero muy didácticas! Eso era lo que buscaba! De todas maneras QUIERO leer el libro porque quiero aprender. Por si te interesa Servlets... Leete "Aprendiendo Servlets como si estuviera en 1ero." Estoy leyendo este (ya casi lo termino) para hacer la lógica y la verdad que es muy pero muy bueno! Si no sabés Java, de la misma firma tenés "Aprendiendo Java como si estuviera en 1ero." No lo he leído pero viniendo de los mismos autores imagino que es una joya (aclaro que leí la última parte que habla sobre Seguridad, Applets y demás).

Un gran saludo!
Leo

Última edición por leoMestizo; 06/08/2012 a las 23:01

Etiquetas: alineacion
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 00:14.