Forum PHP.pl > [inne]Obrazek na strone

Pomoc - Szukaj - Użytkownicy - Kalendarz

Adams911

5.01.2011, 19:02:07

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

Wicepsik

5.01.2011, 19:05:14

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

[CSS] pobierz, plaintext 
#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

Damonsson

5.01.2011, 19:05:35

Lektura kursów CSS i 2 pojęcia:
'Position'- w Twoim przypadku 'fixed'
'z-index'

Adams911

5.01.2011, 19:07:43

no tak ale na co mam zmienić aby było dobrze

Damonsson

5.01.2011, 19:14:03

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

Możesz dodadać do:

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

uzyskasz bardziej usability efekt.

Adams911

5.01.2011, 21:02:29

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 
/* CSS Document */
 * {
    margin: 0;
    padding: 5;
    } 
 
  body {
	margin:0;
	padding:0;
	font: normal 12px Verdana, Arial, Helvetica, sans-serif;
	border-top: 2px solid #036;
   background-image: url("backgrou.gif");
  }
h1 {
      padding-right: 15px;
      padding-top: 15px;
      font-size: 15px;
      color: #003399;      
      font-family: Georgia, sans-serif;
      text-align: right;
      background: #99CCFF;
 
   }
 
   #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; }
 
 
#content {
      width: 980px;
      margin-left: auto;
      margin-right: auto;
      text-align:left;
      }
   #sidebar {
      float: left;
      width: 200px;
		height: 824px;
      background: #99CCFF;
      text-align: center;
      }
 
 
  #main {
      margin:0 0 0 200px; 
      padding:0;
      }
 
 
A.MENUITEM:LINK { font-size: 9pt;
			color: #003399;
			text-decoration: none;
			font-weight: bold; }
A.MENUITEM:VISITED { font-size: 9pt;
			color: #003399;
			text-decoration: none;
			font-weight: bold; }
A.MENUITEM:HOVER { color: #003399;}
 
P.MENUITEM { margin: 2 0 0 0;
		padding: 5 16 5 16;
		border-style: solid;
		border-width: 0;
		background-color:  #F0F8FF;
		 }
A.przetarg:LINK { font-size: 9pt;
			color: #FF0000;
			text-decoration: none;
			font-weight: bold; }
A.przetarg:VISITED { font-size: 9pt;
			color: #FF0000;
			text-decoration: none;
			font-weight: bold; }
A.przetarg:HOVER { color: #FF0000;}
 
P.przetarg { margin: 3 0 0 0;
		padding: 5 16 5 16;
		border-style: solid;
		border-width: 0;
		border-color: #0033CC;
		background-color:  #F0F8FF;
		 }
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<html>
<head>
 
<META name="description" content="Parafia w Skrzatuszu"> 
<meta name="keywords" content="skrzatusz, koszalin, sanktuarium, parafia, diecezja koszalińsko-kołobrzeska, ">
<meta http-equiv="content-language" content="pl">
<link rel="stylesheet" type="text/css" media="all" href="pliki/style.css">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <title>Parafia rzymskokatolicka pw. Wniebowzięcia NMP w Skrzatuszu - sanktuarium Matki Bożej Bolesnej</title>
 
	<script language="JavaScript1.2">
</script>
 
</head>
<body>
 
<script LANGUAGE= "JavaScript" type= "text/javascript">
var speedTableY = new Array();
var posX = new Array();
var smooth = new Array();
var amplitude = new Array();
var tabB = new Array();
var speed = 50;
var speedLevelsY = 5;
var layersCount = 10;
function ustaw()
{
  clWidth = document.body.clientWidth - 50;
  for (i = 0; i < layersCount; i++){
    posX[i] = Math.ceil(Math.random() * clWidth);
    speedTableY[i] = Math.ceil(Math.random() * speedLevelsY);
    amplitude[i] = Math.ceil(Math.random() * 40 + 20);
    smooth[i] = Math.ceil(Math.random() * 48) + 10;
    tabB[i] = Math.random() * 4;
  }
}
var b = 0;
function start()
{
  clWidth = document.body.clientWidth - 50;
  clHeight = document.body.clientHeight;
  for (i = 0; i < layersCount; i++){
    y = parseInt(document.getElementById('el' + i).style.top);
    y += speedTableY[i];
 
    tabB[i] += Math.PI / smooth[i];
    x = parseInt(Math.sin(tabB[i]) * amplitude[i]) + posX[i];
    if (x >= clWidth){
      x = clWidth;
    }
    document.getElementById('el' + i).style.left = x;
 
    if (y >= clHeight - 45){
      y = -50;
      posX[i] = Math.ceil(Math.random() * clWidth);
      speedTableY[i] = Math.ceil(Math.random() * speedLevelsY);
      amplitude[i] = Math.ceil(Math.random() * 100 + 20);
      smooth[i] = Math.ceil(Math.random() * 48) + 48;
    }
    document.getElementById('el' + i).style.top = y;
  }
  setTimeout('start()', speed);
}
 -->
</SCRIPT>
<BODY onLoad='ustaw();start();'>
<script LANGUAGE= "JavaScript" type= "text/javascript">
<!-- 
for (i = 0; i < layersCount; i++){
  str = '<DIV ID="el' + i + '" ';
  str += 'style = "visibility: visible; ';
  str += 'width=50px; ';
  str += 'heigth=45px; ';
  str += 'position: absolute; ';
  str += 'top: 1; ';
  str += 'left: 1;">';
  str += '<IMG SRC="http://kamilscheicht.com/udostepnione/snow7.gif">';
  str += '</DIV>';
  document.write(str);
}
 
</SCRIPT>
<center>
 
 
 
<tr>
<div id="content">
 
   <div id="sidebar">
   <div id="logo"><img src="pliki/mb.jpg" /></a>
   </div>
 
   <div id="sidebar-content">
 
 
 
<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>
 
<P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/nab.htm">Msze św.</a></P>
 
<P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/fil.htm">Kościoły filialne</a></P>
 
<P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/ks.htm">Duszpasterze</a></P>
 
<P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/hist.htm">Historia</a></P>
 
<P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/galeria_dom.htm">Dom Pielgrzyma &nbsp;Galeria</a></P>
 
<P class="MENUITEM" align=left><A class="MENUITEM" target=go href="strony/bud.htm">Linki</a></P>
 
  <FONT color=#003399><b><script type="text/javascript" src="http://www.edycja.pl/ext/dzien.js.php"> </script></b>
   </FONT>
   </div></div>
<div id="swieta"></div>   
   <div id="main">
 
 
    <h1>
 
    <CENTER><B>DIECEZJALNE SANKTUARIUM MATKI BOŻEJ BOLESNEJ<BR><BR>
		Parafia rzymskokatolicka pw. Wniebowzięcia NMP w Skrzatuszu<br>Skrzatusz 31<BR>
78-930 Szydłowo<BR>
tel. (67) 216 11 30
<br>	 <br><br>
		</A></CENTER></h1>
 
 
 
 
 
 
  <IFRAME name=go align=left 
                  src="strony/glowna.htm" frameborder=0 width=760 height=650>
				</IFRAME></TD></TR></TBODY></TABLE>
 
 
 
 
 
</html>
[HTML] pobierz, plaintext

gigzorr

5.01.2011, 21:08:06

Tak jak Damonsson napisał.Te choinki i ten snieg to jest obrazek , w a cssie robisz np. cos takiego:

[HTML] pobierz, plaintext 
.klasa/#id position: fixed;
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.

Adams911

6.01.2011, 11:29:09

a co bym musiał zrobić aby ten obrazek był po prostu na dole pod wszystkim aby nie na chodził na nic

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.