czesc
jak dac obrazek na obrazej- obrazki sa jpg?
7 odpowiedzi w tym temacie
Napisano 10 marca 2014 - 18:52
tyle skapowałem z wypowiedzi, co tu dorobic?
<html>
<head>
<title>strona1</title>
</head>
<body>
<div id="111"><img src="tlo.jpg"width="1000" height="800" border="0"/></div>
<div id="222"><img src="tlo2.jpg"width="200" height="200" border="0"/></div>
</body>
<style>
#111{position: relative;}
#222{position: absolute;
margin-bottom: 10px;}
</style>
</html>
zonic
-
-
- 2 911 postów
- Czas spędzony online: 134d 2h 28m 23s
WT Elite
472
Znakomita!
Znakomita!
- LocationToruń
Napisano 10 marca 2014 - 19:07
z-index
http://www.w3schools...pos_z-index.asp
przyklad: http://www.w3schools...e=trycss_zindex
zonic
-
-
- 2 911 postów
- Czas spędzony online: 134d 2h 28m 23s
WT Elite
472
Znakomita!
Znakomita!
- LocationToruń
Napisano 10 marca 2014 - 19:50
a jak by to wygladało w css?
Mówimy właśnie o CSS. Masz tam przykład. Musisz ustawić odpowiednią wartość z-index. Im wyższa, tym zdjęcie będzie bardziej na wierzchu.
Dwa przykłady typu "kopiuj, wklej":
- http://pl.html.net/t...ss/lesson15.php
- http://www.codeproje...SS-with-Example
Napisano 10 marca 2014 - 20:10
ok dzieki skapowałem na tym:
<html>
<head>
<title>strona</title>
</head>
<body>
<div>
<div id="div_exp1" id="div1">
Z-Index 100
</div>
<div id="div_exp2" id="div2">
Z-Index 101
</div>
</div>
</body>
<style>
#div_exp1
{ border: solid 1px gray;
background-color: gray;
position: absolute;
z-index: 100;
height: 800px;
width: 1000px;
}
#div_exp2
{ border: solid 1px silver;
top: 15px;
left: 11px;
background-color: #c2c2c2;
position: absolute;
z-index: 101;
height: 600px;
width: 250px;
</style>
</html>
unbreak
-
-
- 1 937 postów
- Czas spędzony online: 27d 8h 43m 36s
WT Elite
506
Znakomita!
Znakomita!
- Location/home/unbreak
Napisano 11 marca 2014 - 09:14
Tyle że w Twoim przypadku powinno wyglądać to nieco inaczej:
HTML
HTML
<div id="images"> <img class="tlo" src="tlo.jpg" width="1000" height="800" border="0" /> <img class="tlo2" src="tlo2.jpg" width="200" height="200" border="0" /> </div>CSS:
.images{position:relative}
.images img{position:absolute;top:0;left:0;}
/* i ponizej ustawiasz co ma byc widoczne dajac temu co ma byc widoczny z-index==2 a drugiemu 1 */
.tlo{z-index:1;}
.tlo2{z-index:2;}
Możesz oczywiście ustawiać sobie dokładną pozycję tego mniejszego obrazka za pomocą top i left ustawiając odpowiednią ilość pikseli.
Użytkownik unbreak edytował ten post 11 marca 2014 - 09:15
webDeveloper
Użytkownicy przeglądający ten temat: 0
0 użytkowników, 0 gości, 0 anonimowych
