Help With Coding

Hi
Here is the page in questions; http://www.fourquotes.co.uk/webdesign

Here is my problem, I have got my developer to add floating buttons to left of the page for navigation. These stick to screen width. So if I choose a screen size smaller than 1440 the buttons start to go over the page content and sit on top of the content.

I need a way to make these buttons not do this.

I have thought; If we make a page border somehow that is the responsive and shrink these buttons.
Or we make a script to say if the screen size is less that 1440 dont show the buttons.

I cant put this in coding terms for my developer and need some help knowing how to explain.

What is the best way to do this?

 

Could you not have the buttons site horizontally at the top or bottom rather than vertically?

Personally I think it would look a bit nicer too.

 

Hi shteca,

In my opinion you should ask your developer to use media-queries in css. What you can do is put them in the header, or footer or static somewhere in the page that you like. (somewhere that responds well).

Then use media-queries for screen widths above 1440 to set fixed positioning to the left (like you currently have) on the div you wrap your buttons in. As a result, your buttons will float on the left on screens larger than 1440px width, and stay where you initially place them on all smaller widths.

Cheers,

Kris

 

Krisism is on the right track, but to be frank the layout is problematically bad at most every level -- it has the typical trifecta of /FAIL/ at web design of fixed width layout, fixed metric (px) fonts, and illegible color contrasts. I'd be worrying about that before worrying about some goofy buttons that replicate existing browser functionality.

Though to be brutally frank, I'd swing an axe at those buttons ENTIRELY for that very reason. Just like a decade ago when people were adding 'bookmark this page' buttons to every site, you have to remember the mantra (that I had drilled into me back then) "Never waste time or bandwidth replicating functionality built into every browser!" -- those elements are redundant to the mouse wheel, right half-inch of most trackpads, flicking your finger across a touch-screen, or the page-up and page-down keys. The sections of the page they are attached to aren't even big enough to warrant the presence of such navigational elements on tablets and netbooks! So that would be a really easy solution.

But the blurry illegible webfonts in uselessly undersized pixels, color contrasts far, FAR, FAR below accessibility minimums are a much, much bigger issue. IT might be pretty, but at... well, let's do the math; there's a formula for determining emissive (Screen) luminance, that appears in the web content accessibility guidelines, the VGA specification, and an even older usability guideline co-published by IBM, Microsoft and Apple.

L = 0.3R + 0.59G + 0.11B

Ideally a foreground and background color should be at LEAST 50% apart, font smoothing technology increases that even more, and a ideal should be 70% or more difference. The white is 255 of course, the blue comes out to 141... As a rule of thumb colors that come in at a luminance anywhere from 112 to 144 should be avoided on anything involving text, as there's no opposing color with sufficient contrast to be legible.

255 (white) minus 141 is only 114, short of the 128 minimum to even be 50%. What does being below 50% mean?

< 50% causes eye strain for well over half the population, and is illegible for as much as 20%.
< 25% should cause eye strain for just about everybody, and is illegible to more than half the population.

It's important to know that formula when making a website... and that's just talking the blue and white -- the gray is even worse. (and looks like a rendering error up top).

The code's got issues too, which is probably why I'm seeing four different layouts in four different browsers. Nonsensical use of numbered headings, 14k of markup for 2k of plaintext and a half dozen content images; likely as much as twice the markup as should have been used -- much less the endless pointless scripting on a site that near as I can tell doesn't do anything warranting JS's presence.... well, except for the artsy "false simplicity" on the inaccessible form.

Basically, you've got bigger problems than some cute buttons you really don't need on the page not lining up when the page is narrow.