I know it aint short but I fresh in css and I can't solve those questiones for about 2 weeks now...
I can't move my .headline-box to the bottom of the image. I'v tried to change my display and play with, block, flex, grid and changing it to row/column justify/align but nothing. I'v ried to change position to bottom: 0 an squat...
Can any one pls tell how to fix it? And you this solution?
Why nothing that I'v done worked?
And why when I gave position: relative to this class, it went after the image, Down side..?
And besides that, I can really use help to make my code more simple...
I post link but this the url:
Codepen
Thank you all :)
I moved your .headline-box to the bottom as you wished. The problem was caused by a few things, the most important one being that your header/container-fluid/row did not have a height, and because your body did not have a height either, doing this would give no result anyway.
I did the following things:
body & html now has a height of 100% (always do this!)
header also has a height of 100%.
removed the image from your html and applied it as a background-image on your header.
your .headline-box now has bottom: 0, which now puts it at the bottom.
I cleaned up your code significantly and left out the following unnecessary items:
the extra <section> for just one h3.
<div id="main img-div"> did not have an ending tag.
was also unnecessary because you already neatly put your content in a header and section(s).
Here is the updated Codepen.
If you have any further questions, please let me know :)
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
this is my first time asking a question so please forgive me if I'm not asking the right questions. I'm having a problem with my website and I'm pretty sure it's somewhere in the divs and containers. I'm trying to keep the navigation at the top and I want to put some content underneath. The problem is the content isn't showing up. Also, I made a "spacer" id to push the text down where I wanted it. I'm not really sure how to align the text at the bottom without it. If anyone could help with that also, I would appreciate it.
I don't know which parts I should post so if it's any easier, I can just post the links to the page and the .css.
The page is:
http://www.preferredcaskets.com/Untitled.html
The CSS is:
http://preferredcaskets.com/nav.css
Again, forgive me if I'm not asking the right questions. It's late and I'm a little confused at the moment.
Thank you.
You've put your background in an <img> tag, and given it position:fixed, which automatically places it on top of your other content. Quick fix: add 'style="z-index:-1;" to the <img> tag. A Better way is to add it as a background to your body (and also more semantically correct, since the background is not part of your content).
css:
body{
background-image: url("images/bg.jpg");
}
Try display inline in spacer
#spacer {
height:110px;
width:auto;
display:inline;
}
JSFiddle - http://jsfiddle.net/a4enG/
I'm incredibly frustrated by this and it would be a tremendous help if someone out there knows how to quickly figure this out...
What's happening is, I'm working on a site that seems to be extending out to the right of the body. In other words, overflowing to the right such that the horizontal scrollbar appears.
You'll see what I mean:
http://www.lahappy.com/blog/
This is killing me! Would really appreciate someone to call out what I may be missing or doing incorrectly.
Thanks-
The problem is within #fb-root in the right sidebar. If you remove this element, the layout will fit correctly without a horizontal scroll. The child iframe within this element has a width of 575px. You can change this value to auto by setting the style for the iframe in your css as:
#fb-root{
width: auto !important;
}
This line should be placed at the end of the CSS line to overwrite any styles which may disable the width:auto style. Ideally, you shouldn't have to use !important but since you need to override a FB defined style, I'd try it out.
Hope this helps.
Got a nearly finished coded comp here:
http://clients.pixelbleed.net/biodesign/
I realize it's not completely valid, what with my nesting of li's and ul's within A tags. Unfortunately that's the way it has to be.
My issue is with the very bottom of the footer. It has a space showing the body's background color beneath it. Tried a number of things and this space after the black link bar on the very bottom is a resistant little bugger.
Ideally the black box on the bottom should rest against the very base of the view-port, at least when the content is sufficiently long--which it is in this case.
If someone would like to take a quick peak at my source and give me some ideas I'd be very grateful. The CSS can be found here: http://clients.pixelbleed.net/biodesign/css/core.css
And, yes, I've tried removing the height:100%. Makes no difference it seems. I do believe the issue to be with the footer, as when I remove these Div's the content rests as it should. Just don't see anything in my CSS to cause the margin/spacing issue though.
Thanks so much.
if you just remove the class "group" from asufooter-wrapper, the margin disappears.
Not the best solution, but one way to fix it is apply:
#asufooter-wrapper {
overflow:hidden;
}
The problem seems to be caused by some wrapping. However, I tried editing your white-space and widths to no avail.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page