I've the following problem
If I put a clickable image in my header, you can't click on it. (or common link, both don't work)
When I try re-positioning the image, outside the header - it works.
But when it's still in the header you can't click on it.
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: -10;
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
you a have a negative z-index on your header, change it to a positive one or remove it.
negative z-index gets lower in the stacked context order, so you wont be able to click on it
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto;
z-index: 1; /*whatever you need - want here - or just remove it */
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
Not sure why you are saying that:
z-index: -10;
Why you need z-index there? You are just putting the link behind the header that's why you can't click it. Try changing it to 1 or remove it.
By default all the elements of the html are set to z-index: 0;.
So, the body of the HTML is also at the z-index:0;.
And when you are setting z-index:-10 it is putting the header behind the body itself. and hence it is not clickable including its child elements i.e link
Change z-index: -10; to z-index: 0;
header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: 0;
min-width: 100%;
}
li {
position: absolute;
top: 25px;
}
<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>
</header>
</body>
Related
Having a kind of silly issue where my HTML image won't link to the page and doesn't show up as clickable. I have a cart and icon of a cart that displays the number of items in the cart. The image is included in the CSS. I tried setting the z-index all the way up but nothing happened. Not sure if I'm missing something obvious. Fairly new to this so any help is appreciated! Below is my Code:
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<div class="cart">
</div>
<div id="quantityCount">0</div>
</li>
The link is an inline element by default and - having no content - occupies only very little space inside its container (if any). To change that make it a block element with the full size of its container:
.cart a {
display: block;
width: 100%;
height: 100%;
}
Your tag doesn't have any value, So that it can be made clickable.
You can use it like below:
<li>
<div class="cart">cart</div>
< id="quantityCount">0</div>
</li>
Otherwise if you want to show the count as clicable
<li>
<div class="cart"><span id="quantityCount">0</span></div>
</li>
Try these codes:
background-image: url(../images/shoppingcart.png);
well make sure the anchor tag inside card have same widht and height
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
position: relative;
}
.cart a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
z-index: 10;
}
make your <a> tag a parent of the <div class="cart"> tag. otherwise, your code works fine for me. perhaps the path to your image is incorrect? i replaced your image path with a hosted image and everything worked fine
It's a fundemental issue. You added a link but with no content (nothing between the tags).
Because of that the link also has nothing that will be shown and therefor uses up no space. Because of that, you cant click it.
The right structuring for that is, to put the div between the tag and the entire div will be a button for the link.
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<a href="/homework_6/cart.html">
<div class="cart">
<id="quantityCount">0</div>
</div>
</a>
</li>
Wrap a link (a href tag) around your icon. Check out this example where I used Font-Awesome's shopping cart icon. see all of code here: https://codepen.io/susanwinters/pen/qBNYdBG
<h1>Shopping Cart Icon</h1>
<p>Go ahead and click the shopping cart icon:
<a href="https://teespring.com/stores/campsitecoders" target="_blank" />
<i class="fa fa-shopping-cart fa-3x"></i><span>5</span>
</a></p>
I want this code to show as the two images being on top of each other. Outside li, it works, like the two images are on top of each other. But when I put it inside the li, it doesn't work anymore. Only the itemframe image appears but the 0 img doesn't appear. Please help. I need to use li because I am currently using a jquery file known as Sly. By the way the code for this is such
img.shopitemframe{
position: relative;
height: 100%;
width: 100%;
z-index: 1;
}
img.itemicon{
position: relative;
width: 75%;
z-index: 5;
}
<li>
<img class="shopitemframe" src="Images/itemframe.jpg">
<img class="itemicon" src="Images/Items/0.png">
</li>
Any tips or answers on how to make this work? Thank you for your time reading this question too.
Comments in comments.
W3Schools on position tag
li {
position: relative;
/* It won't move but any descendant it has will be placed relative to its position. */
}
img.shopitemframe {
width: 100%;
}
img.itemicon {
position: absolute;
left: 50px;
top: 50px;
/* Its `absolute` position will be calculated relative to `li` element position.
Check the link to W3Schools for more information on that. */
width: 300px;
z-index: 1; /* So it is on top of `.shopitemframe` */
}
<li>
<img class="shopitemframe" src="http://i.4cdn.org/c/1458667272301.png">
<img class="itemicon" src="http://i.4cdn.org/c/1459478128149.gif">
</li>
li
{
background-color: "#f00";
width: 100%;
}
img.shopitemframe{
display: block;
}
img.itemicon{
display: block;
}
<ul><li>
<img class="shopitemframe" src="http://placehold.it/300x200" />
<img class="itemicon" src="http://placehold.it/300x200" />
</li>
</ul>
Please check this code now.
Try This: change the Position to absolute
img.shopitemframe{
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
img.itemicon{
position: absolute;
width: 75%;
z-index: 5;
}
<li>
<img class="shopitemframe" src="Images/itemframe.jpg">
<img class="itemicon" src="Images/Items/0.png">
</li>
I am trying to make the header menu ontop of the tesseract theme (http://tyler.com/ ) a fixed position, so that if you scroll down one can access all menu elements from any postion on the site.
I have tried a few things and always added position:fixed; to a few css classes of the theme, but nothing happened.
I would be glad, if you could help me out with this issue.
Thanks in advance
Edit this code from position: relative to position: fixed
.home .site-header.no-header-image {
left: auto;
position: fixed;
top: auto;
}
Now to avoid the top content getting hidden:
.home .site-content {
padding-top: 60px;
}
Output
You could try:
.<youClassName>{
position: absolute;
top: 0px;
}
This should fix your menu to the top and it will follow you on scrolling.
Add position fixed to a div not in every element
check this fiddle
HTML
<div id = "menu">
<ul class = "main">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div id = "content">
CONTENT CONTENT
</div>
CSS
div#menu {
position: fixed;
background-color: #0088cc;
color: #f8f8f8;
width: 100%;
height: 50px;
}
ul li {
float: left;
margin: 2%;
list-style: none;
cursor: pointer;
}
#content {
height: 1000px;
}
remove position: relative;
add
.home .site-header.no-header-image {
position: fixed;
}
Project link:
http://50.87.144.37/~projtest/team/design/AHG/brochure/#28
The dark grey stripe at the bottom is an anchor tag, I can't seem to figure as to why it is not clickable. The css is very simple. The parent class is posRel and the anchor tag is efgLink3 and 'bg-img' is the image over which a tag is arriving.
Html:
<div class="container posRel">
<a class="efgLink3" target="_blank" href="http://www.efginternational.com/"></a>
<img class="bg-img" src="pages/preview/cover-back.jpg" style="height: 587px; width: 415px;">
<img class="bg-img zoom-large" src="pages/preview/cover-zoomed-back.jpg" style="height: 587px; width: 415px;">
</div>
Css:
.posRel{
min-height: 100%;
position: relative;
}
.efgLink3 {
background: none repeat scroll 0 0 #333;
display: block;
height: 70px;
left: 0;
position: absolute;
top: 79%;
width: 100%;
z-index: 11;
}
.bg-img {
left: 0;
margin-top: 10px;
max-width: 100% !important;
position: absolute;
top: 0;
z-index: 10;
}
Problem is in your HTML:
<a href="http://www.efginternational.com/" target="_blank" class="efgLink3"/>
Your anchor is empty, so there's nothing to click on.
<img src="pages/preview/cover-back.jpg" class="bg-img"/>
<img src="pages/preview/cover-zoomed-back.jpg" class="bg-img zoom-large"/>
Presumably one or both of these belongs inside the anchor.
Found the issue, 'pointer-events' was set to none, thanks to all for looking up.
I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying z-index:-100; to content which worked but also makes the text unselectable. I then tried applying z-index:1; to content, but that did not make the content appear under the header/footer.
link to website
//html
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li id="aboutNav">home</li>
<li id="menuNav">menu</li>
<li id="specialsNav">specials</li>
</ul>
</nav>
</header>
<div id="content">
content <br> goes <br> here <br>
google
</div>
</div>
<footer>
<div id="thumbsDesc"></div>
<div id="thumbs"></div>
</footer>
//css
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
}
#wrapper #content {
color: #FFFFFF;
background: url(../img/body.png) repeat-y;
width: 524px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 100px;
top: 90px;
margin: 0 0 0 150px;
z-index: 1;
}
footer {
margin: -107px 0 0 0;
width: 100%;
height: 107px;
background: url(../img/bottom.png) repeat-x;
z-index: 100;
}
To solve the issue, you are using the z-index on the footer and header, but you forgot about the position, if a z-index is to be used, the element must have a position:
Add to your footer and header this CSS:
position: relative;
EDITED:
Also noticed that the background image on the #backstretch has a negative z-index, don't use that, some browsers get really weird...
Remove From the #backstretch:
z-index: -999999;
Read a little bit about Z-Index here!
For z-index to work, you also need to give it a position:
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
position: relative;
}
Set your header and footer position to "absolute" and that should do the trick. Hope it helps and good luck with your project!