How to move the bullet point inside the gray background?

Question

How to move the bullet point inside the gray background?

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

Hi, I want to know how to put the points inside the gray background.

*{
  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>

html css

asked by francisco dwq 11.01.2018 в 18:04

source

2 answers

Select a form created using a PHP array? Replace multiple strings in PHP

score 3 · Answer 1

You could use:

list-style-position equal to inside , for that markers appear online within the main box.
[ Optional ] margin-left , to add a space between the border and the markers, so that they are not glued to the border.

Example:

* {
  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>

score 0 · Answer 2

Simple adds margin to the ul element:

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>