I am trying to create my personal website.
However there is a blank space above the footer i cannot eliminate.
You can find online my website here:
http://www.gx-personal.site/index.php
There is an unexplained blank space above the footer which is more visible at interests and contact pages because the color of background is different.
I have reviewed my code many times looking for padding and margins that might create that to no avail.
The problem seems to be the main tag.
The blank space behaves differently depending on the main's tag display property.
More specifically:
Block will crate space above and below the main section.
Grid (existing) creates blank space below.
Inline-block eliminates the blank space above and below but creates blank space on the right.
To help i will provide the following info:
Each page has 2 css files.
One that manages the header/ main navigation menu and footer and is common for all pages called mysite.css
And a specific css for each page.
The easier way to see the problem is with the interests page as there is no content there.
i have included some comments into the css files to indicate what the problem might be.
How can i eliminate this blank space and why is it created in the first place?
Thanx.
You have the following content after a script tag just above the footer:
It is rendering with 0 width but 19px of height in Chrome.
One of your bottom classes, "phome", has a margin-bottom of 274.075px directly inline.
And it is also an empty one, so I would look there first.
Related
I want to know that how can I reduce the space gap after the header of the blog. Let me be specific, The space gap after the header menu and before the main content body.
I don't really have too much CSS knowledge, but after looking at the massive CSS code of the theme, I was a bit confused and decided not to play with the code. So, a little help needed here.
Link - Thats Breaking
Theme - Newspaper
Blog platform - WordPress
Let me know if I missed any info.
what you are trying to do is set the margin or padding of the header or the body.
You can either use padding or margin, depends on the visual effect you want to get.
margin
padding
To get faster results, you can:
In the web page you linked righ-click on the body container you want to change the space gap
Look for this in the css code inspector:
td-main-page-wrap {
padding-top: 48px;
}
Notice that the withe space is set with that attr.
For example, if you change that in the inspector from 48px, to 0px, automatically header and body content gaps together.
After that you shall change it in you css code. search for td-main-page-wrap.
You can change top, bottom, right or left Margin and Padding too.
Take care if you modify the css of the template, because the class or elements will probable be used in different views. Just in case you see all broken :p
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
On my site http://math.byu.edu
I've been trying to make it responsive to screen size but I noticed a problem when I resize the broawser while on the page. If I shrink and enlarge the browser multiple times the min-height is dynamically getting set to a huge number and I end up with a lot of whitespace.
I've searched my php templates and my css and I can't find anythign that owuld be causing this min-height issue. Does anyone have any ideas?
As per the comments, just comment out the line positionFooter() from the $(window).resize() function.
The reason this theme has this script is to make sure the footer doesn't float into the middle of the page assuming the page has zero content. When the page has zero content, there's nothing to push the footer down. So that script is supposed to keep the footer at the bottom of the page, though it does it poorly.
For future reference, if you need a sticky footer (as it's called), I suggest using Ryan Faits Sticky Footer. Just wrap the content in a main wrapper, make sure the footer is a sibling of the main wrapper then use the supplied CSS to make it work.
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}