Basic HTML question

Arsey

Arsey

Arsey

Associate
Joined
28 Feb 2006
Posts
2,497
Location
Wimbledon
I am currently doing a module on an introduction to web design in uni and we have to code a website using HTML all in notepad.

Is there anyway to scale an image to the page no matter what size screen/resolution is set?

I have the fish with line image in the outer div, which is the grey box with this code.

Code: 
<body>
 <div id="outer">
 <h1>Course Fishing</h1>
<img src="linefish.jpg" alt="Fish and Line for the background" align="left" hspace="180">

This results in what I want

working1.jpg


However if I reduce the size of the browser the image does not appear in the correct position.

notworking1.jpg


I am controlling the style with a CSS file. So is there a way to make the fish iimage to display between the two yellow boxes no matter what the screen size is?

Thanks
 
Thanks for that spot! Could have been embarrassing lol! Guess I will have to get rid of the image then.

Would this mean that using button images as links wouldn't work also? They would be too big on smaller resolutions right?
 
Thats not very good! I'm guessing that you can change this using dreamweaver? I shall look forward to that part after the easter break :)
 
OK, another question :p

broken2.jpg


Even though all these links are in the div for the yellow column on the right, they seem to go outside it even when there isnt any room. Now I could make the box longer, but I would rather make the text smaller which I can't even seem to do.

I know it must be something really easy but I've tried using Classes in the CSS file and it doesn't seem to work. The links are <h3> and the descriptions are <p>.
 
It's called rightcol, as in right column.
Code: 
#rightcol {
	position: absolute;
	top: 50pt;
	right: 10pt;
	width: 85%;
	height: 70%;
	background-color: #FFEC8B;
	border: 2pt solid black;
	text-align: center;
	font-family: Trebuchet MS;
}

That's what's in it so far

Should this work?

Code: 
#rightcol {
	position: absolute;
	top: 50pt;
	right: 10pt;
	width: 85%;
	height: 70%;
	background-color: #FFEC8B;
	border: 2pt solid black;
	text-align: center;
	font-family: Trebuchet MS;
        font-size: 8pt;
}
 
MarcLister said:
Not sure if 8pt will be understood. Try small or 85% as a value instead.
Click to expand...

That works thanks! So how do you go about making different sizes for the <p> and the <h3>?

Code: 
#rightcol {
	position: absolute;
	top: 50pt;
	right: 10pt;
	width: 85%;
	height: 70%;
	background-color: #FFEC8B;
	border: 2pt solid black;
	text-align: center;
	font-family: Trebuchet MS;
	h3 font-size: 90%;
	p font-size: 80%;
}

This doesn't work
 
I still don't quite understand...:(

Code: 
#rightcol {
	position: absolute;
	top: 50pt;
	right: 10pt;
	width: 85%;
	height: 70%;
	background-color: #FFEC8B;
	border: 2pt solid black;
	text-align: center;
	font-family: Trebuchet MS;
}
	

#right col p {
font-size: 80%;
}

#right col h3 {
font-size: 90%;
}

This doesn't work, neither does this.

Code: 
#rightcol {
	position: absolute;
	top: 50pt;
	right: 10pt;
	width: 85%;
	height: 70%;
	background-color: #FFEC8B;
	border: 2pt solid black;
	text-align: center;
	font-family: Trebuchet MS;
#right col p {
font-size: 80%;
}

#right col h3 {
font-size: 90%;
}
}


EDIT: Am I right in saying you can't have a {} inside a {} ?
 
ARGH, another one ;)

Code: 
p#fred {color: blue; font-size: 70%}

P.rofl {color: green; font-size: 70%}

The first one is a class, so that is in the CSS file and

Code: 
<p id="fred">A website with articles on all types of coarse fishing, competitions and an online shop to buy cheap coarse fishing equipment.</P>

is in the HTML file. This works fine with the colour going blue and the font going smaller.

The second one is an ID, so that is in the CSS file and

Code: 
<p class="rofl">An easy to navigate website with basic design, but with lots of information about species, tackle, where to fish and pictures.</P>

is in the HTML. The colour goes green but the font doesn't change size. Is there some kind of hidden rule saying you can't change font size with an ID?
 
Ahh this seems to make sence, I seem to have fixed it by using the ID's instead of Classes even though my lecturer said that you should only use 1 ID 1 time. But it seems to work! I will read up on this important thing. Thanks a lot!
 
It seems to have changed now and I have 11 errors :p. I was using the W3 validator http://validator.w3.org/

Here we go:

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

These are my only errors now, so will try again with classes in the morning.
 
Last edited:
The !Important fixed the problem with the classes, so I can now use the classes instead of ID's :D.

Another problem now :(

When on a smaller resolution than mine, the text seems to go outside the div. Is there any way to make the div (yellow box) to keep going until the text stops?

Thanks :)
 
I wasn't planning to release it live on the internet! Any basic design tips that you think would improve the website?;)
 
You must log in or register to reply here.
Back
Top Bottom