Hitskin.com
Website: www.vielamort.net
Problem: the two tab menus wont work at the same time.
Hey!
So I've encounted a problem, which i'm not sure how to fix.
I created a tab menu, for my sub forums in a category, so it wouldn't take to much space..
Unfortunately they wont synchronize... when i click on one of the tabs of the other, the content disappears on the other tab box.
I tried to edit it with some nem id's but didn't work.. so now i'm at loss for what to do.
Edit:
Code for the big Tab box
The Tab for the Fora :
My other question is: where can i remove the links for the sub forums? I know you can do it, but i can't figure out where...
Problem: the two tab menus wont work at the same time.
Hey!
So I've encounted a problem, which i'm not sure how to fix.
I created a tab menu, for my sub forums in a category, so it wouldn't take to much space..
Unfortunately they wont synchronize... when i click on one of the tabs of the other, the content disappears on the other tab box.
I tried to edit it with some nem id's but didn't work.. so now i'm at loss for what to do.
Edit:
Code for the big Tab box
- Code:
<style>
div.tab {
overflow: hidden;
border: 1px solid #9e9e9e;
background-color: #fff;
text-align: center;
width: 911px;
}
div.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 10px 25px;
transition: 0.3s;
font-size: 11px;
text-transform: uppercase;
color: #000;
letter-spacing: 5px;
}
div.tab button:hover {
background-color: #fff;
color: #9e9e9e;
text-decoration-line: underline;
text-decoration-style: dotted;
}
div.tab button.active {
background-color: #fff;
color: #439274;
}
#box {
background-color: #fff;
height: 280px;
border: 1px solid #9e9e9e;
padding: 10px;
width: 890px;
font-family: times new roman;
}
h5 {
text-shadow: 2px 2px 3px #000;
color: #fff;
font-size: 12px;
letter-spacing: 7px;
text-align: center;
font-family: times new roman !important;
font-weight: 600;
margin-bottom: -15px;
}
#welcome {
margin-top: -100px;
margin-right:-10px;
}
.avat {
border: 0px solid #9e9e9e;
width: 160px;
height: 220px;
margin: auto;
margin-top: -45px;
margin-right: 2px;
}
.quick {
border: 1px solid #9e9e9e;
background: #333;
display: table-cell;
vertical-align:middle;
text-align: center;
color: #fff;
font-family: tahoma;
letter-spacing: 2px;
text-transform: uppercase;
width: 68px;
height: 24px;
font-size: 8px;
}
.quick a {
color: #fff !important;
text-decoration: none;
font-weight:bold;
}
.quick a:visited {
color: #fff !important;
text-decoration: none;
font-weight:bold;
}
.qucick a:hover {
color: #fff !important;
text-decoration: none;
font-weight:bold;
}
.flex-image1 {
height: 98px;
width: 105px;
border: 1px solid #9e9e9e;
margin: auto;
margin-right: 5px;
background-image: url('http://i66.tinypic.com/15nvuae.jpg');
background-position: center;
}
.flex-image1:hover {
background: #293F26;
width:105px;
height:98px;
}
.flex-image2 {
height: 98px;
width: 105px;
border: 1px solid #9e9e9e;
margin: auto;
margin-top: 5px;
margin-right: 5px;
background-image: url('http://i.imgur.com/8jLfqnS.jpg');
background-position: 10%;
}
.flex-image2:hover {
background: #456740;
width:105px;
height:98px;
}
.flex-image3 {
height: 98px;
width: 105px;
border: 1px solid #9e9e9e;
margin: auto;
margin-top: 5.5px;
margin-right: 5px;
background-image: url('http://i.imgur.com/ltIxR5h.jpg');
background-position: 15% 40%;
}
.flex-image3:hover {
background: #557D4F;
width:105px;
height:98px;
}
.flex-image8 {
height: 98px;
width: 105px;
border: 1px solid #9e9e9e;
margin: auto;
margin-right: 5px;
background-image: url('http://i.imgur.com/GROz29l.jpg');
background-position: 15% 40%;
}
.flex-image8:hover {
background: #355031;
height: 98px;
width: 105px;
}
.flex-image4 {
height: 220px;
width: 203px;
border: 1px solid #9e9e9e;
margin: auto;
margin-top: -5px;
margin-right: 15px;
background-image: url('http://wallup.net/wp-content/uploads/2016/03/03/318004-Emilia_Clarke-women-simple_background-long_hair-platinum_blonde-wavy_hair-face-actress-looking_at_viewer-open_mouth-blue_eyes.jpg');
background-size: 400px;
}
.flex-image4:hover {
background: #299C8D;
width:203px;
height:220px;
}
.flex-image5 {
height:220px;
width: 203px;
border: 1px solid #9e9e9e;
margin:auto;
margin-top: -5px;
background-image: url('http://wallup.net/wp-content/uploads/2016/03/03/318004-Emilia_Clarke-women-simple_background-long_hair-platinum_blonde-wavy_hair-face-actress-looking_at_viewer-open_mouth-blue_eyes.jpg');
margin-right: 15px;
background-size: 400px;
}
.flex-image5:hover {
background: #299C8D;
width:203px;
height:220px;
}
.flex-image6 {
height:220px;
width: 203px;
border: 1px solid #9e9e9e;
margin:auto;
margin-top: -5px;
background-image: url('https://i.pinimg.com/736x/be/ca/23/beca23eca1d2d875bc406067643505af--character-concept-concept-art.jpg');
background-position: -15px -10px;
margin-right: 15px;
background-size: 400px;
}
.flex-image6:hover {
background: #299C8D;
width:203px;
height:220px;
}
.flex-image7 {
height:220px;
width: 203px;
border: 1px solid #9e9e9e;
margin:auto;
margin-top: -5px;
background-image: url('');
}
.flex-image7:hover {
background: #299C8D;
width:203px;
height:220px;
}
a.flex-url {
text-decoration: none;
}
a.flex-url:hover {
text-decoration: none;
}
p {
font-weight: 100;
}
</style><script>
function openSite(evt, siteName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(siteName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
$(function(){
$(".avat").html(_userdata.avatar);
});
</script>
<div class="tab">
<button onclick="openSite(event,'start')" class="tablinks">
Start
</button>
|
<button onclick="openSite(event, 'chat')" class="tablinks">
Chat
</button>
|
<button onclick="openSite(event, 'month')" class="tablinks">
User of the month
</button>
</div><br />
<div id="box">
<div class="tabcontent" id="start">
<table>
<tbody>
<tr>
<td style="padding-right:15px; ">
<div class="avat">
</div>
<div id="welcome">
<h5>
VELKOMMEN<br />{USERNAME}
</h5>
</div>
</td>
<td style="border-left: 1px solid #9e9e9e; padding-right:10px;">
</td>
<td style="padding-right:15px;">
<div style="background: url('http://thomaskinkadehq.com/wp-content/uploads/2013/11/partwi.jpg'); border: 1px solid #9e9e9e; width:200px;height:35px;margin-bottom:2px;">
<h5 style="margin-top:5px;">
PLOT
</h5>
</div>
<p style="width:200px; font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5; letter-spacing:0.3px;">
Vi befinder os i en fiktiv by, kaldet Di Morga, som er beliggen i Frankrig. Dette sted, vrimler med forskellige væsner, hvis eksistens er ukendt for den omgivende verden, der ikke er klar over de mange racer der befinder sig i verdenen udover nogle typiske mere kendte: Vampyrer og Varulve. I denne by lever de forskellige væsner side om side med hinanden. Dette resulterer i forskellige slag imellem disse, som ofte leder til et større tumult i byen. <br /><br /> Tidsperioden er i vor nutid, placeret i Frankrig.
</p>
</td>
<td style="border-left: 1px solid #9e9e9e; padding-right:10px;">
</td>
<td style="font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5;letter-spacing:0.3px; width:220px; vertical-align:top;">
<p style="margin-bottom:px;">
</p>
<center>
<strong>QUCIK LINKS</strong>
<p>
</p>
</center><br />
<table>
<tbody>
<tr>
<td class="quick">
<a href="http://www.vielamort.net/f100-regler">regler</a>
</td>
<td class="quick">
<a href="http://www.vielamort.net/f3-racer">racer</a>
</td>
<td class="quick">
<a href="http://www.vielamort.net/f102-guides">hjælp</a>
</td>
</tr>
<tr>
<td class="quick">
<a href="http://www.vielamort.net/f56-alt-om-di-morga">Verden</a>
</td>
<td class="quick">
<a href="http://www.vielamort.net/t14943-face-claim#270927">CLAIM</a>
</td>
<td class="quick">
<a href="http://www.vielamort.net/f98-emner-og-plots">Plotter</a>
</td>
</tr>
</tbody>
</table><br />
<div style="background: url(http://img.diytrade.com/cdimg/547776/3634460/0/1179233282/night_street_view_in_Paris_art_oil_painting.jpg); border: 1px solid #9e9e9e; width:200px;height:35px; background-position:100% 25%; margin-bottom:2px;">
<h5 style="margin-top:5px;">
NEWS
</h5>
</div>
<div style="width:195px; height: 110px; border:0px solid #9e9e9e; padding:3px ; Serif;overflow:auto; line-height:1.43; text-align:left;">
<p>
Konkurrence: <strong><a href="http://www.vielamort.net/t15000-mandens-august-afstemning#271609">AUGST MÅNEDENS</a></strong> er igang.<br /><br />Missioner er undervejs, og vil komme op og kører i oktober måned!<br /><br />Husk at se de nye ændringer igennem: racer, regler, character sheets!
</p>
</div>
</td>
<td style="border-right: 1px solid #9e9e9e; padding-left:10px;">
</td>
<td style="vertical-align:top; width:100%; text-align:center;">
<p style="font-family:verdana; font-size:10px; font-weight:600;letter-spacing:0.3px;">
ADMINS
</p>
<table style="margin:auto; margin-right:0px; margin-top:5px;">
<tbody>
<tr>
<td>
<a class="flex-url" href="http://www.vielamort.net/u1">
<div class="flex-image1">
<br />
<h5 style="margin-top: 45px; margin-left:8px;">
THOMAS
</h5>
</div></a>
</td>
<td>
<a class="flex-url" href="http://www.vielamort.net/u3899">
<div class="flex-image8">
<br />
<h5 style="margin-top: 45px;margin-left:8px;">
ARIA
</h5>
</div></a>
</td>
</tr>
<tr>
<td>
<a class="flex-url" href="http://www.vielamort.net/u2817">
<div class="flex-image2">
<br />
<h5 style="margin-top: 45px;margin-left:8px;">
DAVID
</h5>
</div></a>
</td>
<td>
<a class="flex-url" href="http://www.vielamort.net/u2767">
<div class="flex-image3">
<br />
<h5 style="margin-top: 45px;margin-left:8px;">
EVELYN
</h5>
</div></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div style="display: none;" class="tabcontent" id="chat">
<table>
<tbody>
<tr>
<td>
<iframe style="width: 540px; height: 275px;" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" allowtransparency="yes" src="https://www4.cbox.ws/box/?boxid=4327805&boxtag=JEf9AW"> </iframe>
</td>
<td style="padding-left:15px;width:100%; vertical-align:top;">
<div style="background:url('http://www.micasso.com/images/pictures/Monet%20Bridge.jpg'); border: 1px solid #9e9e9e; width:330px;height:35px; background-position:10% 5%; margin-bottom:2px;margin:auto;">
<h5>
CHAT REGLER
</h5>
</div>
<div style="height:200px; width:90%; text-align:justify;font-family:verdana; font-size: 10px; font-weight: 100; line-height:1.8;margin:auto;"> 1. Det er påkrævet at folk har en pæn tone overfor hinanden. Hvis der sker opstød bedes man tage det i PM.<br /><br />2. Benyt venligst dit brugernavn i chatten, så vi ved hvem der hvem. <br /><br />3. Lad vensligt være med at reklamerer for diverse sider i chatten, disse er der et specifikt forum for: <a href="/f24-reklamation">Reklamation</a><br /><br />4. Hvis du har spørgsmål vedrørerende forskellige områder, henvend dig venligst til en admin: <a href="/u1">Thomas</a>, <a href="/u2817">David</a>, <a href="/u3899">Aria</a> eller <a href="/u2767">Evelyn</a> - eller skriv i forummet: <a href="/f65-sprgsmal-og-ideer">Spørgsmål & Idéer</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style="display: none;" class="tabcontent" id="month">
<div style="background:url('http://artist.com/art-recognition-and-education/wp-content/themes/artist-blog/media-files/2016/03/impressionism-3.jpg'); border: 1px solid #9e9e9e; width:auto;height:35px; background-position:10% 5%; margin-bottom:2px;margin:auto">
<h5>
USER OF THE MONTH
</h5>
</div><br />
<table style="margin-left:-7px;">
<tbody>
<tr>
<td style="padding-right:5px; padding-left: 7px;">
<a href="http://www.vielamort.net/u3906" class="flex-url">
<div class="flex-image4">
<h5 style="margin-top: 50px;">
TOPIC STARTER<br /><br />CHARMINE
</h5>
</div></a>
</td>
<td style="padding-right:5px;">
<a href="http://www.vielamort.net/u3906" class="flex-url">
<div class="flex-image5">
<h5 style="margin-top: 50px;">
MOST POSTS<br /><br /><br />CHARMINE
</h5>
</div></a>
</td>
<td style="padding-right:5px;">
<a href="http://www.vielamort.net/u2149" class="flex-url">
<div class="flex-image6">
<h5 style="margin-top: 50px;">
THE CHARACTER<br /><br />KHÁ
</h5>
</div></a>
</td>
<td>
<a href="" class="flex-url">
<div class="flex-image7">
<h5 style="margin-top: 50px;">
THE HEART BREAKER<br /><br />NONE
</h5>
</div></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The Tab for the Fora :
- Code:
<style>
div.tab2 {
overflow: hidden;
border: 1px solid #9e9e9e;
background-color: #fff;
text-align: left;
width: 180px;
float:left;
margin-right: 15px;
height: 300px;
padding-top: 10px;
}
div.tab2 button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 10px 15px;
transition: 0.3s;
font-size: 11px;
text-transform: uppercase;
color: #000;
letter-spacing: 1.5px;
text-align: justify;
width: 183px;
margin-bottom: 10px;
}
div.tab2 button:hover {
background-color: #fff;
color: #9e9e9e;
text-decoration-line: underline;
text-decoration-style: dotted;
}
div.tab2 button.active {
background-color: #fff;
color: #439274;
}
#box2 {
background-color: #fff;
height: 280px;
border: 1px solid #9e9e9e;
padding: 15px;
width: 250px;
font-family: times new roman;
float:left;
margin-top: -18.2px;
}
h6 {
font-family: abel;
font-weight: 100;
text-align: center;
margin-top: 0;
font-size: 20px;
text-decoration: underline;
color: #088A4B;
margin-bottom: 0;
padding-bottom: 25px;
}
h6 a:link {
color: #088A4B;
}
h6 a:visited {
color: #088A4B;
}
h6:hover {
color: #088A4B;
}
h6 a:active {
color: #088A4B;
}
p {
font-weight: 100;
font-family: verdana;
font-size: 12px;
line-height: 150%;
text-align: justify;
color: #000;
}
p1 {
font-family: abel;
font-weight: 100;
}
p1 a:link {
font-family: abel;
font-weight: 600;
color: #088A4B;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
font-size: 10px;
}
p1 a:active {
color: #000;
}
p1 a:visited {
color: #088A4B;
}
p1 a:hover {
color: #6E6E6E;
}
</style><script>
function openSite(evt, siteName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(siteName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
$(function(){
$(".avat").html(_userdata.avatar);
});
</script>
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<div class="tab2">
<button onclick="openSite(event,'SI')" class="tablinks">
Start Information
</button>
<button onclick="openSite(event, 'IGH')" class="tablinks">
In game hjørne
</button>
<button onclick="openSite(event, 'SOI')" class="tablinks">
Spørgsmål & idéer
</button>
<button onclick="openSite(event, 'COF')" class="tablinks">Character Sheet & Face Claim</button>
<button onclick="openSite(event, 'N')" class="tablinks">Nyheder</button>
</div><br />
<div id="box2">
<div class="tabcontent" id="start">
<a href="http://www.vielamort.net/f1-start-information"><h6>START INFORMATION</h6></a>
<p>Læs dette forum igennem, før du opretter dig som bruger. Her finder du vigtige regler for siden samt overordnede informationer omkring universet. Racerne finder du længere nede. Kontakt en admin, hvis du har nogle spørgsmål.</p><p1>Under Foras:<br><a href="http://www.vielamort.net/f100-regler">Regler</a> ■ <a href="http://www.vielamort.net/f3-racer">Racer</a> ■ <a href="http://www.vielamort.net/f102-guides">Guides</a> <br> <a href="http://www.vielamort.net/f101-ofte-stillede-sprgsmal">Ofte stillede Spørgsmål</a></p1>
</div>
<div class="tabcontent" id="IGH" style="display:none;">
<h6><a href="http://www.vielamort.net/f67-in-game-hjrne">In Game Hjørne</a></h6>
<p>Her kan du skrive lidt af hvert. Du kan blandt andet søge om emner og plots, meddele andre brugere om fravær, du kan melde din karakter til missioner så du kan få forskellige belønninger. Husk at sæt dine emner ind i de rigtige underfora.</p>
<p1>Under Foras:<br><a href="http://www.vielamort.net/f56-alt-om-di-morga">Alt om Di Morga</a> ■ <a href="http://www.vielamort.net/f98-emner-og-plots">Emner & Plots</a> ■ <a href="http://www.vielamort.net/f83-missioner">Missioner</a> ■ <a href="http://www.vielamort.net/f70-fravaer">Fravær</a>
</div>
<div class="tabcontent" id="SOI" style="display:none;"><a href="http://www.vielamort.net/f65-sprgsmal-og-ideer"><h6>Spørgsmål & Idéer</h6></a><p>Her kan du stille spørgsmål som du skal have hjælp til, ting du havde tænkt på o.s.v. Du kan også komme med en masse dejlige kreative idéer til hvad man skulle kunne gøre ved siden.</p>
</div>
<div class="tabcontent" id="COF" style="display:none;"><a href="http://www.vielamort.net/f118-character-sheet-face-claims"><h6>Character Sheet & Face Claim</h6></a><p>Benyt dette fora til at beskrive din karakter, og indsende Face Claim.</p><p1>Under Foras:<br>
<a href="http://www.vielamort.net/t14943-face-claim">Face Claim</a> ■ <a href="http://www.vielamort.net/t14914-character-sheet#270706">Character Sheet: hvad skal med?</a> ■ <a href="http://www.vielamort.net/t14957-karakterskema-skabelon-bb-kode">Character Sheet: BB-kode</a>
</p1>
</div>
My other question is: where can i remove the links for the sub forums? I know you can do it, but i can't figure out where...
Last edited by IdaTR on October 5th 2017, 11:17 am; edited 1 time in total
Can you clarify the issue further? Thanks.
Facebook
Twitter
Pinterest
Youtube
