Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Źrenice nie chcą być na swoich miejscach, wbrew pozorom problem typowy dla css;)
Teppic
post
Post #1





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.09.2008

Ostrzeżenie: (0%)
-----

Chodzi po prostu o to, że chcę stworzyć "ludzika" używając tylko css3. Już przy tworzeniu głowy napotkałem taki problem, że źrenice, czyli "<p>" przetrzymujące literkę "o" nie chce wylądować w "divie" o nazwie "eye", tylko ląduje pod nim. Domyslam się, że coś z "positionami: jest tu nie tak u mnie. Proszę o pomoc.

Oto kod:

[PHP] pobierz, plaintext 
  1. body{
  2. margin:0 auto;
  3. text-align:center;
  4. padding:0;
  5. }
  6.  
  7. #outer{   /*box with head and eyes */
  8. overflow:hidden;
  9. width: 102px;
  10. margin:0 auto;
  11. border: 1px black solid;
  12. }
  13.  
  14. #head{  /*  head */
  15. position:relative;
  16. -moz-border-radius: 220px;
  17. -webkit-border-radius: 220px;
  18. -o-border-radius: 220px;
  19. width: 100px;
  20. height: 100px;
  21. background: yellow;
  22. }
  23.  
  24. .eye{ /*  eye */
  25. position:absolute;
  26. -moz-border-radius: 10px;
  27. -webkit-border-radius: 10px;
  28. -o-border-radius: 10px;
  29. width: 20px;
  30. height: 16px;
  31. background: white;
  32. border: 1px black solid;
  33. text-align:center;
  34. }
  35.  
  36. #left{ /*  positioning left eye */
  37. margin: 22px 0 0 15px;
  38. }
  39.  
  40. #right{ /*  positioning right eye */
  41. margin: 22px 15px 0 60px;
  42. }
  43.  
  44. .appleoftheeye{ /*  to jest źrenica, w tym wypadku literka "o" */
  45. font-size:15px;
  46. font-weight:bold;
  47. }
  48.  
  49. #mouth{ /* usta */
  50. position:absolute;
  51. -moz-border-radius: 0 0 69px 69px;
  52. width: 66px;
  53. height: 22px;
  54. background: white;
  55. border: 1px black solid;
  56. margin: 66px 0 0 15px;
  57. }
  58.  
[PHP] pobierz, plaintext


A to kod html:

[PHP] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="outer">
  4.  
  5.  
  6. <div id="head">
  7.  
  8. <div class="eye" id="left"> <p class="appleoftheeye">o</p> </div> 
  9. <div class="eye" id="right"> <p class="appleoftheeye">o</p> </div>
  10.  
  11. <div id="mouth"></div>
  12.  
  13.  
  14. </div>
  15.  
  16.  
  17.  
  18.  
  19. </div>
  20.  
  21.  
  22.  
  23. </body>
[PHP] pobierz, plaintext


Jeszcze pytanie: Czy można napisać tą glowę bardziej prostym kodem? Np. za pomocą "relative" i "z-index"? Czy mój sposób jest najprostszy?

Ten post edytował Teppic 3.04.2012, 19:41:47
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Teppic
post
Post #2





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.09.2008

Ostrzeżenie: (0%)
-----

Dzieki Kshyhoo ale jeszcze w swojej nauce nie doszedłem do transformacji;P. Jak się poduczę to oczywiscie sprobuję tego ciekawego zjawiska.

Co do mojego problemu to n niejako wymusiłem wlasciwe pozycje "<p>" nadając mu parametr "padding" na 0 i "margin": na -3px. Ale dziwię się dlaczego nie ustawiły mi się w centrum diva... przecież dalem mu parametr "text-align: center";/.

Z-indexami się pobawię, na pewno;P A czy nie jest tak, że "z-index" nadaje się tylko boxom o position "relative"?

Edit: Kolejny problem, nie działa mi "overflow: hidden" w Chrome:


[PHP] pobierz, plaintext 
  1. /*  box trzymający buzię z językiem */
  2. div.kontener{
  3. position:absolute;
  4. width:66px;
  5. border:0;
  6. padding:0;
  7. margin: 66px 0 0 15px;
  8. }
  9.  
  10. /*  definiujemy język */
  11. .tongue{
  12. position:relative;
  13. display:block;
  14. overflow:hidden;
  15. -moz-border-radius: 0 0 69px 69px;
  16. -webkit-border-radius: 0 0 69px 69px;
  17. -o-border-radius: 0 0 69px 69px;
  18. width: 66px;
  19. height: 22px;
  20. background: white;
  21. border: 1px black solid;
  22. }
  23.  
  24.  
  25. .dot{ /*  okrąg tworzący jedną stronę języka */
  26. position:absolute;
  27. background:red;
  28. width:36px;
  29. height:36px;
  30. -moz-border-radius: 99px;
  31. -webkit-border-radius: 99px;
  32. -o-border-radius: 99px;
  33. -moz-box-shadow: 2px -2px 5px #888888;
  34. -webkit-box-shadow: 2px -2px 5px #888888;
  35. -o-box-shadow: 2px -2px 5px #888888;
  36. }
  37.  
  38. #ldot{
  39. left: 3px;
  40. top: 5px;
  41. margin:0;
  42. }
  43.  
  44. #rdot{
  45. right: 6px;
  46. top: 5px;
  47. margin:0;
  48. }
[PHP] pobierz, plaintext


Chodzi o to by kontener "tongue" zakrywal doly dwóch tych divów "dot" tak by te nachodząc na siebie tworzyly języczek;P. Firefox wszystko ladnie wyswietla natomiast Chrome nie!


Ten post edytował Teppic 3.04.2012, 21:06:20
Go to the top of the page
+Quote Post

Posty w temacie
- Teppic   [CSS]Źrenice nie chcą być na swoich miejscach   3.04.2012, 19:36:36
- - Kshyhoo   Zobacz to: [HTML] pobierz, plaintext <div class...   3.04.2012, 19:49:41
- - Niktoś   Ja bym zdecydowanie do tego użył pozycjonowania ab...   3.04.2012, 19:50:00
- - Teppic   Dzieki Kshyhoo ale jeszcze w swojej nauce nie dosz...   3.04.2012, 20:04:17

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 12.10.2025 - 03:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn