What's new
By:

CSS/html po paano po kaya to hehehe

E

elbawonknu

Elite
Screenshot 2024-01-04 210630.webp

ganyan sana yung pag nag resize ka ng windows mo mag rere adjust ang mga button po hehehe...hirap pala mag self study ng css hahahah

bali ito code ko

Code: 
<!DOCTYPE html>
<html lang="en">
  <header>
    <style>
      .opening{
        background-color: bisque;
        padding: 20px;
        margin-left: none;
        margin-top: 0px;
        text-align: center;
        
      }
      
      body{
        margin: 0px;
        background-color: burlywood;
        
      }

      .Kali{
        list-style: none;
        padding: 5px;
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }

      .Google{
        list-style: none;
        padding: 5px; 
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }

      .youtube{
        list-style: none;
        padding: 5px; 
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }
      .phcorner{
        list-style: none;
        padding: 5px; 
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }
      .button-container{
        display: flex;
        max-width: 300px;
        gap: 1px;
      }
    
      button{
        background-color: whitesmoke;
        text-align: left;
        border-radius: 15px;
        

      }
      .button1{
        color: rgb(31, 202, 65);
        background-image: url(Kali_Linux.jpg);
        font-size: 20px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: bold;
        width: 175px;
        height:100px;
        
      }
      .button2{
        color: black;
        background-image: url(google.png);
        font-size: 30px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        text-align: center;
        background-position: center;
        background-size: cover;
        width: 175px;
        height:100px
      }
      .button3{
        background-image: url(673518.png);
        background-size: cover;
        background-position: center;
        width: 175px;
        height:100px
      }
      .button4{
        background-image: url(XenForo.webp);
        background-size: 85%;
        background-position: center;
        max-width: 100%;
        width: 175px;
        height:100px;   
      }

    </style>
  </header>
<head>
 <h1 class="opening">Redirection Example</h1>
 
</head>
<body>
  <div class="button-container">
     <div class="Kali"><a href=Kali_Linux.jpg target="_blank"><button class="button1">Kali Linux</button></a></li></div>
     <div class="Google"><a href="https://www.google.com/" target="_blank"><button class="button2">Google</button></a></li></div>
     <div class=youtube><a href="https://www.youtube.com/" target="_blank"><button class="button3"></button></a></div>
     <div class="phcorner"><a href="https://phcorner.org/" target="_blank"><button class="button4"></button></a></div>
  </div>
</body>
</html>
 
To make the buttons adjust when the window is resized, you can use CSS media queries. Media queries allow you to apply different styles based on the size of the viewport.

First, you need to define the desired styles for different viewports. For example, you can set the buttons to be displayed vertically on small screens and horizontally on larger screens. Here's an updated version of your code with media queries:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .opening {
      background-color: bisque;
      padding: 20px;
      margin-left: none;
      margin-top: 0px;
      text-align: center;
    }
    
    body {
      margin: 0px;
      background-color: burlywood;
    }

    .button-container {
      display: flex;
      justify-content: center;
      gap: 1px;
    }

    .button-container > div {
      flex-basis: 50%;
      max-width: 300px;
      padding: 5px;
    }

    .button {
      background-color: whitesmoke;
      text-align: left;
      border-radius: 15px;
    }

    .button1 {
      color: rgb(31, 202, 65);
      background-image: url(Kali_Linux.jpg);
      font-size: 20px;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-weight: bold;
      width: 175px;
      height: 100px;
    }

    .button2 {
      color: black;
      background-image: url(google.png);
      font-size: 30px;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      text-align: center;
      background-position: center;
      background-size: cover;
      width: 175px;
      height: 100px;
    }

    .button3 {
      background-image: url(673518.png);
      background-size: cover;
      background-position: center;
      width: 175px;
      height: 100px;
    }

    .button4 {
      background-image: url(XenForo.webp);
      background-size: 85%;
      background-position: center;
      max-width: 100%;
      width: 175px;
      height: 100px;
    }

    /* Media queries */
    @media (max-width: 768px) {
      .button-container {
        flex-direction: column;
      }

      .button-container > div {
        flex-basis: unset;
        max-width: unset;
        margin-bottom: 10px;
      }
    }
  </style>
</head>
<body>
  <h1 class="opening">Redirection Example</h1>

  <div class="button-container">
    <div class="Kali">
      <a href="Kali_Linux.jpg" target="_blank">
        <button class="button1">Kali Linux</button>
      </a>
    </div>
    <div class="Google">
      <a href="https://www.google.com/" target="_blank">
        <button class="button2">Google</button>
      </a>
    </div>
    <div class="youtube">
      <a href="https://www.youtube.com/" target="_blank">
        <button class="button3"></button>
      </a>
    </div>
    <div class="phcorner">
      <a href="https://phcorner.org/" target="_blank">
        <button class="button4"></button>
      </a>
    </div>
  </div>
</body>
</html>

In the above code, I added a media query that targets screens with a maximum width of 768px (typical tablet or mobile phone size). Inside the media query, the .button-container is set to display as a column and the styles for the individual buttons are adjusted accordingly.

Now, when the window is resized to a smaller size, the buttons will be displayed vertically, and on larger screens, they will be displayed horizontally.

I hope this helps! Let me know if you have any further questions.
 
CSS: 
.button-container{
  display: flex;
  flex-wrap: wrap; /* enable wrapping */
  max-width: 500px; /* 300px */
  gap: 1px;
}
 
Nel003 said:
CSS: 
.button-container{
  display: flex;
  flex-wrap: wrap; /* enable wrapping */
  max-width: 500px; /* 300px */
  gap: 1px;
}
Click to expand...
Code: 
<!DOCTYPE html>
<html lang="en">
  <header>
    <style>
      .opening{
        background-color: bisque;
        padding: 20px;
        margin-left: none;
        margin-top: 0px;
        text-align: center;
        
      }
      
      body{
        margin: 0px;
        background-color: burlywood;
        
      }

      .Kali{
        list-style: none;
        padding: 5px;
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }

      .Google{
        list-style: none;
        padding: 5px;
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }

      .YøùTùbé{
        list-style: none;
        padding: 5px;
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }
      .phcorner{
        list-style: none;
        padding: 5px;
        float: left;
        margin-left: 25px;
        margin-top: -15px;
        display: flex;
        background-color: aquamarine;
        border-radius: 10px;
      }
    
      button{
        background-color: whitesmoke;
        text-align: left;
        border-radius: 15px;

      }
      .button1{
        color: rgb(31, 202, 65);
        background-image: url(Kali_Linux.jpg);
        font-size: 20px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: bold;
        width: 175px;
        height:100px;
        
      }
      .button2{
        color: black;
        background-image: url(google.png);
        font-size: 30px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        text-align: center;
        background-position: center;
        background-size: cover;
        width: 175px;
        height:100px
      }
      .button3{
        background-image: url(673518.png);
        background-size: cover;
        background-position: center;
        width: 175px;
        height:100px
      }
      .button4{
        background-image: url(XenForo.webp);
        background-size: 85%;
        background-position: center;
        max-width: 100%;
        width: 175px;
        height:100px;   
      }

      

    </style>
  </header>
<head>
 <h1 class="opening">Redirection Example</h1>
 
</head>
<body>
  <div class="button-container">
     <div class="Kali"><a href=Kali_Linux.jpg target="_blank"><button class="button1">Kali Linux</button></a></li></div>
     <div class="Google"><a href="https://www.google.com/" target="_blank"><button class="button2">Google</button></a></li></div>
     <div class=YøùTùbé><a href="https://www.YøùTùbé.com/" target="_blank"><button class="button3"></button></a></div>
     <div class="phcorner"><a href="https://phcorner.org/" target="_blank"><button class="button4"></button></a></div>
  </div>
</body>
</html>

boss may mga tinangal akong code tapos bigla gumana hahah pwoblema ko lang namna yung space sa pagitan ng button di ko mahanap hahaha

Screenshot 2024-01-04 215544.webp
 
HTML: 
<!DOCTYPE html>
<html lang="en">
<header>
  <style>
    .opening {
      background-color: bisque;
      padding: 20px;
      margin-left: none;
      margin-top: 0px;
      text-align: center;
    }

    body {
      margin: 0px;
      background-color: burlywood;
    }

    .Kali {
      list-style: none;
      padding: 5px;
      float: left;
      margin-left: 25px;
      margin-top: -15px;
      display: flex;
      background-color: aquamarine;
      border-radius: 10px;
    }

    .Google {
      list-style: none;
      padding: 5px;
      float: left;
      margin-left: 25px;
      margin-top: -15px;
      display: flex;
      background-color: aquamarine;
      border-radius: 10px;
    }

    .YøùTùbé {
      list-style: none;
      padding: 5px;
      float: left;
      margin-left: 25px;
      margin-top: -15px;
      display: flex;
      background-color: aquamarine;
      border-radius: 10px;
    }

    .phcorner {
      list-style: none;
      padding: 5px;
      float: left;
      margin-left: 25px;
      margin-top: -15px;
      display: flex;
      background-color: aquamarine;
      border-radius: 10px;
    }

    .button-container {
      display: flex;
      flex-wrap: wrap;
      max-width: 100%; /*300px*/
      gap: 30px; /*1px*/
    }

    button {
      background-color: whitesmoke;
      text-align: left;
      border-radius: 15px;
    }

    .button1 {
      color: rgb(31, 202, 65);
      background-image: url(Kali_Linux.jpg);
      font-size: 20px;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-weight: bold;
      width: 175px;
      height: 100px;
    }

    .button2 {
      color: black;
      background-image: url(google.png);
      font-size: 30px;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      text-align: center;
      background-position: center;
      background-size: cover;
      width: 175px;
      height: 100px
    }

    .button3 {
      background-image: url(673518.png);
      background-size: cover;
      background-position: center;
      width: 175px;
      height: 100px
    }

    .button4 {
      background-image: url(XenForo.webp);
      background-size: 85%;
      background-position: center;
      max-width: 100%;
      width: 175px;
      height: 100px;
    }
  </style>
</header>
<head>
  <h1 class="opening">Redirection Example</h1>
</head>
<body>
  <div class="button-container">
    <div class="Kali">
      <a href=Kali_Linux.jpg target="_blank"><button class="button1">Kali Linux</button></a></li>
  </div>
  <div class="Google">
    <a href="https://www.google.com/" target="_blank"><button class="button2">Google</button></a></li>
</div>
<div class=YøùTùbé>
  <a href="https://www.YøùTùbé.com/" target="_blank"><button class="button3"></button></a>
</div>
<div class="phcorner">
  <a href="https://phcorner.org/" target="_blank"><button class="button4"></button></a>
</div>
</div>
</body>
</html>
 

Similar threads

About this Thread

  • 4
    Replies
  • 546
    Views
  • 2
    Participants
Last reply from:
Nel003

New Topics

Trending Topics

Online now

Members online
501
Guests online
2,370
Total visitors
2,871

Forum statistics

Threads
2,291,614
Posts
29,071,837
Members
1,210,976
Latest member
shinnnnn65
Back
Top