My knowledge is pretty limited but have tried playing around with inspect element and cannot seem to figure it out? Thanks in advance
site link
I am trying to achieve this..
#
edit / update: got it mostly working just trying to figure out how to get rid of these two, can I do it through additional css?
This might work for you. add this to your CSS styles:
.header-filter {
background-size: auto;
}
First, delete that content: ""; in header-filter::after
second, add style topage-header{ background-color: #ffffff}.
The progress:
I took the photo in a div itself and checked what's behind it (added z-index just to make sure it's on the top):
then I deleted the content:
Changed background-color to red:
The final results:
Recode the .header-filer #media
Delete padding and min-height
The Results:
Related
I have some clickable link and it was working fine. But if I applied css for an another section those link. Here is the CSS:
.strong-view .wpmslider-wrapper {
position: relative;
}
This css is only applicable for .strong-view class. But link of another section is not working. Here is the live link: http://www.cp3472.bmekuet.org/ Here 'Read More' button under Recent News is not working. If I just remove
.strong-view .wpmslider-wrapper {
position: relative;
}
It works fine.
It is really strange!. What problem is going on? Thanks in advance.
It's because you have floated the 3 sections in the middle and didn't clear that float, and .testimonial-container displays below it, but is actually consuming all of the space where the 3 floated sections are because those floats aren't cleared.
The easiest fix is to add
.testmonial-container {
clear: both;
}
A better fix would be to wrap the 3 floated sections in an element with a "clearfix" applied - https://css-tricks.com/snippets/css/clear-fix/
Position relative may affect the z-index of an element (yes, I know that makes no sense, but that's how it seems to me, if anyone has any documentation behind that, I'd love to read it, this is just from my own experiences). Do you have anything else on the page with a z-index? If you change this class's z-index to something higher than your other z-indexes, it will probably solve the clicking problem.
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
I would like to insert a custom footer in every page dynamically, showing date and page number.
I'm using css plugin HTML-Sheets-of-Paper to create a A4 format size.
I did a small code javascript to make the job. But, in print page the div container doesn't stay in wish position.
I know that this question can be easy to some guys, but I tried several alternatives that I could think, without success.
I got:
https://fiddle.jshell.net/gustavo_sdo/avr5jw41/2/show/
Somebody can help me?
Try changing .page-footer to
.page-footer {
position: absolute;
top: 25cm;
width: 100%;
}
Thanks to #robert-eckhaus for the answer.
From this I got to the css that solved my question.
The final result and the code can be seen here:
https://fiddle.jshell.net/gustavo_sdo/avr5jw41/4/show/
I'm creating my first website and I cannot get around this problem, my H3 link keep hovering below my third content list, does anybody know how to get around this problem, I'll be really glad If anyone can help me out
body {
width:98.8%;
position:absolute;
background-color:#e5e5e5;
text-align : left;
}
Demo
If I'm interpreting the comments correctly, I think you want what's happening in this fiddle.
The issue was that the parent anchor tags of the h3 didn't have any positioning, so I removed the top and left position on the h3 and put that styling on the a tag. This is all on lines 27-37 of the CSS in the fiddle.
I think the bigger issue is that the position property is being used in a lot of places and ways that are not ideal.
Look, this is my test site.
http://www.securebitcr.com/test/balls.php
The problem that I am having is, that I see the link style in the flying objects, but I am resetting that in my css .
Please take a look at my code, I've been trying a lot of things and anything works for me.
Thanks,
Marco,
Add this CSS?
.box img {
border: 0
}