18 replies [Last post]
Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

I have just started doing this and im making a website... so far i have

<HTML>

<HEAD>
<STYLE>
body
{
BACKGROUND-IMAGE
url('Element18.bmp');
BACKGROUND-REPEAT repeat-x;
}

p
{
COLOR #0066ff;
FONT-SIZE 100%;
FONT-STYLE normal;
FONT-VARIANT normal;
FONT-WEIGHT normal;
FONT-FAMILY Halo;
}

EM
{
COLOR #0066ff;
FONT-SIZE 400%;
FONT-STYLE normal;
FONT-VARIANT normal;
FONT-WEIGHT normal;
FONT-FAMILY Halo;
}

EM > EM
{
COLOR #ff9b04;
FONT-SIZE 100%;
}
</STYLE>

</HEAD>

<BODY>
<EM>
Team
<EM>

</EM>
ElemenT
</EM>
</BODY>

<HEAD>
<img src="Element.bmp">
<a href="main.html"><img src="circle.png" border="0" ></a>
</HEAD>

<BODY>
<p>
[ ENTER ]
</p>
</BODY>

</HTML>

This works, however I cant get any of it to center, I need a blank-line before the "Team Element" and after, also the element.bmp picture need to line up with the background repeat, and the circle image need to lay over the element.bmp picture exactly in the middle of it.. and finaly as the circle image is a link - how would I get it to either whole page OR just the circle image to invert colours when the cursor goes over the circle image.

Quite a lot to do really..(

Thanks in advance to those who help D

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

You're making a lot of basic mistakes. It's a problem, which can cause unwanted results in many browsers. For example, you have two opening <head> tags, you haven't defined a doctype, and much more.

http://htmlhelp.com/tools/validator/doctype.html

I'll rewrite your code the way you want. Also, have a read of this:

http://www.positioniseverything.net/articles/common.html

It's a bit advanced but will help you when you get more into CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">
<!--
body
{
background-image: url(Element18.bmp);
background-repeat: repeat-x;
}

p
{
color: #0066ff;
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-family: Halo, sans-serif;
}

em
{
color: #0066ff;
font-size: 400%;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-family: Halo, sans-serif;
}
em > em
{
color: #ff9b04;
font-size: 100%;
}

-->
</style>
</head>

<body>

<em>Team <em>::</em></em> <em>ElemenT</em>

<img src="Element.bmp">
<a href="main.html"><img src="circle.png" border="0" ></a>

<p>[ ENTER ]</p>
</BODY>

</HTML>

Also, do you understand what em > em does?

I also think a lot of the CSS tags are unnecessary.

As for the inverted colors - well, there are a lot of ways to do mouseovers (as they're called) with javascript, but JS is highly unnecessary. You'll need to give the link a class, give the class a background, then give the class:hover attribute the different background. Check this out:

http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp

And check out the link in my sig about the validator - this is your friend. Use it as often as you can, my young padawan.

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

Help Me :P

the em > em is to make the '::' a differnt colour to the 'Team' and the 'ElemenT' but allow them to be part of the same word

and thanks a lot

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

Sorry, I misunderstood, I'll rewrite my code up there. But keep in mind:

Quote:
Child selectors are not supported by Windows Internet Explorer 5, 5.5 and 6, but are supported by most other standards-compliant browsers.

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

Help Me :P

With what you have given me the '::' is not the correct font or colour, and also its still not center.

another point is that someone told me that in order for others to look at the page as i would see it they would need the have the font... is there a way round this without making it an image

and also what does the 'sans serif' do?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

The sans-serif is an alternative replacement if, like you said, the user does not have the font installed.

If your server supports PHP 4 or higher, then you can use dynamic text replacement. Search alistapart.com - great article.

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

OK now this is what i got:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
 
 
	<HEAD> 
		<STYLE type="text/css"> 
			<|-- 
			body 
			{ 
			BACKGROUND-IMAGE: 
			url('Element18.bmp'); 
			BACKGROUND-REPEAT: repeat-x; 
			BACKGROUND-COLOUR: #000000; 
			} 
 
			p 
			{ 
			COLOR: #0066ff; 
			FONT-SIZE: 100%; 
			FONT-STYLE: normal; 
			FONT-VARIANT: normal; 
			FONT-WEIGHT: normal; 
			FONT-FAMILY: Halo, "Monotype Corsiva"; 
			} 
 
			EM 
			{ 
			COLOR: #0066ff; 
			FONT-SIZE: 400%; 
			FONT-STYLE: normal; 
			FONT-VARIANT: normal; 
			FONT-WEIGHT: normal; 
			FONT-FAMILY: Halo, "Monotype Corsiva"; 
			} 
 
			EM > EM 
			{ 
			COLOR: #ff9b04; 
			FONT-SIZE: 100%; 
			} 
			--> 
		</STYLE> 
	</HEAD> 
		 
 
	<BODY> 
		<BR> 
		<EM> 
			Team 
		<EM> 
			:: 
		</EM> 
			ElemenT 
		</EM> 
		<BR> 
		<img src="Element.bmp"> 
		<a href="main.html"><img src="circle.png" border="0" ></a> 
		<BR> 
		<P> 
			[ ENTER ] 
		</P> 
	</BODY> 
 
 
</HTML> 



i Have this now, i was thinking instead of using the circle.png i would just map the element.bmp to get the link, and not bother with the inverting. also the background image bit isnt working at all now its just white. The link lends to this :

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
	 <HEAD> 
		<!-- 
		--> 
	</HEAD> 
	<body> 
		<body style="margin: 0px; padding: 0px;"> 
		<div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;"> 
		<img src="Element3.bmp" style="width: 100%; height: 100%;"> 
		</div> 
		<div style="z-index: 1; position: absolute;"> 
		</div> 
	</body> 
 
 
</html> 


now this has just got a background at the moment but seems to work as intended and make the image fit window size.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

Basically, all that bottom code does is remove margins and paddings from everything, position the div absolutely, and stretch the image.

An easier way is this in the CSS:

* {
margin: 0;
padding: 0;
}

This will remove margin and padding from EVERYTHING.

Also, I cannot stress enough how important it is to have this:

sans-serif;

in each font declaration - as a last resort if the user hasn't got either of the fonts installed.

Click the link in my sig about the validator, run your code through it. It's a great tool.

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

ok

Monotype Corsiva is a word font, so i would have thought almost all PC's would have it, but i will put sans-serif aswell.

With the Validation tool, it tells me to add the alt feature, what is this and what should i put here.

Also it says 'Line 43, column 7: end tag for "HEAD" which is not finished' what do i have to do to sort this.

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

The 'alt' tag is a tag that goes in the image tags. It is basically alternate text for the image, if for some reason the image isn't displayed - for example, dodgy paths, or a text browser.

What you need is this:

<img src="Element.bmp" alt="alternate image text">

You should also specify the width and height of the image. This is so if the image is part of the layout, and it doesn't display, it doesn't screw up the site.

I'm not so sure about the <head> error.

Also:

Quote:
Monotype Corsiva is a word font, so i would have thought almost all PC's would have it, but i will put sans-serif aswell.

Not all PCs use Word (I use open office) - in fact, I have never even heard of the font. It's always best to use a few generic alternatives, for example:

Halo, "Monotype Corsiva", Tahoma, Arial, sans-serif;

Verschwindende wrote:
  • CSS doesn't make pies

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 12 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Help Me :P

Regarding fonts - you may want to read this: http://www.upsdell.com/BrowserNews/res_fonts.htm . You have to appreciate that certain fonts have been optimized for display on screen where the resolution is generally 72dpi (Mac) or 96dpi (PC). I tend to stay away from fonts other than those that are widely available in standard installs of the main OSs available. If I do chose a non-standard font, I make sure that it is first in a list that includes the closest similar common fonts.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

hmm

I've added a list of common fonts, but my main problem is that i can't get the text or images to center.

Thanks DCElliott

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

Could you upload the pages somewhere for us to have a look at?

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

Help Me :P

I dont have anywhere to upload them too yet :/

and, do you have any idea why the background is working?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

Not until you post the code we don't.

Instead of using an absolute positioned div to contain Element3.bmp, why not just set it as the background?

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

Help Me :P

I have sorted the background, though i still dont know what was wrong :s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>


	<head>
		<style type="text/css">
			<!--
			body
			{ 
			background-image: url(Element18.bmp);
			background-repeat: repeat-x
			} 

			p
			{
			color: #0066ff;
			font-size: 100%;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			font-family: Halo, 'Monotype Corsiva', ‘Courier New’, ‘Comic Sans, ‘Arial Black’, Impact’, ‘Times New Roman’, Georgia, Arial, ‘Trebuchet MS’, Verdana;
			}

			em
			{
			color: #0066ff;
			font-size: 400%;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			font-family: Halo, 'Monotype Corsiva', ‘Courier New’, ‘Comic Sans, ‘Arial Black’, Impact’, ‘Times New Roman’, Georgia, Arial, ‘Trebuchet MS’, Verdana;
			}

			em > em
			{
			color: #ff9b04;
			font-size: 100%;
			}
			-->
		</style>
	</head>	

	<body>
		<br>
		<em>
			Team
		<em>
			::
		</em>
			ElemenT
		</em>
		<br>
		<img src="Element.bmp" alt="">
		<a href="main.html"><img src="circle.png" border="0" alt=""></a>
		<br>
		<p>
			[ ENTER ]
		</p>
	</body>


</html>

that is it so far

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

Ar, be Dan your name?

I think you've kind of missed the point with the generic font face. What you're aiming to do is provide a list of alternatives, similar to the specified one. What you're doing here:

Quote:
font-family: Halo, 'Monotype Corsiva', ‘Courier New’, ‘Comic Sans, ‘Arial Black’, Impact’, ‘Times New Roman’, Georgia, Arial, ‘Trebuchet MS’, Verdana;

is saying "Use Halo. If this isn't there, use Monotype Corsiva. If that not found, use a cool, Matrixy-type font. If not, go with a completely different, kids-type font. Then, try good old Arial. Next up, use Impact (a big, blocky font). Then, horrible Times New Roman. Afterwards, go on for some more sans-serif fonts."

What you need to do is offer a few alternatives that are similar to your style, then a generic alternative - something like this:

font-family: Halo, 'Monotype Corsiva', ‘Times New Roman’, serif;

And you seriously shouldn't use this method. If you want that font shown, use an image. Otherwise, use a bland font which fits in.

Verschwindende wrote:
  • CSS doesn't make pies

Hutchy
Offline
newbie
Last seen: 15 years 33 weeks ago
Joined: 2004-12-19
Posts: 9
Points: 0

Help Me :P

ok

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 19 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help Me :P

If you still want to use your font, for headings and things, then check out this link:

http://www.alistapart.com/articles/dynatext/

Verschwindende wrote:
  • CSS doesn't make pies