Show - Hide text – CSS – Fórum

Ahoj,

Snazim sa pomocou CSS spravit FAQ.

Konkretne nieco na sposob:

http://css.interval.cz/clanky/odkaz-vice/

Bude titulok :

Hlavne mesto Slovenska je?

//////////////////telo////// - to este nebude zatial vidno, ale ak sa klikne na titulok tak sa zobrazi telo...

Dik :smile2:

Nahlásit jako SPAM

IP: 217.119.119.–

Manq0

Věrný člen

30. 12. 2007 #2

Pomocí CSS tohle nejde. Už ti to říkáme na JPW.

Nahlásit jako SPAM

IP: 85.71.63.–

(x)HTML & CSS kodér webových stránek → http://manq.name

pawlik0

Grafoman

Kultivátor příspěvků ve starém fóru – 1.87 % z celku

30. 12. 2007 #3

To tylik : V CSS máš asi smůlu, nevim. Ale přesto že JavaScript nesnáším, na to se hodí. Zkontroluj si to, překlepnout se můžge každý ;-)



<!-- ------ JAVASCRIPT ----------->

<SCRIPT TYPE="text/css"><!--

function view(neco){

w=document.getElementById(neco).style; 

w.display=(w.display == 'block')?'none':'block';

}

--></script>



<!-- ----------- CSS -------------->

<STYLE TYPE="text/css"><!--

.skryty {display: none;}

--></STYLE>



<!-- ------ (X)HTML ---------------->

<DIV onClick="view("idecko")">Hlavne mesto Slovenska je? </DIV>

<DIV ID="idecko" CLASS="skryty"> Bratislava? :P</DIV>

Nahlásit jako SPAM

IP: 84.42.152.–

Sa Nata A Na. Howgh

Petroff0

Věrný člen

3. 1. 2008 #4

To Manq :
Příklad toho, že to jde s css only:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Rozbal článek</title>

<style>

#Text {

margin: 10px 20%;

border-bottom: 2px solid black;

}

#Text div {

border-top: 2px solid black;

}

#Text a {

position:relative;

display:block;

color: black;

font: bold 1.2em Verdana;

text-decoration: none;

}

#Text a:focus {

color: blue;

background: white;

border: 1px dotted blue;

margin: 2px 0;

top: -5px;

}

#Text p {

display:none;

}

#Text :focus + p {

color: blue;

display:block;

margin: 4px 0;

}

</style></head><body >



<div id="Text">

<div id="1"> <a href="#"> První článek </a>

<p>První První První První První První První První 

Pellentesque non augue ac felis rutrum imperdiet.

Pellentesque non augue ac felis rutrum imperdiet.

Pellentesque non augue ac felis rutrum imperdiet.

Pellentesque non augue ac felis rutrum imperdiet.

Pellentesque non augue ac felis rutrum imperdiet.

Pellentesque non augue ac felis rutrum imperdiet.

</p>

</div>

<div id="2"> <a href="#"> Druhý článek </a>

<p>Druhý Druhý Druhý Druhý Druhý Druhý Druhý

Nulla semper rhoncus eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla semper rhoncus eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla semper rhoncus eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla semper rhoncus eros. </p>

</div>

<div id="3"> <a href="#">Třetí článek </a>

<p>Třetí Třetí Třetí Třetí Třetí Třetí Třetí Třetí 

Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus

vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis

dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber

Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum

imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam

commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.

Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,

commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur

fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>

</div>

<div id="4"> <a href="#">Čtvrtý článek </a>

<p>LAST LAST LAST LAST LAST

Vestibulum scel felis a fermentum imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus.

Aliquam commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.Aliquam commodo libero elei fend ipsum.

Aliquam consequat fringilla sem. Donec at nun.</p>

</div>

</div>



</body>

</html>

Nevýhody: omezené možnosti => vzhled, kódování a podpora browserů

Nahlásit jako SPAM

IP: 89.102.96.–

JMM

~ Redaktor

Grafoman

Kultivátor příspěvků ve starém fóru – 9.04 % z celku

3. 1. 2008 #5

To Petroff : jj jde to... ale v IE6 ti to teda nejde... only css prostě nejde!!! A Opera to samé

Nahlásit jako SPAM

IP: 85.71.16.–

Jan Malý | web: www.malyphoto.cz, @malyphoto

Petroff0

Věrný člen

4. 1. 2008 #6

Dyť říkám - omezené možnosti , v budoucnu s browsery kt. "umí" standardy bude situace trochu jiná.
OPERA má velmi zvláštní chování:
Nestačí kliknout, je třeba přidržet tlačítko myši a vodorovně popojet (stačí "vymodřit" jediný znak nadpisu) => a článek je na světě.
Vylepšil bych to tímto:

#Text a:active, #Text a:focus {

color: blue;

background: white;

border: 1px dotted blue;

margin: 2px 0;

top: -5px;

}

#Text :active + p, #Text :focus + p {

color: blue;

display:block;

margin: 4px 0;

}

Tím OPERA naopak bude umět víc než ostatní ( rozvinutí dle potřeby i více článků současně, funkce náhled =článek se zobrazí jen po dobu stisku tlačítka)

:smile10:
bud se clovek popere
s kodem co jde v opere
(anebo mu nevadi
jak opera vyvadi)

Nahlásit jako SPAM

IP: 89.102.96.–

Manq0

Věrný člen

4. 1. 2008 #7

To Petroff : No, prostě to bez JS nejde. Neradím věci, které fungují jen ve FF a ještě špatně.

Nahlásit jako SPAM

IP: 85.71.63.–

(x)HTML & CSS kodér webových stránek → http://manq.name

Petroff0

Věrný člen

5. 1. 2008 #8

Ono je to podobné jako s rozbalovacími menu - css only se taky potýkají s problémy vzhledu, taky se klikací rozbalování nevyužívá, taky IE6 nefunguje...
Oproti dokonalým JS menu "fungují špatně". Ale podle mého je špatné když při vypnutém JS nefungují vůbec.

Nahlásit jako SPAM

IP: 89.102.96.–

JMM

~ Redaktor

Grafoman

5. 1. 2008 #9

To Petroff : Njn jenže ta nefunkčnost je u tebe i bez JS. Pač mrtě lidí stále používá IE6, a pak "hrstka" Operu

Nahlásit jako SPAM

IP: 85.71.16.–

Jan Malý | web: www.malyphoto.cz, @malyphoto

Manq0

Věrný člen