My first CSS site: critique?

Hamish

Hamish

Hamish

Soldato
Joined
14 Apr 2003
Posts
4,950
Location
Deepest Yorkshire
Just CSSorised my site from tables and IMO it looks great, please take a look:

Site: http://www.rtl554.org.uk/
CSS: http://www.rtl554.org.uk/default.css

I thought I would ask here for a couple of problems I was having:


1) There is some sort of padding / margin issue that moves the text down loads in IE, any ideas what causes this?

2) How do I make it so that the whole of the red part of the buttons are a link?
 
Looks nice, untill you view it in firefox.

As for the the menu, you need to style the anchor (a links) to be the way you want the menu to be, not the list items (li) as they are only there for holding the links. That will make them into "whole" buttons.

As for the IE padding, im not sure. It most likely to do with the fact you have not declared set margins and paddings, and each browser will use its defaults.

Adding:
Code: 
* {
margin: 0;
padding: 0;
}

to the css at the very top makes Firefox better but not perfect as the meny aligns left, but it would most likely be easy to sort that from then on.
 
I really like it, good work ... and it shows up on a mac perfectly from what I can see :)

To make the the red part of the links clickable you would put display: block; in your links and then put some padding on them.
 
MagSafe said:
I really like it, good work ... and it shows up on a mac perfectly from what I can see :)
Click to expand...

That would be because I made it on my mac :p

I made it in FF (on mac) so I'm not sure whats up :confused:

 
I'm getting a MASSIVE gap between the nav buttons and the 'welcome to the rtl 554 website' bit. Like over an inch. Looks good apart from that.
 
Fixed the code up, almost. On proper browsers, it doesn't like aligning the nav block with auto margin on either side.

Code: 
/* RTL554 Website - style sheet, do not copy any of this without permission from the website owners */

body {
	font: 12px Trebuchet MS, verdana, helvetica, arial, sans-serif;
	background: #FFFFCC;
	color: #460207;
	text-align: justify;
	line-height: 20px;
	margin:30px 0 0 0;
	padding:0;

}

A:link, A:visited, A:active 
	{ color: #304C80; }
	
A:hover 
	{ color: #CA453F; }

h1, h2 {
	color: #460207;
	letter-spacing: 2px;
	font-variant: small-caps;
	}

h1 {
	font-size: 130%;
	}

h2 {
	font-size: 120%;
	}

img {
	margin: 5px;
	border: 1px dashed #C1AC01;
	}

img.right {
	float: right;
	margin-left: 8px;
	}
	
img.left {
	float: left;
	margin-right: 8px;
	}
	
img.center {
	padding-left: auto;
	padding-right: auto;
	}

#container {
	margin-left: auto; 
	margin-right: auto;
	width: 707px;
	border: 2px solid #C1AC01;
	background: url('top00000.png');
	background-repeat: no-repeat;
	background-position: top center;
	padding:20px;
	}
#content {
	margin:225px 0 0 0;
}
#navigation {
	position:absolute;
	top:205px;
	margin:0 auto;
	margin-left:auto;
	margin-right:auto;
}
#navigation ul {
	padding:0;
	margin:0;
	}
#navigation li {
	list-style-type: none;
	background-color: red;
	border: 1px solid #C1AC01;
	float: left;
	font-family: 'Johnston Underground', 'Trebuchet MS', sans-serif;
	}
#navigation a {
	display:block;
	padding:8px 23px 8px 23px;
	color: white;
	text-decoration: none;
	font-size: 125%;
	}
#navigation A:hover {
	text-decoration: underline;
	}
	
.rtl554 {
	text-decoration: oblique;
	letter-spacing: normal;
	}
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>RTL554</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="RTL554_files/default0.css" title="Default" media="screen"/>
<link rel="stylesheet" type="text/css" href="RTL554_files/print000.css" title="Default" media="print"/>
</head>

<body>
<div id="container">

<div id="navigation">
     <ul>
		<li><a href="">Home</a></li>
	  	<li><a href="http://www.rtl554.org.uk/?p=about">About</a></li>
	  	<li><a href="http://www.rtl554.org.uk/?p=history">History</a></li>
	  	<li><a href="http://www.rtl554.org.uk/?p=photos">Photos</a></li>
	  	<li><a href="http://www.rtl554.org.uk/?p=restoration">Restoration</a></li>
	  	<li><a href="http://www.rtl554.org.uk/?p=links">Links</a></li>
	  	<li><a href="http://www.rtl554.org.uk/?p=contact">Contact</a></li>
	</ul>
</div>
      
    <div id="content"><!-- Body Start -->

	  <h1>Welcome to the <span class="rtl554">RTL 554</span> website</h1>
	  
	    <p>This is the homepage for KGU 4 (RTL 554), an ex London Transport RTL owned by Ian Macbeth and now in preservation
	    in York. The site shows details of some of the restoration done since the bus was acquired by me in 2001.</p>
	    
		<img src="RTL554_files/smfrontp.png" width="250" height="208" alt="Bus Picture" class="right" />
		
		<p>This bus was built in 1949 and was one of almost 7000 'RT' type vehicles built for London Transport between
		1939 and 1954. The RTL type was one of 1631 built with a Leyland 9.8 litre engine developing 125 bhp. Drive is
		through a 4-speed pre-select gearbox and fluid flywheel. Bodywork is by Metro Cammell.</p>
		
		<p>With ever-increasing car ownership, by the late 1950s there was a surplus of these buses in London and many
		were sold off for use elsewhere in the UK and abroad. The RTL buses, being non standard, were some of the first
		to go, and by the early 60s withdrawals were already under way. Considerable numbers of the RTL class were
		exported to Ceylon (now Sri Lanka) and served for up to 20 years throughout the island. Many also went 
		to South Africa and a few remained in the UK. Some, though, went to the scrapyard and by 1966 the last service 
		buses were withdrawn with just a few being retained as trainers for a couple of years. </p>
		
		<p>RTL 554 was sold in 1966 to Acrow Engineering in London for use as staff transport until sold by them in
		1972 for preservation. At the time the vehicle was in a poor state but over many years it was almost totally 
		rebuilt. The bus changed hands in 2001 and is now owned by Ian Macbeth and kept in York. In 2002 the exterior
		adverts were applied and are appropriate to the early 50s. The interior was refurbished in 2005/6 and the 
		exterior repainted in 2006.</p>
		
	  <h2>RTL survivors</h2>
		<p>Out of the 1631 built there are thought to be 16 left in the UK and 
           25 overseas. Of these just four have Metro Cammell bodies. This 
           information was provided by David Thrower and Mike Lloyd, editors 
           of the 'Friends of Classic London Buses of the Fifties' society.</p>
	<!-- Footer Start -->
	</div>
</div>
</body>
</html>
<!-- This document saved from http://www.rtl554.org.uk/ -->

Hopefully I or somebody else will have a reason for the nav peculiarity.

Edit: fixed padding
 
Last edited:
joeyjojo said:
Fixed the code up, almost. On proper browsers, it doesn't like aligning the nav block with auto margin on either side.

Hopefully I or somebody else will have a reason for the nav peculiarity.

Edit: fixed padding
Click to expand...


Woah that was nice of you, thanks very much!
 
Hamish said:
Woah that was nice of you, thanks very much!
Click to expand...
Don't count your chickens :)

It's not ideal, but it's neater. For example, you can combine paddings and margins into one line. Also, a div is specified with <div id="hello"> and is written with a hash #hello { } in the css file. A class is for text and stuff, eg <span class="hello"> and uses a period, .class { }

Good luck with that. I'll come back to it if nobody has any ideas :)
 
ouch me eyes, me eyes.......

the red is over powering..the yellow is somewhat too light.....but i like the stucture....

overall i do like it, i *** just tone down the red and brighten the yellow....have you thought about using green, like the green buses color green....
 
You must log in or register to reply here.
Back
Top Bottom