how to put one element on the other?

Discussion in 'CSS' started by johnyjj2, Oct 10, 2009.

0
  1. #1
    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:
    <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 (markup):
    Thanks for your help in advance :)!
     
    johnyjj2, Oct 10, 2009 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Validate your HTML against a proper DOCTYPE, then give your #lkm selector a negative bottom margin, relative position and a z-index.
     
    Dan Schulz, Oct 10, 2009 IP