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
Niktoś
post
Post #2





Grupa: Zarejestrowani
Postów: 1 195
Pomógł: 109
Dołączył: 3.11.2011

Ostrzeżenie: (10%)
X----

Ja bym zdecydowanie do tego użył pozycjonowania absolute i pobawił się z-indexami.

Ten post edytował Niktoś 3.04.2012, 19:50:29
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: 14.10.2025 - 04:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn