[SOLUCIONADO] Aside

mblascog · #1 (**permalink**) 06/06/2014, 11:28

Buenas,
Dentro de la etiqueta article, tengo una barra lateral (aside) y a mano derecha del aside una capa, es decir:

Código HTML:

Ver original<article>
      <aside>
         <img src ...>
      </aside>
      <div>
         bla bla bla bla ......
       </div>
   </article>

Si no indico nada, el texto del div, bla bla ..., aparece justo al lado del aside, tocándose. Me gustaría ponerle un margen de 10píxeles al div, pero no funciona. Para que funcione tendría que ponerle de margin, el ancho del aside más los 10 píxeles.
Cómo puedo hacerlo para separar el div del aside?

Gracias

pzin · #2 (**permalink**) 06/06/2014, 12:02

¿Por qué no funciona el margen?

mblascog · #3 (**permalink**) 06/06/2014, 12:14

Es lo que no entiendo. Es difícil de explicar, lo intentaré.
En el aside tengo una imagen, y en el div, texto, de acuerdo?
La imagen y el texto quedan pegados.

Con las herramientas del desarrollador, miro lo donde empieza el div y veo que empieza igual que el aside, por lo que al indicar para que se visualize el margen, debo de sumar el ancho de la imagen, más el margen que quiero.

Me he explicado?

pzin · #4 (**permalink**) 06/06/2014, 13:38

Por los estilos que estás usando para ambos elementos a ver.

mblascog · #5 (**permalink**) 06/06/2014, 14:01

No te entiendo pzin

pzin · #6 (**permalink**) 06/06/2014, 14:22

Que pongas aquí los estilos que estás aplicando a esos dos elementos.

mblascog · #7 (**permalink**) 06/06/2014, 15:16

Ahora pzin,
El código html es este:

Código HTML:

Ver original<body>
    <header>
        <?php 
            include("includes/inc_capcalera.php");
            $opcio = "6";
            include("includes/inc_menu.php");
        ?>  
    </header>
    <section>
        <article>
            <aside>
                <img src='<?php echo URL."imatges/bannerLateral_".$idioma.".png"?>'/>
                <?php echo $textBannerLateral[$idioma]; ?>
            </aside>
            <div id=formContacte>
                <form name="contacte" method="post" action="">
                </form>
            </div>
        </article>
    </section>
    <footer>
        <?php include("includes/inc_peu.php") ?>
    </footer>
</body>

Y el código CSS este:

Código CSS:

Ver originalsection article{
    width:100%;
    height:100%;
    font:1em/2.0 'Arial';
    color:#000;
    vertical-align:top;
    text-align:justify;
    float:left;
}
aside{width:16.6%;
    height:470px;
    float:left;
    margin-top:3%;
    background:#d9d406;
    color:#035A5B;
}
#formContacte{
    color: #666666;
    font: .9em 'Helvetica';
    margin-top:3%;
    margin-left:10px;
}

Gracias

pzin · #8 (**permalink**) 06/06/2014, 15:33

Tienes que flotar #formContacte también:

Código CSS:

Ver original#formContacte {
  float: left;
}

Si no lo haces entonces ese elemento sigue estando a la izquierda, aunque no su contenido. Si le pones un borde o un color de fondo lo puedes apreciar.

mblascog · #9 (**permalink**) 06/06/2014, 15:46

Pues sí pzin, muchas gracias