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.
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.)
A guy did a website for me and I'm trying to understand it. It's here:
http://www.brilliantzenaudio.com
Note that there's a logo image at the top left. I'm trying to understand where this came from. The relevant code seems to be partly in header.php and partly in app.css. From header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-2">
<h1 class="logo"><?php bloginfo('name'); ?>">Brilliant Zen Audio</h1>
... stuff removed here, other items in header ...
</div>
</div>
</div>
</header>
And the app.css contains lines as follows. Looking at the php above, I see that there is a element of class "banner", so clearly there is css code addressing that (giving it a color, a position, border, and z-index). I also see that the header tag is also given the "role" of "banner". Does that serve any immediate purpose or is that for screen readers?
We can also see that the php contains h1 elements, and 'a' elements within 'h1' elements. CSS entries are there for those things. I'm not clear on what their purpose is. For one thing, the logo is an image. Why is it put in an h1 tag? I understand the need for the tag because the logo should be clickable (to get back to the home page). But what is put as the text of the link is some next (I'm not clear on how to parse the PHP there. What's clever is that the image gets put there because it's the background in an "h1.logo a" css entry.
I've added some general questions in comments below.
.banner { }
header.banner {
background:#603913;
position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
border-bottom:solid 1px #fff; // question: is this bottom border important for some reason?
z-index:9999; // what does this do?
}
h1.logo {
margin:0; // is there a need to define these on h1.logo?
padding:0;
}
h1.logo a {
display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
text-indent:-9999px; // what is this?
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // what does it mean when you set the width and height of an <a>
height:103px;
margin:0 auto;
}
.banner { }
header.banner {
background:#603913;
position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
padding:0;
}
h1.logo a {
display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block.
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // Sets the width of this a, because it is a block element.
height:103px;
margin:0 auto;
}
Whilst this isn't necessarily an answer as Veelen's response hit the nail perfectly on what each element does, but below is a screenshot of Google Chrome's Web inspector (Or Firebug for Firefox). Hover over any DOM Element and it'll tell you everything about it, click the CSS rules and modify anything on the fly.
Experiment with it, see how things look & feel and it's constructed. It's how most Developers test & see how changes would look without having to Code/Re upload, and whatever you touch & change during Web Inspector, aren't saved =)
I used a snippet of code that I found on another thread here to implement a 'custom html' feature on my theme. It's like a 'sticky post', or an additional {description} block. It functions perfectly for its own purposes, but interferes with Tumblr's control buttons.
If the user opts out of using the feature (leaves the field blank) the tumblr control buttons disappear entirely, from the front page AND individual posts. If they do use the feature, the front page will display properly (control buttons intact), but individual posts will be missing the like/reblog/etc. controls.
I tried a temporary workaround by adding {LikeButton} and (ReblogButton} to posts, but inexplicably, the like button (but not the reblog one) behaves the same way - only displaying on the front page, or not displaying at all, depending on {ifCustomHTML}.
Here is the block:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
{block:IfCustomHTML}
<body class="page{CurrentPage}">
<div id="customhtml">
{text:Custom Html}
</div></body>
{/block:IfCustomHTML}
</div>
{/block:IndexPage}
And here is the styling, just in case:
#customhtml {
display:none !important;
font-family: {font:Post Body} !important;
background: url('{image:Post Background}') top left fixed repeat;
color: {color:Post Body};
margin: 0 0 10px 0;
padding: 10px;
position: relative;
-moz-border-radius: {text:Corner Radius}px;
-webkit-border-radius: {text:Corner Radius}px;
border-radius: {text:Corner Radius}px;}
.page1 #customhtml{display:block}
The entire code is here: https://raw.github.com/Teratoma/reduxredux/master/ReduxRedux
An example of the problem is here: http://reduxredux.teratoma.tk (scroll down and click on the first post permalink and hey presto! The control buttons vanish.)
I admit the code is cluttered and amateurish but obviously I'm still learning, so I appreciate anyone willing to look at my ugly coding.
Your HTML is invalid. You can't have more than one body element on a page, and they can't be wrapped in divs. Remove the opening and closing body elements from your CustomHTML block. It's important that the tumblr_controls iframe loads (the join / follow buttons in the top right corner), otherwise the like buttons won't work -- when your HTML is invalid the iframe might not load correctly. Fix that and all should be good.
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.
I have a widget that is comprised of quite a few divs. I then use javascript to bring the widget to life and do what it is supposed to do.
It is positioned on the page above the main content.
The client feels having all the widget html above the keyword rich content is bad for rankings, yet visually this is how we want the page set up.
What are some options here to keep the widget positioned as we want, yet not clutter up the top of the page as it is crawled?
current setup:
-javascript file is called in head
-widget html, which is several divs, text, images, etc.
-other page content divs
You could include the widget at the bottom of the page, then use css to position it at the top. Make sure your main content has a top-margin equivalent to the size of the widget. As mentioned in your comment, you'd also need to position the widget sufficiently far down the page to avoid the header content. This relies on your header and widget having specified heights. Your html would be something like this:
<body>
<div class="header">The header</div>
<div class="main-content">The main content</div>
<div class="widget">widget</div>
</body>
Then your css could be something like this:
.header, .main-content, .widget {
height: 40px;
}
.header {
background-color: red;
}
.main-content {
background-color: blue;
margin-top: 40px; /* height of widget */
}
.widget {
background-color: yellow;
position: absolute;
top: 40px; /* height of header */
}
You can see this in action here: http://jsfiddle.net/W3RzU/
As bardiir pointed out, putting the widget code in the correct place would be much simpler and would have minimal (if any) impact on seo.