Problema Tabs efect cu CSS - redimensionare dupa Content
Coduri intrebari, probleme legate de HTML, XHTML si CSS
-
General
- Mesaje: 26
Problema Tabs efect cu CSS - redimensionare dupa Content
Tab ar trebui sa isi modifice dimensiunile in depenta de ce text este in el insa el nu se modifica, puteti sa ma ajutati?
content este locul unde stau textele si acolo i-am pus height: 100% dar nu merge.
Asta e codul html:
Cod: Selectaţi tot
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Descriere</label>
<div class="content">
<p align="justify">Un text<br></p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Test1</label>
<div class="content">
<p align="justify">
Un text oarecare
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Test2</label>
<div class="content">
<p align="justify">
Un text oarecare
</div>
</p>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Test3</label>
<div class="content">
<p>Text</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">Test4</label>
<div class="content">
<p align="justify">
Text
</p>
</div>
</div>
</div>
Acesta e codul css:
Cod: Selectaţi tot
.tabs {
position: relative;
min-height: 400px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
height: 100%;
top: 28px;
left: 0;
background: #f8f8f8;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Desi poate nu m-am exprimat eu corect, eu din toata chestia asta, vreau sa primesc ceva de genul cum aici (numai ca eu nu folosesc aici jquery ci numai css):
jqueryui.com/tabs/
MarPlo
Mesaje: 4343
Salut
Incearca fara proprietatile "height" si "bottom" la .content.
Adica asa:
Cod: Selectaţi tot
.content {
position: absolute;
top: 28px;
left: 0;
right: 0;
background: #f8f8f8;
border: 1px solid #ccc;
padding: 20px;
}
- Edit: Aici ->
Tabs effect with CSS e un exemplu functional.
Subiecte similare
-
mysql Update dupa nume
PHP - MySQL - XML
Primul mesaj
Salutari,
Incerc de ceva timp sa fac sa imi salveze informatiile jucatorului in baza de date, o data inserate vreau atunci cand gaseste din nou...
Ultimul mesaj
Cand se creaza tabelul in baza de date, coloana nickname trebuie sa fie de tip UNIQUE KEY .
Iar id-ul ar trebui sa fie o valoare care sa nu o mai...
-
După Lună, China se îndreaptă spre Marte
Stiri Deosebite
După ce a cucerit Luna, China se îndreaptă direct spre Marte.
<img style='width:99%' src='/forum/images/china_probe_rocket.webp' alt='China...
-
Select dupa mai multe coloane in baza de date
PHP - MySQL - XML
Primul mesaj
Salut
am si eu o baza de date zona_geografica in care am rubricile
id |nume_tara |nume_oras |id_tara |id_oras | nume_zona | id_zona | data
1 |...
Ultimul mesaj
Multumesc mult pentru ajutor .
-
Problema instalare Anime.JS
JavaScript - jQuery - Ajax
Primul mesaj
Salutare!
1. 6 decembrie 2020, 23.15 - download Anime.JS
2. Putin mai devreme, am incercat sa downloadez acest concept bazat pe JavaScript.
3....
Ultimul mesaj
Nu am inteles care e concret problema pe care o ai cu scriptul anime.js.
-
Problema curs de Engleza
Sesizari Erori si Greseli
Primul mesaj
Buna.
Am descarcat cursul curs_eurocor-engleza_incepatori_1-16.rar si cand vreau sa-l dezarhivez imi da eroarea asta:
An error occures whilw...
Ultimul mesaj
Buna,
Poti sa descarci cursul de engleza, nivel intermediar, de la urmatoarele linkuri:
- Lectiile 1-16...
-
O mica problema de animatie CSS
HTML - XHTML - CSS
Primul mesaj
Noroc, MarPlo!
1. Am vizitat pe twitter un site de animatie, in care website-ul actual se numeste CSS-Challenges,com. In respectivul website, sunt...
Ultimul mesaj
1. Multumesc pentru raspuns.
2. Am inteles raspunsul tau: este un mic examen oferit voluntarilor online, pentru a le afla capacitatile de rezolvare...