Вкладки для сайта.

                        
HTML:

<div class="tabs">

    <input type="radio" name="inset" value="" id="tab_1" checked>

    <label for="tab_1">Вкладка № 1</label>



    <input type="radio" name="inset" value="" id="tab_2">

    <label for="tab_2">Вкладка № 2</label>



    <input type="radio" name="inset" value="" id="tab_3">

    <label for="tab_3">Вкладка № 3</label>



    <input type="radio" name="inset" value="" id="tab_4">

    <label for="tab_4">Вкладка № 4</label>



    <div id="txt_1">

        <p>Произвольное содержимое...</p>

        <p>Произвольное содержимое...</p>

        <p>Произвольное содержимое...</p>

    </div>

    <div id="txt_2">

        <p>Вторая вкладка</p>

    </div>

    <div id="txt_3">

        <p>Размеры содержимого вкладок</p>

        <p>могут отличаться по высоте!</p>

    </div>

    <div id="txt_4">

        <img src="image/logo.png" width="533" height="77" alt="Лого">

    </div>

</div>



CSS:

<style type="text/css">

.tabs { width: 100%; padding: 0px; margin: 0 auto; }

.tabs>input { display: none; }

.tabs>div {

    display: none;

    padding: 12px;

    border: 1px solid #C0C0C0;

    background: #FFFFFF;

}

.tabs>label {

    display: inline-block;

    padding: 7px;

    margin: 0 -5px -1px 0;

    text-align: center;

    color: #666666;

    border: 1px solid #C0C0C0;

    background: #E0E0E0;

    cursor: pointer;

}

.tabs>input:checked + label {

    color: #000000;

    border: 1px solid #C0C0C0;

    border-bottom: 1px solid #FFFFFF;

    background: #FFFFFF;

}

#tab_1:checked ~ #txt_1,

#tab_2:checked ~ #txt_2,

#tab_3:checked ~ #txt_3,

#tab_4:checked ~ #txt_4 { display: block; }

</style>