MozillaPL.org - polskie centrum Mozilli

Główne menu:

funkcja transform: rotate nie dziła prawidłowo w firefox

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

funkcja transform: rotate nie dziła prawidłowo w firefox

Postautor: lura » 02 czerwca 2012, 10:00

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0

Podczas tworzenia strony użyłem funkcji transform: rotate jednak nie widząc żadnych efektów jej działania w Firefoksie, sprawdzałem na innych przeglądarkach: chrome, opera i wszystko działa. Tylko na FF nie, ponad to pozycjonowanie absolutne tak nie działa na div-ach z rotacją. Możźecie mi pomóc. Wklejam kod strony:
Kod: Zaznacz cały
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
   <style type="text/css">
 /* <![CDATA[ */
        body{
        background-image:url(img/tlo.jpg);}
       
        div{
          border-radius:10px;
          margin:5px;
          padding:5px;}
                   
        div#container{
          position:absolute;
          top:250px;
          left:300px;
          margin:auto;
          width:800px;
          height:100%;
         
          background: rgba(255, 255, 255, 0.65)  }
         
        div#tekst_pl {
          width:380px;
          min-height:250px;
          float: left;
          background:#fff url(img/Poland.png) 50% 50% no-repeat;}
       
        div#tekst_esp {
          width:380px;
          min-height:250px;
          float: left;
          background:#fff url(img/Peru.png) 50% 50% no-repeat;}
       
        div#menu {
          position:fixed;
          top:0px;
          right:0px;
          width:150px;
          min-height:300px;
          background-color:#e7e7e7;}
       
        div#tekst_pl p#esp{
          display:none;}
         
        div#tekst_esp p#pl{
          display:none;}
       
        div#1{
          position:absolute;
          top:300px;
          left:13px;
          transform: rotate(30deg);
          -ms-transform: rotate(30deg);
          -webkit-transform: rotate(30deg);
          -o-transform: rotate(30deg);
          -moz-transform: rotate(30deg);
          -moz-transform-origin: top left;
          }
         
        div#2{
          position:absolute;
          top:125px;
          left:5px;
          transform: rotate(-5deg);
          -ms-transform: rotate(-5deg);
          -webkit-transform: rotate(-5deg);
          -o-transform: rotate(-5deg);
          -moz-transform: rotate(-5deg);}
         
        div#3{
          position:absolute;
          top:575px;
          left:25px;
          transform: rotate(10deg);
          -ms-transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
          -o-transform: rotate(10deg);
          -moz-transform: rotate(10deg);}
         
        div#4{
          position:absolute;
          top:765px;
          left:-4px;
          transform: rotate(-13deg);
          -ms-transform: rotate(-13deg);
          -webkit-transform: rotate(-13deg);
          -o-transform: rotate(-13deg);
          -moz-transform: rotate(-13deg);}
                 
        div#5{
          position:absolute;
          top:45px;
          left:413px;
          transform: rotate(20deg);
          -ms-transform: rotate(20deg);
          -webkit-transform: rotate(20deg);
          -o-transform: rotate(20deg);
          -moz-transform: rotate(20deg);}
         
        img {
          border:1px #f0f0f0 solid;
          padding:15px 15px 45px;
          background-color:#fff;
          box-shadow: 2px 2px 10px #888888;}
       
        div#logo{
          position:absolute;
          top:0;
          left:0;
          width:400px;
          height:210px;
          margin:0;
          padding:0;
          border-radius:0 0 10 0;
          background: url(img/logo.jpg) 0 0 no-repeat;
          box-shadow: 1px 1px 5px #888888;}
 /* ]]> */
 </style>
  <title>
            Holla Peru!- Ola w Peru
  </title>
  </head>
  <body>
 
      <div id="logo">
        <h1>Holla Peru</h1>
        <h2>Ola w Peru</h2>
      </div>
      <div id="1"><img src="img/1.jpg"/></div>
      <div id="2"><img src="img/2.jpg"/></div>
      <div id="3"><img src="img/3.jpg"/></div>
      <div id="4"><img src="img/4.jpg"/></div>
      <div id="5"><img src="img/5.jpg"/></div>
     
      <div id="container">
        <div id="tekst_pl">
          <!--tekst w jęzuku polskim -->
          <p id="pl"> po polskiemu </p>
          <p id="esp">po hiszpańsku   </p>
        </div>
        <div id="tekst_esp">
          <!--tekst w jęzuku hiszpańskim -->
          <p id="pl"> po polskiemu  </p>
          <p id="esp">po hiszpańsku   </p>
        </div>
      </div>
      <div id="menu">
      <p>menu</p>
      </div>
     
  </body>
</html>
lura
 

Odp: funkcja transform: rotate nie dziła prawidłowo w firefo

Postautor: dexter » 02 czerwca 2012, 11:24

Przeglądarka: Mozilla/5.0 (Windows NT 6.0; rv:14.0) Gecko/20120507 Firefox/14.0a2

Tak, to nie będzie działać w Firefoksie.

W Świętej Specyfikacji napisano: Zaprawdę powiadam wam, nie zaczynajcie nazw klas i identyfikatorów cyfrą.
dexter
Moderator
 
Posty: 7266
Z nami od: 02 października 2004, 21:30

Odp: funkcja transform: rotate nie dziła prawidłowo w firefo

Postautor: lura » 02 czerwca 2012, 14:47

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0

Dziękuję, nazwy zmienione i wszystko pięknie działa.
lura
 


Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Bing [Bot], dexter, Google [Bot], Katoda

Przejdź do powiązanej strony

Nawigacja:

Stopka: