My footer element is too tall - html

I know what the offending element is, but I have no idea how to adjust the code to make it work. I have tried negative margins which did succeed in bringing the text up and making the box smaller, however past -150px and the text overlaps itself. Also it just isn't good practice for making a responsive website.
It's as if there is padding above the text in the .row class. But there isn't. Any suggestions?
https://jsfiddle.net/7r2wzp2m/
enter code here

For your .page-footer element, delete the top: 340px; attribute and instead put
.page-footer{
position: relative;
margin-top: 550px;
}
Hope it helps!

I would restructure your HTML to have a header, main, and footer sections. More wrappers for more flexibility.
Don't put tags in the middle of the HTML either, keep them in the header or, even better, in a separate CSS file.

The issue is from an element above it, if you add the rule
.container-staff::before, .container-staff::after {
clear: both;
display: table;
content: ' ';
}
That should fix it. I agree with others though that you should restructure your html if possible, it is very hard to maintain as is right now.

Related

Add image to the bottom of a adjustable height section

I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}

div's top-padding is not relative to the div above it

I'm not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}

css margin left and right issues

i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.

Strange div margin issue

I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}

css anchor div to foot of page

I may bounce my head off the wall shortly, I can't believe that something as stupid as this has utterly defeated me ... therefore I turn to you, Stack Overflow ... for guidance and enlightenment.
Problem: Sit div at foot of page, 100% width, outside of any sort of wrapper.
Proposed Solution: http://ryanfait.com/sticky-footer/
Implementation with content: http://www.weleasewodewick.com/redesign/index_content.html
Implementation with no content: http://www.weleasewodewick.com/redesign/index.html
with content -> Good, works nicely
no content = bad, footer sits exactly height of footer below the viewport.
I really would appreciate your input into this, it's completely vexed me for the past hour. I wholly expect some form of ridicule :)
Clarification: Footer should be attached to bottom of the viewport if there is not enough content to fill the page. It should move down beyond the bottom of the viewport if there is sufficient amount of content.
Thanks!
Foxed
I think this is probably what you are looking for:
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
Sorry if I didn't interpret the question correctly, but are you talking about placing the footer on the bottom of the page?
Try this:
#footer {
width: 100%;
height: 150px;
position: fixed;
bottom: 0px;
left: 0px;
}
If you want the footer to stay in one place, change the position attribute to absolute.
This may help the next person implementing the accepted answer (from fortysevenmedia.com) while using Next.js.
You will want to change
html, body {
height: 100%;
}
to
html, body, #__next {
height: 100%;
}
(#__next is the container div that Next puts just inside <body>, which therefore wraps both the container div and footer div that the accepted answer recommends - unless you give it height, the answer won't work).