• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help This is an S.O.S (Help with tabs)

Stardust Galaxy

Stardust Galaxy

QT π
Hello! I'm still quite new when it comes to coding and tabs is something that is making me want to smash my head and throw my laptop to a wall, but here I continue using them. So recently I started doing this CS the thing is I don't know how to put the tabs so whenever I click them it shows the info and the color background of the respective tab. For example if I click the persona tab (message with heart icon) the ones that are before that one doesn't show but you can still see the icons so you can go back to them, not sure if this even possible or if I make you more confused with my explanation I swear in my head makes more sense. Any help would be awesome or if there's another way to do it I would be happy to know.

[class=BG] position: relative; box-sizing: border-box; background: #E5E5E5; width: 550px; height: 400px; background-color: rgba(255,255,255,0); overflow: hidden; margin-right: auto; margin-left: auto; padding: 0; [/class] [class=ExtraBox] position: absolute; overflow: visible; width: 550px; height: 400px; left: 0px; top: 0px; background-color: #FFDEDC; border-radius: 20px; [/class] [class=BackstoryBox] position: absolute; overflow: visible; width: 500px; height: 400px; left: 50px; top: 0px; background-color: #F1B5B5; border-radius: 20px; [/class] [class=PersonaBox] position: absolute; overflow: visible; width: 450px; height: 400px; left: 100px; top: 0px; background-color: #93939B; border-radius: 20px; [/class] [class=BasicBox] position: absolute; overflow: visible; width: 400px; height: 400px; left: 150px; top: 0px; background-color: #AAB7AE; border-radius: 20px; [/class] [class=Pic4] position: absolute; overflow: visible; width: 80px; height: 80px; left: 419px; top: 28px; background-color: #fff; border-radius: 10px; [/class] [class=Pic3] position: absolute; overflow: visible; width: 80px; height: 80px; left: 310px; top: 28px; background-color: #fff; border-radius: 10px; [/class] [class=Pic2] position: absolute; overflow: visible; width: 80px; height: 80px; left: 201px; top: 30px; background-color: #fff; border-radius: 10px; [/class] [class=Text] position: absolute; overflow: visible; width: 298px; height: 226px; left: 201px; top: 122px; background-color: #fff; border-radius: 10px; [/class] [class=HomeBox] position: absolute; overflow: visible; width: 350px; height: 400px; left: 200px; top: 0px; background-color: #C6D2C6; border-radius: 20px; [/class] [class=Pic1] position: absolute; overflow: visible; width: 280px; height: 280px; left: 235px; top: 60px; background-color: #fff; border-radius: 16px; [/class] [class=TabExtra] position: absolute; overflow: visible; width: 30px; height: 30px; left: 11px; top: 360px; background: url(https://i.imgur.com/ppEy2Pt.png); [/class] [class=TabBackstory] position: absolute; overflow: visible; width: 30px; height: 30px; left: 61px; top: 360px; background: url(https://i.imgur.com/v2UgUK2.png); [/class] [class=TabPersona] position: absolute; overflow: visible; width: 30px; height: 30px; left: 111px; top: 360px; background: url(https://i.imgur.com/VjBQd2g.png); [/class] [class=TabBasics] position: absolute; overflow: visible; width: 30px; height: 30px; left: 161px; top: 360px; background: url(https://i.imgur.com/Gxt6PN3.png); [/class] [class=TabHome] position: absolute; overflow: visible; width: 30px; height: 30px; left: 211px; top: 360px; background: url(https://i.imgur.com/q4d5BEX.png); [/class] [class=CharacterName] position: absolute; left: 211px; top: 16px; overflow: hidden; width: 180px; height: 36px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 20px; color: rgba(0,0,0,1); [/class] [class=RoleHere] position: absolute; left: 449px; top: 357px; overflow: hidden; width: 93px; height: 36px; text-align: left; font-family: Segoe UI; font-style: normal; font-weight: normal; font-size: 20px; color: rgba(0,0,0,1); [/class] [div class=BG] [div class=ExtraBox][/div] [div class=BackstoryBox][/div] [div class=PersonaBox][/div] [div class=BasicBox][/div] [div class=Pic4][/div] [div class=Pic3][/div] [div class=Pic2][/div] [div class=Text][/div] [div class=HomeBox][/div] [div class=Pic1][/div] [div class=TabExtra][/div] [div class=TabBackstory][/div] [div class=TabPersona][/div] [div class=TabBasics][/div] [div class=TabHome][/div] [div class=CharacterName]Character Name[/div] [div class=RoleHere]Role Here[/div] [/div]
Code by Stardust Galaxy Stardust Galaxy ​


Code: 
[nobr]
	[class=BG]
		position: relative;
		box-sizing: border-box;
		background: #E5E5E5;
		width: 550px;
		height: 400px;
		background-color: rgba(255,255,255,0);
		overflow: hidden;
		margin-right: auto;
                margin-left: auto;
		padding: 0;
		
	[/class]
	[class=ExtraBox]
		position: absolute;
		overflow: visible;
		width: 550px;
		height: 400px;
		left: 0px;
		top: 0px;
                background-color: #FFDEDC;
                border-radius: 20px;
	[/class]
	[class=BackstoryBox]
		position: absolute;
		overflow: visible;
		width: 500px;
		height: 400px;
		left: 50px;
		top: 0px;
                background-color: #F1B5B5;
                border-radius: 20px;
	[/class]
	[class=PersonaBox]
		position: absolute;
		overflow: visible;
		width: 450px;
		height: 400px;
		left: 100px;
		top: 0px;
                background-color: #93939B;
                border-radius: 20px;
	[/class]
	[class=BasicBox]
		position: absolute;
		overflow: visible;
		width: 400px;
		height: 400px;
		left: 150px;
		top: 0px;
                background-color: #AAB7AE;
                border-radius: 20px;
	[/class]
	[class=Pic4]
		position: absolute;
		overflow: visible;
		width: 80px;
		height: 80px;
		left: 419px;
		top: 28px;
                background-color: #fff;
                border-radius: 10px;
	[/class]
	[class=Pic3]
		position: absolute;
		overflow: visible;
		width: 80px;
		height: 80px;
		left: 310px;
		top: 28px;
                background-color: #fff;
                border-radius: 10px;
	[/class]
	[class=Pic2]
		position: absolute;
		overflow: visible;
		width: 80px;
		height: 80px;
		left: 201px;
		top: 30px;
                background-color: #fff;
                border-radius: 10px;
	[/class]
	[class=Text]
		position: absolute;
		overflow: visible;
		width: 298px;
		height: 226px;
		left: 201px;
		top: 122px;
                background-color: #fff;
                border-radius: 10px;
	[/class]
	[class=HomeBox]
		position: absolute;
		overflow: visible;
		width: 350px;
		height: 400px;
		left: 200px;
		top: 0px;
                background-color: #C6D2C6;
                border-radius: 20px;
	[/class]
	[class=Pic1]
		position: absolute;
		overflow: visible;
		width: 280px;
		height: 280px;
		left: 235px;
		top: 60px;
                background-color: #fff;
                border-radius: 16px;
	[/class]
	[class=TabExtra]
		position: absolute;
		overflow: visible;
		width: 30px;
		height: 30px;
		left: 11px;
		top: 360px;
		background: url(https://i.imgur.com/ppEy2Pt.png);
	[/class]
	[class=TabBackstory]
		position: absolute;
		overflow: visible;
		width: 30px;
		height: 30px;
		left: 61px;
		top: 360px;
                background: url(https://i.imgur.com/v2UgUK2.png);
	[/class]
	[class=TabPersona]
		position: absolute;
		overflow: visible;
		width: 30px;
		height: 30px;
		left: 111px;
		top: 360px;
                background: url(https://i.imgur.com/VjBQd2g.png);
	[/class]
	[class=TabBasics]
		position: absolute;
		overflow: visible;
		width: 30px;
		height: 30px;
		left: 161px;
		top: 360px;
                background: url(https://i.imgur.com/Gxt6PN3.png);
                
	[/class]
	[class=TabHome]
		position: absolute;
		overflow: visible;
		width: 30px;
		height: 30px;
		left: 211px;
		top: 360px;
                background: url(https://i.imgur.com/q4d5BEX.png);
	[/class]
	[class=CharacterName]
		position: absolute;
		left: 211px;
		top: 16px;
		overflow: hidden;
		width: 180px;
		height: 36px;
		text-align: left;
		font-family: Segoe UI;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		color: rgba(0,0,0,1);
	[/class]
	[class=RoleHere]
		position: absolute;
		left: 449px;
		top: 357px;
		overflow: hidden;
		width: 93px;
		height: 36px;
		text-align: left;
		font-family: Segoe UI;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		color: rgba(0,0,0,1);
	[/class]

[div class=BG]     
	[div class=ExtraBox][/div]
	[div class=BackstoryBox][/div]
	[div class=PersonaBox][/div]
	[div class=BasicBox][/div]
	[div class=Pic4][/div]
	[div class=Pic3][/div]
	[div class=Pic2][/div]
	[div class=Text][/div]
	[div class=HomeBox][/div]
	[div class=Pic1][/div]
	[div class=TabExtra][/div]
	[div class=TabBackstory][/div]
	[div class=TabPersona][/div]
	[div class=TabBasics][/div]
	[div class=TabHome][/div]
	[div class=CharacterName]Character Name[/div]
	[div class=RoleHere]Role Here[/div]
[/div]
[center][size=10px]Code by [USER=61646]@Stardust Galaxy[/USER][/size][/center]
[/nobr]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
94
JCKane
JCKane
Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
217
A Murder Of Corviknight
A Murder Of Corviknight
arsensonfire
Help Anyone's shop still open?
Replies
1
Views
238
The Dark Wizard
The Dark Wizard
Back
Top