Orientación sobre diseño

madman_18 · #1 (**permalink**) 17/04/2013, 09:43

Hola a todos!

No sé si este post iría aquí o en otra sección pero bueno...

Buscando inspiración para una web que me ha surgido, me ha gustado mucho la idea de cómo muestra el contenido esta página : incub.ro, mirando el código veo que tiene sencillamente un bloque contenedor al 100% de tamaño y los bloques que tienen el contenido flotando a la izquierda.....sin embargo no consigo que me queden los bloques situados de la misma forma.... os pongo el código por si me podéis echar una mano

HTML:

Código HTML:

Ver original<body>              
        
        <header class="cabecera">
            <article id="logo"> aqui va el logo</article>
            <nav class="mi-menu">
                <ul>
                    <li><a href="#primero">primero</a></li>
                    <li><a href="#segundo">segundo</a></li>
                    <li><a href="#tercero">tercero</a></li>
                </ul>
            </nav>
        </header> 
        
        <section class="contenedor">
            <article class="bloque-contenido" id="primero">        
        Curabitur tristique laoreet tincidunt. Sed malesuada interdum enim non tincidunt. Maecenas tincidunt erat at nulla consequat feugiat. In urna nisl, accumsan at adipiscing eget, pharetra quis eros. Mauris a diam ut diam luctus lobortis vel in elit. Morbi pharetra nibh sit amet enim dictum cursus. Quisque ullamcorper, metus vitae lobortis ultrices, eros metus dignissim diam, et lobortis orci est a felis. Morbi in dolor nunc, a bibendum quam. Donec odio leo, porta et posuere non, laoreet quis sem. Mauris nec porta urna. Nam in viverra leo. Morbi at scelerisque eros.
            </article>
            <article class="bloque-contenido" id="segundo">
        Curabitur tristique laoreet tincidunt. Sed malesuada interdum enim non tincidunt. Maecenas tincidunt erat at nulla consequat feugiat. In urna nisl, accumsan at adipiscing eget, pharetra quis eros. Mauris a diam ut diam luctus lobortis vel in elit. Morbi pharetra nibh sit amet enim dictum cursus. Quisque ullamcorper, metus vitae lobortis ultrices, eros metus dignissim diam, et lobortis orci est a felis. Morbi in dolor nunc, a bibendum quam. Donec odio leo, porta et posuere non, laoreet quis sem. Mauris nec porta urna. Nam in viverra leo. Morbi at scelerisque eros.
            </article>
            <article class="bloque-contenido" id="tercero">
        Curabitur tristique laoreet tincidunt. Sed malesuada interdum enim non tincidunt. Maecenas tincidunt erat at nulla consequat feugiat. In urna nisl, accumsan at adipiscing eget, pharetra quis eros. Mauris a diam ut diam luctus lobortis vel in elit. Morbi pharetra nibh sit amet enim dictum cursus. Quisque ullamcorper, metus vitae lobortis ultrices, eros metus dignissim diam, et lobortis orci est a felis. Morbi in dolor nunc, a bibendum quam. Donec odio leo, porta et posuere non, laoreet quis sem. Mauris nec porta urna. Nam in viverra leo. Morbi at scelerisque eros.
            </article>
        </section>
    </body>

Código CSS:

Ver originalbody,html{font-family: 'Economica', sans-serif;background: #EAE9E9;}
body{ overflow-x: hidden;overflow-y: auto;width: 100%;}
.cabecera{width:100%;height:auto;background: #FFF;padding: 10px 0 5px 0;}
    #logo{width: 423px;height:85px;/*background:url('img/logo.png') no-repeat;*/margin: 0px auto;text-align:center;}
    .mi-menu{width:960px;height:auto;margin: 0 auto;text-align: center;font-size: 16pt;}
    .mi-menu ul li{display: inline-block;padding-right: 20px;}
    .mi-menu ul li:last-child{padding-right: 0px;}
.contenedor{width:100%;}
.bloque-contenido{width:100%;margin: 0 auto;float:left;}

Gracias de antemano!

pzin · #2 (**permalink**) 17/04/2013, 09:56

¿Cuál es el propósito de flotar un elemento con un ancho de 100%? Por otro lado, tampoco explicas el problema, y yo por ejemplo ahora mismo ando desde el iPad y no voy a probar el código para ver qué pasa.

Como has dejado algún que otro mensaje en el foro y siempre te veo con la misma extraña forma de poner el CSS, ¿por qué lo pones así todo en una linea? Debe de ser muy incómodo práctica y visualmente en vez de poner atributo en una línea. La convención general no debe de estar equivicada.

madman_18 · #3 (**permalink**) 17/04/2013, 10:00

Cita:

Iniciado por pzin

¿Cuál es el propósito de flotar un elemento con un ancho de 100%? Por otro lado, tampoco explicas el problema, y yo por ejemplo ahora mismo ando desde el iPad y no voy a probar el código para ver qué pasa.

Como has dejado algún que otro mensaje en el foro y siempre te veo con la misma extraña forma de poner el CSS, ¿por qué lo pones así todo en una linea? Debe de ser muy incómodo práctica y visualmente en vez de poner atributo en una línea. La convención general no debe de estar equivicada.

Hey gracias por responder tan rápido:

a) La verdad que a mí me choca bastante que haya un float:left, y luego el width de la página sea a 100% pero he intentado ir siguiendo un poco el css de la página que me gustaría a la que se pareciese (una vez tenido eso darle ya mi toque y demás, pero tener la base de tener los contenidos como si fuesen columnas) así que aún no comprendo mucho ese funcionamiento...

b) Tienes razón xDD la verdad es que se me pegó de donde trabajaba antes, y ahora por costumbre lo pongo así...aunque tengo mezcla, en unos lo pongo en línea y en otros lo pongo más legible...mi proposito 2013: no ponerlo en 1 línea todo xDD

:conte nto: