Problem sa <pre>

[ anon315 @ 23.03.2005. 14:01 ] @

Svuda sam koristio % kod margina, tabela itd. da bi se stranica lepo videla (bez horizontalnog skrola) na razlicitim rezolucijama. Sve je ispalo super dok nisam ubacio <pre> tag ! Cim ubacim jedan takav tag i strpam neki tekst unutra vise mi stranica ne izgleda kako sam hteo. Vec na 1024x768 se pojavi horizontalni skrol. Pokusao sam da napravim paragraf koji ce da mi radi ovaj posao sa white-space:pre; osobinom, medjutim i dalje se javlja isti problem. Zasto ?

Code:

pre.code {
background-color: #CCFFCC;
margin: 2% 10% 2% 10%;
border: 1px dotted black;
padding: 10px;
text-align: left;
font-size: medium;
}

Pozdrav

[ Br@nkoR @ 23.03.2005. 14:39 ] @

Jer ti želiš da tekst unutar pre taga "prelomi" odnosno pređe u novi red kada dođe do ivice elementa u kome se nalazi, odnosno da ne dolazi u FF do overflow-a odnosno u IE da ne proširuje element.

[ noviKorisnik @ 23.03.2005. 14:39 ] @

Code:
pre
{
width: 69%;
overflow: auto;
}

[ Br@nkoR @ 23.03.2005. 14:44 ] @

Znači to je to, to može uraditi i CSS:

Code:

pre.code {
background-color: #cfc;
margin: 2% 10%;
border: 1 dotted black;
padding: 10px;
text-align: left;
font-size: medium;
white-space: -moz-pre-wrap; /* za NS (mozilla) */
word-wrap: break-word; /* za IE */
}

[ anon315 @ 23.03.2005. 15:04 ] @

Bravo, imam dakle 2 mogucnosti, ali sad ste me bacili u dilemu, ne znam sta da izaberem :o)

Resenje koje je dao noviKorisnik je dobro jer mi ne lomi kod pa kod ostane citljiv - bas onako kako je napisan - ali se pojavi "lokalni" skrol.

Resenje koje je dao Br@nkoR je dobro jer se nigde ne pojavljuje skrol, ali lose jer lomi kod.

Jasno je da moram da izaberem jedno od ove dve varijante, pa me zanima vase subjektivno misljenje - sta vam je lepse.

Pozdrav

[ noviKorisnik @ 23.03.2005. 15:09 ] @

To dođe kao Word-wrap opcija u programima. Tamo to može da se uključi ili isključi. Možda da ponudiš da korisnik bira šta mu više odgovara. Jedno dugme za menjanje stila...

[ anon315 @ 23.03.2005. 15:17 ] @

Jel moze neko brzo resenje kako to da uradim ?

Znaci, kako da kad recimo se kline na Link1 da se koristi stil Code1, a na Link2 stil Code2 ?

[ noviKorisnik @ 23.03.2005. 19:15 ] @

Code:
.wrap
{
    /* wrap ispis */
}
.nowrap
{
    /* horizontalni skrol */
}
...
<button onclick="toggleClasses ('codebox', 'wrap', 'nowrap');">wrap / nowrap</button>
...
<pre id="codebox" class="wrap">gomila preformatiranog teksta</pre>
...
function toggleClasses (nodeId, className0, className1)
{
    var node = document.getElementById (nodeId);
    if (node === null) return;
    node.className = node.className == className0 ? className1 : className0;
}