underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Fizz Blog

Responsive Web Design: Equally Spaced Horizontal Menu

A menu is one of the first and most basic things your site needs. Styling a menu to fit a static web page that is say, 960px wide is one thing, but how do you create a horizontal menu that stretches across the width of the site in a responsive design?

We’ve already showed you how to create equally spaced divs in a responsive web design, so it might be a good idea to familiarise yourself with that first.

equally spaced horizontal menu with css

Read the rest of this entry »

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , ,

This entry was posted on Friday, November 28th, 2014 at 12:15 pm and is filed under Web Design.
You can follow any responses to this entry through the RSS 2.0 feed.

Make CSS Background Image Fit Dimensions of Div

Using in-line styling, you can adjust the size of an image in your HTML code; but it often poses a problem for coders when they require a background image to be resized to fit the constraints of an existing div.

Why would you want to do this, you may ask? Well one example of usage would be when using an image as a send button perhaps or more likely these days – when using responsive design where your div will respond to the size of the user’s browser (desktop, iPhone, Android, Tablet, iPad etc etc).

make background image fit div with css

Read the rest of this entry »

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , ,

This entry was posted on Thursday, September 4th, 2014 at 11:08 am and is filed under Web Design.
You can follow any responses to this entry through the RSS 2.0 feed.

Equally Spaced Divs in Your Web Design

There are several simple ways of making sure your divs are separated and spaced equally horizontally across a page. If you use a static 960px width, then you can dimly float your (set width, say 450px) left or even left and right and add padding and margins to fine tune.

But what if you have a fully fluid web design or a semi-fluid (this site uses a maximum width of 1200px and a minimum of 960px depending on browser) or maybe simply more than 2 or 3 divs that you want to show next to each other like this?

equally spaced divs css html

Read the rest of this entry »

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , , , ,

This entry was posted on Friday, August 1st, 2014 at 11:20 am and is filed under HTML & CSS Tricks.
You can follow any responses to this entry through the RSS 2.0 feed.

Host Server Updates Changing htaccess File

You may be aware that I wrote a while back about how Free Virtual Servers were affecting my .htaccess file with their own server changes – it seems that your code can be messed with without your permission or prior warning or notification. We use Mobile Detect to redirect our desktop site to a mobile version depending on what the user is using to view our site. To do this we need to parse our html site as php. You can see this in action by searching for Fizz Web Design on a Smartphone. You should be redirected to our mobile version.

I gave a solution for all those suffering a similar fate which you can read here.

Recently it’s started happening again..

htaccess file code broken by server update

Read the rest of this entry »

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , , , , , , ,

This entry was posted on Thursday, May 29th, 2014 at 11:49 am and is filed under htaccess.
You can follow any responses to this entry through the RSS 2.0 feed.

Stop Skype Changing Numbers On Your Website Design

We all know as web designers that we have to do two things when we design a website; make it look nice of course, then try to make it still look nice if the user is using Internet Explorer, and to make it worse, it can change depending on what version the user is using – IE6, IE7, IE8 IE9 or IE10. Microsoft do things “their way” often ignoring convention or the rules universally adopted by others.

And so we come to the annoying problem of Skype rendering the perfectly placed phone number on the site you have just designed in a completely different way to how it was intended to look. Skype (owned by Microsoft) will add its own small Skype button into the mix as well as changing the colour of the telephone number to bright blue. Not good.

no skype on website

Read the rest of this entry »

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , , , ,

This entry was posted on Tuesday, April 30th, 2013 at 12:11 pm and is filed under Web Design.
You can follow any responses to this entry through the RSS 2.0 feed.