I have a header in a HTML page that contains a curve.
My Problem: The curve is a picture & it sits at the highest z-index. It is meant to cut off some text below it so it has the highest z-index. As a result, none of the links below the image(curve) can be clicked because the picture sits on top of them.
Heres the simple JSFiddle: http://jsfiddle.net/hE7D5/2/
How can I get my links below the image to be clickable?
The easiest way I know is to make the image have the css: pointer-events: none; BUT this doesn't work in IE & I am looking for the most Cross-Browser friendly solution.
<div id="headerContainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;">
<div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;">
<ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul>
<a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">Cant be Clicked</a>
<br/>
<div id="cutOffText">
<p style="padding: 0; margin: 0; font-size: 200px;">ABCDEFG</p>
</div>
</div>
<div id="curveOverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;">
</div>
</div>
PS: If theres no way to make the links clickable when under the image, can you suggest a HTML layout I can use to still achieve my look but also have my navbar links clickable?
You could have your elements, that currently sit under the graphic, be on top of it with their backgrounds set to be mostly transparent. This way, the text would be above the image, whereas the background color would seem to be behind or inline with the graphic.
If you are able to precisely control the layout of what's behind the image, you could duplicate that layout above the image using "empty" links with the same dimensions (which I've outlined with a dashed green line in the image below).
In your example you might be able to use cssSandpaper to rotate the image of the curve.
If you slightly modify your curve the button will become totally clickable.
Isn't this working?
#logo {
position: relative;
z-index: 10;
}
simply put : you can't. not without a lot of effort. to achieve this effect, you'd need the image to be a imagemap and then make sure that it's pixel-perfect to the stuff that it's obscuring.
to be honest, this looks like a pretty bad idea, but you may have some legitimate reason to do this
EDIT : looks like a duplicate of this
Related
Ive tried doing this but its not working, What im trying to say is basically, I made a a box that you can scroll in, Kind of like the server bar from discord, It has a hr so i also added it but it follows but i want it to stay under the T logo the scrolling.
https://gyazo.com/91f62e8b813380d0f80a5e3713a371d3
div.sidescroll {
background-color: #202225;
height: 96%;
width: 4%;
position: absolute;
overflow-y: auto;
}
<hr width="50px" style="border-radius: 50px; height: 3px; left: 1.0%; top: 60px; position: fixed;">
You can achieve this by removing position: fixed;left: 1.0%;top: 60px; from <hr> style
But a easier option will be applying border-bottom to the element which is containing T logo and adding border-radius/padding according to need
The issue is that you applied a top and left property as well as the fixed position. Try to remove all positional properties and it should stay as intended.
So, I've being driven insane by this simplistic issue
through css and html i want to scale image and text by hovering over the image i already got the image transition to work. But I'm really struggling to get text to scale below the image by the same amount. I want the text to follow image below it and scale in tandem to the image. Soz if i'm not very good :)
img {
width: 370px;
height: 370px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}
<img src="https://i.imgur.com/TSfq6rd.jpg" alt="">
<img src="https://i.imgur.com/Pu8JqbA.jpg" alt="" style="padding-top: 300px; padding-left: 5px; padding-right: 20px">
<p style="position: absolute; padding-top: 600px">TEST</p>
I don't understand your question. What do you mean by "tandem"? Do you want that the text scales at the same time with the picture? If you want this is better to put both the picture and text insde a div.
Position absolute for p isn't the right choice here.
Maybe try position: relative.
You can also remove the top padding and position from your inline style then.
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
A member of this forum was kind enough to provide the following CSS rollover code which is "fluid" and can adjust in dimensions based on browser size. I've included the code below along with Jfiddle link:
CSS
.container {
width: 100%;
height: 300px;
background: #f1f1f1;
}
a.widgetbook {
display:block;
max-width: 369px;
max-height: 85px;
width: 100%;
height: 100%;
background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top;
margin-bottom: 6px;
background-size: 200%;
}
a.widgetbook:hover {
background-position: right top;
}
HTML
<div class="container">
<a href="#" class="widgetbook">
</a>
</div>
http://jsfiddle.net/cw6hN/
I'm looking to apply a fade-in CSS transition that will position the rollover image properly, and then fade in with an opacity of 1. I'm able to do this to a standard button (non-responsive) but haven't figured out how to apply it to the button scenario above. Any help on how to best achieve this would be most appreciated.
Thanks in advance!
D
Updated JSFiddle to how you wanted it, but using 2 separate images.
Add this to a.widgetbook
transition:all .6s;
JSFiddle
To get the 'fade in' affect you're looking for, you'll need to create two different images.
I have a UI problem with some CSS that I was hoping to get some help with.
I have a div that has a background graphic (curved top edge image) that is causing me a problem. Within this div I have lots of other divs for headings and general content.
My code works in FireFox but not in IE 6 and 7. I have another background graphic that I need placing to the right, over the main background graphic but Im failing to get this working in IE6/7! it works in IE8
you can see my problem here, with IE the width of the curved red edge causes the content area width to be smaller. Firefox example (FF.jpg) is correct, the content area is full width.
http://www.jamesradford.net/images/IE6.jpg
http://www.jamesradford.net/images/FF.jpg
markup below:
<div class="RedCorner"></div>
<div class="header"></div>
<div class="tab-content">
css below:
.RedCorner {
float: right;
background-image: url(/red_rounded.gif);
background-repeat: no-repeat;
margin-right: -25px;
margin-top: 1px;
width: 140px;
height: 40px;
}
Any suggestions?
Many thanks as always,
James
The reason this is happening is because IE has something called the double margin bug. Try using absolute positioning instead, firstly ensure the parent of .RedCorner has:
position: relative;
Then:
.RedCorner {
position: absolute;
top: 0;
right: 0;
width: 140px;
height: 40px;
background-image: url(/red_rounded.gif);
background-repeat: no-repeat;
}