Rip my site apart

tom_e

tom_e

tom_e

Man of Honour
Joined
26 Dec 2003
Posts
31,484
Location
Shropshire
Sites here
Ive just finished getting all the little niggles out of my css and would like it if you could have a quick look and tell me how it is,
if theres any glaring errors that ive made or if it looks weird in your browser.
Ive tested it in ie 6 and ff 1.5.0.7 and all appears to be fine, i know its only one page and none of the links work but i just want to get some feedback before i plough on and fill the site with content.
 
Your site works in 1024x768, but not 800x600 - not sure what you're intentions are.

The HTML and CSS validate with the W3 validators which is good. :)

I would change this:-
Code: 
<br>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
<br>
to be
Code: 
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
</p>

Also, your ALT text should be more descriptive. Think as if you were a blind person using your website. Does the image need ALT text? If not, don't include any. I really hate when people have ALT text of "Company Logo". A blind person wouldn't care if the logo was there or not. In this case, I would have the alt text say something like.. "City of Wolverhampton's Coat of Arms: Out of Darkness cometh Light".

The image itself looks like it used to live on a white background. Perhaps you can acquire one that isn't anti-aliased for use with a grey background?

I think your links need to stand out more so people are aware they are links. They change when you hover over them, but this means people have to scan the page with the mouse to figure out where they are. The one link you do have that is underlined should change when you hover over it, so that you know it is a link and not just underlined. This is particularly important if you have two links styles on the same page.

Good work on the code though. It is very tidy and looks like a good start.

It works in FF2, Opera9 and IE7.
 
Cheers for the reply TerraS im trying to shoot for it to work in 800x600 as, as far as im aware its still the most commenly used resolution and even if its not im trying to make the site assesable and pleasing to as wider audience as possible as thats one of the set objectives, im aiming for a html 4.01 strict validation as its my first hand coded site and i like the challenge :) lol.
Your correct that the live site i borrowed the logo from used to be white but im still not completly settled on the colours so im not going to worry too much about that now as i already have a v2 im working on with some lighter colours :D But cheers for all the input il give it all a go and see how it comes out :cool:
 
You need to style the font for some elements, as they appear different in IE to firefox.

For instance, the H1 and H2 tags use different font's in firefox and IE. I can only imagine this to be so because you have not declared which font the browser should use, so they roll back onto their default ones (which are different for each browser).
 
gord said:
Your using an external stylesheet so why not go for xHTML 1.0 strict. Its the daddy!
http://www.w3schools.com/xhtml/xhtml_why.asp
Click to expand...
Not allowed to :( this is part of my assesment and unfortunatly its in the rules we are allowed to use HTML 4.01 only no XHTML or alternative mark up language, suppose its to keep the playing feild level for the new people and the more experienced.
Cheers Mekrel il go and stick the fonts into the style now :)
 
Pah, thats aweful. All xHTML really does is make you close up your tags giving you a much better coding practice.
 
Well ive hit a snag on my v2 design im using a white background and using a light blue background colour for my menu and content divs this all works fine apart from the text on the menu doesnt seem to align properly in the div nevermind which align command i give it seems to sit way over to the right which is messing up the look slightly :(
Heres the menu div code:
Code: 
.menu{
  width: 100px;
  padding-left: 0px ;
  position: absolute;
  top: 200px;
  left: 25px;
  border: 1px 1px 1px 1px solid #ccc;
	height: 300px;
	background-color: #E6E6FA;
	
}
	
.menu ul{
  list-style-type: none;  
}

.menu a{
  width: 100px;
	font: 18px Verdana, Arial, Helvetica, sans-serif;
	background-color: #E6E6FA;
	color: #000000;
	text-decoration: none;
	text-align: left;
}
and heres my html menu code:
Code: 
<div class="menu"> 
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="link1.htm">link 1</a></li>
          <li><a href="link2.htm">link 2</a></li>
          <li><a href="link3.htm">link 3</a></li>
        </ul>
      </div>
Does anyone have any idea on how to force it to go right over to the left hand side of the div?
 
Sounds like your div is actually in the wrong place.. give the menu class a float left attribute.

and i dont like this stuff

padding-left: 0px ;
position: absolute;
top: 200px;
left: 25px;
 
gord said:
Sounds like your div is actually in the wrong place.. give the menu class a float left attribute.

and i dont like this stuff

padding-left: 0px ;
position: absolute;
top: 200px;
left: 25px;
Click to expand...
Cheers il give it a go n see how it turns out
:( but thats the only way i seem to be able to get my content and menu divs to line up anywhere near right, do you have any suggestions on how to do it without the absolute positioning? because i dont like the idea of me telling it it has to be exactly there but i couldnt find another solution.

Just tried it if i remove my absolute and put in a float left it moves my menu div up next to my title and logo which is of course not good and it doesnt seem to solve the text align problem either
 
Last edited:
Your title and logo will need float left options too so that they come first in the list as it were when the page is made. Unfortunately i cant see what were working with considering v2, but if youve centrally aligned your site and have a main container then absolute positioning inside that is ok.
 
Cheers for all the help guys much apreciated ive managed to get my 2nd version finished and i think this will suit the content of the site better, now all i need is a way to make the text within the content div look better as at the moment in ff it looks double line spaced and in ie its fine although it could do with starting at the top of the div.
http://www.tommiboy.co.uk/webdev/site/v2/
 
Pr0t0c0L said:
design your site in Firefox, use the web developer plugin to edit CSS it renders the new page in real time.
Click to expand...
But wouldnt this mean that it would be developed and look fine in ff but could end up looking completly wrong in ie? At the min ie is still the most used browser so thats my main target audience although i do want it to look right in as many browsers as possible
 
true but it's a lot easier to get the site working in firefox then make small adjustments to get it working in IE. Where as designing it in IE and getting it right in firefox can be harder.
 
Gman said:
true but it's a lot easier to get the site working in firefox then make small adjustments to get it working in IE. Where as designing it in IE and getting it right in firefox can be harder.
Click to expand...
Now that ive thought about it thats very true ive had a bitch of a time trying to get this to look right in them both after using pspad which has a ie based preview, but ah well il know for next time :)
 
Just a pointer but there's no need to have so many divs, you can apply the styles directly to the <ul> and <img>, you can make them behave like divs using display: block if necessary :) Just a thought.
 
sorry i dont like it. in fact i near hate it, but i have seen worse. i hope thats your first attempt :)

good luck with it and keep at it
 
You must log in or register to reply here.
Back
Top Bottom