Zaloguj | Zarejestruj | FAQ
Anonymous

Plywajacy obrazek i tekst

+ Odpowiedz

Posty: 6 Strona 1 z 1


Plywajacy obrazek i tekst

przez Bish » N maja 13, 2012 10:48 pm

Witam
Ucze sie dopiero CSS'a, wiec prosze o wyrozumialosc.
Odnoszac sie do lekcji: http://pl.html.net/tutorials/css/lesson13.php -o elementach plywajacych, mam problem z tym kodem:
Plik HTM
Kod: Zaznacz cały
<div id="picture">
      <img src="bill.jpg" alt="Bill Gates">
   </div>

   <p>causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>

Plik CSS
Kod: Zaznacz cały
#picture {
      float:left;
      width: 100px;
   }

Moze i banalne, lecz na poczatku sam sobie napisalem ten kod. Okazalo sie, ze tekst zamiast oslaniac zdjecie, po prostu znajduje sie na nim jakby to zdjecie bylo tlem.
Poszedlem na latwizne i metoda kopiego pejsta wszystko skopiowalem do odpowiednich plikow, otwieram strone i znowu to samo.

Problem wystepuje na przegladarkach Google Chrome oraz Firefox, gdzie na IE wszystko smiga bez problemu.
Od czego to zalezy? I jak to naprawic?

Pozdrawiam Bish
Avatar użytkownika

Bish

  • Posty: 3
  • Dołączył(a): N maja 13, 2012 10:38 pm

Re: Plywajacy obrazek i tekst

przez XainPro » Pn maja 14, 2012 6:27 am

zobaczyć jego pracę.
i powinny użyłeś resetu CSS, aby podobna do wszystkich przeglądarkach

Kod: Zaznacz cały
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
#picture {
      float:left;
      width: 100px;
     background-color:#006;
   }
   </style>
</head>
<body>
    <div id="picture">
          <img src="bill.jpg" alt="Bill Gates">
       </div>

       <p>causas naturales et antecedentes,
       idciro etiam nostrarum voluntatum...</p>
</body>
</html>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Plywajacy obrazek i tekst

przez Bish » Pn maja 14, 2012 9:28 am

Okej, moj blad. Powinienem najpierw caly artykul przeczytac. Ale... Po zmianie kodu nic się nie zmieniło w wyswietlaniu. Nadal tekst nachodzi na zdjecie, czyli jakbym w ogole nie uzyl clear:both;. Najlepsze jest to, ze na IE wszystko dziala poprawnie, a na calej reszcie przegladarek juz nie.
Oto kod, ktory ja posiadam:
Plik HTM:
Kod: Zaznacz cały
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
#picture {
      float:left;
      width: 100px;
     background-color:#006;
   }
   </style>
</head>
<body>
    <div id="picture">
          <img src="bill.jpg" alt="Bill Gates">
       </div>

       <p>causas naturales et antecedentes,
       idciro etiam nostrarum voluntatum...</p>
</body>
</html>

Plik CSS:
Kod: Zaznacz cały
#picture {
      float:left;
      width: 100px;
   }

   .floatstop {
      clear:both;
   }

Od czego to zalezy?
Avatar użytkownika

Bish

  • Posty: 3
  • Dołączył(a): N maja 13, 2012 10:38 pm

Re: Plywajacy obrazek i tekst

przez XainPro » Pn maja 14, 2012 4:58 pm

że właśnie z powodu problemu szerokość szerokość Picture # w CSS i Szerokość
img elementem powinna być taka sama jak pokazałem czerwoną czcionką

<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
#picture {
float:left;
width: 100px;
background-color:#006;
display:block
}
</style>
</head>
<body>
<div id="picture">
<img src="bill.jpg" alt="Bill Gates" width="100px" >
</div>

<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</body>
</html>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Plywajacy obrazek i tekst

przez Bish » Pt maja 18, 2012 12:38 pm

Ooo... teraz wszystko chodzi jak powinno :)
Dzieki za pomoc ;)

Mam jeszcze pytanie do autora tej lekcji 13. Dlaczego tak bardzo kod podany przez XainPro a ten z lekcji sie roznia?
Avatar użytkownika

Bish

  • Posty: 3
  • Dołączył(a): N maja 13, 2012 10:38 pm

Re: Plywajacy obrazek i tekst

przez XainPro » So maja 19, 2012 7:34 am

mentionne pas.
apprentissage heureux
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1