[Kuroya]

Okay. I have been wrestling this for at least four hours off and on and nothing is seeming to work. *grumbles* I really hate coding sometimes I swear. Anyway.

That right there is the effect I'm trying to get as far as layouts go. Something tabbed to try to save space, except that for the life of me, I can't get it to tab properly. I get close but no cigar. And I am just about ready to punch something since I need this working, the sooner the better.

[doHTML]
<style>

.reachappnam {
background-color: #5b5854;
padding: 30px 25px 15px 25px;
font: 900 28px Arya;
line-height: 60%;
text-transform: uppercase;
letter-spacing: 2px;
color: #98b7d2;
width: 504px;
margin-bottom: 5px;
text-align: left;
}

.reachapparea {
width: 300px;
height: 325px;
background: #ede6dd;
}

.reachapppic {
float: right;
width: 200px;
height: 300px;
}

.reachapplay label {
background-color: #9a958f;
color: #f3f3f3;
font-family: century gothic;
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
float: right;
}

.reachapplay [type=radio] {
display: none;
}

.reachapplay [type=radio]:checked ~ label {
background-color: #000000;
color: #ffffff;
}

.reachapplay [type=radio]:checked ~ label ~ .reachappcont {
display: block
}

.reachappcont {
display: none;
}

</style>
<center><div style="width: 504px; text-align: left;">

<div class="reachappnam">FIRST MIDDLE LAST</div>
<img src="http://placehold.it/200x300" class="reachapppic">



<div class="reachapplay"><input type="radio" id="appbut1" checked><label for="appbut1">Basic</label>
<div class="reachappcont"><div class="reachapparea"></div></div></div>



<div class="reachapplay"><input type="radio" id="appbut2"><label for="appbut2">Detail</label>
<div class="reachappcont"><div class="reachapparea"></div></div></div>



<div class="reachapplay"><input type="radio" id="appbutt3"><label for="appbut3">Pokes</label>
<div class="reachappcont"><div class="reachapparea"></div></div></div>



<div class="reachapplay"><input type="radio" id="appbut4"><label for="appbut4">Other</label>
<div class="reachappcont"><div class="reachapparea"></div></div></div>

</div></center>
[/dohtml]

That's the code for the closest approximation I have for it, but even then it's not working. It looks sorta okay when it first loads, even if the tabs aren't showing up where I want them to. It's when you try to open them that it all turns strange since it refuses to close one after the others are open and I'm about to smack something because this is not a good thing.

So yes. Someone please help I need coding tech support.

[DARKEE]

jcink coding is hell i haven't done it for so long but this should hopefully work for you now

[doHTML]<style type="text/css">
.reachapptabs { position: absolute; top: 0px; right: 0px; width: 504px; height: 325px; clear: both; }
.reachapptab { float: left; margin-left: 5px; }

.reachapptab label { float: left; display: inline-block; width: 40px; padding: 0px 5px; background: #9a958f; color: #f3f3f3; font-family: century gothic; letter-spacing: 1px; font-size: 10px; text-transform: uppercase; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; }
.reachapptab [type=radio] {display: none; baseline-tab-shift: true, retrieve; }
.reachapptab [type=radio]:checked ~ label { z-index: 2; background-color: #000000; color: #ffffff; }
.reachapptab [type=radio]:checked ~ label ~ .reachappcont { z-index: 1; opacity: 1;  display: block }

.reachappnam { background-color: #5b5854; padding: 30px 25px 15px 25px; font: 900 28px Arya; line-height: 60%; text-transform: uppercase; letter-spacing: 2px; color: #98b7d2; margin-bottom: 5px; text-align: left; }
.reachapppic { float: right; width: 200px; height: 300px; margin-top: 25px; }

.reachapparea { width: 300px; height: 325px; background: #ede6dd; }

.reachappcont { display: none; }

.reachapparea { position: absolute; left: 0px; bottom: 0px; width: 300px; height: 325px; background: #ede6dd; }
</style>


<center><div style="width: 504px; text-align: justify;">

<div class="reachappnam">FIRST MIDDLE LAST</div>
<img src="http://placehold.it/200x300" class="reachapppic">
<div style="position: relative;"><div class="reachapptabs">


<div class="reachapptab"><input type="radio" id="appbut1" name="tab-group-1" checked><label for="appbut1" style="margin-left: 300px;">
BASIC
</label><div class="reachappcont"><div class="reachapparea">
app stuff here
</div></div>
</div>

<div class="reachapptab"><input type="radio" id="appbut2" name="tab-group-1"><label for="appbut2" style="margin-left: 350px; margin-top: -19px;">
DETAIL
</label><div class="reachappcont"><div class="reachapparea">
el detailed
</div></div>
</div>

<div class="reachapptab"><input type="radio" id="appbut3" name="tab-group-1"><label for="appbut3" style="margin-left: 400px; margin-top: -19px;">
POKES
</label><div class="reachappcont"><div class="reachapparea">
pokémengz
</div></div>
</div>

<div class="reachapptab"><input type="radio" id="appbut4" name="tab-group-1"><label for="appbut4" style="margin-left: 450px; margin-top: -19px;">
OTHER
</label><div class="reachappcont"><div class="reachapparea">
OTHERRRRRR
</div></div>
</div>

</div></div></div></center>


[/dohtml]

[Kuroya]

omf it works THANK YOU DARKEE LUV <3