I'm having Sticky footer issues with this site:
http://dev.epicwebdesign.ca/allshipsrise/events/
For some reason or another, The #page div is limiting itself to the header.
I can't figure this out. All tags are closed, etc. The W3C Conformance checker only complains about "the acronym element is obsolete. Use the abbr element instead.". That is wordpress's doing.
It's similar to Footer isn't at the bottom of the page However I have set clear:both on the footer.
The footer is fine when the page is too tall. I need it on the bottom even when it's not.
There were a couple underlying issues, mostly from trying to compensate for the real issue. (Not setting body height:100%) They're all sorted out now.
In your body set the height to 100% and your footer will be displayed until the end of your page :)
Or another work around would be changing the margin-top: to 100%
You have a few problems. With element.style you are using absolute positioning and raising it up 85px. Change that to position="relative" and remove the bottom attribute.
This:
element.style {
bottom: 85px;
position: absolute;
}
Becomes:
element.style {
bottom: 0px;
position: relative;
}
Removing position:relative solves the problem. Just remove this element using firebug and you will get the result.
Related
I am making my first steps learning to code. I made some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.
The thing is that I have a week trying to find the way to get rid of the white space below my footer using the twenty sixteen theme. I found ironical the fact that something called "footer" is not really a footer. It's something that floats on a white space.
Do you have some suggestion about what can i do to place the footer at the bottom of the page and get rid of that white space?
I know that I can just make this:
.site-footer {
padding: 0 7.6923% 1.75em;
/* visibility: hidden; */
height: 100px;
background-color: transparent;
position: fixed;
bottom: 0;
width: 100%;
}
But if I make this, then there is no a margin between my content and my footer:
Edit
I found that the position of my elements in the footer depends of the height of the content of my page. Now I'm looking for a way to stablish that the content of my page should occupy the 100% of the height but I can not find where. Do you have some suggestion?
If I understand your question correctly, what you are hoping to achieve is to place the footer (the "Garrah Morris" signature) on the bottom of the browser window, when the content is less than 100% of the screen height.
One way to surely achieve this is by simply setting the footer containing div to position:absolute;bottom:0;. (Though it will cause overlapping issues when the content above it is over a certain height.)
I am building a website for some local business and I can't figure out what is causing the side scrolling. I must have been really tired and messed up somewhere. Any and all help would be wonderful. The link to the site is http://theparkwayrv.com
If you look, you'll see that there is a side scrolling bar. Please let me know if you can figure it out. I've gone over it like 10+ times and i'm losing my mind right now.
Thanks!
Add
body {overflow-x: hidden;}
to your CSS.
Generally, this is due to having items with width or min-width set to 100% or 100vw in your page. When the browser adds a vertical scrollbar to it (17px in Chrome), it makes it 100% + 17px, hence the need to add a horizontal scroll. This, however, doesn't happen on most mobile UI's and any browser that uses semi-transparent-show-on-scroll-only scrollbars.
As very well spotted by Tersosauros, the only one who, instead of providing a quickfix, like the rest of us, actually took the time to look for the real cause of your bodys extra width, in your particular case, this is due to using Bootstrap classes incorrectly. You used .row independently, without being a direct child of .container and the page is wider with 30px.
However, the quickfix still solves it. At least in this life, we're mostly payed for solutions, not for being right. Right? :)
This issue is being caused by the 15px left and right margins on .row (line #7, bootstrap.min.css) affecting the child div within the parkway_about_page div. This is part of how Bootstrap expects your page to be structured, as pointed out by #Andrei Gheorghiu . If parkway_about_page were also a .container bootstrap would fix this for you.
Either option fixed it for me:
Add (as the many other 1-line answers with no explanations have suggested) overflow-x: hidden; to #parkway_about_page.
--- OR ---
Remove the margin(s) from the .row div underneath parkway_about_page, (or just remove the class entirely).
Use this css to your body section:
body{overflow-x: hidden;}
Try this...
body {
overflow-x:hidden;
}
add this to your css file :
body{
overflow-x: hidden;
}
in body just put overflow-x: hidden
I'm trying to use window.loaction.replace() and discovered unwanted behavior.
The redirect works fine but it messes up my html structure.
It redirects to the wanted site but the top panel becomes a ghost. As far as I can tell the body structure behaves like it has a "negative margin the size of the panelheight". If I double the size of the panel with firebug it comes down.
The whole page looks like there is no panel at all after redirecting.
redirector: function(e){
window.location.replace(e);
}
The top panel is a nav element containing to ul's from which the right one is floated right. It is not fixed:
.panel{
display: block;
height: 42px;
position: relative;
z-index: 9998;
}
Even after manually reloading the page the bug doesn't disappear.
EDIT:
Same problem occurs if i redirect with PHP header: location...
The complete html,body moves up.
If I had to describe this bug in css it would look like:
html{
height:100%
position: absolute;
top:-40px;
bottom:40px;
}
Maybe it's useful for someone else:
The problem occurs if the calculated height of the content inside the body,html tags is higher than the body,html itself.
If the html,body have 100% height and inside the body are for example three elements:
Top Navigation Panel
Content Wrapper
Footer
And the calculated CSS height for these three element is higher than the body height it leads to this problem.
I don't know why it does only show up after a redirect but not if I navigate through links.
I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.
I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.
I could use some help here.
Here's the html code for iframe:
<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>
The CSS is:
div#main_frame
{
float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}
iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;
}
Thanks for the reply #tyriar, I have set the word-wrap property to the original page now. Still nothing happens.
<div id="display_posts">
<?php //php echoes some text here ?>
</div>
The CSS code is:
#display_posts
{
word-wrap:break-word;
}
You defined same ID 2 times , but ID must be unique , you can not declare it twice.
So use class instead of using ID
Also iframe call other page and you defined word-wrap in original page so its not apply.
Try
word-break:break-word
or
word-break:break-all
And try using class instead of ID because ID should be unique.
You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.
Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.
Update
If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.
Here's an image:
The HTML is in a php which is as follows:
print "<p class = 'Back'>Epic Fail</p>";
print "<p>You forgot to put in your Username or Password.</p>";
The CSS for the Back class and p is as follows:
p.Back
{
font-size: 200px;
display: block;
text-align: left;
font-style: oblique;
}
p
{
font-size: 20px;
color: #292421;
font-family: Times;
}
This is all wrapped in a div tag that has around 25px padding, why is there so much white space? It's a problem because it creates a scroll bar which I don't want and it doesn't look very good.
EDIT:
Here's the div:
#login
{
background: #E0DFDB;
width: 1200px;
margin: auto;
}
I'm using the latest version of Google Chrome (Sorry for not specifying)
The scroll bar is successfully removed by taking away the padding from the login div and the line-height. However, there is still the white space and I have thoroughly ran through all of my code to see if I've added anything to the p tag but I couldn't find anything. Is there a site where I can upload all of my code to show you guys?
RESULT:
Thanks guys, I decided to use the web dev tool that came with google chrome and IT TURNS OUT: THE MARGIN BY DEFAULT SOMEHOW GOT SET TO 200PX??!! so all I had to do was just set the margin for p to auto
This happens because, by default, Chrome applies a style of -webkit-margin-before: 1em; -webkit-margin-after: 1em to p elements. In your example, this would create a 200px margin above and below the element. Setting margin: auto or any other margin value overrides this default.
Other browsers apply a default margin to p elements in different ways: e.g. Firefox applies margin: 1em 0 which results in the same effect.
The margin does not appear on jsfiddle because they employ a reset stylesheet which gives p elements margin: 0.
I've created a JSFiddle version of the code you've posted -- see http://jsfiddle.net/RukbS/
In my JSFiddle, I can't see the massive empty space beneath the "Epic Fail" which is in your screenshot, so I guess there's something in the code you're running which you haven't shown us.
Without seeing your code actually in action, it's hard to know what the difference is between it and the version I've created, but looking at the screenshot, it looks very much as if the "Epic Fail" paragraph has run over two lines.
The only way I could get my test to replicate this was by putting <br><br> immediately after the word "Fail". I'm assuming you're not doing that.
You might want to consider dropping the line-height attribute from the stylesheet. It isn't really achieving much (as it will pick up that size anyway due to the font size), and is the sort of thing that might be causing what you're seeing. If you really do want a bit of extra space around the text, use padding or margin instead; it's easier to control than line-height.
You didn't state which browser you're using that shows this effect. It is possible that you're seeing something that only shows up in certain browsers. Most browsers these days come with a good debugging tool which can help isolate issues like this. In Firefox, you'll need to install the Firebug plugin; in most other modern browsers, the Developer Tools feature is built in.
Open the Firebug/Dev Tools window, and use it to find the "Epic Fail" element. It will allows you to examine the size and shape of the element, and what styles are being applied to it. This will almost certainly give you the information you need to work out what the problem is.
I know I haven't given you an answer that directly solves the problem, but I hope some of the things I've pointed out here will lead you in the right direction to finding the problem.
Not sure what you are trying to accomplish, but the combination of
padding on the div and
extra line-height
might be causing the excess.
Right now, your adding
50px from padding (25px on top and bottom)
50px from line-height (which is 50px more than the font-size)
I tried your current code in a fiddle and it seems to work fine (drag the bar to the left to see the entire screen)
http://jsfiddle.net/jasongennaro/aNRhN/
Perhaps there is other code being inserted with the PHP?
Or you have other styles applied to the p.