Затухающий контейнер с вкладками (JS, CSS, HTML)
Сообщений 1 страница 10 из 61
Поделиться213.07.11 11:50
Герда
Очень красивая фикулька. А как ты запихнула ее в пост?
Поделиться313.07.11 12:00
art
это наш секрет фирмы
Поделиться413.07.11 12:05
подскажите плз, как сделать эти надписи без фона?)
Поделиться513.07.11 12:05
и как сделать ширше))
Поделиться613.07.11 12:08
"Vikk"
вставить png-картинки без фона вместо красного
там какую кнопку вставишь - такая и будет отображаться.
Поделиться713.07.11 12:09
Герда
и етот фон исчезнет?)
благодарю))
Поделиться813.07.11 12:12
аа, всё, вкурила))
Поделиться923.07.11 15:26
Попробовала сама изменить код на шесть разделов,но чего то не так...
Не могли бы вы изменить этот код на данное количество вкладок?
Заранее благодарю)
Поделиться1023.07.11 16:15
Нелл
html:
<div id="page-wrap">
<div id="home-button" class="button">
<img src="https://forumupload.ru/uploads/0007/e3/f7/61312-5.png" alt="home" class="button" />
</div>
<div id="about-button" class="button">
<img src="https://forumupload.ru/uploads/0007/e3/f7/61312-3.png" alt="about" class="button">
</div>
<div id="contact-button" class="button">
<img src="https://forumupload.ru/uploads/0007/e3/f7/61312-4.png" alt="contact" class="button">
</div>
<div id="con_4-button" class="button">
<img src="картинка" alt="описание" class="button">
</div>
<div id="con_5-button" class="button"><img src="картинка" alt="описание" class="button">
</div>
<div id="con_6-button" class="button"><img src="картинка" alt="описание" class="button">
</div>
<div class="clear"></div>
<div id="content">
<div id="home">
<p>Содержание для пункта home</p>
</div>
<div id="about">
<p>Содержание для пункта about</p>
</div>
<div id="contact">
<p>Это содержание для пункта contact</p>
</div>
<div id="con_4"><p>Это содержание для пункта con_4</p>
</div>
<div id="con_5"><p>Это содержание для пункта con_5</p>
</div>
<div id="con_6"><p>Это содержание для пункта con_6</p>
</div>
</div>
</div>
css:
<style>
.clear {
clear: both;
}#page-wrap {
width: 760px;
background: white;
margin: 20px auto;
padding: 20px;
}.button {
float: left;
margin: 10px;
}#home {
display: block;
padding: 30px;
}
#home-button {
opacity: 1.0;
border-bottom: 1px solid black;
}#about {
display: none;
padding: 30px;
}
#about-button {
opacity: 0.5;
border-bottom: 1px solid black;
}#contact {
display: none;
padding: 30px;
}
#contact-button {
opacity: 0.5;
border-bottom: 1px solid black;
}#con_4 {
display: none;
padding: 30px;
}
#con_4-button {
opacity: 0.5;
border-bottom: 1px solid black;
}
#con_5 {
display: none;
padding: 30px;
}
#con_5-button {
opacity: 0.5;
border-bottom: 1px solid black;
}
#con_6 {
display: none;
padding: 30px;
}
#con_6-button {
opacity: 0.5;
border-bottom: 1px solid black;
}
</style>