I have two questions im sure are very simple I'm just looking over something.
1.) To start off, my website is mostly HTML, except I have a WordPress blog page. To make the blog page look like the HTML home page, I modified the header.php and footer.php, and everything looks fine except one problem.
As you'll notice if you compare the Home page with the Blog page, for some reason the margins I have to position the navigation links & social media icons isn't working but it works on the home page? I really have no idea why it isn't working, the stylesheet is linked correctly and everything, as every other style works fine except the margin in those areas.
2.) At the bottom of the home page there is a white space below the footer, but its not on the WordPress blog page? I am trying to remove the white space but have had no luck. The only way I can remove it is if I make the footer 30px larger, which I don't want to do. I have set heights on the HTML, Body and am unsure why the space is there.
Thanks ahead of time, I appreciate you taking the time to look at my questions.
EDIT here is a link to the site:
http://jqwebexamples.com/iAM_Talent/Version3-rev/index.html
The <p> Tags in your footer are the problem. If you remove (or disable it temporarily) the following style:
#footer p {
margin-top: 45px;
}
then the white line disappears. Take a look in firebug to check this out.
The other issue looks like caused by the unsorted list in your navigation div.
Related
I'm having the following problem:
I've created a landing page with a wordpress plugin from my website (As building it with the plugin I have is SO EASY!) then copied the source html code and pasted it into the wanted wordpress site, into a blank page.
The problem is that now wordpress is creating a weird margin (white space) on top making the landing page appear further down.
Can I copy source html code and past into a Wordpress page and avoid white margin on top ?
Everything looks like working fine when I copy and paste then HTML code, besides this annoying top margin that I really don't understand where is coming from...
Go to your CSS page
put
*{margin:0px;
padding:0px}
It will remove your white margin and padding*
Ok, So I have customized a Twenty Fourteen theme from WordPress. Everything works find minus a couple things. The top header shows a white background if its stretched. The footer also shows a white background if its stretched. The funny thing is there is no white background in the css code? I have even looked in the functions.php to see if it was hard coded issue and nothing. I tried to inspect the element and all it says it shows up before and after? I tried adding background: none; to all the before and after codes and still shows up. Does anyone have a clue I have linked the site I am developing on.
Website: http://www.soslidesigns.com/flh
If worst comes to worst I can simply re-design it and I have a feeling I might have to. Would be nice to get your guys feedback. Like I said I have tried everything I could think of simple issues like this always through me in a loop.
Thanks in advanced.
Your white background write here in body (background:none). This set white background to all site. If you need set another color to header - change background in .site (in this file)
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
I'm relatively new to web designing, and this is my first full-scale project so I apologize in advance if any of my code is found messy. Cutting straight to the point, I'd like to make the space between my main content/wrapper and footer a specific size. By which I mean cutting the space at the end of the page to about 20px. My code/css would be too long to explain, so I'm wondering if anyone familiar with FF's element modifier would take a look and see if they can figure out what's causing the large gap.
Link to my website: http://guard.neetgroup.net/?
This is the homepage for some reason, with nothing in the main content bar:
Another accessible pages w/o login:
http://guard.neetgroup.net/?app=cpanel
http://guard.neetgroup.net/?app=profile&u=Veritas
http://guard.neetgroup.net/?page=404
Made some slight changes to your css and i think i got what you needed.
CSS
div#wrapper.global {
margin: 0 auto 20px;
}
Then remove the footer with the id gap as it's not needed and remove the height in the body.
This makes the footer only 20px under the content box but doesnt extend the footers background colour to the bottom of the page. To do that, you would really need to recode the website again and use the footer bg as the body background and have the header and content use different background colours as theyll be the expanding content in the middle.
I solved my problem by removing the 100% height on the wrapper, and padding out relative length of the page.
I am having a hard time figuring out what's going on with a theme for a new script that i just bought.
My site is azngirls.com (don't worry it's not pornographic hahah) and if you go to the frontpage you will see that there is a nav bar on top or header bar that shows Login - Register (Forgot Password) and etc. and that bar is supposed to be on top without any gap but if you go to other parts of the site like for example http://azngirls.com/tos - you will see that there is a gap between that nav bar and the actual top of the website which makes it look awkward when you scroll down. This problem occurs everytime i edit the smallest things inside the php file, as in even if i change a single word or letter it suddenly shows that gap.
Another problem that I am having is that on the same page - on the side bar to the right there is a "Show me" button for Browser Plugins but when i click the link it takes me to a 404 page, but when i click the Tools link in the footer menu it takes me to a page that works.
Thanks alot for any help you guys can give! Really appreciate it!
you have a huge empty line filled with whitespace between <body> and <meta> tags. and you included a <meta> tag inside a body, as it should be in the <head> tag.
As #tpaksu suggested, your html is totally messed up. And there is a easy fix to your problem, just add the following code to your style sheet.
.content-infobox {
top: 0;
}
use this code on the respective ID
#id{
margin:0px;
}