1

Hola quiero saber como meter los puntos dentro del fondo gris.

*{
  margin: 0;
  padding: 0;
}

section{
  padding: 100px 20px 100px 20px;
}

article{
  background-color: rgb(200,200,200);
  margin: 20px 0 20px 0;
}

h2{
  text-transform: uppercase;
}


p{
  line-height: 1.2em;
  margin: 20px 0 20px 0;
}

.hero {
  background: url("../materiales/img/batman_background.jpg") no-repeat center / cover;
  padding: 120px 20px 120px 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

.catwoman{
  background: url("../materiales/img/catwoman_background.jpg") no-repeat right top / cover;
  color: white;
  text-align: center;
}

.subtitulo{
  margin: 20px;
}

.bold{
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
}

.mayuscula{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=2, user-scalable=yes">
  <title>La cueva | La cueva de Batman</title>
</head>
<body>
  <main>

    <header class="hero">
      <h1>La cueva de Batman</h1>
      <p class="subtitulo">Una experiencia para los sentidos</p>
    </header>
    <section class="lacueva">
      <header>
        <h2>¿Que es la cueva?</h2>
        <p class="mayuscula">Un trocito de ghotam city en madrid</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </header>
    </section>
    <section class="catwoman">
      <p>Alguna vez te has tomado un batido bien fresquito...</p>
      <span class="bold">con catwoman</span>
      <p>...poniendote toppings de oreo y kitkat</p>
    </section>
    <section>
      <header>
        <h2>Tarifas</h2>
        <p class="mayuscula">Elije tu experiencia</p>
      </header>
      <article class="basica">
        <h3>Experiencia básica</h3>
        <small>35$ + IVA</small>
        <ul>
          <li>Cena con personajes</li>
          <li>Concierto de batman</li>
          <li>Photocall</li>
        </ul>
      </article>
      <article class="total">
        <h3>Experiencia total</h3>
        <small>50$ + IVA</small>
        <ul>
          <li>Cena con personajes</li>
          <li>Concierto de batman</li>
          <li>Photocall</li>
          <li>Meet & geek</li>
          <li>Álbum personalizado</li>
        </ul>
      </article>

    </section>
    <section>
      <header>
        <h2>¿Donde estamos?</h2>
      </header>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3036.863467282354!2d-3.6705853852111483!3d40.43402206251261!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42177823e4a775%3A0xb1126df333ecd046!2sAEPI+-+Asociaci%C3%B3n+Espa%C3%B1ola+de+Programadores+Inform%C3%A1ticos!5e0!3m2!1ses!2ses!4v1460966597481" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p>Nos puedes encontrar en la <a href="https://www.asociacionaepi.es/" rel="follow" target="_blank">Asociacion española AEPI</a></p>
      <p>Calle martin izquierdo, 34</p>
      <p>Venta de entradas en Carrefour, Fnac y ticketmaster</p>
    </section>
  </main>
  <footer>
    <figure>
      <img src="materiales/img/logoFooter.png" alt="logoBatman" title="Batman">
    </figure>
    <small>Copyright La cueva de Batman 2016. Todos los derechos reservados</small>
    <nav>
      <ul>
        <li><img src="materiales/img/facebook.png" alt="logoBatman"></li>
        <li><img src="materiales/img/twitter.png" alt="logoBatman"></li>
        <li><img src="materiales/img/blogger.png" alt="logoBatman"></li>
        <li><img src="materiales/img/googleplus.png" alt="logoBatman"></li>
        <li><img src="materiales/img/instagram.png" alt="logoBatman"></li>
        <li><img src="materiales/img/youtube.png" alt="logoBatman"></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

2 respuestas 2

3

Podrías usar:

  • list-style-position igual a inside, para que los marcadores aparezcan en línea dentro de la caja principal.

  • [Opcional] margin-left, para agregar un espacio entre el borde y los marcadores, de manera que no queden pegados al borde.

Ejemplo:

* {
  margin: 0;
  padding: 0;
}
article {
  background-color: rgb(200, 200, 200);
  margin: 20px 0 20px 0;
}
section {
  padding: 100px 20px 100px 20px;
}
ul {
  list-style-position: inside;
  margin-left: 5px;
}
<section>
  <article class="total">
    <h3>Experiencia total</h3>
    <small>50$ + IVA</small>
    <ul>
      <li>Cena con personajes</li>
      <li>Concierto de batman</li>
      <li>Photocall</li>
      <li>Meet & geek</li>
      <li>Álbum personalizado</li>
    </ul>
  </article>
</section>

0

Simple añade margen al elemento ul:

ul {
  margin-left: 30px;
}

*{
  margin: 0;
  padding: 0;
}

section{
  padding: 100px 20px 100px 20px;
}

article{
  background-color: rgb(200,200,200);
  margin: 20px 0 20px 0;
}

h2{
  text-transform: uppercase;
}


p{
  line-height: 1.2em;
  margin: 20px 0 20px 0;
}


ul {
 margin-left: 30px;
}

.hero {
  background: url("../materiales/img/batman_background.jpg") no-repeat center / cover;
  padding: 120px 20px 120px 20px;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

.catwoman{
  background: url("../materiales/img/catwoman_background.jpg") no-repeat right top / cover;
  color: white;
  text-align: center;
}

.subtitulo{
  margin: 20px;
}

.bold{
  font-size: 70px;
  font-weight: 800;
  text-transform: uppercase;
}

.mayuscula{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=2, user-scalable=yes">
  <title>La cueva | La cueva de Batman</title>
</head>
<body>
  <main>

    <header class="hero">
      <h1>La cueva de Batman</h1>
      <p class="subtitulo">Una experiencia para los sentidos</p>
    </header>
    <section class="lacueva">
      <header>
        <h2>¿Que es la cueva?</h2>
        <p class="mayuscula">Un trocito de ghotam city en madrid</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </header>
    </section>
    <section class="catwoman">
      <p>Alguna vez te has tomado un batido bien fresquito...</p>
      <span class="bold">con catwoman</span>
      <p>...poniendote toppings de oreo y kitkat</p>
    </section>
    <section>
      <header>
        <h2>Tarifas</h2>
        <p class="mayuscula">Elije tu experiencia</p>
      </header>
      <article class="basica">
        <h3>Experiencia básica</h3>
        <small>35$ + IVA</small>
        <ul>
          <li>Cena con personajes</li>
          <li>Concierto de batman</li>
          <li>Photocall</li>
        </ul>
      </article>
      <article class="total">
        <h3>Experiencia total</h3>
        <small>50$ + IVA</small>
        <ul>
          <li>Cena con personajes</li>
          <li>Concierto de batman</li>
          <li>Photocall</li>
          <li>Meet & geek</li>
          <li>Álbum personalizado</li>
        </ul>
      </article>

    </section>
    <section>
      <header>
        <h2>¿Donde estamos?</h2>
      </header>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3036.863467282354!2d-3.6705853852111483!3d40.43402206251261!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42177823e4a775%3A0xb1126df333ecd046!2sAEPI+-+Asociaci%C3%B3n+Espa%C3%B1ola+de+Programadores+Inform%C3%A1ticos!5e0!3m2!1ses!2ses!4v1460966597481" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
      <p>Nos puedes encontrar en la <a href="https://www.asociacionaepi.es/" rel="follow" target="_blank">Asociacion española AEPI</a></p>
      <p>Calle martin izquierdo, 34</p>
      <p>Venta de entradas en Carrefour, Fnac y ticketmaster</p>
    </section>
  </main>
  <footer>
    <figure>
      <img src="materiales/img/logoFooter.png" alt="logoBatman" title="Batman">
    </figure>
    <small>Copyright La cueva de Batman 2016. Todos los derechos reservados</small>
    <nav>
      <ul>
        <li><img src="materiales/img/facebook.png" alt="logoBatman"></li>
        <li><img src="materiales/img/twitter.png" alt="logoBatman"></li>
        <li><img src="materiales/img/blogger.png" alt="logoBatman"></li>
        <li><img src="materiales/img/googleplus.png" alt="logoBatman"></li>
        <li><img src="materiales/img/instagram.png" alt="logoBatman"></li>
        <li><img src="materiales/img/youtube.png" alt="logoBatman"></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

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.