Foros del Web » Creando para Internet » CSS »

entender como colocar elememtos con css

Estas en el tema de entender como colocar elememtos con css en el foro de CSS en Foros del Web. hola a [email protected] llevo un algo de tiempo aprendiendo a maquetar con css, de echo ya lo hago y controlo algo. para colocar los distintos ...
  #1 (permalink)  
Antiguo 19/07/2006, 05:36
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
entender como colocar elememtos con css

hola a [email protected]

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 [email protected]
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..

Última edición por capagris; 19/07/2006 a las 06:44
  #2 (permalink)  
Antiguo 19/07/2006, 07:00
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años, 1 mes
Puntos: 2037
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
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #3 (permalink)  
Antiguo 19/07/2006, 08:29
Avatar de capagris  
Fecha de Ingreso: julio-2003
Mensajes: 131
Antigüedad: 14 años, 5 meses
Puntos: 0
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;     
}
__________________
..::Todo lo que no aprendí, no se me ha olvidado.::..
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 08:49.