On a webpage I've got a list of thumbnails with link boxes on top of them. The are wrapped by a link tag and are clickable. However, in the link boxes on top of them which has a slightly transparent background it is only the text and not the entire box which is clickable.
This is the HTML code for one set of thumbnail and link box:
<article class="recent-post-item">
<h2>
Something
</h2>
<a href="link/to/somewhere" title="Something" class="thumb">
<img src="someimage.png" alt="Something" width="248" height="125" />
</a>
</article>
And this is the corresponding stylesheet:
#column-2 .recent-post-item {
height: 127px;
width: 250px;
position: relative;
border: none;
}
#column-2 .thumb {
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
#column-2 h2 {
font-size: 22px;
background-color:rgba(255,255,255,0.6);
padding: 5px 4px;
margin: 0;
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
}
And heres a working site showing the problem: http://fuckthepony.dk/wordpress/ (the thumbnails I'm talking about are those in the middle column)
Some people have told me that they do not experience the problem. I've tested on Linux with both Opera, Chrome and Firefox and the problem is persistent across all of these browsers.
I concur with the comments above but to make the whole transparent block clickable you would need to also take the padding off of the h2 and add the padding to the a tag instead.
#column-2 h2 {
padding: 0;
}
#column-2 h2 a {
display: block;
padding: 5px 4px;
}
This is because a elements are inline elements, so they don't take all parent's width available. You can add this rule to your css:
#column-2 h2 a {
display: block;
}
That's just because the a element has not display:block by default.
Just add this little line :
#column-2 h2 a { display:block; }
Related
I am trying to make a header with a fixed title, horizontally and vertically centred. With a home icon that acts as a link.
The problem is that link is clickable on everything left of the Home icon.
I have tried to replicate the problem in this codepen;
body {
margin: 0;
background-color: #2d2d2d;
}
#header {
margin: 0;
background-color: rgb(171, 228, 250);
height: 10vh;
display: flex;
}
#homeIcon {
position: absolute;
padding-top: 2px;
padding-left: 30vw;
height: 10vh;
}
#headerTitle {
margin: auto;
font-size: 5vh;
color: #2d2d2d;
}
<div id="header">
<a href="">
<img id="homeIcon" src="https://image.flaticon.com/icons/svg/846/846551.svg" alt="homeicon" />
</a>
<h1 id="headerTitle"> title </h1>
</div>
Is there a way to have the link only on the content of the img tag?
In your CSS you are specifying the homeIcon has a padding-left of 30vw. If you change this to margin-left instead, it will no longer be clickable. This is because padding is included inside your element, while margin is outside. See https://www.w3schools.com/css/css_boxmodel.asp.
The css is your problem: you can solve it by changing padding-left: 30vw; to margin-left: 30vw;
This answer may be useful background reading: Difference between margin and padding?
I have my code set up so when you hover over the H2 an image is revealed. Hypothetically, because the text is z-index:2 and the image is z-index:1, the H2 text should stay fixed. However, upon mouseover, the text is still being moved down to make room for the image.
I need the text to stay fixed in the same position and the background image to just appear upon hover without nudging the h2.
You can view the test here:
http://www.rorywolfseydel.com/test3-2
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #ffffff;
z-index: 12;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #ffffff;
}
h2.three:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #ffffff;
}
<center>
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
Hypothetically, because the text is z-index:2 and the image is z-index:1, the H2 text should stay fixed. This is an incorrect assumption on how z-index works.
z-index is stacking order of elements, having a higher or lower z-index does not mean that elements with a higher z-index will automatically appear on top of each other. You need to use position for that.
For instance, two elements with different z-index values, but with position relative, are positioned relative to one another - meaning the elements affect each other's positioning, even if one has a higher or lower z-index.
Here's a simple example:
.top {
height: 200px;
background: purple;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
.top:hover {
z-index: 3;
}
.bottom {
height: 300px;
background: yellow;
position: relative;
z-index: 2;
}
<div class="top">
</div>
<div class="bottom">
</div>
As you can see, the elements have different z-index values, but the position is relative. If you hover the top div, you can see the box-shadow overlapping the bottom div, but the position of the elements does not change in regards to top, right, bottom, left - only the stacking order.
Now for your specific example:
Here we use position: absolute to take the img element out of the document flow, allowing you to take advantage of z-index. Since the image is now out of document flow, it no longer affects any other element around it.
The snippet below is a very simple demonstration with the position changed on the image. It probably doesn't look how you want it to, but it's a starting point.
Couple other things:
The <center> tag is obsolete. You should use text-align: center on the h2 instead.
Depending on your end goal for how you want it to look, I would consider moving the image out of the h2 tags and wrapping the h2 and img in a containing element (e.g. div). This will allow for better control over the placement of the image once it's visible.
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #000;
z-index: 12;
text-align: center;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #000;
}
h2.three:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #000;
}
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="">
</h2>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
<!DOCTYPE html>
<html>
<head>
<style>
.artisthover {
display: none
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h2.two:hover img {
display:inline ;
}
h2.three:hover img {
display:inline ;
}
</style>
</head>
<body>
<center>
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
</body>
</html>
Well, to set z-index on the image, the position has to be absolute for the image to stay the same, as well as the display of the outer element be inline....
the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet
<div class="stl_02">
<div class="stl_03">
<img src=""
alt=""style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
//other texts here
here are the css rules
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
position: absolute;
pointer-events: none;
}
Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge
Your element does have the top attribute applied. This can be seen in the following:
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
position: absolute;
pointer-events: none;
}
<div class="stl_02">
<div class="stl_03">
<img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
</div>
</div>
</div>
If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.
It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.
Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.
As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).
Can someone please help me how to overlay my globe logo over my blue horizontal bar? Thanks! I have attached a photo of how it looks. I do not want to lose the positioning or anything.
CSS
.logo {
display: inline-block;
width: 100px;
margin-left: 100px;
margin-top: 20px;
max-height: 100%;
}
.title {
display: inline-block;
font-size: 40px;
vertical-align: top;
margin-top: 50px;
font-family: arial;
}
#bannerTitle {
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue, steelblue, white);
}
h2 {
color: white;
padding-left: 120px;
padding-top: 11px;
font-size: 30px;
}
HTML
<img class="logo" src="img/globe.png" alt="">
<h1 class="title">The Inter<span>net</span></h1>
<div id="bannerTitle">
<h2>The World Wide Web</h2>
</div>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You need to add z-index
#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}
It's as matti said; you need to consider the z-index variable. What z-index does is relayer elements within the same stacking context.
From your HTML markup, I can see that your <img> and <div id="bannerTitle"> are sibling elements, so they are within the same stacking context. Therefore, whoever has a higher z-index will display on top of the other.
One way to do that is to demote the "bannerTitle" div, as matti did: z-index:-1.
An alternative way is to promote the <img>: .logo { z-index:99; }.
It's good to know that z-index only applies to block elements, and img is inline by default, but you're already made it a block element with inline-block.
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.