Jump to content

transparent image


Ricklord

Recommended Posts

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.


Link to comment
Share on other sites

  • 3 weeks later...
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 .....
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.