transparent image

[Ricklord]

Hi guys,

I'm using a strange shaped logo which in design view is a sort of an upside down back to front L shape.

You can see it here [url=http://www.creativecogs.co.uk/web_design/new_design3.html]http://www.creativecogs.co.uk/web_design/new_design3.html[/url]

Just wondering how to make the background transparent so that i can click on things behind it?

No big rush on this one as its working at the moment i just cant click on images behind the square image or select the text.

If anyone knows how to make the blank space transparant i would appreciate it.

Rick

[killerb]

Hey! - Nice design! I wish I could draw like that.

I'm almost tempted to do the CSS for you, but you really want to get a hang on it for yourself. It is worth the hard yards, mate. CSS rocks!

I would give it a whole div, then layer other divs over it. Then comes the question of how to position it, depending on the fluidity you want when the page gets resized.

Another solution might be to make it the bg image for a div, then apply padding to the left and top margins to clear text from the logo.

In either case, you will most certainly need a seperate div to hold the menu from the logo.

Personally, I would make the content a fixed width (what happens when the menu overlaps the logo?), and the fluidity would be taken up by the left and right margins.

[code]
<style>
#main{margin: 80px 15%;width:70%;}
#bigLogo{position:absolute;top:-40px;left:-40px;background:url(image.png) no-repeat top left;}
#menu{position:absolute;top:0;right:0;
#feature{margin:30 12 12 30;}
.services{margin:0 12 16 30;}
#services img{float:left;margin:8px;}
p{margin:4px 12px;}
</style>

<div id="main" class="antzBorders">
<div id="bigLogo"></div>
<div id="menu">Menu options</div>
<div feature . . .
<div services . . .
<p>. . . </p>
</div>
<div id="bottomNav"></div>
[/code]


See how you get on with that.

[Ricklord]

Cheers for comments

I meant the content rather than the menu but i think what you have mentioned might work.

I'm going to give it a try now. Will let you know how i get on.

Thanks Agian

Rick

[Ricklord]

Ok i tried your second option and i still cant click on the content behind the actual image.

here is the code
[code]#logo{
position:absolute;
width:0px;
height:0px;
padding: 430px 410px 0 0;
background-image:url(images/logo.gif);
background-position:left;
background-repeat:no-repeat;
z-index:1;
}[/code]

Also a screenshot of the area i am concerend about is here. [url=http://www.creativecogs.co.uk/web_design/problem1.html]http://www.creativecogs.co.uk/web_design/problem1.html[/url]

The monitors are going to be clickable and need them to stay in that position but as you can see the red outline is my logo size.

Can you see where im going wrong in my code or have another suggestion? i dont know anything about layers so wouldnt know where to start on the other option.

Also if i take out absolute positioning it pushes the rest of my content divs down. they are all in the same container div already, i dont mind leaving it as absolute for now as i only have 9 hours til ive got to show the site to someone and its 1am here and im still without sleep. :(



Cheers

Rick

[killerb]

Ouch! - It happens, for sure.

Basically, layers are just divs. I use the term layers when divs are about to occupy the same space, then they behave like layers, and you have a certain amount of control using the z-index property. z-index determines the layer-order.

With z-index, it is calculated by browsers automatically in the order of the elements on the page. It is common to use divs as containers (layers). Actually, images are treated as layers when it comes to calculating the z-index.

[b][u]Layers within layers[/u][/b]

Eg:
[code]
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<img id="i1" />
</div>
[/code]

Presume the code sits alone in the body tag.

[list]
[*]Div#d1 gets a z-index of 1 in the body element.
[*]Div#d2 gets a z-index of 1 in the Div#d1 element.
[*]Div#d3 gets a z-index of 2 in the Div#d1 element.
[*]Img#i1 gets a z-index of 3 in the Div#d1 element.
[/list]

If you need to override this, you can assign z-index properties to specific elements, but the best way is to design your page structure with this in mind.

[snorkler]

Food for thought

I assume you want to be ble to click on those screens, what if you gave them a positive z-index value?

[nloding]

I'm not sure exactly what you're going for, but what I would do is divide that image into two images -- the horizontal part, and the vertical part.  That would allow you to position those however you wanted, and not worry about anything else that may be within the "full" image size.

If that made sense .....