1. ¿Buscando un Banco para abrir tu primera cuenta de ahorros? Revisa nuestro comparativo de cuentas cero mantenimiento haciendo clic aquí.
    Ocultar anuncio

Consulta sobre divs

Publicado en 'Webmasters' por goku7, 5 Ago 2013.





  1. goku7

    goku7 Miembro frecuente

    Registro:
    5 Dic 2011
    Mensajes:
    90
    Likes:
    10




    Estoy iniciandome en htm y estilos css

    asi que estoy creando contenedeores con divs pero tengo un problema de prinicipiante
    Pondre el codigo

    html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Pagina con DIVS</title>
    <link rel="stylesheet" href="extilos.css" type="text/css">
    </head>

    <body>
    <div class="clase1">Contenedor 1</div>
    <div class="clase2">Contenedor 2</div>
    <div class="clase3">Contenedor 3</div>
    <div class="clase4">Contenedor 4</div>
    </body>
    </html>


    Y el css

    *{ padding:0px
    }

    .clase1{
    width:100%;
    height:100px;
    border:1px solid;
    float:left;

    }
    .clase2{
    width:30%;
    height:600px;
    float:left;
    border:1px solid;
    clear:left;
    float:left;


    }
    .clase3{
    width:50%;
    height:600px;
    float:left;
    border:1px solid;
    float:left;

    }
    .clase4{
    width:20%;
    height:600px;
    float:left;
    border:1px solid;


    }

    [​IMG]

    Como veran quise ubicar los divs con porcentajes de pantalla y left y clear pero esos bordes de 1px no me dejan cuadrarlo al porcentaje preciso para que el contenedor 4 quede a la derecha
    Hay alguna manera de hacerlo que sea mas facil que eso??

    Comprendanme soy principiante en esto
     
    Última edición: 5 Ago 2013


  2. unknown20000

    unknown20000 Miembro frecuente

    Registro:
    17 Ago 2012
    Mensajes:
    93
    Likes:
    7
    Explícame mejor, no te entiendo bien... ¿Quieres poner un div arriba que ocupe todo el espacio y abajo tres alineados?

    ¿Así?:
    DIV-1 100%
    DIV-2 30% DIV-3 50% DIV-4 20%
     
  3. Marlop

    Marlop Miembro de bronce

    Registro:
    23 Jul 2007
    Mensajes:
    2,082
    Likes:
    280
    no entiendo la pregunta

    como kieres ordenar los 4 contenedores?
     
  4. goku7

    goku7 Miembro frecuente

    Registro:
    5 Dic 2011
    Mensajes:
    90
    Likes:
    10
    claro que el div contenedor 4 este al lado izquierdo de contenedor 3 alineado con el div 2 y 3
     
  5. unknown20000

    unknown20000 Miembro frecuente

    Registro:
    17 Ago 2012
    Mensajes:
    93
    Likes:
    7
    Hola disculpa por la demora, es que no entro mucho a este foro, recién me acabo de acordar que tenía algo pendiente; quizá ya encontraste la solución, pero igual la dejo aquí por si todavía no haz solucionado tu problema:


    Pon esto en tu HTML

    <!DOCTYPE HTML>
    <HTML lang="es">


    -------------<HEAD>
    --------------------------<TITLE>Página con DIVS</TITLE>
    --------------------------<META charset="utf-8" />
    --------------------------<LINK rel="stylesheet" href="extilos.css" />
    ------------- </HEAD>

    -------------<BODY>
    --------------------------<DIV class="content-1">&nbsp;</DIV>
    --------------------------<DIV class="content-2">&nbsp;</DIV>
    --------------------------<DIV class="content-3">&nbsp;</DIV>
    --------------------------<DIV class="content-4">&nbsp;</DIV>
    -------------</BODY>


    </HTML>

    Pon esto en tu CSS

    body{
    margin: 0;
    padding: 0;
    }

    .content-1{
    border: ;
    height: auto;
    width:100%;
    float: left;
    clear: both;
    background: #1C1C1C;
    }

    .content-2{
    border: ;
    height: auto;
    width:30%;
    float: left;
    background: #FF0040;
    }

    .content-3{
    border: ;
    height: auto;
    width:50%;
    float: left;
    background: #0B6138;
    }

    .content-4{
    border: ;
    height: auto;
    width:20%;
    float: left;
    background: #088A85;
    }

    El margin y padding 0 en tu body es para que no haya ningún tipo de margen o espacio; los divs se bajaban porque tenían borde, y los bordes ocupan pixeles, por tanto lo que he hecho ha sido quitar los bordes a tus divs y ponerles color de fondo para diferenciarlos y que no ocupen espacio. Si quieres ponerles bordes y un color de fondo blanco, como estaba en tu código, vas a tener que bajarle el porcentaje a uno de tus divs inferiores (de abajo). El clear: both va en el contenedor de arriba (content-1) para que se desconecte del resto, si quieres poner más divs abajo del numero 2, 3 y 4, tendrás que ponerle al div cuatro clear both. EL height de tus contenedores lo he puesto en auto porque si le pones un tamaña fijo, como estaba, vas a tener problemas cuando pongas un contenido que supere al tamaño de tu div, lo que va a ocasionar que lo que contenga el div se desborde. Además de flotar los divs con floats también se puede con display.. Ojalá te haya ayudado, cualquier cosa me avisas...