Hmm, I really like it, a couple things are a little iffy...The contact button, I don't see why it isn't inline with the other nav items, having it way to the right makes it a bit awkward. Also, the extra wide sidebar, doesn't really fit as it should either, it would be better if it was a little thinner. Additionally, I would add some kind of hover state to the search button, that is a little bit of a pet peeve of mine...change the cursor to pointer at least?
Everything else, is absolutely solid. I love the colors , fonts, type, and design...
Hmmm John I haven't tested it on a high resolution monitor yet. So is the sticky footer working or not?
@kgscott284 thanks for the reply. I could make it in with the main-nav I suppose :) yeah I agree about the search button, I'll do the same rollovers with the form buttons, too! Yeah the sidebar is ~300px; I suppose that is quite a big area just for a sidebar, I'll make my main-content area bigger and reduce my sidebar.
Yeah, John I see what you mean now! It's making the whole page scroll when it shouldn't :/
What have I done wrong? Do I need to put my whole website in a container div? I have a div class of page-wrap but that is used obviously to keep the content inline whilst the background images stretch to the full width of the browser...
Right, I have deleted all the elements required for the whole sticky-footer thing so I can start again from fresh seen as though @Paulie_D has helped me clean up my .page-wrap code etc.
ATM my footer is just rising so I'll just start again now.
Basically the whole reason it kept scrolling and had a lot of blank space was because I was positioning the opening page-wrap div just after my closing header tag.
What I was meant to do was position the div just before the opening tag.
The 204px gap was being created because that is the size of my header, now it works perfectly.
Thanks for everyone's help, its appreciated greatly :)
Hi everyone
Just got my new website up + running here. Im quite pleased with the outcome but I'd like to know if there are any improvements that could be made.
Anything welcome
Thanks
Looks clean, have you ever thought about adding a sticky footer?
I have a sticky footer don't I? At least I thought I did.
I have done the code for it with the negative margin on the page wrap and the push div with the height of the footer etc.
I must have coded it wrong :/
My appologies, when i browsed there seemed to be a lot of space below the
#sidebar.Hmm, I really like it, a couple things are a little iffy...The contact button, I don't see why it isn't inline with the other nav items, having it way to the right makes it a bit awkward. Also, the extra wide sidebar, doesn't really fit as it should either, it would be better if it was a little thinner. Additionally, I would add some kind of hover state to the search button, that is a little bit of a pet peeve of mine...change the cursor to pointer at least?
Everything else, is absolutely solid. I love the colors , fonts, type, and design...
Hmmm John I haven't tested it on a high resolution monitor yet. So is the sticky footer working or not?
@kgscott284 thanks for the reply. I could make it in with the main-nav I suppose :) yeah I agree about the search button, I'll do the same rollovers with the form buttons, too! Yeah the sidebar is ~300px; I suppose that is quite a big area just for a sidebar, I'll make my main-content area bigger and reduce my sidebar.
Thank you, man.
Yeah, John I see what you mean now! It's making the whole page scroll when it shouldn't :/
What have I done wrong? Do I need to put my whole website in a container div? I have a div class of page-wrap but that is used obviously to keep the content inline whilst the background images stretch to the full width of the browser...
There you find the solution
http://ryanfait.com/sticky-footer/
Hi @Koopa
I have tried following that already, but obviously I have gone wrong somewhere down the line. I will try it again now.
Thanks
You'd need to start by taking the class of .pagewrap off the div inside the footer and changing the height of the footer to , I think, 105px.
I see it's also on a div inside the header...that's probably not right too.
By the way, it's not necessary to add width:100% to divs...they automatically are 100% wide.
Hi @Paulie_D
So do I make a new class within my footer to give it the 960px wrapper, something like;
.footer-inside? And just apply a width to that...
Yep...that would work.
The class you have on .inner would work.
So rather than having a page-wrap on my index.php for the loop file I just use .inner? Or do I use none at all?
Aha....I think it's that div just before the end of the page wrap with a class of push....remove that div and I think you are there.
As for the loop, sorry I know nothing about WP.
Isn't push the div that makes the sticky footer work?
It's supposed to but I'm not sure it's actually required.
Right, I have deleted all the elements required for the whole sticky-footer thing so I can start again from fresh seen as though @Paulie_D has helped me clean up my .page-wrap code etc.
ATM my footer is just rising so I'll just start again now.
The massive gap between my content and the footer seems to happen when I apply this css;
html, body { height: 100%; }
GUYS I HAVE DONE IT!
Basically the whole reason it kept scrolling and had a lot of blank space was because I was positioning the opening page-wrap div just after my closing header tag.
What I was meant to do was position the div just before the opening tag.
The 204px gap was being created because that is the size of my header, now it works perfectly.
Thanks for everyone's help, its appreciated greatly :)