Tue. May 30th, 2023

[ANSWERED] css – HTML display half of div

By

Nov 19, 2022 css, html

Solution 1 :

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>

Solution 2 :

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>```

Problem :

I have to make this:

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:

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>

Comments

Comment posted by developer.mozilla.org/en-US/docs/Web/CSS/border-radius

you can apply border radius only to right side of your div

Comment posted by voxio

Thanks, it seems to work fine now

Comment posted by voxio

Thanks, but it seems to affect my text above

Comment posted by Shayan Kanwal

@voxio You can upvote this it will increase my reputation and about your hiding text you can use z-index in css

Comment posted by Shayan Kanwal

@voxio or you can accept this answer if it helps by clicking in the tick button

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022