What's new

Ask ko lang po sa Html and CSS

L

loktoy

Eternal Poster
Joined
Oct 20, 2014
Posts
1,166
Solutions
2
Reaction
103
Points
496
Age
30
ask ko lang po... kapag pinapalit ko ng 100% lumiliit nman po yun isa..
makikita po sa picture yun output at code pero lagay ko pa rin yun code po..

section .events {
position: relative;
width: 50%;
height: 100%;
background: rgb(88, 88, 88);
float: right;
box-sizing: border-box;
}
section .events ul {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
box-sizing: border-box;
}
section .events ul li {
list-style: none;
background: #fff;
box-sizing: border-box;
height: 100%;
}
section .events ul li .time {
position: relative;
padding: 20px;
background: rgb(96, 6, 212);
box-sizing: border-box;
width:25% ;
height: 100%;
float: left;
text-align: center;
transition: .5s;
}
section .events ul li:hover .time{
background: red;
}
section .events ul li .time h2{
position: absolute;
margin: 0;
padding: 0;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
section .events ul li .details {
padding: 20px;
background: #fff;
box-sizing: border-box;
width: 70%;
height: 100%;
float: left;
}

1.JPG 2.JPG
 

Attachments

Kapag ginamit mo ang width: 100%; sa isang elemento, ito ay kumukuha ng 100% ng laki ng parent element. Kaya kapag ginamit mo ito sa li element, ito ay kumuha ng 100% ng laki ng parent ul element, kaya naman ito ay nagiging masyadong malaki at hindi ito fit sa screen.

Ang solusyon dito ay ilagay ang box-sizing: border-box; sa li element. Ito ay magbibigay ng offset sa padding at border na kasama sa laki ng elemento.

Narito ang updated na CSS code:

Code: 
section .events ul li {
    list-style: none;
    background: #fff;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

Dapat rin na ilagay ang box-sizing: border-box; sa time element para hindi mag-overflow ang elemento kapag ginamit ang padding property.

Code: 
section .events ul li .time {
   position: relative;
   padding: 20px;
   background: rgb(96, 6, 212);
   box-sizing: border-box;
   width: 25%;
   height: 100%;
   float: left;
   text-align: center;
   transition: .5s;
}

Sana nakatulong ito sa iyo!
 
🤖 said:
Kapag ginamit mo ang width: 100%; sa isang elemento, ito ay kumukuha ng 100% ng laki ng parent element. Kaya kapag ginamit mo ito sa li element, ito ay kumuha ng 100% ng laki ng parent ul element, kaya naman ito ay nagiging masyadong malaki at hindi ito fit sa screen.

Ang solusyon dito ay ilagay ang box-sizing: border-box; sa li element. Ito ay magbibigay ng offset sa padding at border na kasama sa laki ng elemento.

Narito ang updated na CSS code:

Code: 
section .events ul li {
    list-style: none;
    background: #fff;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

Dapat rin na ilagay ang box-sizing: border-box; sa time element para hindi mag-overflow ang elemento kapag ginamit ang padding property.

Code: 
section .events ul li .time {
   position: relative;
   padding: 20px;
   background: rgb(96, 6, 212);
   box-sizing: border-box;
   width: 25%;
   height: 100%;
   float: left;
   text-align: center;
   transition: .5s;
}

Sana nakatulong ito sa iyo!
Click to expand...
yan po yun picture

1.JPG 2.JPG
 

Attachments

🤖 said:
Paumanhin, wala akong nakikitang picture sa iyong mensahe. Maaari mo bang i-attach ulit ang iyong larawan o sabihin sa akin ang iyong problema nang mas detalyado para mas maunawaan ko ang kailangan mong matugunan? Tutulungan kita sa abot ng aking makakaya. Salamat!
Click to expand...
nasa post ko na po yun picture po at makikita din po sa picture yun binago ko po
 
loktoy said:
nasa post ko na po yun picture po at makikita din po sa picture yun binago ko po
Click to expand...
Paumanhin sa maling pagkakaintindi ko. Naunawaan ko na ngayon ang iyong mensahe.

Sa iyong problema, kapag ginamit mo ang width: 100%; sa li element, ito ay kumukuha ng 100% ng laki ng parent ul element. Kaya naman kapag ginawa mo ito sa dalawang magkakatabing li element, ang kabuuan ng mga elemento ay magiging mas malaki kaysa sa laki ng parent ul element, kaya mag-o-overflow ito.

Ang solusyon dito ay ilagay ang box-sizing: border-box; sa li element. Ito ay magbibigay ng offset sa padding at border na kasama sa laki ng elemento.

Narito ang updated na CSS code:

Code: 
section .events ul li {
    list-style: none;
    background: #fff;
    box-sizing: border-box;
    height: 100%;
    width: 50%;
    float: left;
}

Dapat rin na ilagay ang box-sizing: border-box; sa time at details element para hindi mag-overflow ang mga elemento kapag ginamit ang padding property.

Code: 
section .events ul li .time {
   position: relative;
   padding: 20px;
   background: rgb(96, 6, 212);
   box-sizing: border-box;
   width: 25%;
   height: 100%;
   float: left;
   text-align: center;
   transition: .5s;
}

section .events ul li .details {
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
    width: 75%;
    height: 100%;
    float: left;
}

Sana nakatulong ito sa iyo!
 
🤖 said:
Paumanhin sa maling pagkakaintindi ko. Naunawaan ko na ngayon ang iyong mensahe.

Sa iyong problema, kapag ginamit mo ang width: 100%; sa li element, ito ay kumukuha ng 100% ng laki ng parent ul element. Kaya naman kapag ginawa mo ito sa dalawang magkakatabing li element, ang kabuuan ng mga elemento ay magiging mas malaki kaysa sa laki ng parent ul element, kaya mag-o-overflow ito.

Ang solusyon dito ay ilagay ang box-sizing: border-box; sa li element. Ito ay magbibigay ng offset sa padding at border na kasama sa laki ng elemento.

Narito ang updated na CSS code:

Code: 
section .events ul li {
    list-style: none;
    background: #fff;
    box-sizing: border-box;
    height: 100%;
    width: 50%;
    float: left;
}

Dapat rin na ilagay ang box-sizing: border-box; sa time at details element para hindi mag-overflow ang mga elemento kapag ginamit ang padding property.

Code: 
section .events ul li .time {
   position: relative;
   padding: 20px;
   background: rgb(96, 6, 212);
   box-sizing: border-box;
   width: 25%;
   height: 100%;
   float: left;
   text-align: center;
   transition: .5s;
}

section .events ul li .details {
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
    width: 75%;
    height: 100%;
    float: left;
}

Sana nakatulong ito sa iyo!
Click to expand...
ginawa ko na po yun code mo po ganun pa rin po...

gusto ko kasi mangyari di po lalampas sa background white yun paragraph kapag mahaba na po yun paragraph scretchable po background ng dalawa violet at white

1.JPG 2.JPG
 

Attachments

loktoy said:
ginawa ko na po yun code mo po ganun pa rin po...

gusto ko kasi mangyari di po lalampas sa background white yun paragraph kapag mahaba na po yun paragraph scretchable po background ng dalawa violet at white

View attachment 2634011 View attachment 2634012
Click to expand...
Kung nais mong hindi lumampas sa background ng puti ang iyong mga talata, maaari kang magdagdag ng overflow property sa details elemento at magdagdag ng scrollbar kapag kinakailangan. Pwedeng gamitin ang overflow-y: auto; upang magdagdag ng scrollbar kapag lumalampas na ang talata sa kanyang nakalaang laki.

Narito ang updated na CSS code:

Code: 
section .events ul li .details {
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
    width: 75%;
    height: 100%;
    float: left;
    overflow-y: auto;
}

Sana nakatulong ito sa iyo!
 
🤖 said:
Kung nais mong hindi lumampas sa background ng puti ang iyong mga talata, maaari kang magdagdag ng overflow property sa details elemento at magdagdag ng scrollbar kapag kinakailangan. Pwedeng gamitin ang overflow-y: auto; upang magdagdag ng scrollbar kapag lumalampas na ang talata sa kanyang nakalaang laki.

Narito ang updated na CSS code:

Code: 
section .events ul li .details {
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
    width: 75%;
    height: 100%;
    float: left;
    overflow-y: auto;
}

Sana nakatulong ito sa iyo!
Click to expand...
ask ko na lang po maliban po sa scrollbar may ibang way pa po ba?
pwede ba sya hindi gamitan ng scrollbar kagaya ng Read more Less More na Automatic na inaadjust nya background hanggan kaya..
 
loktoy said:
ask ko na lang po maliban po sa scrollbar may ibang way pa po ba?
pwede ba sya hindi gamitan ng scrollbar kagaya ng Read more Less More na Automatic na inaadjust nya background hanggan kaya..
Click to expand...
Kung nais mong ma-automatically mag-adjust ang background ng paragrafo kapag naglalaman ito ng mas maraming teksto, pwede kang gumamit ng JavaScript na magbabago ng height ng elemento base sa laki ng kanyang laman.

Una, kailangan mo munang magdagdag ng ID sa mga details elemento para mas madaling ma-target ng JavaScript. Dapat din na tanggalin ang height: 100%; sa details elemento upang ma-override ito ng JavaScript.

Narito ang updated na HTML code:

Code: 
<section class="events">
  <ul>
    <li>
      <div class="time">
        <h2>10:00 AM</h2>
      </div>
      <div class="details" id="event-1">
        <h3>Event Title 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
      </div>
    </li>
    <li>
      <div class="time">
        <h2>2:00 PM</h2>
      </div>
      <div class="details" id="event-2">
        <h3>Event Title 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
      </div>
    </li>
  </ul>
</section>

Pagkatapos nito, magdagdag ka ng JavaScript code na magbabago ng height ng details elemento base sa laki ng kanyang laman.

Code: 
<script>
  var details = document.getElementsByClassName('details');

  for (var i = 0; i < details.length; i++) {
    var content = details[i].querySelector('p');
    var height = content.offsetHeight;
    details[i].style.height = height + 'px';
  }
</script>

Ito ay mag-browse sa mga elemento ng details, makakakita ng kanyang pinakamalaking elemento na p, kukunin ang laki nito gamit ang offsetHeight property, at saka mag-uupdate ng height ng details elemento gamit ang nakuha nitong laki.

Sana nakatulong ito sa iyo!
 
🤖 said:
Kung nais mong ma-automatically mag-adjust ang background ng paragrafo kapag naglalaman ito ng mas maraming teksto, pwede kang gumamit ng JavaScript na magbabago ng height ng elemento base sa laki ng kanyang laman.

Una, kailangan mo munang magdagdag ng ID sa mga details elemento para mas madaling ma-target ng JavaScript. Dapat din na tanggalin ang height: 100%; sa details elemento upang ma-override ito ng JavaScript.

Narito ang updated na HTML code:

Code: 
<section class="events">
  <ul>
    <li>
      <div class="time">
        <h2>10:00 AM</h2>
      </div>
      <div class="details" id="event-1">
        <h3>Event Title 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
      </div>
    </li>
    <li>
      <div class="time">
        <h2>2:00 PM</h2>
      </div>
      <div class="details" id="event-2">
        <h3>Event Title 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
      </div>
    </li>
  </ul>
</section>

Pagkatapos nito, magdagdag ka ng JavaScript code na magbabago ng height ng details elemento base sa laki ng kanyang laman.

Code: 
<script>
  var details = document.getElementsByClassName('details');

  for (var i = 0; i < details.length; i++) {
    var content = details[i].querySelector('p');
    var height = content.offsetHeight;
    details[i].style.height = height + 'px';
  }
</script>

Ito ay mag-browse sa mga elemento ng details, makakakita ng kanyang pinakamalaking elemento na p, kukunin ang laki nito gamit ang offsetHeight property, at saka mag-uupdate ng height ng details elemento gamit ang nakuha nitong laki.

Sana nakatulong ito sa iyo!
Click to expand...
ok na po kaso yun kulay Violet naman hindi sumunod sa agos makikita sa picture po
html code :
<div class="events">
<ul>
<li class=" time-container" id="time-container">
<div class="time">
<h2>May <br>1<span><br>2023</span></h2>
</div>
<div class="details" id="details1">
<h3>Title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere, voluptates reprehenderit officia quaerat numquam expedita temporibus, consequatur dolorem dolorum, necessitatibus et id doloremque incidunt explicabo maiores tempora veritatis quae eos?</p>
</div>
</li>
<li>
</ul>
</div>

<script>
var details = document.getElementsByClassName('details');

for (var i = 0; i < details.length; i++); {
var content = details.querySelector('p');
var height = content.offsetHeight;
details.style.height = height + 'px';
}
</script>

css code :

section .events {
position: relative;
width: 60%;
height: 100%;
background: rgb(88, 88, 88);
float: right;
box-sizing: border-box;
}
section .events ul {
position: relative;
top: 2%;
transform: translateY(-50%);
margin: 0;
box-sizing: border-box;
}
section .events ul li {
list-style: none;
background: #fff;
box-sizing: border-box;
height: 180px;
float: left;
}
section .events ul li .time {
position: relative;
padding: 20px;
background: rgb(96, 6, 212);
box-sizing: border-box;
width:25% ;
height: 100%;
float: left;
text-align: center;
transition: .5s;
}
section .events ul li:hover .time{
background: red;
}
section .events ul li .time h2{
position: absolute;
margin: 0;
padding: 0;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
section .events ul li .details {
padding: 20px;
background: #fff;
box-sizing: border-box;
width: 75%;
float: left;
}

1.JPG
 

Attachments

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

  • 10
    Replies
  • 329
    Views
  • 2
    Participants
Last reply from:
loktoy

New Topics

Popular On This Forum

Online statistics

Members online
1,100
Guests online
5,535
Total visitors
6,635
Back
Top