I am trying to make a link from an image , means after clicking an image I would like to redirect to another site . I have used the following
<div class="haus">
<img src="http://schwedenladen.de/wp-content/themes/schweden/style/img/haus_icon.png" alt="Haus">
</div>
CSS CODE
.haus {
height: 100%;
margin-left: 50px;
padding: 0 0 5px;
width: 30px;
border:1px solid red;
z-index:999;
}
I am not getting the hyper link icon , when I move mouse over the image
Your image is BEHIND the banner. Try this:
.haus>a {
position: absolute;
z-index: 9999;
}
The z-index is important, since the header has a very high value that needs to be sent to back.
Related
I can't get my head around why when I hover over my logo it isn't linked to the landing page.
HTML:
<body>
<header>
<a href="landing.html">
<img src="img/typeface.png" alt="logo" class="headerlogo">
</a>
</header>
<img src="img/wave.png" alt="wave" draggable="false" class="wave">
</body>
CSS:
body {
margin: 0;
padding: 0;
background-color: #121420;
font-family: 'Montserrat', sans-serif;
}
header {
display: flex;
}
.headerlogo {
width: 10%;
height: 55%;
margin-left: 5%;
padding-top: 35px;
}
.wave {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
I saw other post stating that the z-index was the problem but I don't have an z-index within my css.
Running your code in a JSfiddle it works just fine (I swapped the image): https://jsfiddle.net/8e0j62zw/
Do you mean like when you click the link it doesn't go anywhere? Just gives you another blank page, or not found error.
If so you might need to check the path on your link to your landing.html
It appears to be a relative path which based on the location of your file could be causing it to break. You can read about path linking here: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
I believe I found the issues the wave image is technically over the top of the entire page although being transparent preventing me from clicking anywhere on the site.
I fixed this problem by applying z-index: -1 to the wave image.
I have looked online for this info and have got close but it is not really what I need and Im not sure if it's possible to do or not? so thought I would ask you??
On my main search page, I have lots of HTML link which comes from a database on the server and links to different web sites. ( at the moment the links go directly to there website via the target self)
So what I would like to do is when you click on the link it
loads up a Model popup and iframe with the website itself instead of going directly to there website and leaving mysite. And then press the grey area or X to delete it and then shows the main page.
As I said I got close ie getting the model popup to work but the links would not work
hope you can advise what is the best way to do this?
Thanks
Tim
Use target with name of iframe. Modal should be shown with onClick="showModal()".
Just make sure you have access via CORS to these sites. SO Question about that
function showModal()
{
$('#modal').show();
}
function hideModal()
{
$('#modal').hide();
}
#modal {
position: fixed;
left: 10%;
top: 10%;
height: 300px;
width: 80%;
background-color: white;
display: none;
}
.close {
position: absolute;
right: -5px;
top: -5px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
text-align: center;
}
iframe {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal">
<div class="close" onClick="hideModal()">×</div>
<iframe name="modal_iframe" src="demo_iframe.htm"></iframe>
</div>
Stack Overflow<br/>
W3
I have 2 images. One image (through background-url) with position relative is the main image and another image (through background-url) with position absolute is placed above the first image.
when i shrink the browser the 2nd image doesn't follow responsiveness. Is there a way to do?
Thanks in advance!!
// 1st image//
&main-background {
z-index: -1;
position: absolute;
width: 100%;
height: 500px;
background-image: url("images/campaign/1-bg.jpg");
}
// 2nd image//
&__main-bg {
position: relative;
width: 100%;
height: 550px;
background-color: black;
margin-bottom: 2em;
color: $blue-2017;
background-image: url("images/campaign/main-1.jpg");
box-shadow: 0 10px 6px -6px #777;
#include media($small-screen) {
font-size: 0.8em;
}
}
What is the value for this variable for $small-screen ?
Is there a need to us that ?
#include media($small-screen) {
}
Try removing those lines and see if it works . If it doesn't.
Try using reducing the percentage of your image 2 and using brute force Css ( !important ) at the end of each line in your Css for your second image. I am pretty sure that there are some Css overwriting your second image
I understand the basics of CSS.In fragments.
I try to understand how to combine all of what I want together.
I want to create two types of buttons, "view" and "save".
I have 4 images, two for each, where one represents the button, and one when mouse hovers it.
So I want an alternative background when hover.
I want also a tooltip, something "cheap" like "View file", "Save file", that better explains the content of the image if it wasn't clear enough.
I understand that I need to use the hover attribute, background attribute, and somehow to create a tooltip.
Those two buttons are actually images with a link
How do I combine it all together?
you could do something like this:
<div title="View File" class="view-button">
View File
</div>
CSS:
.view-button {
background-image: url("first-view-image");
}
.view-button:hover {
background-image: url("second-view-image");
}
And the same for the save button. The title tag shows a small tooltip. if you want bigger/fancier tooltips, you have to use some javaScript framework.
check this out
HTML
<button>Hello</button>
CSS
button {
background: url(your-image.png) no-repeat;
}
button:hover {
background: url(your-image-hovered.png) no-repeat;
}
button:focus {
background: url(your-image-focused.png) no-repeat;
}
Hi i've created a fiddle for you. When you hover the image/button changes and also you get a small tooltip that says "Click here to Save". Is that all you need? Tell me if this helped you or you have any questions.
EXAMPLE
HTML
CSS
.save {
margin-bottom: 10px;
width: 47px;
height:20px;
display:block;
background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat;
}
.save:hover {
background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png');
}
This is my example, change background value to your image, to use tooltip i used jqueryui
Example
html
<a href='#' class='button savebutton' title='Save form'>Save</a>
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>
css
.button{
background : #999;
padding : 5px 10px;
border-radius : 5px;
color:#fff;
text-decoration : none;
}
.savebutton{
background : blue;
}
.cancelbutton{
background : orange;
}
.savebutton:hover{
background : cyan;
}
.cancelbutton:hover{
background : yellow;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}
JS
$('.button').tooltip();
So here is the head container I'm using right now.
<header>
<div class ="headcontainer">
<nav class ="links">
Home
Page1
page2
</nav>
<nav class ="login">
Login
page4
</nav>
</div>
</header>
this is the CSS part:
.headcontainer {
width: 960px;
margin: auto;
header {
width: 100%;
height: 35px;
z-index: 10;
position: fixed;
top: 0;
left: 0;
background: #A7A7A7;
}
.links {
float: left;
text-align: left;
}
.links a {
float: left;
width: auto;
height: auto;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 10px 0 0 15px;
}
Basically I have different words I can click on at the top of the website, basically acting as a navigation header. So basically I have a stripe of line with color grey as background with white color on the text. like this:
What I want to do is that when I hover over one of these words it will turn the background white and make the text grey instead for just that word in a square. Like this:
I tried a lot of ways, but I couldn't get it to work. Would appreciate any help I can get! Thanks.
Add this to your css:
.links a:hover {
background: white;
color: gray;
}
You can use CSS :hover selector on the element(s) and then change the color and background to whatever you want Look here
Or you can use jQuery's .hover() function. Look here
You can accomplish this using jQuery.
Your container for the links will require an id.
When you hover over a chosen link an onhover action needs to be applied, this will trigger a jQuery action to amend the CSS.
A good place to start would be div background color, to change onhover accompanied with a short jQuery function to change the link colors.