entender como colocar elememtos con css

[capagris]

hola a todo@s.

llevo un algo de tiempo aprendiendo a maquetar con css, de echo ya lo hago y controlo algo.

para colocar los distintos elementos en la página, utilizo el atributo positión:absolute y despues asigno valores a los atributos "top" "left" "right" etc.

Se que se puede maquetar de otra forma aprovechando el flujo de los elementos dentro de la página utilizando el atributo "float".

Para aprender esto estoy haciendo un ejercicio para intentar alinear elementos en la misma horizontal de una página, por ejemplo unas imágenes que van a hacer de botones, pero no me sale

He creado los siguientes códigos html y css

HTML

Código:

   <div id="lago1"><a href="lago_baikal.html"><img src="img/interface/baikal_up.gif" alt="lago Baikal Modelo 6 x 3m." border="0"/></a></                div>
    <div id="lago2"><a href="lago_victoria.html"><img src="img/interface/victoria_up.gif" alt="lago victoria Modelo 8 x 4m." border="0"/></a></div>
    <div id="lago3"><a href="lago_wakatipu.html"><img src="img/interface/wakatipu_up.gif" alt="lago wakatipu Modelo 7 x 4m." border="0"/></a></div>

CSS

Código:

#lago1{
    margin-top: 20px;
    float:left;
    width: 189px;
}

#lago2{
    margin-top: 20px;
    margin-left: 199px;
    width: 197px;    
}

#lago3{
    margin-top: 20px;
    margin-left: 419px;
    width: 210px;    
}

para entender mejor como se comportan los elementos pregunto.

¿cuando colocas un elemento (A) en un documento html y despues colocas otro (b) el elemento (b) en lugar de posicionarse a su derecha se coloca justo debajo.

Si prentendemos colocar elementos alineados en horizontal hay que utilizar los atributos de css con los valores que se necesiten asignar dependiendo de la situción, no?

¿Entonces cuales son esos atributos y como utilizar correctamente en el caso del ejemplo que pongo más arriba.?


una prengunta didáctica que seguro va ayudar a más de un@

[RBZ]

Es que lo estás haciendo es muy raro, sigues colocando los objetos individualmente, para eso es mejor que no uses CSS. El definir estilos sirve para reducir código. Prueba a hacerlo de nuevo pero esta vez cambia la mentalidad. Mete todas la imágenes en un solo div, y este div le pones float:left y le defines los márgenes (izquierdo, derecho, arriba y abajo), verás como ahora te sale.

Saludos

[capagris]

muchas gracias RBZ

he hecho la prueba y funciona, los tres botones estan alineado en la orizontal pero tienen un pequeño margen entre ellos que no se como quitarselos.
he probado con margin - padding y la repera...

con la linea de abajo tambien me deja un muy pequeño margen. ayuda

Código:

HTML

<div id="menu">
            <a href="lago_baikal.html"><img src="img/interface/baikal_up.gif" alt="lago Baikal Modelo 6 x 3m." border="0"/></a>
            <a href="lago_victoria.html"><img src="img/interface/victoria_up.gif" alt="lago victoria Modelo 8 x 4m." border="0"/></a>
            <a href="lago_wakatipu.html"><img src="img/interface/wakatipu_up.gif" alt="lago wakatipu Modelo 7 x 4m." border="0"/></a>
        </div>
        <div id="linea"></div>    
    </div>

CSS

#menu{
    margin: 20px 0 0 0px;
    float: left;
    padding: 0px 0 0 0px;
    
}#linea{   
    height:2px;
    background-color: #4f6e9a;
    width:673px;
    margin: 0px 0 0 0px;
    padding: 0 0 0 0px;
    overflow: hidden;
    clear: both;     
}