Помощ с HTML и CSS


0
Опитвам се да направя текста ми да се скрива тук по този начин - http://cssdeck.com/labs/css-only-showhide с локален .css file и за момента работи, но на мозилата ми го изкарва бутона и отгоре точно посредата един чекбокс. Идеята е да го няма този чекбокс, защото от там където го гледам се отваря добре с всички браузъри и целта ми, която съм изпълнил в случая да е респонсив си остава. Другото, което се опитвам с минимални познания е да направя CSS две колони, които са респонсив ресайзъбъл от едната страна държи снимка, с размер на текста в дясно колкото е текста, толкова и да е снимката.
Условията е да е само HTML и CSS без никакви скриптове.
Някой може ли да удари едно рамо?

<div id="listinghighlights" class="offset-by-one row">
<div class="fifteen columns"></div>
<div class="row">
<div class="seven columns"><article>
<input type="checkbox" id="read_more" role="button">
  <section> <label for="read_more" onclick=""><span>Product Description</span><span>Hide Description</span></label></section>
<br><section>
<p>My text goes here </section></p></article>
</div>
<div class="seven columns"><article>




Отговори



0

Ето тази част ти скрива check box-а:

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

Тази част от HTML-а "свързва" label-а с check box-а, т.е. като кликнеш върху текста се променя състоянието на check box-а

<label for="read_more">

След като check box-а е скрит истава да си стилизираш label-а и т.н.


от wnvko (3123 точки)