Home > database >  Center menu, center pictures, html, css
Center menu, center pictures, html, css

Time：11-24

Good morning. I'm new to html/css and to programming in general and this is my first post. Below is my current code. I'd like to do three things, that I'm currently unable to do:

  1. to center the purple menu with the four boxes: I've tried to move the nav bar inside the header, but without success.
  2. to put in a single line the card with red wine and white wine and below them, the other two. I've created two DIV parent directories, each with two childs.
  3. to put the "comprar" (to buy) button below each picture.

Thank you very much in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vinería Baco</title>
    <!--link css-->
    <link rel="stylesheet" href="./estilos.css">
</head>
  <body>
    <!--seccion hero/banner-->
    <header>
        <p><h1 class="h1_rojo">Vinería Baco</h1></p>
        <p><h2 class="h2_turquesa">El mejor vino de todo Berisso</h2></p>
    <!--Menu de navegacion-->
      <nav>
        <ul>
          <li class="menu menu__item"><a href="./contacto.html">Contactanos</a></li>
          <li class="menu menu__item"><a href="https://www.facebook.com/martin.prozapas">Facebook</a></li>
          <li class="menu menu__item"><a href="https://www.instagram.com/elonofficiall/?hl=es">Instagram</a></li>
          <li class="menu menu__item"><a href="./nosotros.html">Acerca de nosotros</a></li>
        </ul>
      </nav>
    </header>
      <!--Seccion main-->
      <main>
        <!--cards 1 to 2-->
        <div class="card1">
          <a href="./vino-tinto.html"><img alt="vino tinto" src="../img/tintos/tintos.jpg"width=150" height="70"></a><button type="button">Comprar</button><br>
          <a href="./vino-blanco.html"><img alt="vino blanco" src="../img/blancos/blancos.jpg"width=150" height="70"></a><button type="button">Comprar</button><br>  
        <!--cards 3 to 4-->
        <div class="card2">
          <a href="./vino-rosado.html"><img alt="vino rosado" src="../img/rosados/rosados.jpg"width=150" height="70"></a><button type="button">Comprar</button><br>
          <a href="./vino-especial.html"><img alt="vinos especiales" src="../img/especiales/especiales.jpg"width=150" height="70"></a><button type="button">Comprar</button><br></div>
      </main><br><br>
      <!--Seccion footer-->
      <footer>
        <h4>2021 | Hecho por MGP | 2021</h4>
      </footer>
  </body>
</html>

CSS:

/*HERO SECTION*/
/*Encabezados*/
.h1_turquesa {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#00868b;
  text-align: center;
}
.h1_rojo {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#8b0000;
  text-align: center;
}
.h1_azul {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(138, 43, 226);
  text-align: center;
}
.h1_verde {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: rgb(0, 128, 0);
  text-align: center;
}
h2 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(139, 0, 139);
  text-align: center;
}
/*Párrafos*/
.parr {
    display: block;
    font-size: 18px;
    color: black;
    text-align: justify;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/*Fondo*/
body {
  background-color: rgb(197, 189, 170);
}
/*Imágenes*/
img {
    display: block;
    max-width:500px;
    max-height:500px;
    width: auto;
    height: auto;
}
/*MENU*/
.menu {
  background-color: rgb(175, 76, 122); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
}
.menu__item a {
  text-decoration: none;
  color: white;
} 
/*MAIN*/
/*Card section*/
.card1{
  display: flex;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
.card2{
  display: flex;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
/*FOOTER*/
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

CodePudding user response：

Welcome to Stack Overflow. I would suggest running your code through a beautifier to clean up everything and you can see if you accidentally forgot to close a tag. In your instance, you forgot to close one of your div tags which I closed for you. I also nested both of your divs card1 and card2 into a card-container. I went ahead and flexed that div with and justified it to the center. I also added a .flex class to align your unordered list into the center. Please see those changes below. I am unsure what you mean about part 2 of your question, if you can please elaborate further.

/*HERO SECTION*/
/*Encabezados*/
.h1_turquesa {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#00868b;
  text-align: center;
}
.h1_rojo {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#8b0000;
  text-align: center;
}
.h1_azul {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(138, 43, 226);
  text-align: center;
}
.h1_verde {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: rgb(0, 128, 0);
  text-align: center;
}
h2 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(139, 0, 139);
  text-align: center;
}
/*Párrafos*/
.parr {
    display: block;
    font-size: 18px;
    color: black;
    text-align: justify;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/*Fondo*/
body {
  background-color: rgb(197, 189, 170);
}
/*Imágenes*/
img {
    display: block;
    max-width:500px;
    max-height:500px;
    width: auto;
    height: auto;
}
/*MENU*/
.menu {
  background-color: rgb(175, 76, 122); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
}
.menu__item a {
  text-decoration: none;
  color: white;
} 
/*MAIN*/
/*Card section*/
.card1{
  display: flex;
  flex-direction: column;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
.card2{
  display: flex;
  flex-direction: column;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
/*FOOTER*/
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

.flex {
  display: flex;
  justify-content: center;
}

.card-container {
  display: flex;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vinería Baco</title>
    <!--link css-->
    <link rel="stylesheet" href="./estilos.css">
</head>
  <body>
    <!--seccion hero/banner-->
    <header>
        <p><h1 class="h1_rojo">Vinería Baco</h1></p>
        <p><h2 class="h2_turquesa">El mejor vino de todo Berisso</h2></p>
    <!--Menu de navegacion-->
      <nav>
        <ul class="flex">
          <li class="menu menu__item"><a href="./contacto.html">Contactanos</a></li>
          <li class="menu menu__item"><a href="https://www.facebook.com/martin.prozapas">Facebook</a></li>
          <li class="menu menu__item"><a href="https://www.instagram.com/elonofficiall/?hl=es">Instagram</a></li>
          <li class="menu menu__item"><a href="./nosotros.html">Acerca de nosotros</a></li>
        </ul>
      </nav>
    </header>
      <!--Seccion main-->
      <main>
        <!--cards 1 to 2-->
      <div class="card-container">
        <div class="card1">
          <a href="./vino-tinto.html"><img alt="vino tinto" src="https://dummyimage.com/600x350/000/fff"width=150" height="70"></a><br><button type="button">Comprar</button><br>
          <a href="./vino-blanco.html"><img alt="vino blanco" src="https://dummyimage.com/600x350/000/fff" width=150" height="70"></a><br><button type="button">Comprar</button><br>  
        </div>
        <!--cards 3 to 4-->
        <div class="card2">
          <a href="./vino-rosado.html"><img alt="vino rosado" src="https://dummyimage.com/600x350/000/fff"width=150" height="70"></a><br><button type="button">Comprar</button><br>
          <a href="./vino-especial.html"><img alt="vinos especiales" src="https://dummyimage.com/600x350/000/fff"width=150" height="70"></a><br><button type="button">Comprar</button><br>
        </div>
      </main><br><br>      
      </div>

      <!--Seccion footer-->
      <footer>
        <h4>2021 | Hecho por MGP | 2021</h4>
      </footer>
  </body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

EDIT: inserted dummy images into HTML. It appears buttons are displaying below the images as expected.

CodePudding user response：

There's a mindset that always help me out.

If you have problems positioning something, create a div parent.

I create as many div parents as needed.

For example:

<div>
   <div>My element 1</div>
   <div>My element 2</div>
   <div>My element 3</div>
   <div>My element 4</div>
</div>

Sometimes I might want that the first two elements get positioned differently, so I create another parent that will wrap the elements I want to position in a different way.

<div>
   <div>
      <div>My element 1</div>
      <div>My element 2</div>
   </div>
   <div>
      <div>My element 3</div>
      <div>My element 4</div>
   </div>
</div>

If you do that, it will solve many problems

CodePudding user response：

I think this will help justify-content

Page link：https//www.codepudding.com/database/202266.html

Prev:Flexbox column, force elements on same line exceptionally
Next:Create new dynamic id in javascript
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding