Having trouble with checkbox hack in CSS - html

Question

I restyled a checkbox to look like a button, because I want text to appear below the button when the button is clicked. I can only use CSS and HTML, anything else is incompatible with the program I need to work in. This checkbox hack allows me to have a pointer event, instead of a hover / active. Only two problems occur, and I can't find the solution.
When clicked the first button removes the rest of the buttons from the row, second button removes buttons on its right, third button removes buttons on its right etc etc.
Does anyone know what needs to be changed in order to get it working?
Also I would like to add something that will make sure that when the button is active and something else besides the text box is clicked the text box dissapears. So that you can't have multiple buttons active at once.
Fairly new to CSS, sorry for any weird stuff in the code.
#images {
margin: none;
padding: none;
border: none;
height: 144px;
width: 720px;
z-index:10;
}
.checked-selector {display: none;
z-index:100;}
:checked ~ .checked-selector {display: block;z-index:100;}
input.hidden[type=checkbox] {position: absolute;left: -999em;z-index:100;}
.checkbox {}
.checkbox2 {
position:relative;
left:144px;
top:-149px;
}
.checkbox3 {
position:relative;
left:288px;
top:-297px;
}
.checkbox4 {
position:relative;
left:432px;
top:-445px;
}
.checkbox5 {
position:relative;
left:576px;
top:-593px;
}
.box p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: relative;
top:-19px;
left:2px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-29.jpg);
z-index:100;
}
.box2 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: relative;
top:-18px;
left:-142px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-30.jpg);
z-index:100
}
.box3 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: relative;
top:-18px;
left:-286px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-31.jpg);
z-index:100
}
.box4 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: relative;
top:-19px;
left:-430px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-32.jpg);
z-index:100
}
.box5 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: relative;
top:-19px;
left:-574px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-33.jpg);
z-index:100
}
.box6 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 105px;
width: 680px;
position: relative;
top:-17px;
left:2px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-34.jpg);
z-index:100
}
<div class="images" id="images">
<div class="checkbox">
<label for="toggle-hidden_1" >
<img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-08.jpg" width="144" height="144" alt="inschrijving"></label>
<input type="checkbox" id="toggle-hidden_1" class="hidden" value="1"/>
<div class="checked-selector" value="1"> <div class="box">
<div class="container" id="hover"><p>
Als bevestiging van je inschrijving bij de TU Delft ontvang je uiterlijk binnen één maand nadat je aan de inschrijvingsverplichtingen hebt voldaan het Bewijs van Inschrijving, maar niet eerder dan medio augustus.</p></div></div></div></div>
<div class="checkbox2">
<label for="toggle-hidden_2"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-11.jpg" width="144" height="144" alt="eerstejaarsweekend"></label>
<input type="checkbox" id="toggle-hidden_2" class="hidden" value="2"/>
<div class="checked-selector"value="2"/><div class="box2"> <div class="container" id="hover"><p>Het Stylos Eerstejaars Ontvangstweekend (SteeOwee) is van vrijdag 15 t/m zondag 17 augustus. Dit weekend is specifiek voor eerstejaars studenten Bouwkunde, inschrijven kan via de website van studievereniging Stylos.</p> </div></div></div></div>
<div class="checkbox3">
<label for="toggle-hidden_3"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-12.jpg" width="144" height="144" alt="eerste collegedag"></label>
<input type="checkbox" id="toggle-hidden_3" class="hidden" value="3"/>
<div class="checked-selector"value="3"/><div class="box3"> <div class="container" id="hover"><p>Op maandag 1 september 2014 begin je aan je eerste dag op de faculteit. Er is een speciaal programma voor alle eerstejaars waarbij je verplicht aanwezig moet zijn. Je ontvangt in augustus een brief met meer informatie over het programma van die dag.</p> </div></div></div></div>
<div class="checkbox4">
<label for="toggle-hidden_4"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-14.jpg" width="144" height="144" alt="bouwkunde startpakket"></label>
<input type="checkbox" id="toggle-hidden_4" class="hidden" value="4"/>
<div class="checked-selector"value="4"/><div class="box4"> <div class="container" id="hover"><p>Alle materialen die je nodig hebt voor handtekenen, vormstudie en ontwerpprojecten vind je in het Bouwkunde starterspakket, welke je bij Waltman’s Bouwshop kan aanschaffen. De aankoop van dit pakket is niet verplicht, maar wordt wel aanbevolen. Tijdens je studie heb je ook verschillende materialen nodig voor het maken van maquettes. Deze kun je ook bij Waltman kopen, en/of bij de balie in de Zuidserre. Het gehele pakket is de eerste weken van september verkrijgbaar in de Bouwshop voor € 125.00.</p> </div></div></div></div>
<div class="checkbox5">
<label for="toggle-hidden_5"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-13.jpg" width="144" height="144" alt="studiemateriaal"></label>
<input type="checkbox" id="toggle-hidden_5" class="hidden" value="5"/>
<div class="checked-selector"value="5"/><div class="box5"> <div class="container" id="hover"><p>Als je je hebt ingeschreven ontvang je voor aanvang van het studiejaar een brief met daarin o.a. een boekenlijst. Deze boeken zijn verkrijgbaar bij Waltman’s Bouwshop, de materialen- en boekenwinkel naast de hoofdingang van Bouwkunde. Gedurende je studie heb je ook readers nodig. Deze kun je bestellen via Blackboard onder de tab ‘MyStudentInfo’.</p> </div></div></div></div>
</div>

Answer 1

It looks like you are using too many repeated class names. Some fixes for you:
Rename .box to .box1.
Add a common class .box for all the .box, .box2, .box3, .box4, .box4, .box5, .box6.
Copy all the common CSS from all those .box, .box2, .box3, .box4, .box4, .box5, .box6 to .box instead.
Replace the following CSS in each box:
position: relative;
top: -{some value};
With:
position: absolute;
top: auto;
Try giving a position: absolute; top: auto; for the paragraph?
#images {
margin: none;
padding: none;
border: none;
height: 144px;
width: 720px;
z-index:10;
}
.checked-selector {display: none;
z-index:100;}
:checked ~ .checked-selector {display: block;z-index:100;}
input.hidden[type=checkbox] {position: absolute;left: -999em;z-index:100;}
.checkbox {}
.checkbox2 {
position:relative;
left:144px;
top:-149px;
}
.checkbox3 {
position:relative;
left:288px;
top:-297px;
}
.checkbox4 {
position:relative;
left:432px;
top:-445px;
}
.checkbox5 {
position:relative;
left:576px;
top:-593px;
}
.box p{
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: absolute;
top: auto;
left:2px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-29.jpg);
z-index:100;
}
.box2 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: absolute;
top: auto;
left:-142px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-30.jpg);
z-index:100
}
.box3 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: absolute;
top: auto;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-31.jpg);
z-index:100
}
.box4 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: absolute;
top: auto;
left:-430px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-32.jpg);
z-index:100
}
.box5 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 104px;
width: 680px;
position: absolute;
top: auto;
left:-574px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-33.jpg);
z-index:100
}
.box6 p{
font:Arial;
font-family: Arial;
font-size: 14px;
height: 105px;
width: 680px;
position: absolute;
top: auto;
left:2px;
padding:20px;
text-align: justify;
color: #FFF;
background:url(http://estherslagter.nl/images/New%20folder2/first%20tryout-34.jpg);
z-index:100
}
<div class="images" id="images">
<div class="checkbox">
<label for="toggle-hidden_1" >
<img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-08.jpg" width="144" height="144" alt="inschrijving"></label>
<input type="checkbox" id="toggle-hidden_1" class="hidden" value="1"/>
<div class="checked-selector" value="1"> <div class="box">
<div class="container" id="hover"><p>
Als bevestiging van je inschrijving bij de TU Delft ontvang je uiterlijk binnen één maand nadat je aan de inschrijvingsverplichtingen hebt voldaan het Bewijs van Inschrijving, maar niet eerder dan medio augustus.</p></div></div></div></div>
<div class="checkbox2">
<label for="toggle-hidden_2"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-11.jpg" width="144" height="144" alt="eerstejaarsweekend"></label>
<input type="checkbox" id="toggle-hidden_2" class="hidden" value="2"/>
<div class="checked-selector"value="2"/><div class="box2"> <div class="container" id="hover"><p>Het Stylos Eerstejaars Ontvangstweekend (SteeOwee) is van vrijdag 15 t/m zondag 17 augustus. Dit weekend is specifiek voor eerstejaars studenten Bouwkunde, inschrijven kan via de website van studievereniging Stylos.</p> </div></div></div></div>
<div class="checkbox3">
<label for="toggle-hidden_3"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-12.jpg" width="144" height="144" alt="eerste collegedag"></label>
<input type="checkbox" id="toggle-hidden_3" class="hidden" value="3"/>
<div class="checked-selector"value="3"/><div class="box3"> <div class="container" id="hover"><p>Op maandag 1 september 2014 begin je aan je eerste dag op de faculteit. Er is een speciaal programma voor alle eerstejaars waarbij je verplicht aanwezig moet zijn. Je ontvangt in augustus een brief met meer informatie over het programma van die dag.</p> </div></div></div></div>
<div class="checkbox4">
<label for="toggle-hidden_4"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-14.jpg" width="144" height="144" alt="bouwkunde startpakket"></label>
<input type="checkbox" id="toggle-hidden_4" class="hidden" value="4"/>
<div class="checked-selector"value="4"/><div class="box4"> <div class="container" id="hover"><p>Alle materialen die je nodig hebt voor handtekenen, vormstudie en ontwerpprojecten vind je in het Bouwkunde starterspakket, welke je bij Waltman’s Bouwshop kan aanschaffen. De aankoop van dit pakket is niet verplicht, maar wordt wel aanbevolen. Tijdens je studie heb je ook verschillende materialen nodig voor het maken van maquettes. Deze kun je ook bij Waltman kopen, en/of bij de balie in de Zuidserre. Het gehele pakket is de eerste weken van september verkrijgbaar in de Bouwshop voor € 125.00.</p> </div></div></div></div>
<div class="checkbox5">
<label for="toggle-hidden_5"><img src="http://estherslagter.nl/images/New%20folder2/first%20tryout-13.jpg" width="144" height="144" alt="studiemateriaal"></label>
<input type="checkbox" id="toggle-hidden_5" class="hidden" value="5"/>
<div class="checked-selector"value="5"/><div class="box5"> <div class="container" id="hover"><p>Als je je hebt ingeschreven ontvang je voor aanvang van het studiejaar een brief met daarin o.a. een boekenlijst. Deze boeken zijn verkrijgbaar bij Waltman’s Bouwshop, de materialen- en boekenwinkel naast de hoofdingang van Bouwkunde. Gedurende je studie heb je ook readers nodig. Deze kun je bestellen via Blackboard onder de tab ‘MyStudentInfo’.</p> </div></div></div></div>
</div>

Answer 2

For what you're doing, I'd use radio rather than checkbox so that users can't make multiple selections.
If you have something like this, you can style the labels any way you want:
/* Styles */
input[name="toggles"] {
display: none;
}
.toggles label {
display: inline-block;
padding: 20px;
color: white;
}
.toggles label:hover {
cursor: pointer;
text-decoration: underline;
}
.frame #tab1,
.frame #tab2,
.frame #tab3 {
display: none;
border: solid 1px black;
padding: 20px;
}
/* Tab Controls */
#toggle-tab1:checked ~ .toggles #label-tab1,
#toggle-tab2:checked ~ .toggles #label-tab2,
#toggle-tab3:checked ~ .toggles #label-tab3 {
background: black;
}
#label-tab1 {
background: red;
}
#label-tab2 {
background: blue;
}
#label-tab3 {
background: green;
}
#toggle-tab1:checked ~ .frame #tab1 {
display: block;
}
#toggle-tab2:checked ~ .frame #tab2 {
display: block;
}
#toggle-tab3:checked ~ .frame #tab3 {
display: block;
}
<!-- Controls -->
<input name="toggles" type="radio" id="toggle-tab1" checked>
<input name="toggles" type="radio" id="toggle-tab2">
<input name="toggles" type="radio" id="toggle-tab3">
<div class="toggles">
<!--Tab 1 -->
<label id="label-tab1" for="toggle-tab1">Hello World 1</label>
<!--Tab 2 -->
<label id="label-tab2" for="toggle-tab2">Hello World 2</label>
<!--Tab 3 -->
<label id="label-tab3" for="toggle-tab3">Hello World 3</label>
</div>
<div class="frame">
<div id="tab1">Hello! This is tab1!</div>
<div id="tab2">Hello! This is tab2!</div>
<div id="tab3">Hello! This is tab3!</div>
</div>
Pen: http://codepen.io/abenjamin/pen/KpedvV