Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
Hello, I am coding a signature and I want to make the tabs perfectly square, how would accomplish this?
Code - No Stealing!
[sc=starcode]
[sc=textbox][sc=tabbed_interface horizontal]
[ul]
[li]Title 1[/li]
[li]Title 2[/li]
[li]Title 3[/li]
[li]Title 4[/li]
[li]Title 5[/li]
[/ul][
][sc=tab-active]contents 1[/sc][
][sc=tab]contents 2[/sc][
][sc=tab]contents 3[/sc][/sc]
[/sc]
[/sc]
[style]
.starcode {
background-image: url(https://i.postimg.cc/VL0bGs7M/north-star-g4ce1098a6-1280.jpg);
width: 100%;
.tabbed_interface {
border-collapse: separate;
opacity: 70%;
border: none;
box-shadow: none;
& > ul
{
background: none;
opacity: 70%;
border: none;
margin-top: -30px;
& > li
{
background: black;
border: 0px;
margin: 5px 3px 50px;
text-align: center;
vertical-align: baseline;
color: #B6C2FB;
padding: 0px 0px 5px 0px;
&.tab-active
{
background: black;
}
}
& > li:hover
{
cursor: pointer;
color: #FFFFFF;
}
}
> .tab, > .tab-active
{
background: black;
color: #B6C2FB;
opacity: 70%;
padding: 5px 15px 10px 10px;
box-shadow: none;
}
}
}
.textbox {
}
[/style]
- ★
- ★
- ★
- ★
- ★
Star | She/Her | Psychopath
BORED TO DEATH!!
Collecting
x 500
x 500
Sells a variety of things!