Margin Top no me funciona bien

konejo · #1 (**permalink**) 11/05/2010, 23:31

Hola, espero que estén bien. Tengo un problema con los margin-top. En realidad no se si el error estará entre el teclado y la silla, o si es que existirá la posibilidad de que tenga que cambiar el codigo o algo así.

Resulta que lo que quiero es poner 2 Navbar Horizontales, una a la par del titulo o logo de la página y la segunda debajo del slogan.

Con la primera ya tuve éxito, pero con la segunda me está dando dolores de cabeza.

Para mayor orden, yo dividí el sitio en:

Cuerpo: segundo cuerpo para centrar todo el contenido de la página
Encabezado: Donde va el titulo, slogan y NavBar1
Contenido: Donde va la NavBar2 y la información a mostrar
Enlaces de Interés: para poner el facebook y otros enlaces
Pie de Página: el Copyright, numero de contacto y otra mini NavBar Horizontal.

Resulta que en el div de contenido, tengo 2 div mas, uno de Menu para el NavBar2 y otro de información, para escribir el texto a mostrar.

Los margin-top de estas dos divs, no me funcionan. Yo cambio sus valores y no muestran algún cambio de posición, ni en internet explorer, ni en firefox.

Necesito tener un espacio razonal para que se vea bien la página.

Otro punto adicional es que el cuerpo para centrar el contenido de la página es de 900px de ancho. El div de enlace de interés tiene una imagen como fondo, de 900px, sin embargo, no se por qué esta no cubre toda esta área.

Es la segunda vez que trato de crear esta página. A la primera el margin me presentaba el mismo problema, pero el Div de enlaces de interés funcionaba vez.

Esta segunda vez, los margins no funcionan y el div de enlaces de interés me da problemas.

Aqui esta el codigo de la pagina y del .css
El .css esta ordenado de acuerdo a la pagina, se le da formato a los tags de acuerdo a su orden de aparición en la pagina.

Voy a senalar las áreas que tienen el problema en el html y en el .css.

Ademas, voy a poner una imagen de el diseno como deberia ser, y de como va implementado por el momento.

Por cierto, ambos margin-top de los dos div, no hacen cambios ni con numeros positivo ni con numeros negativos. Ni suben, ni bajan.

HTML:

Código HTML:

Ver original<!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" />
<link rel="stylesheet" href="style/iWanaStyle.css" />
<title>Untitled Document</title>
</head>
 
<div class="Cuerpo">
 
<div class="Encabezado">
<a class="Logo" title="iWanaTech Soluciones Informáticas"><img alt="iWanaTech" src="imagenes/Logo.png" width="231" height="119" /></a>
<img class="Slogan" alt="Solucines Informáticas a Su Alcance" title="Soporte Técnico, Redes y Software a Su Alcance" src="imagenes/Slogan.png" width="902" height="126" />
 
<div class="Menu1">
 
<ul class="Opciones1">
 
<li><a class="inicio" title="iWanaTech Soluciones Informáticas" href="index.html"><img alt="Inicio" src="imagenes/BtnInicioSel1.png" width="123" height="38" /></a></li>
<li><a class="soporte1" title="Soporte Técnico" href="index.html"></a></li>
<li><a class="redes1" title="Soporte de Redes" href="index.html"></a></li>
<li><a class="software1" title="Desarrollo de Software" href="index.html"></a></li>
<li><a class="contacto1" title="Contáctenos" href="index.html"></a></li>
 
</ul>
 
</div>
 
</div>
 
<div class="Contenido"> [B]Este Div si funciona bien con sus margins[/B]
 
<div class="Menu2"> [B]Div con problemas de Margin-top[/B]
 
<ul class="Opciones2">
 
<li><a class="QuienesSomos" title="iWanaTech Soluciones Informáticas" href="index.html"><img alt="Inicio" src="imagenes/BtnQuienesSomos.png" width="168" height="84" /></a></li>
<li><a class="soporte2" title="Soporte Técnico" href="index.html"><img alt="Soporte Técnico" src="imagenes/BtnSoporte2.png" width="168" height="84" /></a></li>
<li><a class="redes2" title="Soporte de Redes" href="index.html"><img alt="Soporte de Redeso" src="imagenes/BtnRedes2.png" width="168" height="84" /></a></li>
<li><a class="software2" title="Desarrollo de Software" href="index.html"><img alt="Desarrollo de Software" src="imagenes/BtnSoftware2.png" width="168" height="84" /></a></li>
<li><a class="contacto2" title="Contáctenos" href="index.html"><img alt="Contáctenos" src="imagenes/BtnContacto2.png" width="168" height="84" /></a></li>
 
</ul>
 
</div>
 
<div class="Informacion">[B] Div con problema de Margin-top[/B]
 
<h1>Bienvenidos a iWanaTech</h1>
<p>IwanaTech es una empresa que se dedica a soluciones de tecnologías de información. Los servicios que se brindan son de soporte técnico, instalación o mantenimiento de redes y desarrollo de sistemas informáticos.</p>
 
<h2>Misión</h2>
<p>Proveer servicios de tecnologías de información a nuestros clientes, formando lazos con ellos, basándose en la confianza.</p>
 
<h2>Visión</h2>
<p>er la mejor empresa que brinda servicios de soporte técnico, redes, y desarrollo de software y que a la vez mantiene excelentes relaciones con sus clientes.</p>
 
</div>
 
 
</div>
 
<div class="EnlacesInteres">
</div>
 
<div class="Pie">
</div>
 
</div>
 
<body>
</body>
</html>

.CSS

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
body{
    background-image:url(../imagenes/Nav%20Bar.png);
    background-repeat:repeat-x;
}
 
img{
    border:0;
}
 
.Cuerpo{
    width:900px;
    margin:0 auto;
}
 
.Slogan{
    margin-top:7px;
}
 
.Menu1{
    margin-left:260px;
    margin-top:-163px;
}
 
.Opciones1{
    margin:0;
    padding:0;
    list-style:none;
}
 
.Opciones1 li{
    float:left;
}
 
.Opciones1 li a{
    text-decoration:none;
    margin-left:2px;
    display:block;
    width:123px;
    height:38px;
}
 
.inicio{
    background-image:url(../imagenes/BtnInicio1.png);
}
 
.soporte1{
    background-image:url(../imagenes/BtnSoporte1.png);
}
 
.redes1{
    background-image:url(../imagenes/BtnRedes1.png);
}
 
.software1{
    background-image:url(../imagenes/BtnSoftware1.png);
}
 
.contacto1{
    background-image:url(../imagenes/BtnContacto1.png);
}
 
.inicio:hover{
    background-image:url(../imagenes/BtnInicioSel1.png);
}
 
.soporte1:hover{
    background-image:url(../imagenes/BtnSoporteSel1.png);
}
 
.redes1:hover{
    background-image:url(../imagenes/BtnRedesSel1.png);
}
 
.software1:hover{
    background-image:url(../imagenes/BtnSoftwareSel1.png);
}
 
.contacto1:hover{
    background-image:url(../imagenes/BtnContactoSel1.png);
}
 
.Contenido{
    width:900px;
    margin-top:162px;
    border-left:#EAEAEA thin solid;
    border-right:#EAEAEA thin solid;
}
 
.Menu2{
    margin-top:23px;<- Margin top con problemas numeros positivos y negativos
    margin-left:15px;
    margin-right:15px;
}
 
.Opciones2{
    margin:0;
    padding:0;
    list-style:none;
}
 
.Opciones2 li{
    float:left;
}
 
.Opciones2 li a{
    text-decoration:none;
    margin-left:5px;
    display:block;
    width:168px;
    height:84px;
}
 
.Informacion{
    margin-top:20px;<- Margin top con problemas numeros positivos y negativos
    margin-left:30px;
    margin-right:30px;
}
 
.EnlacesInteres{
    width:900px;
    height:58px;
    margin-top:-20px;
    background-image:url(../imagenes/FondoEnlaceInteres.png);
    background-repeat:no-repeat;
}

Diseno original

Pagina Implementada

gracias por su ayuda y tiempo

Tecna · #2 (**permalink**) 12/05/2010, 12:11

Buenas,

he bajado y probado tu código y funciona correctamente. Al principio no funcionaba pero era porque tenía al final de cada línea caracteres extraños de retorno de carro que añaden algunos editores al estilo windows. Y también falta el fin de fichero. El intérprete de html se traga todo, aunque crea espacios "fantasma" que afectan a la separación entre elementos, pero el css lo ignora y no aplicaba los estilos. Una vez que he limpiado el código funcionaba correctamente, tanto con valores positivos como negativos. Sólo comentarte dos cosas por si pudieran afectarte, que los margenes verticales adyacentes de elementos en bloque dentro del flujo normal del documento se cierran, es decir se fusionan y toman el valor del mayor de ellos, aunque no es tu caso porque tal como está ahora Menu2 no tiene margin botton que se pudiera fusionar con el margin top de Información. Y otra que al modificar el margin top de Menu2 la posición de Información también se vería modificada.

Respecto al otro problema con el ancho y las esquinas mal alineadas lo generan los bordes que pones en .Contenido (líneas 87 y 88 del código CSS).

Por otro lado y ya como consejos es importante validar el código, la etiqueta <body> la abres al final del documento. Para ver como se posicionan los elementos es mejor poner un borde y colores simples antes de añadir las imagenes y resto de cosas que puedan estorbar, tambíen es mejor usar propiedades resumidas que hacen que el código sea mas límpio y corto. Si el estilo sólo lo usa un elemento es mejor usar id que clase, tienen mas peso especifico las declaraciones. Y mejor siempre usar los nombres con minúsculas así hay menos posibilidad de error al usar desde lenguajes que sí hagan distinción como por ejemplo css. Pero todo esto ya es mi opinión y cada uno tendrá la suya.

konejo · #3 (**permalink**) 12/05/2010, 14:24

Muchas gracias tecna
Voy a poner en practica sus consejos, porke me parecen muy utiles y muy practicos.

Eso del id y el class no lo sabía, entonces, de ahora en adelante usaré el id para referirme a objetos en el html.

Ya logré solucionar lo del ancho, cambié las medidas tal y como ud me dijo.

Con lo del margin, me pasó algo curioso.

Yo uso el dreamweaver cs4, seguro este editor agrega esos caracteres extranos que me dijo que aparecen ahí.
Otra solución que encontré para el margin-top, fue poner los contenedores div con la propiedad:

float:left

no se que tan práctico será hacer esto, pero una vez que lo hice, pude posicionar los objetos tal y como necesitaba. Ya los margin-top comenzaron a funcionar.

Estoy empezando en esto del html y css, entonces en realidad, no se que estaré haciendo bien o mal.

En fin, gracias por sus comentarios ahora me kedó mucho mas claro todo este asunto.

Gracias por su tiempo y ayuda

Cuando termine la página, subo el codigo .css y el html para que lo vean. Asi si alguien necesita ayuda sobre estas cosas o si hay cosas que hice aqui que no son sanas hacerlas, el codigo podrá usarse como ejemplo.