Hi I am trying to make a small square thumb into a small hexagon. I have found a brilliant tutorial here:http://jtauber.github.io/articles/css-hexagon.html and I have spent quite a while trying to figure out the CSS I would need to make it work on the site I am building but have had no success. I am trying to make thishttp://i.imgur.com/OBCetVM.png look like thishttp://i.imgur.com/SWBWstl.png Could anyone spare some brain cells to help me. I am completely stuck. the site is here http://www.catalystforgrowth.co.uk/about-us/ Many thanks
Unfortunately the part that sticks out on the side of CSS hexes are border-color, not background... as such you can't make a background-image do what you want as shown in the picture. Though since those are quite obviously images, why are you trying to chop them in the markup instead of just making the images be hexes?!? Also, damn that site is an accessibility train wreck with all the content declared in absurdly undersized fixed metric (aka px) fonts... Shame since it actually seems to attempt to be responsive. emphasis on attempt, but that's garbage like 'grids', off the shelf frameworks and the train wreck of nonsensical bull known as HTML 5 for you...
Thanks for your response. I have gone down that route and made the images hexes instead. Would you mind just explaining a little more what you mean when you say the site is an accessibility train wreck? - any tips on what I can do to make it less so. Thanks again for your time.
Well the first step would be to STOP declaring font-size in px. That's really the biggest of the issues there. The WCAG says to use % or EM fonts for a reason -- that reason being they auto-adjust to user preferences so that users (like myself) aren't diving for the zoom. Usually if a desktop user is diving for the zoom, they are just as likely to say "screw it" and just visit some other website. Much less if you use one of the broken methodologies like the whole "grids" asshattery then mix it with a responsive layout, zoom more often than not breaks the layout making it even LESS useful to visitors. Likewise the colour contrasts of the dark grey on black in the footer is WAY below accessibility minimums. Section 1 of my "what's wrong with your website" covers a both colour contrasts and font size issues. http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-1 Your media queries / responsive layout works reasonably well except for that image logo on the top right is half-off the screen at certain sizes, so that needs some tweaking. I'd also suggest flipping the page title and site title around in the TITLE tag, since the useful information gets chopped off on tabs. Subpage FIRST so if someone opens up multiple tabs of your site, they can see which sub-page they're on. Also there's no such thing as "index" or "follow" on robots. If you don't want nofollow or noindex, don't include a robots meta at all. Under the hood you don't have anything resembling semantic markup, so things like heading navigation just don't work at all. Admittedly, that's kind of expected with the steaming pile of manure known as HTML 5 in the mix (can you tell I'm a fan?) which is part of why you ended up with 23k of markup to deliver 2.42k of plaintext and three content images (as in there are only THREE images I would even consider using an IMG tag for) -- easily two to four times as much markup as should have been needed! the page is knee deep in endless pointless javascript for nothing, and between all the useless javascript and multiple CSS files it's taking about ten seconds to first-load here thanks to all the handshaking to your server -- ridiculous given how little content is present! You're using 28 files to do what really should be done with 12 or less. The 330k of Javascript is to be expected once jQuery-tards get their hands on a website, but the 350k of CSS is so ridiculously absurd I can't fathom what the devil is even going on there! (an entire FORUMS shouldn't need more than a sixth that!) MOST of the problems seeming to have something to do with whatever that 'avia' thing is... which seems to be encouraging you to use classes in a presentational manner, and overall have a megabyte sized website doing a tenth that's job. Literally there's no good reason for that page (or any page on that site) to be using more than 10k of markup, 20k or so of CSS, and I'm not seeing ANYTHING that warrants the presence of ANY javascript. Of course, you're in turdpress here, and that can by definition pretty well shtup you in terms of fixing a LOT of what's "wrong" here.