Posicionamiento

esnalca · #1 (**permalink**) 15/01/2013, 07:14

Hola:

Mi problema es el siguiente tengo tres noticias, la primera es el doble de larga que las otras dos, la segunda noticia tiene que ir a la derecha y la tercera debajo de la segunda.

PhilComfortHost · #2 (**permalink**) 15/01/2013, 07:23

Hola,

Podrías usar las propiadades 'float: left;' y 'float: right;' en las clases que contienen las noticias.

Tambien hay propiadades 'position: relative' y 'top/right/bottom/left:' que puedes cambiar el posicionamiento.

Si tienes problemas, dimelos! :)

esnalca · #3 (**permalink**) 15/01/2013, 09:25

Mira estoy utilizando este codigo

Código HTML:

 <div class="noticias">
          <section>
            <article class="noticia_primera">
                <h2>El zahir (Coelho)</h2>
                <p>texto
                  </br>
                  <a class="leer"href="#">Leer Mas...</a> 
                  </p>
            </article>

            <article class="noticia_segunda">
                <h2>1Q84 (Muramaki)</h2>
                
                  <p>texto
                  <a class="leer"href="#">Leer Mas...</a> 
                  </p>
            </article>

            <article class="noticia_tercera">
                <h2>Lolita (Nabokov)</h2>
                
                  <p>texto
                  <a class="leer"href="#">Leer Mas...</a> 
                  </p>
            </article>
             </section>
      </div>

Y este css:

Código:

.noticia_primera
{
    float: left;
    width: 25%;
    height: auto;
    height: 920px;
}

.noticia_segunda
{
    float: left;
    width: 20%;
    height: 460px;
    margin-left: 10px;
}

.noticia_tercera 
{
    float: left;
    width: 20%;
    height: 460px;
    margin-left: 10px;
}

pzin · #4 (**permalink**) 15/01/2013, 09:37

En realidad te bastaría con ajustar el ancho de .noticia_segunda y .noticia_tercera, así automáticamente saldría la tercera noticia por debajo de la segunda.

La otra opción es poner un elemento contenedor para las últimas dos noticias y flotarlo, luego las noticias dentro no harían falta flotarlas.

esnalca · #5 (**permalink**) 15/01/2013, 10:25

Ya he cambiado el width de las dos ultimas columnas y nada. tambien he creado un div que tubiese contenida las dos ultimas columnas y nada de nada.

Aqui te dejo mi codigo completo, igual es otro fallo que yo no veo.

Código HTML:

<!doctype html>
<html lang="es">

  <head>
      <meta charset="UTF-8" />
      <title>Práctica final - Creativa</title> 
    	 <link rel="stylesheet" type="text/css" media="all" href="estilos/style.css" />
      <script src="js/modernizr.js"></script>
  </head>

  <body>

      <header class="principal">
      
      <div class="fila">
      
          <a href="#" class="logo_principal">Logo</a>

          <div class="conectar">
            
            <a href="#" class="social" target="_blank">
              <img  src="img/facebook.png"/>
              <img class="rollover" src="img/facebook_hover.png"/>
            </a>
              
            <a href="#" class="social" target="_blank">
              <img class="rollout" src="img/rss.png"/>
              <img class="rollover" src="img/rss_hover.png"/>
            </a>

            <a href="#" class="social" target="_blank">
              <img class="rollout" src="img/twitter.png"/>
              <img class="rollover" src="img/twitter_hover.png"/>
            </a>
          
          </div>

          <nav class="navegacion_principal">

                    <ul>
                          <li><a href="#">Opcion</a></li>
                          <li><a href="#">Opcion</a></li>
                          <li><a href="#">Opcion</a></li>
                          <li><a href="#">Opcion</a></li>
                    </ul>
               
          </nav>


        
        
      </div>

      </header>

      <div class="cuerpo">
        <div class="sec1">
          <ul>
              <li><a href="#">opcion</a></li>
                <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
                <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
              <li><a href="#">opcion</a></li>
              <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
              <li><a href="#">opcion</a></li>
              <ul>
                  <li><a href="#">opcion</a></li>
                </ul>
          </ul>
        </div> 

        <div class="sec2">
          <label for="busqueda2">Búscar</label>
            <input type="search" name="busqueda2" id="busqueda2" results="5"/>
        </div> 

        <div class="sec3">
          <p>texto
          </p>
        </div>
      </div>





      <div class="noticias">
          <section>
            <article class="noticia_primera">
                <p>texto</p>
            </article>
            <div class="prueba">
            <article class="noticia_segunda">
                <p>texto</p>
            </article>

            <article class="noticia_tercera">
                <p>texto</p>
            </article>
          </div>
        </section>
      </div>

        <footer>
          <div class="drch">
            <div class="direccion">
              <a class="logo_inferior" href="#">Práctica final - Diseño Web</a><br />
                  <p>55555 Calle online <br />
                  Numero 555-555
                  Mi casa España 22222</p>
            </div>
            <div class="tel">(951) 555-555</div>
          </div>
        </footer>
    </body>
    </html>

Código:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, ul, li, article, footer, header, nav, section
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, footer, header, nav, section 
{
    display: block;
}

body 
{ 
    font: 25px sans-serif; *font-size:small;
}

html 
{ 
    width: 100%;
    background: #D9D9D9 scroll; 
    overflow-y: scroll;
    z-index: 500;
}

a, a:hover, a:active 
{ 
    outline: none;
}

ul
{ 
    margin-left: 2em;
}

nav ul, nav li 
{ 
    margin: 0; 
    list-style:none; 
    list-style-image: none;
}

a:link 
{ 
    -webkit-tap-highlight-color: #a7dbd8;
}

body
{
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    font-style: normal; 
    font-size:15px; 
    line-height:21px; 
    color:#0A242D;
}

h1, h2, h3, h4, h5, h6 
{
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif  
}

a, a:active, a:visited 
{ 
    color: #3299bb; 
    text-decoration:none;
}

a:hover 
{ 
    color: #000054; 
    text-decoration:underline;
}


/** Header**/

.fila 
{
    width: 100%; 
    margin: 0; 
    overflow: hidden;
}

header.principal 
{
    background:url(../img/1.jpg) repeat; 
    max-width: 100%;
    width: 88;
    height:90px;
    border:thin solid #fff; 
    border-width:0 0 1px;
    margin:30px 30px 30px 30px;
    padding:20px; 
    z-index:200;
    position: center;
}

.fondo
{
    width: 800px;
    height: auto;
    z-index: 999;
}

a.logo_principal 
{
    width:259px;
    height:50px;
    float:left;
    background:transparent url(../img/logo.png) no-repeat 0 0;
    cursor:pointer;
    text-indent:-9999px;
    line-height:0;font-size:0;
    text-decoration:none;
    margin:0; 
    padding:0 50px 0 0;
}

nav.navegacion_principal 
{
    clear: both;
    height:50px;
    float:left;
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size:20px;
    color:#0A242D;
    line-height:42px;
    font-weight:400;  
    margin:15px 0 0 -22px;
}

nav.navegacion_principal ul li 
{
    clear:right;
    float:left;
    margin:0 0 0 30px;
}

nav.navegacion_principal ul li a 
{
    text-decoration:none;
    color:#0A242D;
}

nav.navegacion_principal ul li a:hover 
{
    color:#0000F0;
    text-decoration:none;
}

.conectar 
{
    padding:0; 
    float:right; 
    margin:20px 0 0; 
    clear:none;
}

.conectar a.social 
{

    float:right;
    font-size:0;
    text-decoration:none;
    text-indent:-9999px;
    margin:0 10px 0 0; 
    outline:none;
    display:block; 
    position:relative;
    padding:0;
}

.conectar a:hover 
{ 
    background-color: transparent; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0;
}

.conectar img 
{
    width:100%; 
    height: auto; 
    display:block; 
}

.conectar img.rollover 
{ 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0;
}

.conectar a:hover img.rollover 
{
    opacity:1;
}

.conectar a:hover img.rollout 
{
    opacity:0;
}

/** Izquierda **/

.cuerpo
{
    clear: left;
    float: left;
    border: 1px solid red;
    width: 190px;
    height: 100%;
    margin: 0 30px 0;
}

.sec1 ul li
{
    list-style-image: url(../img/kuran.png);
    width: 100%
}

/* * Contenido **/

.noticias
{

    margin-left: 220px;
    width: 80%;
    height: 920px;
}

.noticia_primera
{
    float: left;
    width: 25%;
    height: auto;
    height: 920px;
}

.noticia_segunda
{
    float: left;
    width: 20%;
    height: 460px;
    margin-left: 10px;
}

.noticia_tercera 
{
    float: left;
    width: 20%;
    height: 460px;
    margin-left: 10px;
}

pzin · #6 (**permalink**) 15/01/2013, 10:29

Simplemente cambiando los porcentajes a mi me funciona bien: http://jsbin.com/arohik/1/edit

esnalca · #7 (**permalink**) 15/01/2013, 11:00

ya he cambiado lo porcentajes y ya me aparecen bien, ahora si quisiese añadir una columna como la primera pero alineada a la derecha. seria utilizar el mismo codigo que la primera pero con el float=right; no?

pzin · #8 (**permalink**) 15/01/2013, 12:08

¿Probaste? ¿Para qué preguntar si se puede probar?

esnalca · #9 (**permalink**) 15/01/2013, 13:04

Si,pero me lo coloca debajo de las otras.

pzin · #10 (**permalink**) 15/01/2013, 13:38

Claro. Seguramente la suma total de los elementos flotados sea mayor a 100%. Tienes que ajustarlo para que ocupen un máximo de 100%. Aunque si tienes márgenes o paddings aplicados entonces el total tiene que ser menor.

esnalca · #11 (**permalink**) 15/01/2013, 14:07

Ya esta todo hecho y solucionado, era todo problemas de porcentajes.

Muchisimas gracias