Can someone take a look at this sample HTML page and tell me what is wrong with it?

Posted on 2013-08-31
Medium Priority
Last Modified: 2013-09-04

I am just practicing with a website design and you will notice at the top where the folds are on the header there is a small line at each side which I am trying to get rid of.

The images were just slices from a design in fireworks so all shading etc should be compatible.

Question by:jazz__man
  • 2
  • 2
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39455284
All looks good to me. Any change of a screenshot. I've viewed it in FireFox and IE and it's fine.

Author Comment

ID: 39455480
Top Left Hand Corner of Web Page

Can you see the subtle line at the page edge near where it meets the header. These are taken from firefox design that was sliced so why is the shading different? Perhaps this is a fireworks question rather than CSS.
LVL 45

Accepted Solution

Chris Stanyon earned 2000 total points
ID: 39455497
OK. See what you mean. It's because of the way you've overlayed transparent PNGs. Your little 'wings' (bgHeader.png) have a shadow that is partially transparent. That sits over the shadow from your content background (bgContainer.png).

Couple of ways around it: You could split the header and content so they butt up to each other rather than overlaying each other:

<div id="header">
    <div id="wings"></div>

<div id="content"></div>
<div id="footer"></div>

You could also bin the shadows from your images and use CSS3 instead. You can use border-radius to give you your rounded corners, and box-shadow to give your shadows.

Another more radical option is to re-think your design. Coding webpages by slicing mockups like that makes your site very rigid, and was certainly a popular way of coding a few years back. Things have moved on and flexibility is more important than ever. Your site will be viewed across all sorts of devices that all have very different screen resolutions, so this method of coding may not stand up well on modern devices..
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39456178
I second the slicing.  Take a look at these responsive libraries.   http://getbootstrap.com/ and http://foundation.zurb.com/.  They both contain a css grid system along with preset responsive media queries and some other js goodies.   There is a short re learning curve but they both make it easy to design sites for multiple devices.

Author Closing Comment

ID: 39463802
Thanks, much appreciated!

As you mentioned, I need to start thinking about the vast array of potential end user devices. This was just a wee test template that won't be getting developed any further, it was just a training exercise more than anything.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article is about the challenges faced by Android app developers.
An ASP.NET Web Form User Control is not newly introduced in ASP.NET. In fact, it was an old technology yet still playing a role to generate web content, especially when we want to use it to have a better and easy way to control part of the web conte…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question