I want to customize a Wordpress theme (Attitude) in order to add a sticky footer. Unfortunately I am faced by two problems:
If there is not enough content to fill the complete page, a grey gap between the content and the footer appears: Demo
If there is enough content to fill the page, the footer is overlaying the content but I wont the footer to be placed at the end of the page, after the content
(if there is enough content to fill the page): Demo
This is my current CSS customizing:
body {
height:100%;
}
.wrapper {
min-height:100%;
position: relative;
}
#site-generator {
position:fixed;
bottom:0;
width:100%;
background-color: #fff;
max-width: 1038px;
}
Could you please help me by explaining what I can do to solve my problems mentioned above? Thank you very much.
For your Demo 1 example above please add this to your CSS style-sheet:
html {
height: 100%;
}
This will allow your body tag and it's other children to inherit the height of its main ancestor, the html tag. Extending the content to the bottom of the page. Make sure to always have height:100%for both the html and body tag, in order to have it work.
For your Demo 2 example above add this:
html {
height: 100%;
}
.wrapper {
padding-bottom: 65px; /* same value as footer .site-generator height */
}
#site-generator {
position: absolute; /* use absolute instead of fixed */
}
The reason I use position:absolute instead of position:fixed, is because fixed will always be on top in the same position in the browser viewport.
Related
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
If you visit http://sealbeach.thinkbluedesign.com/, you will see that there is a gap which I believe is for the WordPress Admin bar. I tried putting a filter that removes the space but it still shows to those who are not logged in.
This is the code that I used that worked for those who are logged in but did not for those who are not.
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_login_header');
That space actually appears to be caused by the margin on the #topmenu element. Adding the following CSS to disable the margin on that element should solve your issue.
#topmenu {
margin: 0;
}
the problem is within your #topmenu.. it has float li...
try adding this in you css file...
#topmenu {
display: inline-block;
}
You can use margin to align it to the top. Add margin-top: -30px to div with css 'top-menuwrapper'. So it becomes -
.top-menuwrapper
{
background-image: url("images/top-banner-back.jpg");
background-repeat: repeat-x;
height: 44px;
margin-top: -30px;
}
Thanks & Regards
Yogi
Im trying to implement a more accurate h tag structure on my opencart site for seo purposes. For those that are unfamiliar with the html in opencart, most pages are split with php calls being made to seperate header, main body and footer files. I want to have a h1 tag that is slightly different on the main page to the product page by writing internal css to change the font size to something slightly smaller.
I therefore added the code (below) to the top of the products page which seems to work but leaves a massive white space at the bottom of the page below the footer. Example at this link: http://www.imbued.co.uk/sleep/aborro-bed
How do i implement this using css correctly?
<style>
h1 {
font-size:2em !important;
margin:0 0 20px !important
}
</style>
Try this:
"h1" on main page:
#content-home h1 {
font-size: 2em;
color: red;
}
"h1" on product page:
.product-info h1 {
font-size: 1em;
color: green;
}
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.
Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.
The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.
The CSS looks as such:
<style type="text/css">
#header-container {
/* centering for IE */
text-align: center;
}
#menu {
width: 950px;
/* centering for other browsers */
margin: auto;
}
#logo {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
border-style:hidden;
border-width: thick;
}
body {
width: 950px;
/* undo text-align on container */
text-align: center;
/* centering for other browsers */
margin: auto;
}
#headercolor {
background-color:#EEEEEE;
}
</style>
Thank you
I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.
You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.
For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.
On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..