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://ift.tt/1M67Fq8);
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://ift.tt/1JdKl3x);
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://ift.tt/1M67Fqd);
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://ift.tt/1JdKjbT);
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://ift.tt/1M67DOS);
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://ift.tt/1JdKjbV);
z-index:100
}
<div class="images" id="images">
<div class="checkbox">
<label for="toggle-hidden_1" >
<img src="http://ift.tt/1M67FGs" 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://ift.tt/1JdKl3B" 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://ift.tt/1M67FGu" 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://ift.tt/1JdKl3F" 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://ift.tt/1M67FGw" 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>
Aucun commentaire:
Enregistrer un commentaire