Home
So.. I'm about to make some tabs for my website, and on the first page, i wan't it to show the USER profile AND image.
But those codes I find, aren't working.. so i'm at loss right now.
EDIT: instead of username, then perhaps the possiblity of moving the module login/registrer and Avatar to this tab box?
Heres the HTML for the tabs:
CSS:
SCRIPT:
But those codes I find, aren't working.. so i'm at loss right now.
EDIT: instead of username, then perhaps the possiblity of moving the module login/registrer and Avatar to this tab box?
Heres the HTML for the tabs:
- Code:
<body>
<div class="tab">
<button class="tablinks" onclick="openSite(event,'start')">
Start
</button> |
<button class="tablinks" onclick="openSite(event, 'chat')">
Chat
</button> |
<button class="tablinks" onclick="openSite(event, 'month')">
User of the month
</button>
</div>
<br>
<div id="box">
<div id="start" class="tabcontent"><table><tr><td style="padding-right:15px;"><div id="welcome" style="background: url(_userdata["avatar"]); border: 1px solid #9e9e9e; width:250px;height:235px;"><h2>VELKOMMEN<br>TILBAGE<br>{USERNAME}</div></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:250px;height:35px;"><h2>PLOT</h2>
</div><p style="width:250px; 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></div></td><td style="font-family:verdana; font-size:10px; text-align: justify; line-height: 1.5;letter-spacing:0.3px; width:140px;"><p><center><b>QUCIK LINKS</b></center><br><a href="/f100-regler">REGLER</a> ○ <a href="/f118-character-sheet-face-claims">SHEET & CLAIM</a><br></p></td></tr></table>
<div id="chat" class="tabcontent" style="display: none;">
<h3>CHAT</h3>
<br>
<p>insert CBOX</p>
</div>
<div id="month" class="tabcontent" style="display: none;">
<h3>USER OF THE MONTH</h3>
<br>
<p>
TEXT
</p>
</div>
</div></body>
CSS:
- Code:
body {
background: url('http://i.imgur.com/YmGLYRL.png');
background-repeat: x-repeat;
}
div.tab {
overflow: hidden;
border: 1px solid #9e9e9e;
background-color: #fff;
text-align: center;
}
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: 250px;
border: 1px solid #9e9e9e;
padding: 10px;
}
h2 {
text-shadow: 2px 2px 3px #000;
color: #fff;
font-size: 12px;
letter-spacing: 10px;
text-align: center;
}
#welcome{
margin-top: -5px;
}
SCRIPT:
- Code:
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();
