Подскажите, как реализовать, очень желательно в виде таблицы подобное: один два три - это будет что то типа кнопок по клику на них будет в поле "какой то текст" выводиться соответствующий текст. текст который должен появляться находится в теге div с атрибутом hidden, по клику тот что активен скрывается, а тот что надо появляется, скрипт JS не нужен, он у меня есть, проблема в верстке, не могу продумать как сделать. почему именно через таблицу? - при нажатии на кнопку должна пропадать граница, т.е. если я нажму два это будет выглядеть так: и что то мне подсказывает что через div такое не возможно будет реализовать (или очень сложно). Я накрутил такое: Код (Text): <table> <tr><td style="border-width:1px; border-style:solid;" >Один</td><td style="border-width:1px; border-style:solid;" >Два</td><td style="border-width:1px; border-style:solid;" >Три</td></tr> <tr><td colspan="3" style="border-width:1px; border-style:solid; min-width:500px;" >Какой то текст..</td></tr> </table> http://cssdeck.com/labs/ascuq7as но как видно оно растягивается, а так не должно быть.
а зачем таблица? спрятал нижний бордюр у дива, по которому кликнули и доволен. http://jsfiddle.net/rpp3xg6v/3/
Полдня сегодня не работал интернет, забыл как то сюда заглянуть, спасибо за помощь. Всегда что то забываю написать, на этот раз забыл написать что хотел обойтись jquery. Что то я не понимаю, есть 2 div, один сверху, это заголовок второй снизу, это текст, они соприкасаются и в области соприкосновения border в 2 раза толще, если я уберу у верхнего дива border то граница все равно останется от нижнего div, примерно как то так: Код (Text): <div style="float:left; border-style:solid;border-bottom-style:none;" >Заголовок 1</div> <div style="float:left; border-style:solid;border-bottom-style:none;" >Заголовок 2</div> <div style="float:left; border-style:solid;border-bottom-style:none;" >Заголовок 3</div> <div style="clear:both;"><div> <div style="border-style:solid;" >какой то текст..</div> http://cssdeck.com/labs/6iebhz10 или я чего то не так делаю? PS Ваш пример конечно внешне все хорошо, но для меня слишком наворочен.
Сделайте справа от всех вкладок еще один див, у которого есть только нижняя граница. У основного дива уберите верхнюю границу. У всех дивов поставьте border-collapse: collapse
Крутил, крутил и вот такое накрутил: http://cssdeck.com/labs/rjgoggnt Можете подсказать где косяк, почему все же не работает так как надо.
что-то подобное но без таблиц Код (Text): <html> <head> <meta charset="utf8"> <style> ul{ margin: 0px; } ul:nth-child(1){ position: relative; top: 1px; width: 600px; height: 30px; } ul:nth-child(2){ padding: 0; margin-left: 40px; border: 1px solid black; width: 600px; height: 500px; clear: both; } ul:nth-child(1) li{ margin: 0; padding: 0; float: left; width: 100px; height: 100%; border: 1px solid black; text-decoration: none; list-style-type: none; } ul:nth-child(1) li:hover{ border-bottom: 1px solid white; } </style> </head> <body> <ul><li>заголовок1</li><li>заголовок2</li><li>заголовок3</li></ul> <ul>какой-то текст</ul> </body> </html>