I can't figure out why there is so much empty space? - html

I can't figure out how to remove all the extra space at the bottom of this page. I am a beginner at web design and it probably shows, I only know HTML and CSS and then only a little, but any help with where I have gone wrong would be appreciated.

You have images within 'p' tags that are position:relative; that needs to be updated appropriately they are currently not visible at the bottom, but taking up space at the bottom of the page.They are the button images at the top right.
Example:
adoptaroadwork.png
You'll need to check your design and css to fix this issue.

Related

Flexslider width and space between images

I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.

Fixed div at the bottom

I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.

White space on image

I've look around for answers and can't seem to find any. I've posted an image, it's the call for your free consultation/we'll call you. It seems to have an unusual amount of whitspace on either side. It's making my site scroll way farther right than it should. Any help is greatly appreciated. Thanks!
http://gdrummer95.comule.com/
The problem is #contactform has a width of 85%. That's causing the page to scroll to the right. Set the width directly on the image instead of the form.

Split html page: half code, half image

Before to ask my question, take a look at this: http://db.tt/IdmsYZYS
I have some trouble with let black image touch the bottom, the top and the right side of the text box. So that in fact the black image will cover the whole right part of the spitted box.
I am using Wordpress. Maybe you have some tips for me. But just HTML code is also great.
Thansk a lot for helping me!
You can't set an element to have 100% height within a container that has a fluid height. You should try using the Faux Column technique, which solves your problem.

Blank bar at the bottom of a page

I've been working on a few sites, and for some reason, a blank bar keeps showing up at the bottom. I've tried inspecting the elements, and I get nothing that makes any sense. html and body elements are set for margin: 0 and padding: 0.
Any ideas on how to remove the blank bar at the bottom?
Thank you!
Remove the from your clearfixing divs. Even with the height:0, the space character is taking up space. One you remove it, the div will collapse properly.
Probably way off here and I'm not sure but one of the plugins you are using is placing a smiley at the bottom of the page. I think it is popular posts that does this.
Have your tried disabling the plugins one by one to see if this goes?