Html Question posted in
Some basic documentation can be found here.

Html – How to position buttons and all on webpage perfectly?

so i want to swap them with their position any help?? Also some good video or reference with respect to this positioning thing because it is very confusing for me
i tried to position relative then shifting it to bottom but i wasn’t really succesful and confused at all of this stuff in css.

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.main{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(Untitled-1.png);
    background-size: cover;
    background-position: center;
}
.navbar{
    width: 85%;
    margin: auto;
    padding: 35px ;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width: 120px;
    cursor: pointer;
}
.navbar ul li{
    list-style: none;
    display: inline-block;
    margin:20px;
    margin-top: 10px;
    margin-right: 50px;
}
.ul{
    float: left;
    margin-left: 50px;
    margin-top: 20px;
    align-items: center;
    position: relative;
}

.navbar ul li{
    list-style-type: style none;
    display: inline-block;
    margin: 20px;
    position: relative;

}

.navbar ul li::after{
    content: '';
    height: 3px;
    width: 0%;
    background: #cf1eb2;
    position: absolute;
    left: 0;
    bottom:0;
    transition: 0.2s;

}
.navbar ul li:hover:after{
    width: 100%;
}
ul li a{
    text-decoration: none;
    color: antiquewhite;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    transition: 0.2s ease-in-out;
    text-transform: uppercase;
  
}

ul li a:hover{
    color: rgb(247, 0, 255);
    
}

.content{
    width: 100%;
    position: absolute;
    top: 50%;
  
    text-align: center;
    color: white;
}
.content h1{
    font-size: 70px;
    margin-top: 80px;
}

.content p{
    margin: auto;
    font-weight: 100;
    line-height: 25px;
}
 
.srch{
    width: 500px;               /*here is the block*/
    height: 40px;
    background: transparent;
    font-family: 'Times New Roman';
    font-size: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-color: aqua;
    border: 4px solid rgb(10, 0, 5);
    
}

.btn{
    width: 80px;
    height: 40px;
    background-color: rgb(144, 197, 59);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: 0.4s;
  
}
.btn:hover{
    cursor: pointer;
    color: rgb(141, 33, 184);
}

.buttn{
    width: 100%;
    position: absolute;
    top: 50%;
    text-align:center;
    color: white;
}
.More{
    width: 80px;                    /*here is the block*/
    height: 50px;
    font-family: sans-serif;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 100;
    color: greenyellow;
    border: 3px solid white;
    margin-left: 100px;
    

}
.donate{
    width: 80px;   /*here is the block*/
    height: 50px;
    font-family: sans-serif;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 100;
    color: greenyellow;
    border: 3px solid white;
    transition: 0.4s;
    margin-bottom: 20px;
    margin-top: -20px;
}
.More:hover{
    color: pink;
    cursor: pointer;
}

.donate:hover{
    color: pink;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style1.css">
    <title>Catssssssssss</title>
</head>
<body>
    <div class="main">
        <div class="navbar">
            <img src="catlogo.png" alt="" srcset="" style="width: 100px;">
           
        

            <ul>
                <li><a href="http://">Home</a></li>
                
                <li><a href="http://">Breeds</a></li>
                <li><a href="http://">Vet help</a></li>
                <li><a href="http://">Food</a></li>
            </ul>
        </div>
        <div class="content">
            <h1>Some Silly Cats</h1>
            <p>The cute cat theory of digital activism is a theory concerning Internet <br> activism, Internet censorship, and "cute cats" (a term used for any <br> low-value, but popular online activity) developed by Ethan Zuckerman in 2008.</p>
            <input type="search" class="srch" name="" id="" placeholder="  Search Here  "> <button class="btn">Search</button>
            
        </div>
        <div class="buttn">
            <button type="button" class="More">More Cats</button>
            <button type="button" class="donate">Donation </button>
        </div>

    </div>
    
</body>
</html>
Tags:

3

Answers


  1. 0
    1. Remove position:absolute from .content.
    2. Remove position:absolute from .buttn.
    Login or Signup to reply.
  2. 0

    You do not need position:absolute on any of these here since all the elements are in the exact order you want them displayed. For spacing you can use margin/padding/width.

    Also, if for some reason you want the .content and .buttn classes to be exactly in the center of the page and floating on top of other content i.e. out of the normal flow of your html then please follow the below code.

    In this I’ve a added a parent container that contains both .content and .buttn. Now, add position:absolute; top:50%; to the parent. Keep in mind that top:50%; will not put the div exactly in the center as it measures the distance to the top of the container being positioned and not the center. So we use transition:translateY(-50%);

    * {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.main {
  width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(Untitled-1.png);
  background-size: cover;
  background-position: center;
}

.navbar {
  width: 85%;
  margin: auto;
  padding: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 120px;
  cursor: pointer;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 20px;
  margin-top: 10px;
  margin-right: 50px;
}

.ul {
  float: left;
  margin-left: 50px;
  margin-top: 20px;
  align-items: center;
  position: relative;
}

.navbar ul li {
  list-style-type: style none;
  display: inline-block;
  margin: 20px;
  position: relative;
}

.navbar ul li::after {
  content: '';
  height: 3px;
  width: 0%;
  background: #cf1eb2;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.2s;
}

.navbar ul li:hover:after {
  width: 100%;
}

ul li a {
  text-decoration: none;
  color: antiquewhite;
  font-family: 'Times New Roman', Times, serif;
  font-size: 25px;
  transition: 0.2s ease-in-out;
  text-transform: uppercase;
}

ul li a:hover {
  color: rgb(247, 0, 255);
}

.center-float-container {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.content {
  width: 100%;
  text-align: center;
  color: white;
}

.content h1 {
  font-size: 70px;
  margin-top: 80px;
}

.content p {
  margin: auto;
  font-weight: 100;
  line-height: 25px;
}

.srch {
  width: 500px;
  /*here is the block*/
  height: 40px;
  background: transparent;
  font-family: 'Times New Roman';
  font-size: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-color: aqua;
  border: 4px solid rgb(10, 0, 5);
}

.buttn {
  width: 100%;
  text-align: center;
}

.btn {
  width: 80px;
  height: 40px;
  background-color: rgb(144, 197, 59);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: 0.4s;
}

.btn:hover {
  cursor: pointer;
  color: rgb(141, 33, 184);
}

.More {
  width: 80px;
  /*here is the block*/
  height: 50px;
  font-family: sans-serif;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: rgba(0, 0, 0, 0);
  font-weight: 100;
  color: greenyellow;
  border: 3px solid white;
  margin-left: 100px;
}

.donate {
  width: 80px;
  /*here is the block*/
  height: 50px;
  font-family: sans-serif;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: rgba(0, 0, 0, 0);
  font-weight: 100;
  color: greenyellow;
  border: 3px solid white;
  transition: 0.4s;
  margin-bottom: 20px;
  margin-top: -20px;
}

.More:hover {
  color: pink;
  cursor: pointer;
}

.donate:hover {
  color: pink;
  cursor: pointer;
}
    <div class="main">
  <div class="navbar">
    <img src="catlogo.png" alt="" srcset="" style="width: 100px;">



    <ul>
      <li><a href="http://">Home</a></li>

      <li><a href="http://">Breeds</a></li>
      <li><a href="http://">Vet help</a></li>
      <li><a href="http://">Food</a></li>
    </ul>
  </div>
  <div class="center-float-container">
    <div class="content">
      <h1>Some Silly Cats</h1>
      <p>The cute cat theory of digital activism is a theory concerning Internet <br> activism, Internet censorship, and "cute cats" (a term used for any <br> low-value, but popular online activity) developed by Ethan Zuckerman in 2008.</p>
      <input type="search" class="srch" name="" id="" placeholder="  Search Here  "> <button class="btn">Search</button>

    </div>
    <div class="buttn">
      <button type="button" class="More">More Cats</button>
      <button type="button" class="donate">Donation </button>
    </div>
  </div>
</div>

    You should always try to position things through HTML first and then use css if there is some unusual behavior you want to have. Check out this link to learn about CSS : Positioning

    Login or Signup to reply.
  3. 0

    It was a great first attempt! However, you don’t need to use position: absolute; as your elements are already in the order you need them.

    However, I would suggest reading up on document flow to help you understand this better.

    It’s always best to rely on document flow until you need to break it, so understanding it is fundamental.

    Here is how I would approach it using proper document flow and flex.

    /* Basic reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Body styling */

body {
  position: relative;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* Header styling */

.header {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: transparent;
  z-index: 10;
}

.logo img {
  height: 50px;
  /* Adjust size as needed */
}

.nav ul {
  display: flex;
  list-style-type: none;
}

.nav li {
  margin: 0 1rem;
}

.nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}


/* Main content styling */

.main {
  flex: 1;
}

.hero {
  position: relative;
  height: 100vh;
min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
  background-color: #e0e0e0;
  background: url('https://picsum.photos/1080/720') no-repeat center center/cover;
}

.hero::before {
  content: "";
  position: absolute;
  background-color: #1c1c1c;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 1;
}

.hero-content {
  color: #fff;
  max-width: 600px;
  z-index: 5;
}

.hero-buttons {
  margin-top: 1rem;
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border-radius: 5px;
  font-weight: bold;
}

.button:hover {
  background-color: #0056b3;
}


/* Footer styling */

.footer {
  padding: 1rem;
  background-color: #f8f8f8;
  text-align: center;
  font-size: 0.875rem;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Silly Cats, Doing Kitty Things!</title>
</head>

<body>
  <header class="header">
    <div class="logo">
      <img src="images/cat-logo.png" alt="Silly Cats Logo">
    </div>
    <nav class="nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="hero">
      <div class="hero-content">
        <h1>Silly Cats, Doing Kitty Things!</h1>
        <p>Watch our cats do silly things, and learn about their unique personalities.</p>
        <div class="hero-buttons">
          <a href="about.html" class="button">Learn More</a>
          <a href="contact.html" class="button">Contact Us</a>
        </div>
      </div>
    </section>
  </main>
  <footer class="footer">
    <p>&copy; 2020 Silly Cats, Doing Kitty Things!</p>
  </footer>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search