nondualit 1 Report post Posted December 3, 2012 Hi, Im wondering how to make the square on the main site like the did on this one http://www.acconet.nl/ They made the header en the content differen than the footer. It looks really nice but have no idea how to make this Any help? Share this post Link to post Share on other sites
Danny+ 1,327 Report post Posted December 3, 2012 Hi, The site you have linked is not loading for me ? You can use the web developer tools that are now bundled in modern browsers or use Firebug, inspect the website and you view the CSS used for both the header and footer. Please search our forums, before posting! Share this post Link to post Share on other sites
wonderwoman 0 Report post Posted December 3, 2012 near as I can tell (using firebug), they're using images to create the effect. You're right - nice looking site :-) Share this post Link to post Share on other sites
James B 436 Report post Posted December 3, 2012 It looks like this has been done with css, using the border-radius and box-shadow commands on the footer. The page-canvas has shadow applied and i would imagine this is using the 'content-shadow' option in the color control tab (this only works if the site is set to fixed width sections'. In the color control tab you can also set the colors for the page/content areas to be different from the background. Hope this helps :-) 1 Kindly search the forum and read the documentation before posting. It will help you resolve many issues. For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting. James B Share this post Link to post Share on other sites
nondualit 1 Report post Posted December 23, 2012 It looks like this has been done with css, using the border-radius and box-shadow commands on the footer. The page-canvas has shadow applied and i would imagine this is using the 'content-shadow' option in the color control tab (this only works if the site is set to fixed width sections'. In the color control tab you can also set the colors for the page/content areas to be different from the background. Hope this helps :-) James thanks for your help! you guided me in the right direction. I reproduced the footer on my website http://www.nondualit.nl and im happy with it. But sill have a minor issue, when looking at this website on the IPAD of mobiel the footer doesnt adapt the same way as on computer. The footer get a little bit bigger than the body, not that bigger but i would like it to adapt as it was on the computer screen. the code im using for the footer #footer .texture { background: #dddddd; margin: 0 4px 10px; display: block; border-radius: 0 0 15px 15px; -webkit-box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 1),inset 0 0 20px rgba(0, 0, 0, 0.3),0 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 12px 8px -8px rgba(0,0,0,1),inset 0 0 20px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.5); box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 1),inset 0 0 20px rgba(0, 0, 0, 0.3),0 1px 5px rgba(0, 0, 0, 0.5); } Share this post Link to post Share on other sites
Danny+ 1,327 Report post Posted December 23, 2012 Can you provide a screenshot of this issue please and also what are your layout settings ? 1 Please search our forums, before posting! Share this post Link to post Share on other sites
nondualit 1 Report post Posted December 23, 2012 setting are - Responsive with Pixel Width i tested Responsive with % Width but than the footer becomes really small (maybe an idea to use this an alter the footer size?) dont know is this is the right way to do it - Fixed-Width Mode Share this post Link to post Share on other sites
Rob 547 Report post Posted December 23, 2012 The reason for this is simple. You'll see it in the CSS copied above, which shows px dimensions applied to the curved corners and particularly, to margins. Since responsive design needs either em or percentages to function properly, those variables will tend to throw-off the fully responsive nature of the section. I suspect it was difficult to combine the curved corners with a percentage or em width margin, as this is a highly skilled designer. Still, his design didn't break the mobile view, so in essence, it worked. The amount of margin effect that the footer indent would have shown on a mobile device would have either been quite miniscule or too grand for a good visual effect. I think the key is, if you're trying to emulate or replicate, is to just make sure that the footer doesn't get so wide that it causes the mobile browser to require adjustment to see the full width (scrolling side-to-side). Hope this helps! Happy Holidays! 1 Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites
nondualit 1 Report post Posted December 23, 2012 The reason for this is simple. You'll see it in the CSS copied above, which shows px dimensions applied to the curved corners and particularly, to margins. Since responsive design needs either em or percentages to function properly, those variables will tend to throw-off the fully responsive nature of the section. I suspect it was difficult to combine the curved corners with a percentage or em width margin, as this is a highly skilled designer. Still, his design didn't break the mobile view, so in essence, it worked. The amount of margin effect that the footer indent would have shown on a mobile device would have either been quite miniscule or too grand for a good visual effect. I think the key is, if you're trying to emulate or replicate, is to just make sure that the footer doesn't get so wide that it causes the mobile browser to require adjustment to see the full width (scrolling side-to-side). Hope this helps! Happy Holidays! HI Rob, how do i do this? "make sure that the footer doesn't get so wide that it causes the mobile browser" im sure there is a option i can give to make this happen, i cant find out how. I tested with 1em & i get the same effect but still i little big.. is not a big problem. But i know there is a solution. Share this post Link to post Share on other sites
Rob 547 Report post Posted December 23, 2012 We are not permitted to provide CSS solutions, and since that designer is also one of our pro developers, my best recommendation would be to hire him as he's going to know exactly how he did that, and why the condition exists. He'd be best suited to resolve it as well. That said, he has this in his CSS for the section: margin: 0 4px 10px; Now, if I change it to: margin: 0 10px 10px 4px ; That would eliminate an extra bit of potentially erroneous space on the right side and could eliminate the gap causing the misalignment in mobile devices. It falls under #sb_footcols .texture That said, I cannot test it on a mobile device, so I've no idea, which is another reason why you'd probably be best hiring the developer as a pro. http://www.pagelines.com/pros Again, px is usually not responsive, so I'm not sure if this is 'the' solution, and it's admittedly a huge guess on my part. Former PageLines Moderator, Food Expert and Raconteur Share this post Link to post Share on other sites