[help] bootstrap css

[newbie1234567]

View attachment 320271

<div class ="container">
<div id ="contents">
<aside>
<h1>News</h1>
<ul>
<li><a href="/news/notice">Notices</a></li>
<li><a href="/news/event">Events</a></li>
<li><a href="/news/item">Items</a></li>
<li><a href="/news/patchnote">Patch Notes</a></li>
</ul>
</aside>
</div>
</div>

//CSS
#contents aside{
margin-top: 10px;
float: left;
width: 200px;
padding: 10px 9px 9px 10px;
border-right: 1px solid #39393d;
border-bottom: 1px solid #39393d;
background-color: #2d2d33;
text-align: left;
box-shadow: 1px 1px 5px #000;
}
#contents aside h1 {
padding: 20px 0 20px 5px;
font-size: 18px;
color: #a6a6a6;
}
#contents aside ul li a{
display: block;
width: 100%;
height: 50px;
background: #505057 url('Images/arrow.png') 177px 20px no-repeat;
line-height: 50px;
font-weight: bold;
font-size: 14px;
color: #f2f2f2;
letter-spacing: 1px;
text-indent: 20px;

}
#contents aside ul li.active a{
background-color: #ffa613;
color: #fff;
text-decoration: none;
}
#contents aside ul li > a:hover{
display: block;
background: url('Images/arrow.png') 177px 20px no-repeat;
color: #fff;
text-decoration: none;
}
#contents aside h1{
padding: 0;
}

Mga sir, paano gawin ganito yang nasa picture sa taas? yan nadin yung codes ko salamat!
View attachment 320272

 

[oretotnakz69]

hi po...paki add na lang ung rule na to sa ilalim ng css mo...

kaya po naka usog ung list mo...ung ul po kasi may default na padding sya..so kelangan mo sya i reset to 0, pag reset mo makikita mo ung bullet style so tinanggal ko na din sya...
tapos kung gusto mo lagyan ng pagitan ung list items mo..gamitan mo lang ng margin..
ung last na css rule pedeng gamitin mo sya.. or dagdagan mo na lang ng color ung background na inaasign mo sa li a:hover mo...

background: #505057 url('Images/arrow.png') 177px 20px no-repeat orange;

#contents ul { 
       padding:0;
       list-style: none; 
}
#contents li {
      margin-bottom: 5px;
}
#contents li a:hover {
      background-color: orange !important;
}

tsaka nga pala ung title ng thread mo..dapat walang word na bootstrap...di ka naman gumagamit ng bootstrap...thanks po

 

[newbie1234567]

hi po...paki add na lang ung rule na to sa ilalim ng css mo...

kaya po naka usog ung list mo...ung ul po kasi may default na padding sya..so kelangan mo sya i reset to 0, pag reset mo makikita mo ung bullet style so tinanggal ko na din sya...
tapos kung gusto mo lagyan ng pagitan ung list items mo..gamitan mo lang ng margin..
ung last na css rule pedeng gamitin mo sya.. or dagdagan mo na lang ng color ung background na inaasign mo sa li a:hover mo...

background: #505057 url('Images/arrow.png') 177px 20px no-repeat orange;

#contents ul { 
       padding:0;
       list-style: none; 
}
#contents li {
      margin-bottom: 5px;
}
#contents li a:hover {
      background-color: orange !important;
}

tsaka nga pala ung title ng thread mo..dapat walang word na bootstrap...di ka naman gumagamit ng bootstrap...thanks po

thank you sir! Kulang lang yun tanong ko sir, paano gawing responsive yan gamit ang bootstrap.

 

[oretotnakz69]

thank you sir! Kulang lang yun tanong ko sir, paano gawing responsive yan gamit ang bootstrap.

Gamit ka po ng grid system..read mo ung documentation ng bootstrap..o kaya flexbox search mo ung sa css-tricks..o kaya mano mano..media query

@media screen only and (max-width: 480px) { // ung max width pde kahit ilan depende sau.

//css rule mo lagay mo dito
}

Pde ka gumamit ng madaming media query..halimbawa
@media screen only and (max-width: 640px)
...
..
@media screen only and (max-width: 480px)
...
..

Diskartehan mo na lang kung ilang lalagay mo at anung css rule..thanks.