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...
-
Ajax fade mesaj si redirect dupa un timp
JavaScript - jQuery - Ajax
Primul mesaj
Am codul asta si vreau in loc de input type=button sa fie submit, dar sa imi dea fade la fel in 5 secunde de cand apare eroarea.
Daca schimb cu...
Ultimul mesaj
Am rezolvat,multumesc frumos de ajutor
-
Resetare input type text dupa submit
JavaScript - jQuery - Ajax
Primul mesaj
Dupa ce dau enter sau click si a trimis mesajul nu mii se reseteaza input textul,imi trmite catre mysql fara reload incarca textul prin div dar nu...
Ultimul mesaj
\Multumesc, codul din raspunsul tau functioneaza
-
Arata profil pe prima pagina dupa delogare
Discutii si Intrebari Diverse
Primul mesaj
Salut,facebook are asa ceva implementat
faceprofil.png
Stii cumva unde pot gasi un script php la fel?adica dupa ce ma deloghez de pe site sa...
Ultimul mesaj
Salut,
Nu cunosc un astfel de script. Trebuie facut special pe scriptul de logare care-l ai, cu retinerea in baza de date sau cookie a ultimului...
-
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 .