4

Tengo problemas con ciertas cosas de los divs, ya que no los acabo de entender muy bien...

El div de logo tiene que tener 10px de margen superior, pero no hay narices a separarlo, pues está pegado al div página.

El div contingut tiene que estar a la altura del div lateral, y el div peu, pegado inferiormente a estos dos, y, por último, el div de cercador tiene que estar posicionado en la parte derecha superior del div página, posicionarlo a la derecha lo he conseguido, pero no encuentro la forma de ponerlo arriba, también con 10px de margen.

¿Cómo puedo lograr esto? ya os digo, no pido que nadie me pase la solución sin más, necesito entender un poco el funcionamiento de los divs, porque cada vez que toco algo de un div, se me mueven todos, y no acabo de entender porqué.

Así es como debería quedar: captura de pantalla

Este es mi código html:

* {
  margin: 0;
  padding: 0;
}

body {
  background: #AAA;
}

#pagina {
  background: #FFF;
  width: 760px;
  margin: auto;
}

#capcalera {
  position: relative;
  height: 180px;
  background: #DDD;
}

.logo {
  width: 300px;
  height: 150px;
  margin: 10px;
  background: #999;
}

#cercador {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #666;
  float: right;
}

#lateral {
  width: 140px;
  margin-left: auto;
  padding: 15px 20px;
  background-color: #CCC;
}

#lateral ul,
a {
  list-style: none;
  text-decoration: none;
}

#contingut {
  margin: 0px 170px 15px 0px;
  padding: 5px;
  background-color: #EEE;
}

#peu {
  padding: 5px;
  background-color: #DDD;
}
<head>
  <meta charset="utf-8">
  <title>pregunta 5</title>
</head>

<body>
  <div id="pagina">
    <div id="capcalera">
      <div class="logo">Logo</div>
      <div id="cercador">Cercador</div>
    </div>
    <div id="lateral">
      <ul>
        <li><a href="#">Secció A</a></li>
        <li><a href="#">Secció B</a></li>
        <li><a href="#">Secció C</a></li>
      </ul>
    </div>
    <div id="contingut">Contingut</div>
    <div id="peu">Peu</div>
  </div>

</body>

Vale, ya está casi todo solucionado, ahora estoy dando los últimos retoques y me encuentro con el siguiente "problema", el texto del lateral queda un poco desplazado hacia abajo al tocar el width de contingut, y me gustaría saber si hay alguna forma de que no pase:

Código actual:

* {
  margin: 0;
  padding: 0;
}

body {
  background: #AAA;
}

#pagina {
  background: #FFF;
  width: 760px;
  margin: auto;
}

#capcalera {
  position: relative;
  height: 180px;
  background: #DDD;
}

#logo {
  width: 300px;
  height: 150px;
  margin: 10px;
  background: #999;
  float: left;
}

#cercador {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #666;
  float: right;
}

#lateral {
  width: 140px;
  margin-left: auto;
  padding: 15px 20px;
  background-color: #CCC;
}

#lateral ul,
a {
  list-style: none;
  text-decoration: none;
}

#contingut {
  margin: 0px 170px 15px 0px;
  float: left;
  width: 75%;
  padding: 5px;
  background-color: #EEE;
}

#peu {
  padding: 5px;
  background-color: #DDD;
}
</style>

    <div id="capcalera">

        <div id="logo">Logo</div>

        <div id="cercador">Cercador</div>

    </div>
   <div>
        <div id="contingut">Contingut</div>
        <div id="lateral">
          <ul>
                <li><a href="#">Secció A</a></li>
                <li><a href="#">Secció B</a></li>
                <li><a href="#">Secció C</a></li>
          </ul>
        </div>
   </div>


    <div id="peu">Peu</div>
</div>
4
  • a que te refieres con div pegado a la página? has intentado con la propiedad margin (Top, bottom de acuerdo a tu problema) de css?
    – Sr1871
    el 27 mar. 2017 a las 15:35
  • Bueno, me refiero a que el div peu tiene que quedar junto a la parte inferior de contingut y lateral, cuando estos dos estén a la misma algura, y si, he probado con los margin, pero tampoco me ha acabado de funcionar correctamente... el 27 mar. 2017 a las 15:38
  • puedes poner una imagen hecha en cualquier editor de imagenes, dandonos una idea exacta de como quieres que quede?
    – Luis
    el 27 mar. 2017 a las 15:41
  • ahora edito! muchas gracias! el 27 mar. 2017 a las 15:41

3 respuestas 3

3

Usa la propiedad de float:left, igual algunos div estaban desacomodados, esto queda como lo querías en la imagen, la mayoría fue puro float:left, puedes comparar tú código con este

* {
  margin: 0;
  padding: 0;
}

body {
  background: #AAA;
}

#pagina {
  background: #FFF;
  width: 760px;
  margin: auto;
}

#capcalera {
  position: relative;
  height: 180px;
  background: #DDD;
}

.logo {
  width: 300px;
  height: 150px;
  margin: 10px;
  background: #999;
  float: left;
}

#cercador {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #666;
  float: right;
}

#lateral {
  width: 140px;
  margin-left: auto;
  padding: 15px 20px;
  background-color: #CCC;
}

#lateral ul,
a {
  list-style: none;
  text-decoration: none;
}

#contingut {
  margin: 0px;
  float: left;
  width: 75%;
  padding: 5px;
  background-color: #EEE;
}

#peu {
  padding: 5px;
  background-color: #DDD;
}
<div id="pagina">

  <div id="capcalera">

    <div class="logo">Logo</div>

    <div id="cercador">Cercador</div>

  </div>
  <div>
    <div id="contingut">Contingut</div>
    <div id="lateral">
      <ul>
        <li><a href="#">Secció A</a></li>
        <li><a href="#">Secció B</a></li>
        <li><a href="#">Secció C</a></li>
      </ul>
    </div>
  </div>


  <div id="peu">Peu</div>
</div>

8
  • El lateral está mal alineado en esta respuesta. Y aunque @JuankGlezz valore negativamente mi respuesta sigue siendo la mejor.
    – Lukas
    el 27 mar. 2017 a las 16:18
  • Hey, muchas gracias! Pero agradecería inmensamente que me explicaras un poco eso de que los divs quedan mal acomodados, y también un poco cómo funciona lo del float y el display: inline block, es decir, el cómo afectan a los divs. Muchísimas gracias!! En cunato lo pongas por ahí daré este tema por cerrado y por buena tu respuesta!! ^^ el 27 mar. 2017 a las 17:30
  • Practicamente el float hace que el div se convierta en una propiedad flotante y lo envuelva, en lugar de ocupar toda la linea, te dejo un enlace con más detalles librosweb.es/libro/css/capitulo_5/posicionamiento_flotante.html El display:inblock yo no lo puse, fue lukas pero bien podría servirte para acomodarlo mejor, hace que los divs o los elementos se pongan uno a lado del otro mientras tengan cupo en lugar de uno debajo del otro
    – Sr1871
    el 27 mar. 2017 a las 17:44
  • Entiendo, muchas gracias, ahora estoy dándole un último retoque, a ver si puedes ayudarme, el div lateral, al darle el width al div contingut, se echa un poco para abajo (el texto de dentro, no el div en si), sabrías por qué es o si hay alguna forma de corregirlo? Llevo rato intentándolo pero no lo consigo el 27 mar. 2017 a las 17:54
  • Edita tu respuesta con lo nuevo que tienes para ver como te quedo y cual es tu problema ahora
    – Sr1871
    el 27 mar. 2017 a las 17:55
3

Aquí te dejo exáctamente como lo querías:

       *{margin:0; padding:0;}
    body {
        background: #AAA;
    }
    #pagina {
        background: #FFF;
        width: 760px;
        margin: auto;
    }
    #capcalera {
        position: relative; 
        height:180px;
        background: #DDD;
    }
    .logo{
        width: 300px;
        height: 150px;
        margin: 10px;
        background: #999;
        display: inline-block;
        float:left;
    }
    #cercador{
        width: 200px;
        height: 50px;
        margin: 10px;
        background: #666;
        float: right;
        display: inline-block;
    }
    #lateral {
        width: 140px; 
        padding: 15px 20px;
        background-color:#CCC;
        float: right;
        display: inline-block;
    }
    
    #lateral ul, a {
        list-style: none;
        text-decoration: none;
    }
        
    #contingut {
        margin: 0px 0px 15px 0px;
        width: 570px;
        padding: 5px;
        background-color:#EEE;
        float:left;
        display: inline-block;
    }
        
    #peu {
        padding: 5px; 
        background-color:#DDD;
    }
    <head>
    <meta charset="utf-8">
    <title>pregunta 5</title>
    </head>
    <body>
        <div id="pagina">
            <div id="capcalera">
                <div class="logo">Logo</div>
                <div id="cercador">Cercador</div>
            </div>
            <div id="lateral">
    		  <ul>
                  <li><a href="#">Secció A</a></li>
                    <li><a href="#">Secció B</a></li>
                    <li><a href="#">Secció C</a></li>
              </ul>
    	    </div>
            <div id="contingut">Contingut</div>
            <div style="clear: both;"></div>
            <div id="peu">Peu</div>
        </div>
    </body>

2
  • Tu respuesta es una copia de lo que hace Sergio si es algo diferente completa la pregunta mencionando que tiene de diferencia
    – JuankGlezz
    el 27 mar. 2017 a las 16:08
  • No es verdad, lo he hecho yo mismo en mi ordenador. Si ves el div donde están las Secciones, el mío está alineado correctamente mientras el compañero no lo ha hecho tan bien. En vez de utilizar el inline-block el compañero Sergio lo ha hecho con position: relative ... El mío está mejor elaborado y es mi única respuesta correcta de esta pregunta. Y si tienes dudas compara nuestros códigos y verás.
    – Lukas
    el 27 mar. 2017 a las 16:13
0

En lugar de usar pixels, prueba itulizando porcentajes.

Ademas, añadiria la propiedad Display: inline-Block para que el comportamiento del Div sea el correcto.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.