What's new

CSS/html po paano po kaya to hehehe

E

elbawonknu

Forum Guru
Elite
Joined
Dec 9, 2018
Posts
3,730
Solutions
1
Reaction
1,319
Points
1,519
Age
23
Screenshot 2024-01-04 210630.png


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;
      }

      .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;
        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=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.net/" target="_blank"><button class="button4"></button></a></div>
  </div>
</body>
</html>
 

Attachments

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="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.net/" 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.net/" 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.png
 

Attachments

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.net/" target="_blank"><button class="button4"></button></a>
</div>
</div>
</body>
</html>
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 4
    Replies
  • 232
    Views
  • 3
    Participants
Last reply from:
Nel003

New Topics

Popular On This Forum

Online statistics

Members online
1,169
Guests online
4,912
Total visitors
6,081
Back
Top