PDA

View Full Version : My Website in Progress

troublefreetraveladvisor
17th April 2006, 18:55
Hi,

Ive been back on the website trail again over the weekend. learning css in the process as everyone says its much better & avoiding the tables & using php for Menus.

Basically trying to rebuild a website from the ground up.Heres what I have so far

http://www.troublefreetraveladvisor.com/websitedel.php
pretty much identical in firefox & IE ulike my previous attemps which Im pleased about.

Heres what my design was like before, but using a Table, so im pretty close to similar structure.

Whats everyones opinions so far. I will be having the Content in the center Div. and using this homepage as a template for all the other pages after weighing up the options of php,iframes,javascript,seems the best way to go,especially when Im making things easier with css.

I do need to jazz up the Left Menu too.

Look forward to peoples views

Lee
Astaroth
17th April 2006, 19:11
The one bit I dont like is that the top DIV spans 90% or so of my screen but the rest of the content is aligned to the left and only takes up about 60% of my screen (I have a wide screen on my laptop). In my opinion they should be aligned either taking up the whole screen (or 90%) or only taking up part of the screen. If it is only part my preference would be that it is centred on the screen but that is because of my widescreen - there are many sites which only use the left 1/2 of my screen and it isnt too bad.
troublefreetraveladvisor
17th April 2006, 19:17
hmm not entirely sure how to fix that.just had a look in my css code :(
Astaroth
17th April 2006, 20:18
Well, at present your footer which is the correct width is set to 972px where as the logo/ header div is set to 100% (as far as i can see) - you also have a massive number of duplicated html tags which there should only be one of (eg <head> & <body>)
troublefreetraveladvisor
17th April 2006, 20:30
where did u find duplicates?inside websitedel.php
wasnt any when i just looked thru thecode.one of each open and close.

Have corrected the width.
broadband-engine
17th April 2006, 20:30
Hi

Another thing you could do is create a fixed width outer layer

i.e. (from one of my sites)

/* Outer layer */

#outer {
border: 1px solid #000000;
margin: 0 auto;
padding: 0;
width: 800px;
}

in the css and have

.....</head>
<BODY>

<div id="outer">

page content

</div>

</body>
</html> .... in the HTML page

this way you can use percentage widths within the bounds of the outer fixed width.
Astaroth
17th April 2006, 20:43
Yes, from looking at the source from your page - a snipit is below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trouble Free Travel Advisor</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="travelmain.css" rel="stylesheet" type="text/css">
[b]</head>

<body>[/b]


<div id="header">
<div align="center">TFTravelAdvisor_300pixel_72dpi_RGB.jpg</div>
</div>

<div id="left">
<div id="menu">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="travelmain.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>

[b]
</head>

<body>[/b]

<p align="center" id=menutbl></p>




Home (home.html)</p>


Special Deals (great.html)</p>


Make a Request (great.html)</p>


Personal Introduction (hotelreviews.html)</P>


Personal Reviews (great.html)</p>


Climate (great.html)</P


Travel Planning (great.html)</p>


Travel Extra's (great.html)</p>


Contact (great.html)</p>



<a href=links.php>Support Us</a></p>


<a href=links.php>Links</a></p>

[b]</body>
</html>[/b]

</div>
</div>


<div id="right">


I dont know much about php so dont know if this is definately a direct html error on "your part" or if the php is for some reason generating these extra tags
Coding Monkey
18th April 2006, 07:06
To be fair, it looks like almost every single other "I made this myself" website that I ever come across.
troublefreetraveladvisor
19th April 2006, 13:57
I see what you mean. i checked the code & yes it has to be the .php files that are inputting the extra Coding Tags.

as the .php Include Files have the tags inside the which i added to format the pages.
trondez
28th April 2006, 12:04
I'nm sure I have seen that top design before somewhere... or am i wrong?
MyNI
28th April 2006, 12:24
The functional aspects have been addressed so I will highlight the aesthetics. First of all I like your header logo but your navigation and content font does not fit in with it. You should consider using a san-serif font family to compliment your logo. It doesn't have to be the exact same font, I suggest you change the font family to Arial, Helvetica. As for the modular appearance of the page, you should really work on a way to soften up those edges it looks like DIY php nuke. The white modules on the blue background are a bit too severe and a website should never really have too much white space anyway unless that is part of the theme. Perhaps another blue or introduce another colour from your logo.
webit
28th April 2006, 12:48
From the HTML validator in FFox


HTML Validation Result
----------------------
http://www.troublefreetraveladvisor.com/websitedel.php

line 18 column 6 - Warning: discarding unexpected <!DOCTYPE>
line 19 column 1 - Warning: discarding unexpected <html>
line 20 column 1 - Warning: discarding unexpected <head>
line 17 column 5 - Warning: <meta> isn't allowed in <div> elements
line 17 column 5 - Warning: <link> isn't allowed in <div> elements
line 17 column 5 - Warning: <title> isn't allowed in <div> elements
line 28 column 1 - Warning: discarding unexpected <body>
line 38 column 59 - Warning: replacing <p> by <br>
line 38 column 59 - Warning: inserting implicit <br>
line 52 column 1 - Warning: discarding unexpected <!DOCTYPE>
line 53 column 1 - Warning: discarding unexpected <html>
line 54 column 1 - Warning: discarding unexpected <head>
line 51 column 5 - Warning: <meta> isn't allowed in <div> elements
line 51 column 5 - Warning: <link> isn't allowed in <div> elements
line 51 column 5 - Warning: <title> isn't allowed in <div> elements
line 62 column 1 - Warning: discarding unexpected <body>
line 79 column 3 - Warning: discarding unexpected </div>
line 83 column 1 - Warning: discarding unexpected </div>
line 65 column 20 - Warning: <img> lacks "alt" attribute
line 69 column 25 - Warning: <img> escaping malformed URI reference
line 69 column 25 - Warning: <img> lacks "alt" attribute

0 errors / 21 warnings