Basic HTML question

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
 
You'll need to remove the font-size declarations there and add these statements below that one.
Code: 
#right col p {
font-size: 80%;
}

#right col h3 {
font-size: 90%;
}
 
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?
 
just thought you might like to know what important means,

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:
margin-top: 3.5em !important; margin-top: 2em
 
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!
 
You must log in or register to reply here.
Back
Top Bottom