Przypisanie odnośnika do obrazka w tle

mkkot · Post autor: **mkkot** » czw sie 11, 2005 7:14 pm

A więc zapragnąłem mieć po lewej coś takiego, jak tu:
http://www.w3.org/TR/html4/
Szukałem długo, jak to jest zrobione. Wreszcie doszedłem, że tak:
background-image: url(pliki/zamknij.png);
background-position : top left;
background-attachment:fixed;
background-repeat : no-repeat;
Jak widać to arkusz css. Obrazek pokazał się ładnie po lewej, ale teraz
jest problem. Z tylko mi znanych przyczyn

chciałbym przypisać do
tego obrazka akcję onclick="javascript:history.go(0)". Dałoby się?

mdx · Post autor: **mdx** » czw sie 11, 2005 10:40 pm

Kod: Zaznacz cały

<div style="position: fixed; top:0px; left:0px; width:26px; height:250px; background:#000; background-image: url(pliki/zamknij.png); background-repeat : no-repeat;" onclick="javascript:history.go(0)"></div>

Asit · Post autor: **Asit** » czw sie 11, 2005 11:24 pm

Kod: Zaznacz cały

position: fixed;

chodzilo raczej o

Kod: Zaznacz cały

position: absolute;

mdx · Post autor: **mdx** » czw sie 11, 2005 11:28 pm

Asit pisze:
Kod: Zaznacz cały
position: fixed;
chodzilo raczej o
Kod: Zaznacz cały
position: absolute;

chyba jednak fixed

Asit · Post autor: **Asit** » pt sie 12, 2005 12:06 am

zwracam honor ale nie do konca... sprawdzales to pod IE? mi nie dziala.. znalazlem w sieci cos takiego: http://www.stunicholls.myby.co.uk/layouts/fixed.html zeby position: fixed dzialalo i ogolnie zeby caly ten efekt zadzialal pod IE trzeba troche pokombinowac.. zobacz style dla menu i obrazka.. oba na html maja position: absolute..

Asit · Post autor: **Asit** » pt sie 12, 2005 12:16 am

wiec zeby dzialalo wszedzie to kod wyglada tak:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body {margin: 0px; padding-left: 250px; height:100%; overflow-y:auto;}
#fixpic {display:block; width:108px height:145px; position:fixed; top:0px; left:0px;}
* html #fixpic {position:absolute;}
</style>
<!--[if IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</head>
<body>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>
sdf<br/><br/><br/>

<img id="fixpic" src="obrazek.gif" alt="friar" onclick="javascript:history.go(0)" />
</body>
</html>

paszczak · Post autor: **paszczak** » pt sie 12, 2005 12:10 pm

ja bym proponowal dla IE jednak posluzyc sie JavaScriptem...

[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Xxx</title>
<style>
#fixDiv {
position:fixed;
background-color: yellow;
top: 0px;
left: 0px;
}

#contDiv {
height: 10000px;
}
</style>


</head>
<body>

<div id="contDiv"></div>

<div id="fixDiv"><a href="javascript:void(0)">click me</a></div>

</body>
</html>
[/xml]

nie najpiękniej to wygląda pod IE ale zawsze można nieco ulepszyc funkcje fixFixed....

przydało by się również uwzględnić starsze wersje IE.

mkkot · Post autor: **mkkot** » pt sie 12, 2005 12:34 pm

Dzięki za zainteresowanie. Tak też myślałem, że będzie trzeba pozbyć się definicji z css. Mam jeszcze teoretyczne pytanie, czy gdyby jednak zostawić tą definicję w arkuszu css, to jak w nim zrobić, żeby ten obrazek pojawił się jeszcze w prawym górnym rogu? Mam na myśli mniej więcej coś takiego:

background-image: url(pliki/zamknij.png);
background-position : top left, top right;
background-attachment:fixed;
background-repeat : no-repeat;

I jak zrobić, żeby w prawym górnym rogu dać inny obrazek? Mogłoby wyglądać to np. tak?:

background-image: url(pliki/zamknij.png);
background-position : top left;
background-attachment:fixed;
background-repeat : no-repeat;
background-image: url(pliki/otwórz.png);
background-position : top right;
background-attachment:fixed;
background-repeat : no-repeat;

Stig · Post autor: **Stig** » pt sie 12, 2005 1:04 pm

Niestety nie można dla jednego selektora nadać dwóch takich samych argumentów o innych wartościach. W praktyce tło pojawi się tylko w prawym górnym rogu. Ale nic nie stoi na przeszkodzie, aby wstawić dwa podobne div'y, korzystając z rozwiązania zaproponowanego przez paszczaka

.

Przypisanie odnośnika do obrazka w tle

Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle

Re: Przypisanie odnośnika do obrazka w tle