My First tabless page feed back please

[RZX Developer]

Hey All, Below I have attached a link that goes to my first tabless page, could you please view it and tell me what you think. For some this probably is not an acheivement but for me who has always used tables to create my layouts this is an important step.

http://www.cheep-flights.com/

I hope to hear your comments regarding the layout!

Wayne

[karinne]

Congrats!!!

A few things ... the use of "spacers" is very bad. You don't need them with CSS. Just increase the margin-top or margin-bottom properties of the element you are using.

For example... I'll start with ...

this whole chunk of code

Code: Select all

<div class="title">
About Cheep-Flights.com
</div>
<div class="content">
Cheep-Flights.com aims to provide you with Cheap flights to worldwide destinations along with discounted holidays, Cheep-Flights.com is a recognised brand name of Airflights Direct Ltd.  

<div class="spacer">
&nbsp;
</div>

&nbsp;&nbsp;As we are a  recognised brand name of Airflights Direct Ltd we provide flights from all of the UK's top tour operators, including: Avro, EasyJet, Unijet, Thomson, Virgin, British Midlands (BMI Baby),
Cosmos, Pure Flights, Airtours, First Choice, Club Travel, Freedom Flights,JMC, Olympic, Teletickets, Tarleton Travel, and WhiteHall Leisure.

<div class="spacer">
&nbsp;
</div>

&nbsp;&nbsp;Using our online system for cheap airflights and holidays is so easy! Established for 10 years, we have built up a reputation for supplying great value discounted charter flights and holidays departing from every UK airport. We also specialize in worldwide discounted car rental, accommodation to suit all tastes and budgets, top quality holiday insurance and more! Book online or call one of our specialist travel consultants who will be happy to help.
</div>

<div class="title">
Charter Flights Information
</div>

<div class="content">
Charter flights are organised by tour operators to popular holiday destinations and until recently were typically of 7 and 14 night duration, however short durations are now also very popular. One way flights are generally available closer to the date of departure. The price of a charter flight is based on demand and availability so for instance a flight to Tenerife would cost more during a school or national holiday then at other times of the year. Prices can fluctuate very quickly!

<div class="spacer">
&nbsp;
</div>

&nbsp;&nbsp;We have an extensive database of flights departing from many UK airport's to supply you with some of the best value, low-cost flights available.

<div class="spacer">
&nbsp;
</div>

&nbsp;&nbsp;We're full ABTA members and our 24 hour online booking facility and helpful staff provide a friendly service. Agents For ATOL Holders,|Airholidays:6300|Thomson:2524|First Choice:230|JMC:1368|Club Travel:2067|Unijet:1124|And More.
</div>

<div class="title">
Destinations Guide - Top Destinations - Flights to:
</div>

<div class="content">
We have introduced world-wide travel information (below) for selected top destinations to provide you with inside knowledge on your future holiday! We hope to give you some brief information on the nature of the destination selected to assist you in your decision, we hope that these travel destination guides will help you decide where you wish to travel and once you have found a destination then please use our online system that provides cheap flights and discounted holidays or by all means call one of our specialist travel consultants who will be happy to help you on 0800 083 7007.
</div>

should look more like this

Code: Select all

<h2>About Cheep-Flights.com</h2><p>Cheep-Flights.com aims to provide you with Cheap flights to worldwide destinations along with discounted holidays, Cheep-Flights.com is a recognised brand name of Airflights Direct Ltd. </p>

<p>As we are a  recognised brand name of Airflights Direct Ltd we provide flights from all of the UK's top tour operators, including: Avro, EasyJet, Unijet, Thomson, Virgin, British Midlands (BMI Baby),
Cosmos, Pure Flights, Airtours, First Choice, Club Travel, Freedom Flights,JMC, Olympic, Teletickets, Tarleton Travel, and WhiteHall Leisure.</p>

<p>Using our online system for cheap airflights and holidays is so easy! Established for 10 years, we have built up a reputation for supplying great value discounted charter flights and holidays departing from every UK airport. We also specialize in worldwide discounted car rental, accommodation to suit all tastes and budgets, top quality holiday insurance and more! Book online or call one of our specialist travel consultants who will be happy to help.</p>

<h2>Charter Flights Information</h2>

<p>Charter flights are organised by tour operators to popular holiday destinations and until recently were typically of 7 and 14 night duration, however short durations are now also very popular. One way flights are generally available closer to the date of departure. The price of a charter flight is based on demand and availability so for instance a flight to Tenerife would cost more during a school or national holiday then at other times of the year. Prices can fluctuate very quickly!</p>

<p>We have an extensive database of flights departing from many UK airport's to supply you with some of the best value, low-cost flights available.</p>

<p>We're full ABTA members and our 24 hour online booking facility and helpful staff provide a friendly service. Agents For ATOL Holders,|Airholidays:6300|Thomson:2524|First Choice:230|JMC:1368|Club Travel:2067|Unijet:1124|And More.</p>

<h2>Destinations Guide - Top Destinations - Flights to:</h2>

<p>We have introduced world-wide travel information (below) for selected top destinations to provide you with inside knowledge on your future holiday! We hope to give you some brief information on the nature of the destination selected to assist you in your decision, we hope that these travel destination guides will help you decide where you wish to travel and once you have found a destination then please use our online system that provides cheap flights and discounted holidays or by all means call one of our specialist travel consultants who will be happy to help you on 0800 083 7007.</p>

Then in your css you just need to adjust the margin-top and -bottom to your need and instead of creating a class just for you title which should be in headings, apply the style to the <h2> elements

Code: Select all

p {
  margin: 10px 0 15px;
}

h2 {
  text-align: center;
  font-family: verdana, arial, tahoma, helvetica;
  font-size: 9pt;
  font-weight: bold;
  color: #000000;
  height: 30px;
  background: transparent url('/media/cheap flights title.jpg') repeat-x top left;
  padding: 7px 0px 0px 0px;
}

[karinne]

to continue on ...

You seem to be using the verdana font everywhere ... ok ... but your don't have to put it everywhere

You already have it in your body { } ... every element will inherit it so you can remove all the font-family: verdana, arial, tahoma, helvetica; except the one in the body { } of course.

I'm seeing different font-size units being used ... pt here and px there ... it's always best to stay consistent by choosing 1 unit and sticking with it.

[RZX Developer]

Thanks Karinne, I am glade that you have got back to me so quickly not just with the reply but because of teh amount of coding you have just saved me doing on each page.

Cheers Wayne

[karinne]

no problem.

The major thing is to USE the elements that are given. Like the p element represents a paragraph ... which you have ... everywhere

[RZX Developer]

Cheerz if you would like to re-evaluate the code I have taken your advise regarding the elements to use which clean up the code alot.

Thanks Again its most appreciated.

Wayne

[karinne]

Ah yeah ... much better don't you think? Now when you look at your code, you know exactly what you are seeing

Well done!

Now ... change that Transitional doctype to Strict and you'll be flying

[RZX Developer]

Yea it is much better and easier to read the code which will help for when I have to edit the page. Thanks again your help is much appreciated.

Wayne

[pa007]

Here's a little challenge for you:

Go through your code line by line and see what you can get rid of, or move to the css. There are still one or two nbsp and I noticed a paragraph element with an nbsp inside it. All those presentational effects can be done form the css. The challenge is getting them to work. Have a go and if you get stuck, just ask. Most of those things are simple but the line break in the middle of your header shouldn't really be there. See if you work out a solutio that doesn't use a br (you will need a span or a div though).

Well done for making the switch, I happen to think it is a massive deal.

Pete.

[RZX Developer]

Thanks Pete, as for what you are saying would something like this work <span style="margin: sizepx"></span>?

Wayne

[1840dsgn]

If you are using two elements like a h1 followed by a h2 you can do the following:

h1+h2 {
margin-top: sizepx/sizeem/size%;
}

obviously only use one of the attributes, px em or %

This will style any h2 that directly follows a h1 with the style you write in the brackets.

You can do the same with paragraphs. So space paragraphs using p+p.

Enjoy!

[matelot]

On the design overall (coding issues being addressed) it is text intensive for the homepage. And your current layout reflects a history of using tables. I feel it would look better if you could break up the text paragraphs with the odd image or two. People do get fed up having to read swathes of text. A picture paints a thousand words.

Secondly, the word Cheep - synonymous with birds (and ergo cheap flight) - could be used as a graphic theme. I'm sure some here will give you some ideas.

But, congratulations on moving forward and dumping tables where unwarranted. Quite liberating, isn't it!