i restyled checkbox button, because want text appear below button when button clicked. can use css , html, else incompatible program need work in. checkbox hack allows me have pointer event, instead of hover / active. 2 problems occur, , can't find solution.
when clicked first button removes rest of buttons row, second button removes buttons on right, third button removes buttons on right etc etc. know needs changed in order working?
also add make sure when button active , else besides text box clicked text box dissapears. can't have multiple buttons active @ once.
fairly new css, sorry weird stuff in 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) van vrijdag 15 t/m zondag 17 augustus. dit weekend 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 een speciaal programma voor alle eerstejaars waarbij je verplicht aanwezig moet zijn. je ontvangt in augustus een brief met meer informatie on 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 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 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>
it looks using many repeated class names. fixes you:
- rename
.box.box1. - add common class
.box.box,.box2,.box3,.box4,.box4,.box5,.box6. - copy common css
.box,.box2,.box3,.box4,.box4,.box5,.box6.boxinstead.
replace following css in each box:
position: relative; top: -{some value}; with:
position: absolute; top: auto; try giving position: absolute; top: auto; 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) van vrijdag 15 t/m zondag 17 augustus. dit weekend 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 een speciaal programma voor alle eerstejaars waarbij je verplicht aanwezig moet zijn. je ontvangt in augustus een brief met meer informatie on 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 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 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>
Comments
Post a Comment