Your help, opinions and overall constructive criticism please… :)

[Kayleigh]

…

[Fourize]

Hi Kayleigh,

I”ll get the first question out of the way for you, to position it in the center absolutely position it, then apply left and right widths/height and adjust it with the negative margin positioning… may sound daunting but quite simple, here’s the code for you

.button {

width: 140px;

height: 70px;

display: block;

position: absolute;

left: 50%;

top: 50%;

margin-left: -70px;

margin-top: -35px;

}

the background is quite large, I’m sure you could get it a little smaller than 2.4mb.

I’ll try and help more later if others don’t lend a hand!

Best of luck

[wolfcry911]

Fourize is correct, that would be the simplest way to center it. However, you don’t need to wrap it in a div – you could just apply it to the anchor itself. Also, if you’re going to use a png for the text, you should do a couple things. First, use the same text in the anchor as the png (not ‘button here’) for screenreaders and SEO. Second, given the background image, the image should contain white and shadows for both normal and hover states – its too easy to lose the image in either state depending on screen size. I’d also consider combining the two pngs into one and position it top or bottom depending on hover state – there’s a temporary lag/flash when calling the hover for the first time otherwise.

Fourize is also correct in that 2.4mb for a web image is far too large. GIF is not a good format for that type of image. I’d bet that it would come in under 100k in jpeg medium – and that you could tweak it closer to 50k without any trouble (and probably even further).

IMHO, when first learning web design/development you should leave mobile out of the equation until you have a better understanding of how things work – just my $.02

Did you say ‘cell’? DO NOT use tables for layout!!! Learn CSS – we’ll help you.

Two final notes – you can’t use an id more than once per page and learn to validate your code. Validation truly isn’t the be all and end all – but it is a great tool in helping develop clean, valid code which in turn will help in your learning process.

[wolfcry911]

Here’s a couple more notes:

The center element disappeared in the late Jurassic period. Don’t use it (kidding aside its been deprecated for a long time).

Don’t use inline style attributes like align – they too have been deprecated in place of css.

This one isn’t as important, but try to use better class names than ‘style9’, ‘style11’. Also try to name them by what they do or their purpose, not what they look like (‘blue’ is also a terrible class name).

Learn inheritance. I see many of your styles have the same font declarations. You could put one font declaration on the body and everything would inherit that font. Then you change or override font or size, etc. when needed on specific elements.

Use the alt text in images appropriately – try to briefly describe the image, or in the case of text, write out the text.

[wolfcry911]

this is one way I might mark-up the content.

About


Contact


Portfolio


Testimonial




 





bathroomsbyryanwaine.co.uk has been designed specifically to allow our customers to view our extensive portfolio of bathrooms, en-suites and cloakrooms inspiring you with different ideas and concepts along the way. With over ten years in the industry we have come across some of the most awkward, complex and challenging bathroom's you can imagine. We pride ourselves on our award winning customer service and attention to detail. Whether you require a bespoke bathroom re-designed around your specific personal tastes and specification or are simply unsure of what is required we can tailor any bathroom installation to your desired budget and requirements.


We offer a full in house design and installation package using fully qualified and insured trades to undertake every aspect needed. We can also design and create your new bathroom on our computer package resulting in a 3D image for you to view before any work is even taken place.


As a continuously growing company we are able to offer competitive quotations without a compromise to quality. Give us a call and start the ball rolling to create bathroom you've always dreamed of...


Be inspired...


 







 

[Kayleigh]

Thank you so much to the both of you for your comments, advice and opinions! They are all valid and you explain so well (for me that is!)

I already had a feeling that I would have probably made some drastic errors, such as placing content within a table. The reason I did this was because I was struggling to place my text and buttons in their right places – if that makes sense?

I did in fact create the buttons as one, in Adobe Fireworks with their outer glow,but obviously when I export it as a HTML document, it gives a white background. Is there any other format I could export it to, from Fireworks which supports transparency?

I realise I have a long way to go yet, but I’ll get there! :)

Thank you one again!

[dfogge]

@Kayleigh, you should definitely get rid the splash page. asking users to click to enter your site (when they are already on your site) is a surefire way to lose a ton of traffic.

[Kayleigh]

I know! :( It’s awful isn’t it but I have tried & tried to convince the client to get rid and he’s not budging.

[tetzuha]

Hi Kayleigh

I like what your doing with the site. I like the simple structure and navigation.

You mentioned that the site didn’t look to good on your blackberry. I would have a look at your navigation buttons, and the font and colour you have used. On the big screen the font looks ok, but is still a little thin, but if you think that gets put onto a even smaller screen it will be even harder to see. maybe worth having a look at that and how the user will view the site on lots of different screen sizes and devices.

Keep up the good work, tho, always good to keep learning.

[Author]

Posts