Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Site Review please

Status
Not open for further replies.
Aug 23, 2004
174
US
I have been working on this site for a friends band. They are a small band, just getting started. There is not much content on there yet but let me know what you think.


Thanks
 
The design is very nice.
Change the top links to another color.
Add another line break so theres some spacing between the nav and the content.
On the downloads page, the images, maybe a thinner border?


I checked your site in mozilla though and all the content doesnt go into the container div.

It goes below it on the left side. Took a look at your html code and saw this:

<center>
<div id="page"></center>

tags cant be nested like that.

they have to be nested <center><div>content</div></center>

Also replace all your <font class="">content</font> with
<span class="title">content</span>

Dont forget to close the <body> on the bottom either.

 
Nice graphic!

There is no DocType declaration at the top. When you have rectified that run the page through a validator, for instance which will pick up incorrectly nested elements and missing tags.

Have a look at your page in Mozilla or Firefox as layout appears to be broken. I find the dark blue writing on black background quite hard to read. I also wonder about the value of a counter

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

Essex Steam UK for steam enthusiasts
 
I find the blue links on a black background a little difficult to read. Prehapse a lighter shade of blue woul d work.

If you checking your own site using Firefox, you may want to install the extension based on HTML Tidy. It will point out all of the errors in you HTML tags, like the improper nesting, and if you want to get really picky the <br> should be <br /> (every tag should get a closing tag, and the individual ones like br should close themselves.)

Kevin Petursson
 
Thanks for the tips everyone.

captlid - the reason I have the <center> tag like this is so I center the <div> for the page and not the rest of the content. Is there a better way to do this?

Johnwm - I also questioned the hit counter but thats what they want.

I also changed up the links to a lighter shade of blue.

Thanks again
 
&copy should be &copy;

The lighter shade is much better.

Kevin Petursson
 
All criticism and no help :) sorry I didnt get back to you earlier... Pun firmly intended I had time to burn so I came up with the html below for your home page.

tested on: netscape 6.2/7 opera 6/7 firefox 1 mozilla 1
ie 5.01/5.5, on windows..

validated html 4 transitional, strict doctype.

The most important things are the margin-left and margin-right values of auto, in modern css compliant browsers that centers a whole div. To make IE behave you have to use text-align:center in your body tag. To realign your content, put text-align:left in your container div and adjust text alignment in the other divs or paragraphs seperately as required.
For the absolutely positioned object, to make it behave

do inside the container div....
<div style="position:relative">
<div style="">content etc... <img src="file.jpg" style="position:absolute; top: left:">
</div></div>

You can do this for anything.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html><head><title>centering a div</title>
<link rel="stylesheet" href="center.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color:black; text-align:center">

<div class="container" style="width:700px; border: 1px solid white; text-align:left; margin-left:auto; margin-right:auto">


<div style="position:relative"> <!--  this is to make sure the timetoburn logo is positioned properly irregardless of window resizing, an alternative would be to combine the header and logo graphics into one image -->
<div style="background: url(headerbg.jpg); background-repeat:no-repeat; width:700px; height:160px;">
<img src="ttblogo.gif" style="position:absolute; left:445px; top: 115px">
</div>
</div>

 <div id="menubar">
  <a href="index.php">home</a>
  <a href="tour.php">shows</a>
  <a href="media.php">media</a>
  <a href="band.php">the band</a>
  <a href="merch.php">merchandise</a>
  <a href="contact.php">contacts</a>
  </div>

<div class="update" style="float:right; border: 1px solid blue">
 <span>Updates</span>
<br>
  <a href="guestbook/list.php">Message Board</a>
<p>Page views: 365</p>
</div>

<div id="content">
<p>
  Welcome to Time to Burn . net.  Thanks for stopping by and checking out our site. If you have some time to burn, download 3 song clips in the media section under <a href="music.php">music</a>.  Also check out the desktop themes in the media section under <a href="downloads.php">downloads</a>.   Coming soon in the <a href="merch.php">merchandise</a> section, our first shirt, check it out!
 </p>
 <p>
Lastly enjoy your time at our site and the music clips.  Leave us a message on the message board or send us a message through the contacts page.  Thanks!!
</p>

<div style="border: 1px solid blue">News</div><br>
<div style="border: 1px solid blue">News content</div>

</div>

<div id="footer" align="center">
&copy; Time to Burn 2005
</div>


</div> <!-- container div closing tag -->

</body></html>

stylesheet applied for testing:

p {color:white; }
div { color:white;}
a {color:blue;}

.news {border: 1px solid blue ;}
.title {border: 1px solid blue ;}
 
When I click on the "Message Board" under updates everything seems to work fine, but if I click "Message Board" again I receive the "NOT FOUND" error.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top