Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [inne]Obrazek na strone
Adams911
post
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.10.2010

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

Chciałbym dowiedzieć jak nazywają się takie obrazek jak jest na dole tej strony tu. Dokładnie chodzi o te choinki i śnieg i jak zrobić aby nie przeszkadzały one w klikaniu na linki itp ale aby nadal były na innych elementach
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
Wicepsik
post
Post #2





Grupa: Zarejestrowani
Postów: 1 575
Pomógł: 299
Dołączył: 26.03.2009

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

[HTML] pobierz, plaintext 
  1. <div id="swieta"></div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. #swieta { margin: auto; height: 276px; width: 100%; background: url(bottom.png) no-repeat bottom center; border: 0px; position: fixed; bottom: 0; left: 0; z-index: 1000; }
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
Damonsson
post
Post #3





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

Lektura kursów CSS i 2 pojęcia:
'Position'- w Twoim przypadku 'fixed'
'z-index'
Go to the top of the page
+Quote Post
Adams911
post
Post #4





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.10.2010

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

no tak ale na co mam zmienić aby było dobrze
Go to the top of the page
+Quote Post
Damonsson
post
Post #5





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

Twój obrazek jest prostokątem, to że nie ma choinek i śniegu, nie znaczy, że obrazka tam nie ma, on jest tylko przezroczysty w tamtym miejscu.

Co możesz zrobić? Podzielić ten obrazek na 100 mniejszych i nadawać im takie wymiary do których wizualnie sięgają dane puzzle.

Odpuść sobie, wywal tego diva, bo już niedługo śnieg i tak stopnieje (IMG:style_emoticons/default/winksmiley.jpg)


Możesz dodadać do:

#main {
position: relative;
z-index: 99999;
}

uzyskasz bardziej usability efekt.

Ten post edytował Damonsson 5.01.2011, 19:31:25
Go to the top of the page
+Quote Post
Adams911
post
Post #6





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.10.2010

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

tu jest kod tej strony co mam to umieścić nie ja robiłem więc jej trochę nie ogarniam z kodami 

[HTML] pobierz, plaintext 
  1. /* CSS Document */
  2.  * {
  3.     margin: 0;
  4.     padding: 5;
  5.     } 
  6.  
  7.   body {
  8. 	margin:0;
  9. 	padding:0;
  10. 	font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  11. 	border-top: 2px solid #036;
  12.    background-image: url("backgrou.gif");
  13.   }
  14. h1 {
  15.       padding-right: 15px;
  16.       padding-top: 15px;
  17.       font-size: 15px;
  18.       color: #003399;      
  19.       font-family: Georgia, sans-serif;
  20.       text-align: right;
  21.       background: #99CCFF;
  22.  
  23.    }
  24.  
  25.    #swieta { margin: auto; height: 276px; width: 100%; background: url(bottom.png) no-repeat bottom center; border: 0px; position: fixed; bottom: 0; left: 0; z-index: 1000; }
  26.  
  27.  
  28. #content {
  29.       width: 980px;
  30.       margin-left: auto;
  31.       margin-right: auto;
  32.       text-align:left;
  33.       }
  34.    #sidebar {
  35.       float: left;
  36.       width: 200px;
  37. 		height: 824px;
  38.       background: #99CCFF;
  39.       text-align: center;
  40.       }
  41.  
  42.  
  43.   #main {
  44.       margin:0 0 0 200px; 
  45.       padding:0;
  46.       }
  47.  
  48.  
  49. A.MENUITEM:LINK { font-size: 9pt;
  50. 			color: #003399;
  51. 			text-decoration: none;
  52. 			font-weight: bold; }
  53. A.MENUITEM:VISITED { font-size: 9pt;
  54. 			color: #003399;
  55. 			text-decoration: none;
  56. 			font-weight: bold; }
  57. A.MENUITEM:HOVER { color: #003399;}
  58.  
  59. P.MENUITEM { margin: 2 0 0 0;
  60. 		padding: 5 16 5 16;
  61. 		border-style: solid;
  62. 		border-width: 0;
  63. 		background-color:  #F0F8FF;
  64. 		 }
  65. A.przetarg:LINK { font-size: 9pt;
  66. 			color: #FF0000;
  67. 			text-decoration: none;
  68. 			font-weight: bold; }
  69. A.przetarg:VISITED { font-size: 9pt;
  70. 			color: #FF0000;
  71. 			text-decoration: none;
  72. 			font-weight: bold; }
  73. A.przetarg:HOVER { color: #FF0000;}
  74.  
  75. P.przetarg { margin: 3 0 0 0;
  76. 		padding: 5 16 5 16;
  77. 		border-style: solid;
  78. 		border-width: 0;
  79. 		border-color: #0033CC;
  80. 		background-color:  #F0F8FF;
  81. 		 }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <META name="description" content="Parafia w Skrzatuszu"> 
  5. <meta name="keywords" content="skrzatusz, koszalin, sanktuarium, parafia, diecezja koszalińsko-kołobrzeska, ">
  6. <meta http-equiv="content-language" content="pl">
  7. <link rel="stylesheet" type="text/css" media="all" href="pliki/style.css">
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10.  
  11.   <title>Parafia rzymskokatolicka pw. Wniebowzięcia NMP w Skrzatuszu - sanktuarium Matki Bożej Bolesnej</title>
  12.  
  13. 	<script language="JavaScript1.2">
  14. </script>
  15.  
  16. </head>
  17. <body>
  18.  
  19. <script LANGUAGE= "JavaScript" type= "text/javascript">
  20. var speedTableY = new Array();
  21. var posX = new Array();
  22. var smooth = new Array();
  23. var amplitude = new Array();
  24. var tabB = new Array();
  25. var speed = 50;
  26. var speedLevelsY = 5;
  27. var layersCount = 10;
  28. function ustaw()
  29. {
  30.   clWidth = document.body.clientWidth - 50;
  31.   for (i = 0; i < layersCount; i++){
  32.     posX[i] = Math.ceil(Math.random() * clWidth);
  33.     speedTableY[i] = Math.ceil(Math.random() * speedLevelsY);
  34.     amplitude[i] = Math.ceil(Math.random() * 40 + 20);
  35.     smooth[i] = Math.ceil(Math.random() * 48) + 10;
  36.     tabB[i] = Math.random() * 4;
  37.   }
  38. }
  39. var b = 0;
  40. function start()
  41. {
  42.   clWidth = document.body.clientWidth - 50;
  43.   clHeight = document.body.clientHeight;
  44.   for (i = 0; i < layersCount; i++){
  45.     y = parseInt(document.getElementById('el' + i).style.top);
  46.     y += speedTableY[i];
  47.  
  48.     tabB[i] += Math.PI / smooth[i];
  49.     x = parseInt(Math.sin(tabB[i]) * amplitude[i]) + posX[i];
  50.     if (x >= clWidth){
  51.       x = clWidth;
  52.     }
  53.     document.getElementById('el' + i).style.left = x;
  54.  
  55.     if (y >= clHeight - 45){
  56.       y = -50;
  57.       posX[i] = Math.ceil(Math.random() * clWidth);
  58.       speedTableY[i] = Math.ceil(Math.random() * speedLevelsY);
  59.       amplitude[i] = Math.ceil(Math.random() * 100 + 20);
  60.       smooth[i] = Math.ceil(Math.random() * 48) + 48;
  61.     }
  62.     document.getElementById('el' + i).style.top = y;
  63.   }
  64.   setTimeout('start()', speed);
  65. }
  66.  -->
  67. </SCRIPT>
  68. <BODY onLoad='ustaw();start();'>
  69. <script LANGUAGE= "JavaScript" type= "text/javascript">
  70. <!-- 
  71. for (i = 0; i < layersCount; i++){
  72.   str = '<DIV ID="el' + i + '" ';
  73.   str += 'style = "visibility: visible; ';
  74.   str += 'width=50px; ';
  75.   str += 'heigth=45px; ';
  76.   str += 'position: absolute; ';
  77.   str += 'top: 1; ';
  78.   str += 'left: 1;">';
  79.   str += '<IMG SRC="http://kamilscheicht.com/udostepnione/snow7.gif">';
  80.   str += '</DIV>';
  81.   document.write(str);
  82. }
  83.  
  84. </SCRIPT>
  85. <center>
  86.  
  87.  
  88.  
  89. <tr>
  90. <div id="content">
  91.  
  92.    <div id="sidebar">
  93.    <div id="logo"><img src="pliki/mb.jpg" /></a>
  94.    </div>
  95.  
  96.    <div id="sidebar-content">
  97.  
  98.  
  99.  
  100. <img src="pliki/pattern5.jpg" height=250 width=1 align=left><P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/glowna.htm">Strona główna</a></IMG></P>
  101.  
  102. <P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/nab.htm">Msze św.</a></P>
  103.  
  104. <P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/fil.htm">Kościoły filialne</a></P>
  105.  
  106. <P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/ks.htm">Duszpasterze</a></P>
  107.  
  108. <P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/hist.htm">Historia</a></P>
  109.  
  110. <P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/galeria_dom.htm">Dom Pielgrzyma &nbsp;Galeria</a></P>
  111.  
  112. <P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/bud.htm">Linki</a></P>
  113.  
  114.   <FONT color=#003399><b><script type="text/javascript" src="http://www.edycja.pl/ext/dzien.js.php"> </script></b>
  115.    </FONT>
  116.    </div></div>
  117. <div id="swieta"></div>   
  118.    <div id="main">
  119.  
  120.  
  121.     <h1>
  122.  
  123.     <CENTER><B>DIECEZJALNE SANKTUARIUM MATKI BOŻEJ BOLESNEJ<BR><BR>
  124. 		Parafia rzymskokatolicka pw. Wniebowzięcia NMP w Skrzatuszu<br>Skrzatusz 31<BR>
  125. 78-930 Szydłowo<BR>
  126. tel. (67) 216 11 30
  127. <br>	 <br><br>
  128. 		</A></CENTER></h1>
  129.  
  130.  
  131.  
  132.  
  133.  
  134.  
  135.   <IFRAME name=go align=left 
  136.                   src="strony/glowna.htm" frameborder=0 width=760 height=650>
  137. 				</IFRAME></TD></TR></TBODY></TABLE>
  138.  
  139.  
  140.  
  141.  
  142.  
  143. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
gigzorr
post
Post #7





Grupa: Zarejestrowani
Postów: 652
Pomógł: 47
Dołączył: 6.02.2010
Skąd: Radom

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

Tak jak Damonsson napisał.Te choinki i ten snieg to jest obrazek , w a cssie robisz np. cos takiego:
[HTML] pobierz, plaintext 
  1. .klasa/#id position: fixed;
  2. bottom: 1px; - zawsze bedzie na dole.
[HTML] pobierz, plaintext


jeszcze mozesz uzyc z-index(odkrywanie,przykrywanie) zalezy czy zaslania ten obrazek cos i nie da sie na to kliknac.

ps. na tej stronie ten obrazek na dole lepiej by sie komponowal jakby mial nadana przezroczystosc bo troche denerwuje.

Ten post edytował gigzorr 5.01.2011, 21:10:21
Go to the top of the page
+Quote Post
Adams911
post
Post #8





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.10.2010

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

a co bym musiał zrobić aby ten obrazek był po prostu na dole pod wszystkim aby nie na chodził na nic
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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