Is there any reason that would cause something like page.html and page.html#sectionid to have different layouts?
I am having this problem with http://mintclean.ca/new/about-mintclean/ and http://mintclean.ca/new/about-mintclean/#difference, which technically speaking should be the exact same page, with one just starting more scrolled down. However, the second has a white gap under the footer while the first does not.
I can't for the life for me figure out what is happening--the problem is completely consistent across browsers. Any help in understanding what's going on would be much appreciated!
You have to clear the floats inside your <footer> so after the .site-info f3 class, also add padding-bottom: 0; to your <footer>. I think this should do it.
I see you have clear: both; applied to the footer but this is not clearing the elements within.
Related
I am searching for a piece of html which I believe may be causing my site to be obstructed by random black boxes on every page.
I believe that footer is somehow duplicated and <footer></footer> may be the root cause but unsure where to locate it or if there's such a thing as article.php?
Example page: https://adsler.co.uk/events/
The problem is that your content entry has footers. It is not the page footer it is the entry footer that you are seeing. It might be weird to change if you are using a theme. There might be a setting to remove entry footers. But if that does not work you can go into your CSS and apply .entry-footer { display: none; }. This will remove the black box. I will attach a screenshot.
Hope this helps.
I would advise that you leave the footer in the article alone. Fix your problem by styling .site-footer instead of footer
The footer element existing in more than one place is semantically correct HTML5. It signals users and devices of all types that this is the footer of the current part of the site. Your black boxes are because you have styles applied to footer that should be applied to .site-footer instead. You can't predict that the html content created by some plugin wont include a footer element, but you can be fairly certain that it won't have a footer with the class .site-footer
So i built this website (using Angularjs) and for whatever reason, in one of the pages, the footer is keep floating no matter whatever i do.
You can see the issue here:
http://www.deliverightlogistics.com/howitworks
While if you go here, you see the footer positioned in the right place:
http://www.deliverightlogistics.com/ourprocess
The weird part is that given that they both generated into the same Angular content (ng-view), i can't find the reason why i have this issue in one page and not the other.
Keep in mind that I would need a change that would fix the problem but not causing other pages' footer to 'misbehave'.
Thx
This isn't an Angular issue, but a CSS one. In your style.css, you have both #howitworks_second and #howitworks_second article positioned absolutely. Take those declarations out, add a clear: both; to the footer, and your footer pops back to the bottom.
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
I'm almost finished with a pretty big text project that I'm working on, and I need to address a problem I've been putting off: the sidenotes I'm using are occasionally running into each other and overlapping. You can see the problem here if you look for ovoce a or Euripedes.
There are probably lots of different ways of solving the problem. But I'm just not sure where to begin. Any suggestions or clever ideas would be very welcome. Thanks!
EDIT: I'm trying this again. The solution that seemed to work turned out not to work too well!
In your HTML structure, the asides belong to the same column as the main text. If you take away the asides' CSS, they will appear in their original positions, pushing the main text further down. The CSS pushes the asides to the left; position:absolute prevents the asides from taking up space in the main text's column. The layout relies heavily on position:absolute. Take the property out and all the numbering pseudo-elements in front of the paragraphs will be displaced as well.
To achieve the same effect without absolute positioning, you have to rewrite a lot of code: either introduce a 4-column (instead of 2-column) table and move the sidenotes to their own columns, or switch to a jungle of floated divs. Welcome to CSS hell.
I don't know how strict the restrictions on your project are, but here's another approach.
.sidenote {
background-color: white;
}
.sidenote:hover {
z-index: 10;
}
By setting background-color to white, the asides will be opaque. Should they overlap, the aside further down will cover the one above it. As soon as the user hovers over an aside, it will be brought on top of the nearby asides.
I searched for ovoce and found the issue. The sidenote for the text above it is too long so it overlaps. Anyway you can just style the text below it and give it a margin-top like this?
style="margin-top: 60px;"
Here (on Chrome 10) the footer seems to be aligning with the side bar (too far to the right) instead of center like it's supposed to be.
I didn't edit the footer's CSS. I was editing the sidebar and the index when this happened, but it's so far down the page that I didn't notice 'til later, so I have no idea what the problem is.
Any suggestions welcome! Thank you :)
Tara
UPDATE: I've checked all the DIVs are correctly closing. Some were missing in the side bar, and that's fixed the problem on the front page but not on sub pages or articles. Now there is a black line appearing at the top (under the menu) that appears to be the #footer!!. I can't understand why it's there.
you wrapper #casing contains floated elements, which are not cleared for following elements.
#casing { overflow: hidden; }
This should fix it for modern browsers. I recommend this article for better understanding and other clearing solutions.
You need to clear your floated elements by adding clear: left; to your #footer css.