HTML display half of div

user_15024456 0
Viewed 237

I have to make this:

enter image description here

I am very inexperienced in HTML so I though the best thing would be making a rectangle in a div and show only half of it, but I can't seem to make it work. Here is the screen of the current website and how I would like to display it instead:

enter image description here

And here's the code:

header {
  font-family: Arial;
}

header nav {
  color: white;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav ul li {
  margin: 0;
  padding: 0;
  float: left;
  width: 200px;
  height: 40px;
  background-color: rgb(187, 199, 124);
  line-height: 40px;
  text-align: center;
}

header nav ul li a {
  display: block;
  text-decoration: none;
  color: white;
}

header nav ul li a:hover {
  background-color: rgb(163, 175, 75);
  opacity: 0.5;
}

header nav ul li ul li {
  display: none;
}

header nav ul li:hover ul li {
  display: block;
}

.fit-picture {
  max-width: 12%;
}

#rectangle {
  width: 1000px;
  height: 900px;
  background: rgb(187, 199, 124);
  border-radius: 500px;
}
<html>

<head>
  <title>Accueil - Gite Naille</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
  <nav>
    <ul>
      <li>
        <a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
        <ul>
          <li><a href="index.html">ACCUEIL</a></li>
          <li><a>CABANES</a></li>
          <li><a>ACTIVITÉS</a></li>
          <li><a>ACTIVITÉS</a></li>
          <li><a>TARIFS</a></li>
          <li><a>CONTACT</a></li>
          <li><a>RÉGLEMENTAIRE</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

<body>
  <div id="rectangle"></div>
</body>

</html>

css html
2 Answers

You can use transform:translateX to achieve this

header {
    font-family: Arial;
}

header nav {
    color:white;
}

header nav ul {
    list-style:none;
    margin:0;
    padding:0;
}

header nav ul li {
    margin:0;
    padding: 0;
    float: left;
    width:200px;
    height:40px;
    background-color: rgb(187,199,124);
    line-height: 40px;
    text-align: center;
}

header nav ul li a {
    display: block;
    text-decoration: none;
    color:white;

}

header nav ul li a:hover {
    background-color: rgb(163,175,75);
    opacity: 0.5;
}

header nav ul li ul li {
    display: none;
}

header nav ul li:hover ul li {
    display: block;
}

.fit-picture {
    max-width: 12%;
}

#rectangle {
    width:1000px;
    height:900px;
    background:rgb(187,199,124);
    border-radius: 500px;
    transform:translateX(-250px);
}
<html>
<head>
    <title>Accueil - Gite Naille</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
    <nav>
        <ul>
            <li><a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
                <ul>
                    <li><a href="index.html">ACCUEIL</a></li>
                    <li><a>CABANES</a></li>
                    <li><a>ACTIVITÉS</a></li>
                    <li><a>ACTIVITÉS</a></li>
                    <li><a>TARIFS</a></li>
                    <li><a>CONTACT</a></li>
                    <li><a>RÉGLEMENTAIRE</a></li>
                </ul>
             </li>
         </ul>
     </nav>
 </header>
 <body>
     <div id="rectangle"></div>
 </body>
 </html>

user_149769450

You can use transform:translateX to achieve this

header {
    font-family: Arial;
}

header nav{
    color:white;
}

header nav ul{
    list-style:none;
    margin:0;
    padding:0;
}

header nav ul li{
    margin:0;
    padding: 0;
    float: left;
    width:200px;
    height:40px;
    background-color: rgb(187,199,124);
    line-height: 40px;
    text-align: center;
   
}

header nav ul li a{
    display: block;
    text-decoration: none;
    color:white;

}

header nav ul li a:hover{
    background-color: rgb(163,175,75);
    opacity: 0.5;
}

header nav ul li ul li{
    display: none;
}

header nav ul li:hover ul li{
    display: block;
}

.fit-picture{
    max-width: 12%;
    z-index:1;
}

#rectangle{
    width:500px;
    height:400px;
    background:rgb(187,199,124);
    border-radius: 500px;
    transform:translateX(-250px);
    z-index:-111;
}
<html>
<head>
    <title>Accueil - Gite Naille</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
    <nav>
        <ul>
            <li><a><img class="fit-picture"
     src="menu-icon.png"
     alt="Menu">ACCUEIL</a>
                <ul>
                    <li><a href="index.html">ACCUEIL</a></li>
                    <li><a>CABANES</a></li>
                    <li><a>ACTIVITÉS</a></li>
                    <li><a>ACTIVITÉS</a></li>
                    <li><a>TARIFS</a></li>
                    <li><a>CONTACT</a></li>
                    <li><a>RÉGLEMENTAIRE</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
<body>
     <div id="rectangle"></div>

</body>
</html>```

user_149769450
Related