#optionc | Explore Tumblr posts and blogs

I dunno if anyone that follows me knows their coding but I’m struggling with my character page. The scroll bar vanished on one of the tabs, it worked to start then vanished and the text clips out onto the page.

<!DOCTYPE html>

<head> <title>{Title}</title>

$("#filter input").change(function() { $("ul#nav li").removeClass("hidden visible"); var showItems = $("ul#nav li"); $("#filter input").filter(":checked").each(function() { var filt = $(this).attr("data-filter"); if(filt != undefined) { showItems = $(showItems).filter("." + filt); } }); $(showItems).addClass("visible"); $("ul#nav li").not(".visible").addClass("hidden"); viewTab($(".visible").first()); }); }); </script>

<style>

body { background-repeat: repeat; font-size: 11px; font-family: 'Calibri', sans-serif; background-color: #f7f7f7; color: #f7f7f7; }

a { color: #9ab2ba; font-size: 12px; font-weight: bold; text-decoration: none; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

a:hover { text-decoration: underline; }

#header { font-family: 'Roboto', sans-serif; width: 800px; text-align: center; color: #1e1e1e; }

@media screen and (min-width: 1367px) { #header { margin: 5% auto; } }

@media screen and (max-width: 1366px) { #header { margin: 3% auto; } }

#header a { padding: 0 5px; text-transform: uppercase; color: #1e1e1e; }

h1 { font-size: 26px; font-weight: bold; text-transform: lowercase; letter-spacing: 3px; margin-bottom: 0; }

#main { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 1000px; height: 540px; }

#container { position: fixed; margin-left: 180px; width: 800px; height: 500px; background-color: #1e1e1e; padding: 10px; }

ul#nav { position: fixed; overflow: auto; margin-top: 80px; padding: 20px 0 0 30px; width: 321px; height: 300px; }

ul#nav li { list-style-type: none; float: left; height: 80px; width: 80px; margin: 0 20px 20px 0; opacity: 0.6; cursor: pointer; }

ul#nav li img { width: 100%; height: 100%; }

ul#nav li.active { opacity: 1; }

ul#nav li.hidden { display: none; }

ul#nav::-webkit-scrollbar-track { background-color: #000000; }

ul#nav::-webkit-scrollbar { width: 5px; }

ul#nav::-webkit-scrollbar-thumb { background-color: #f7f7f7; }

#content { float: right; width: 427px; height: 500px; background-color: #000000; }

.tab { position: fixed; width: 387px; height: 460px; padding: 20px; overflow-y: auto; overflow-x: hidden; text-align: justify; display: none; }

.show { display: block; }

img.main { margin: -20px 0 0 -20px; width: 420px; height: 500px; }

.tab::-webkit-scrollbar-track { background-color: #000000; }

.tab::-webkit-scrollbar { width: 7px; }

.tab::-webkit-scrollbar-thumb { background-color: #f7f7f7; }

h2, h3 { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; text-transform: lowercase; letter-spacing: 3px; text-align: center; margin: 50px 0; }

h3 { margin: 35px 0; font-size: 14px; text-align: left; }

.quote { position: relative; text-transform: uppercase; margin: 50px 0 40px 75px; width: 300px; }

.quote::before { content: '“'; font-family: 'Times New Roman', sans-serif; font-size: 150px; color: #9ab2ba; position: absolute; top: -50px; left: -70px; }

.links { font-family: 'Roboto', sans-serif; text-align: right; text-transform: uppercase; letter-spacing: 1px; }

#filter { position: fixed; width: 130px; height: 480px; padding: 20px; background-color: #1e1e1e; overflow: auto; }

#filter::-webkit-scrollbar-track { background-color: #000000; }

#filter::-webkit-scrollbar { width: 5px; }

#filter::-webkit-scrollbar-thumb { background-color: #f7f7f7; border: 1px solid #1e1e1e; }

h4 { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: bold; text-transform: lowercase; letter-spacing: 3px; margin: 25px 0; }

label { display: inline-block; cursor: pointer; position: relative; padding-left: 20px; margin-right: 8px; font-size: 13px; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

input[type=radio] { display: none; }

label:before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; position: absolute; left: 0; bottom: 4px; background-color: #f7f7f7; }

input[type=radio]:checked + label:before { content: "\274C"; color: #1e1e1e; font-size: 8px; text-align: center; line-height: 10px; }

#credit { font-family: 'Roboto', sans-serif; font-size: 9px; position: absolute; right: 0; bottom: -20px; }

#credit a { color: #000000; }

</style> </head> <body> <div id="header"> <h1>Arcadia Prime's SWTOR Characters.</h1> <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/submit">Submit</a> | <a href="/">Navigation</a> </div> <div id="main"> <div id="filter">  <h4>Faction</h4> <p><input id="category1" type="radio" name="category1" checked> <label for="anycategory1">All</label> <p><input id="option1" type="radio" name="category1" data-filter="one"> <label for="option1">Jedi/Sith</label> <p><input id="option2" type="radio" name="category1" data-filter="two"> <label for="option2">Republic</label> <p><input id="option3" type="radio" name="category1" data-filter="three"> <label for="option3">Sith empire</label> <h4>server</h4> <p><input id="anycategory2" type="radio" name="category2" checked> <label for="anycategory2">All</label> <p><input id="optiona" type="radio" name="category2" data-filter="a"> <label for="optiona">Option A</label> <p><input id="optionb" type="radio" name="category2" data-filter="b"> <label for="optionb">Option B</label> <p><input id="optionc" type="radio" name="category2" data-filter="c"> <label for="optionc">Option C</label> </div> <div id="container"> <ul id="nav"> <!-- This is the icons list in the middle of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1.

Secondly, check the 'class=" "' label. These should correspond with the "data-filter" labels above. When a checkbox is selected, only icons which have a class matching that data-filter label will be shown. For example, if you select the checkbox with the data-filter label "one" above, only icons with the class "one" will be shown. You can have as many classes as you need, and as many icons as you need. --> <li id="tab1" class="one a"><img src="https://64.media.tumblr.com/6113feabb10a2aea75807bd598c7d181/tumblr_opsmcywgTf1tpszmzo1_100.jpg"></li> <li id="tab2" class="two b"><img src="https://placehold.it/80x80"></li> <li id="tab3" class="three two c"><img src="https://placehold.it/80x80"></li> <li id="tab4" class="one c b"><img src="https://placehold.it/80x80"></li> <li id="tab5" class="three b"><img src="https://placehold.it/80x80"></li> <li id="tab6" class="one two c"><img src="https://placehold.it/80x80"></li> <li id="tab7" class="three b a"><img src="https://placehold.it/80x80"></li> <li id="tab8" class="two a"><img src="https://placehold.it/80x80"></li> <li id="tab9" class="three b"><img src="https://placehold.it/80x80"></li> </ul> <div id="content">  <div id="tab1" class="one a"> <img class=one a" src=""> <h2>Jacen Saar.</h2>

<p>Background here. <h3>Personality.</h3> <p>Considered by most to be little more than a brute, Jacn is, in reality, a cunning warrior, able to assess most situations and act accordingly. Outside of that he has a tendency to struggle socially.</p> <h3>likes</h3> <p>swords,starships,the force,dominating others,being in control,armor,credits,a challenge.</p> <h3>dislikes</h3> <p>"sappy romantic crap", being talked down to.</p> <h3>general information</h3> <p>Class: Juggernaut Affiliation:Sith Empire, Himself Height: Unknown Alignment:Neutral Evil Sexuality: Undisclosed - Historic documentation regarding male prostitutes suggests Homosexual. Relationship Status: Single</p>

</div> <div id="tab2" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+2"> <h2>tab 2.</h2> </div> <div id="tab3" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+3"> <h2>tab 3.</h2> </div> <div id="tab4" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+4"> <h2>tab 4.</h2> </div> <div id="tab5" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+5"> <h2>tab 5.</h2> </div> <div id="tab6" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+6"> <h2>tab 6.</h2> </div> <div id="tab7" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+7"> <h2>tab 7.</h2> </div> <div id="tab8" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+8"> <h2>tab 8.</h2> </div> <div id="tab9" class="tab"> <img class="main" src="https://placehold.it/420x500?text=Tab+9"> <h2>tab 9.</h2> </div> </div> <div id="credit"> <a href="http://macfustythemes.tumblr.com/">macfustythemes</a> </div> </div> </div> </body> </html>