Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ CSS _ Co zrobić aby tekst nie przechodził do nowej lini?

Napisany przez: kari 17.01.2008, 19:20:43

Upraszczając sprawę, to w css'ie mam coś takiego:

[HTML] pobierz, plaintext 
#srodkowanie { 
position: absolute;
left:     50%;
right:    50%; }
[HTML] pobierz, plaintext

W html'u wygląda to następująco:

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/div.html id="srodkowanie">
<http://december.com/html/4/element/div.html id="tekst"><http://december.com/html/4/element/p.html>tekst tekst tekst</http://december.com/html/4/element/p.html></http://december.com/html/4/element/div.html>
</http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext

I teraz co zrobić, aby tekst nie był dzielony przy każdej spacji.

Napisany przez: czachor 17.01.2008, 19:46:14

Kod

#tekst p {
white-space: nowrap;
}

(dla IE działa od v6)

Napisany przez: kari 17.01.2008, 20:38:43

A wcześniejsze wersje?
Mam jeszcze jedno pytanie. Po zastosowaniu sposobu ze strony http://www.twinhelix.com/css/iepngfix/ na przezroczyste png w IE, nie chce mi w tej przeglądarce działać "background-repeat". Jest na to jakiś sposób?

Napisany przez: czachor 17.01.2008, 20:59:17

A wcześniejsze wersje niet :] Możesz próbować szukać jakiegoś hacka, ale wątpię, żeby był na to. A niżej hack na przezroczystość PNG (używam go na mojej stronie).

Kod

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:


*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Napisany przez: batman 17.01.2008, 21:08:19

W CSS nie ma raczej hack-a na nowrap w IE6. Wydawało mi się, że to działa w IE6.
Jeśli nie chcesz, by się Twoja strona poprawnie walidowała, możesz użyć znacznika:

[HTML] pobierz, plaintext 
<nobr>jakis tekst</nobr>
[HTML] pobierz, plaintext

Jednak jak już wspomniałem, nie przejdzie on walidacji.

Napisany przez: kari 19.01.2008, 18:55:38

Jeszcze coś, co mnie dość irytuje
Teksty mam umieszczone w znacznikach <p></p>. I teraz w FF powoduje to, że mają one pewien margines, a IE wyświetla wszystko dobrze. Jak możżna usunąć ten margines i tak w zasadzie do czego on służy??

A co do skryptu czachor'a, to używałem go wcześniej, ale od jakiegoś czasu nie chce działać. i to nie tylko mi.

Napisany przez: sopel 19.01.2008, 19:05:04

p{margin:0;padding:0}

niektóre przeglądarki mają dla kilku elementów prdefiniowane style, np. marginesy. zawsze możesz sprobować http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Napisany przez: kari 21.01.2008, 10:56:37

Następne pytanie
Wykonałem sobie proste menu w css. Użyłem w nim polecenia "div:hover#przycisk1 { background-position: 0 20px; }". Tyle, że w IE jak zwykle to nie chce zadziałać. Jest jakiś sposób na poprawienie tego dla IE?

Napisany przez: batman 21.01.2008, 10:58:20

IE ma to do siebie, że nie interpretuje pseudoklasy :hover dla elementów innych niż a. Poszukaj na google "css hover ie".

Napisany przez: mike 21.01.2008, 11:15:38

Kod

div#przycisk1:hover { background-position: 0 20px; }

2. Gotowiec: http://www.xs4all.nl/~peterned/csshover.html