Need help creating a transparent box that links somewhere (HTML&CSS)

dalearyous

Senior member
Jan 8, 2006
836
0
0
ok here is my css:
Code:
#logolink 
{ 
        border:1px solid red;
	position:absolute;
	top: 629px; 
	left: 633px;  
	width: 278px; 
	height: 357px; 
	background-color: transparent; 
        z-index: 99;
}

and my call:

Code:
<a href="whatever.com"><span id="logolink"></span></a>

ok this code creates a 278x357 transparent box with a 1px red border that is clickable (theoretically works great). however, because i positioned it absolutely the position is based on the size of the browser window and/or the resolution you are viewing it at. HOW do i do the exact same thing but have it "stay put" in different resolutions or screen sizes. i would think that i would have to absolute position it inside the main body wrapper but i have failed to do this. it either comes up and still has the same problem or doesn't show up at all. any ideas?
 

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,609
4,530
75
position:absolute:
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties
Emphasis mine. So can you find a parent element of this box and whatever you want it positioned over, and make it "relative" or something?
 

911paramedic

Diamond Member
Jan 7, 2002
9,448
1
76
^yup

Where exactly are you trying to place the box? Are you going for one corner of the screen, or a specific place in your layout?
 

dalearyous

Senior member
Jan 8, 2006
836
0
0
going for a specific place in the layout and i need it to stay there so when browser is resized or you are viewing the site different rez its the same.

thing is there are a couple of parent wrappers that have position: relative
 

911paramedic

Diamond Member
Jan 7, 2002
9,448
1
76
Are you talking about this type of thing?

Code:
<html>
<head>
<style type="text/css">
img{
position:fixed;
top: 30&#37;;
left: 40%; 
border:1px solid red;
width: 150px; 
height: 200px; 
background-color: transparent; 
}
</style>
</head>
<body>

<h1>OMG This Is My Page!</h1>

</p><a href="whatever.com"><img src="w3css.gif" width="100" height="140" /></a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
</body>
</html>

Copy this code and paste it into this window for a quick viewing of the code in action.
(I like to use their pages for quick testing, saves a lot of saving and refreshing.)

EDIT: You can play with the percentages and move it around on your page. I think that is what you were describing, to have the element in a set position in the browser window and not pixel based. This will stay fixed when you scroll the window though.
 
Last edited:

dalearyous

Senior member
Jan 8, 2006
836
0
0
thanks for the code. i guess i am still not explaining it correctly. 911paramedic your solution captures my problem. what if your text was in a container and you wanted a box linkable it a set space that didn't depend on the resolution or size of the browser.

... like, go to cnn.com ... what if (and a big what if) the logo on cnn.com didn't link where you wanted to (and the only way you could fix it is to) so you created a box using type of css i wrote originally to surround the logo and essentially be on top of it, transparent, so if someone clicked on the logo it would go to where the box is set to go ... not the logo link. if you set the box the way i did, that box would show up in different places based on the browser size or resolution of computer. how would you get that box to be x pixels from the top and y pixels from the top INSIDE! the div?
 

911paramedic

Diamond Member
Jan 7, 2002
9,448
1
76
I think I understand, try this code.

Code:
<html>
<head>
<style type="text/css">
#wrapper{
position:relative;
border:1px solid blue;
}
.linkaroo{
position:absolute;
top: 15%;
left: 0%; 
border:1px solid red;
width: 115px; 
height: 150px; 
background-color: transparent;
z-index:99; 
}

img{
position:relative;
float:left;
padding-right: 10px;
padding-bottom: 10px;
}

</style>
</head>
<body>

<h1>OMG This Is My Page!</h1>

<img src="w3css.gif" width="100" height="140" />
<a href="whatever.com"><span class="linkaroo"></span></a>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p> 

<div id="wrapper">
<img src="w3css.gif" width="100" height="140" />
<a href="whatever.com"><span class="linkaroo"></span></a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
</body>
</html>

It works when the DIV has positioning, it's one of those oddities CSS has. If you change the styling of the DIV from this:

#wrapper{
position:relative;
border:1px solid blue;
}

To this:

#wrapper{
xxxxposition:relative;
border:1px solid blue;
}

Your "link box" will be positioned in the html space, not within the DIV space. This positioning works in relation to the first positioned parent. (BTW, the "xxxx" is there so the positioning will be ignored, you could also delete it but I think it's better to see what rule is being ignored.)

I colored the "wrapper" DIV blue so you could see the actual positioning and the container.

Play with the positioning percentages and you can see the effect it has on the link box. You can also make a .linkaroo1 and .linkaroo2 with different colors and play with the positioning that way. Here's the code for that in case you want to jump right in and play with it:

Code:
<html>
<head>
<style type="text/css">
#wrapper{
position:relative;
border:1px solid blue;
}
.linkaroo1{
position:absolute;
top: 15%;
left: 0%; 
border:1px solid red;
width: 115px; 
height: 150px; 
background-color: transparent;
z-index:99; 
}

.linkaroo2{
position:absolute;
top: -10%;
left: 10%; 
border:1px solid orange;
width: 115px; 
height: 150px; 
background-color: transparent;
z-index:99; 
}

img{
position:relative;
float:left;
padding-right: 10px;
padding-bottom: 10px;
}

</style>
</head>
<body>

<h1>OMG This Is My Page!</h1>

<img src="w3css.gif" width="100" height="140" />
<a href="whatever.com"><span class="linkaroo1"></span></a>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p> 

<div id="wrapper">
<img src="w3css.gif" width="100" height="140" />
<a href="whatever2.com"><span class="linkaroo2"></span></a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue imperdiet eros at commodo. Donec est leo, sagittis condimentum porta a, hendrerit a libero. Quisque varius semper lacus, vel ultrices velit elementum a. Quisque elit ligula, ullamcorper vitae imperdiet et, varius et erat. Fusce elementum, augue et luctus mattis, arcu tortor vestibulum augue, at dictum justo libero commodo erat. Etiam aliquam elementum ligula, at tempor massa dictum ut.</p>
</body>
</html>

If you notice, I gave the boxes different links so you can tell when you go from one to the other. I also changed the .linkaroo2 position to show you that it's possible to leave the confines of the parent's box if you want to. It is positioned relative to the parent, not confined by it.

Hope this is what you were looking for.
 

dalearyous

Senior member
Jan 8, 2006
836
0
0
I think I understand, try this code.

wow, thanks a ton for your time invested in this. im running out the door atm but i will def. mess around with this later on this afternoon. your sample code you pasted does work the way i want it to. however, i am starting to think i may have place the <a href="whatever.com"><span class="linkaroo"></span></a> of my code in the wrong place. ill post back, again thanks a ton.