Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hello!
How to put elements so that one is behind the other in the way like this?:
(LOGO) (PICTURE)
(MENU ")
"PICTURE" should be partially put also on the part indicated with " and be partially transparent (around the picture which is not rectangular, but non-regular shape). I create HTML + CSS.
This is my idea explained in graphical way:
http://images45.fotosik.pl/212/bd4da0b64b0026d5.jpg
Probably menu would be in JavaScript. Picture of helment won't be rectangular so I need to do its background transparent and change percentage of transparency of pictures in CSS.
Code:
[code]<HTML>
<HEAD>
<style type="text/css">
#cos+gl {
border-style: dashed;
}
#lkm {
float: left;
}
#logo2 {
float: left;
}
#kask {
float: right;
}
#menu {
float: left;
border-style: dashed;
min-width: 325px;
min-height: 30px;
}
#cos {
float: left;
border-style: dashed;
min-width: 100px;
min-height: 40px;
}
.kp {
float: left;
}
.kreska {
float: left;
}
#kontakt {
float: left;
border-style: dashed;
min-width: 100px;
min-height: 40px;
}
#galeria {
float: right;
border-style: dashed;
min-width: 195px;
min-height: 40px;
}
#gl {
float: right;
border-style: dashed;
min-width: 195px;
min-height: 40px;
}
</style>
<!-- HEAD -->
</HEAD>
<BODY> <!-- BackGround - OBRAZEK, -->
<div id="lkm">
<div id="logo">
<img src="img/logo.png" alt="(LOGO)">
<div id="kask">
<img src="img/kask.png" alt="(KASK)">
</div>
<br>
<div id="menu">(MENU)</div>
</div>
<div class="kreska">
<img src="img/kreska.png" alt="(KRESKA)">
<div>
<div id="cos+gl">
<div id="cos">
(COS)
</div>
<div class="kp">
<img src="img/kp.png" alt="(KP)">
</div>
<div id="gl">
GL
</div>
</div>
<div class="kreska">
<img src="img/kreska.png" alt="(KRESKA)">
<div>
<div id="kon+gal">
<div id="kontakt">
(KONTAKT)
</div>
<div class="kp">
<img src="img/kp.png" alt="(KP)">
</div>
<div id="galeria">
(GALERIA)
</div>
</div>
<div class="kreska">
<img src="img/kreska.png" alt="(KRESKA)">
<div>
</BODY>[/code]
Thanks for your help in advance :-)! -
HI
I see your code you want to overwrite on any image and through an image. For this you will use the css property
z-index:1; (for use overwrite you will also use it 1 to more i mean like z-index:30;)
z-index:-1; (For use behind the image or text same like above z-index:-45;)
Hawk
1 to 2 of 2