SRL Archive - Web Development

Hello :) I am currently in the process of learning how to do website development, and I am trying to use CSS instead of HTML. The only problem is, I'm stuck. I currently have this:

<html>
<head>
<style type="text/css">
a:link {text-decoration:none;}{color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

</style>
</head>

<body>
<p><b><a href="http://www.google.co.uk" target="_blank">This is a link to Google</a></b></p>
</body>
</html>

But how would I change the font size to around "16" equivalent in Microsoft Word? Thankyou.

http://www.w3schools.com/cssref/pr_font_font-size.asp

not the greatest for css/html, but this is a pretty trivial thing.

a {font-size:16px; font-style: oblique; font-family:"Times New Roman";}

CSS has property font-size.

Example: font-size: 16px;
Example 2: font-size: 16pt;

From: NCDS
http://www.w3schools.com/cssref/pr_font_font-size.asp

not the greatest for css/html, but this is a pretty trivial thing.

I have been looking through their tutorials, I thought they were good. My personal downside though, I know how to do certain things, but I never know how to piece them together.

From: ggzz
a {font-size:16px; font-style: oblique; font-family:"Times New Roman";}

Could you by any chance show me where it fits in with my code please?

From: Frement
CSS has property font-size.

Example: font-size: 16px;
Example 2: font-size: 16pt;

Will it matter which I use? E.g. will px be more universal? Thankyou for the replies :)

Technically, you should be using em's ;)

From: Kyle Undefined
Technically, you should be using em's ;)

I've just researched them, and it said it is good for mobile devices, and I'm also guessing that you could add a JavaScript function to increase the font size as a whole, for people who find it hard to read. Seeing as you're a guru at programming, could you please show me how to add em(s) into my code? I've always struggled piecing it all together. :(

<html>
<head>
<style type="text/css">
a:link {text-decoration:none;}{color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

</style>
</head>

<body>
<p><b><a href="http://www.google.co.uk" target="_blank">This is a link to Google</a></b></p>
</body>
</html>

This will give you a nice example at how ems work.

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			a:link{
				text-decoration: none;
				color: #FF0000;
				font-size: 2em;
			} /* unvisited link */
			
			a:visited{
				color: #00FF00;
				font-size: 1em;
			} /* visited link */
			
			a:hover{
				color: #FF00FF;
				font-size: 0.5em;
			}   /* mouse over link */
			
			a:active{color: #0000FF;}  /* selected link */
		</style>
	</head>
	<body>
		<p><b><a href="http://www.google.co.uk" target="_blank">This is a link to Google</a></b></p>
	</body>
</html>

From: Kyle Undefined
This will give you a nice example at how ems work.

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			a:link{
				text-decoration: none;
				color: #FF0000;
				font-size: 2em;
			} /* unvisited link */
			
			a:visited{
				color: #00FF00;
				font-size: 1em;
			} /* visited link */
			
			a:hover{
				color: #FF00FF;
				font-size: 0.5em;
			}   /* mouse over link */
			
			a:active{color: #0000FF;}  /* selected link */
		</style>
	</head>
	<body>
		<p><b><a href="http://www.google.co.uk" target="_blank">This is a link to Google</a></b></p>
	</body>
</html>

Thankyou :) There's only 1 problem left now, and that's the colours. It is supposed to be:

• Standard Link - lightblue
• Hovered Link - lightblue1

However, only the "Hovered Link" is working.

Just incase, here's my current code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			a:link{
				text-decoration: none;
				color: #ADD8E6;
				font-size: 2em;
				font-family:"Arial"
			} /* unvisited link */
			
			a:hover{
				color: #BFEFFF;
			}   /* mouse over link */
			
			a:active{color: #0000FF;}  /* selected link */
		</style>
	</head>
	<body>
		<p><b><a href="http://www.google.co.uk" target="_blank">This is a link to Google</a></b></p>
	</body>
</html>

Aswell, how would I make the aligned e.g. 1/4 across the page?

The problem may be that there are two pseudo-classes of "standard links" so to speak.

a:link as well as a:visited

So in your code you would need:

a:link, a:visited{
  text-decoration: none;
  color: #ADD8E6;
  font-size: 2em;
  font-family:"Arial"
}

in order for all links to appear with those formatting which are not being hovered.

As for aligning; you need to utilize a number of techniques depending on exactly what you want accomplished. Margins, widths, padding, floats, etc. are all applicable depending on exactly what you want to position.

Can you be any more specific as to what it is exactly you would like to do?

From: SlothScripts
The problem may be that there are two pseudo-classes of "standard links" so to speak.

a:link as well as a:visited

So in your code you would need:

a:link, a:visited{
  text-decoration: none;
  color: #ADD8E6;
  font-size: 2em;
  font-family:"Arial"
}

in order for all links to appear with those formatting which are not being hovered.

Oh, I didn't realize that you could use them in the same block of script.

From: SlothScripts
As for aligning; you need to utilize a number of techniques depending on exactly what you want accomplished. Margins, widths, padding, floats, etc. are all applicable depending on exactly what you want to position.

Can you be any more specific as to what it is exactly you would like to do?

I was just thinking instead of the standard left, right and center, have it say in between the center and the left of the page. Also, I struggle piecing different parts of script together e.g. say I have a link, I wouldn't know how to go any further than that, I would have to start a new code.
Thinking about it now, I might instead just have an image with text on as a button, with a JavaScript function where the button changes. There is a good example on www.rscorner.com (top right) but mine wouldn't be the same obviously.

JavaScript is very powerful when used correctly, but you must be careful.
If the user does not have JavaScript enabled, what would the plan of action be from there?

Piecing code together is one of the biggest challenges of any coding language and it comes from trial and error, some tutorials and of course tons of lines of code to do so!

Let me know if you've got a specific concern!

Ok, I've made some sort of progress:

Style Sheet:

#container {

width: 900px;

}

#header {

width: 900px;
height: 100px;
background-image: url(images/Clouds.png);
border-bottom: 2px solid #000000;

}

#leftnav {

float: left;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;

}

#rightnav {

float: right;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-left: 1px dashed #694717;

}

#body {

width: 420px;

}

#footer {

clear: both;
background-color: #D1C0A7;

}

HTML Document:

<html>
<head>
<link href="style.css" rel="stylesheet" type ="text/css">
</head>
<body>

<div id="header">This is the header</div>

<div id="leftnav">This is the left nav</div>

<div id="rightnav">This is the right nav</div>

<div id="body">This is the body</div>

<div id="footer">This is the footer</div>

</body>
</html>

But now I have some bad positioning:


As that is meant to be all symmetrical.

You forgot to put it in the container:

<html>
<head>
<link href="style.css" rel="stylesheet" type ="text/css">
</head>
<body>

<div id="container">
  <div id="header">This is the header</div>

  <div id="leftnav">This is the left nav</div>

  <div id="rightnav">This is the right nav</div>

  <div id="body">This is the body</div>
 
  <div id="footer">This is the footer</div>
</div>

</body>
</html>

From: masterBB
You forgot to put it in the container:

<html>
<head>
<link href="style.css" rel="stylesheet" type ="text/css">
</head>
<body>

<div id="container">
  <div id="header">This is the header</div>

  <div id="leftnav">This is the left nav</div>

  <div id="rightnav">This is the right nav</div>

  <div id="body">This is the body</div>
 
  <div id="footer">This is the footer</div>
</div>

</body>
</html>

That's what Kyle Undefined said, thankyou :)

He ninjas me in every thread. That bastard!

From: masterBB
He ninjas me in every thread. That bastard!

It was actually in a PM :p

I need to do this - http://www.sythe.org/showthread.php?p=10901955#post10901955. Also, how can I align my whole body text in the complete center of the page? (The page is 1300px wide).

It is not part of the content you see.

<html>
<head>
<link href="style.css" rel="stylesheet" type ="text/css">
<title>This is displayed in the chrome tab</title>
</head>
<body>

<div id="container">
  <div id="content">Here you put your content</div>
</div>

</body>
</html>

also note that <p> is used to display a paragraph and the title isn't a paragraph.

Also, the title isn't part of the layout, it can't be done with css.

From: masterBB
It is not part of the content you see.

<html>
<head>
<link href="style.css" rel="stylesheet" type ="text/css">
<title>This is displayed in the chrome tab</title>
</head>
<body>

<div id="container">
  <div id="content">Here you put your content</div>
</div>

</body>
</html>

also note that <p> is used to display a paragraph and the title isn't a paragraph.

Also, the title isn't part of the layout, it can't be done with css.

Ok, thankyou :) It turns out that I did it for text, not for the tab title. I've encountered another problem. I have some bad positioning again:


The body is right at the bottom of the page. Also, how do I get the background to work across the whole page? Should I use the standard HTML method, or should I create a new CSS div?

I'll take a wild guess and say that you need to apply the image to the body tag. I was always taught it's bad to apply it to html tags but sometimes I do it ;)

From: ggzz
I'll take a wild guess and say that you need to apply the image to the body tag. I was always taught it's bad to apply it to html tags but sometimes I do it ;)

I was thinking stick to CSS as much as possible, so do you have any idea on how to do that? You're supposed to use the

background-image: url(images/here.jpg);

But that didn't work because my <body> tag is under the left nav for some reason.

Thankyou for the reply :)

It doesn't seem you have set your float properly.

From: masterBB
It doesn't seem you have set your float properly.

Ok, that's sorted it, thankyou :) Also, I need to add some JavaScript onmouseover functions, can anyone help me please? If you can help me, can you please make a really quick working example.

What do you need the mouseover to do? If you want to change images, I'd suggest CSS Sprites ;)

Here's a simple mouseover example: http://www.w3schools.com/jsref/event_onmouseover.asp

From: Kyle Undefined
What do you need the mouseover to do? If you want to change images, I'd suggest CSS Sprites ;)

Here's a simple mouseover example: http://www.w3schools.com/jsref/event_onmouseover.asp

Thankyou for the reply :) I'm looking to create some links buttons in the left nav, so sprites aren't as useful in this situation. I'm debating between some very hard JavaScript, or some CSS. Here's what I would like to happen:

When the link button is generally there, it will be this picture:


When the link is hovered over, it should change size a little bit (say an extra 50x50)

Then the active link should be like this:


Thankyou.

From: Kyle Undefined
What do you need the mouseover to do? If you want to change images, I'd suggest CSS Sprites ;)

Here's a simple mouseover example: http://www.w3schools.com/jsref/event_onmouseover.asp

Don't listen to kyle! He doesn't know what he is talking about :P. This should be done in CSS. I can't find your question he is answering, but using css and background image is the way to go. Also Padding 25px 25px 25px 25px; would make it 50 pixels bigger(I know it can be shorter).

You can use CSS Sprites for that, I do it all the time.

If you want to use JS, you could do something like this:

function changeImg(imgName, imgSrc){
  document[imgName].src = imgSrc;
}

Which can be called like:

<a href="#" onmouseover="changeImg('imgNav', 'img2.png');" onmouseout="changeImg('imgNav', 'img.png');"><img src="img.png" name="imgNav" border="0" /></a>

EDIT: masterBB :p I always use CSS or CSS Sprites when I can. Hate using JS for stuff like that :p

From: masterBB
Don't listen to kyle! He doesn't know what he is talking about :P. This should be done in CSS. I can't find your question he is answering, but using css and background image is the way to go. Also Padding 25px 25px 25px 25px; would make it 50 pixels bigger(I know it can be shorter).

I'm trying to make a button that changes when you hover over it.

From: Kyle Undefined
You can use CSS Sprites for that, I do it all the time.

If you want to use JS, you could do something like this:

function changeImg(imgName, imgSrc){
  document[imgName].src = imgSrc;
}

Which can be called like:

<a href="#" onmouseover="changeImg('imgNav', 'img2.png');" onmouseout="changeImg('imgNav', 'img.png');"><img src="img.png" name="imgNav" border="0" /></a>

EDIT: masterBB :p I always use CSS or CSS Sprites when I can. Hate using JS for stuff like that :p

I'm going to use CSS too I think, I have absolutely no idea what I'm doing with JavaScript, thankyou anyway :) Can anyone make this happen for me please:

The button is The hover over is The click is
Thankyou for all the replies :)

Css:

/* Stylesheet CSS */

a {
  background-image = url(/images/yourButtonImage.png);
  padding: 0;
}

a:hover {
  background-image = url(/images/yourHoveredButtonImage.png);
  padding: 10px 10px 10px 10px;
}

From: masterBB
Don't listen to kyle! He doesn't know what he is talking about :P. This should be done in CSS. I can't find your question he is answering, but using css and background image is the way to go. Also Padding 25px 25px 25px 25px; would make it 50 pixels bigger(I know it can be shorter).

From: masterBB
Css:

/* Stylesheet CSS */

a {
  background-image = url(/images/yourButtonImage.png);
  padding: 0;
}

a:hover {
  background-image = url(/images/yourHoveredButtonImage.png);
  padding: 10px 10px 10px 10px;
}

Thankyou :) What amateur mistake am I doing (I'm trying to make the image part of the left nav as a link button):

 {
  background-image = url(/images/red.jpg);
  padding: 0;
}

a:hover {
  background-image = url(/images/green.jpg);
  padding: 10px 10px 10px 10px;
}

#leftnav {

position: relative; left: 20px; top: 55px;
width: 200px;
height: 400px;
background-image: url(images/red.jpg);
float: left;

}

Aswell, I would like a click and an active image too, so it would be:

Standard
Hover + enlarge slightly
Active

a:active{
  background-image = url(/images/black.jpg);
  padding: 10px;
}

There ya go.

From: Kyle Undefined

a:active{
  background-image = url(/images/black.jpg);
  padding: 10px;
}

There ya go.

Thankyou :) It's working now, but now how I really wanted it. I was hoping that the images would automatically show up, but I have to type text. Here are some pictures of what it is like:

Standard Link:

When hovered over it:

From: sm321
Thankyou :) It's working now, but now how I really wanted it. I was hoping that the images would automatically show up, but I have to type text.

a {
  width: 100px;
  height: 30px;
}

or

a {
  min-width: 100px;
  min-height: 30px;
}

From: masterBB

a {
  width: 100px;
  height: 30px;
}

or

a {
  min-width: 100px;
  min-height: 30px;
}

Thankyou for the reply :) It's not the width and height, but the fact that without adding any text into the

<div id="leftnav">Here</div>

The images don't appear.

From: sm321
Thankyou for the reply :) It's not the width and height, but the fact that without adding any text into the

<div id="leftnav">Here</div>

The images don't appear.

Which is because there is no width and height. Try it. It will work. When you add text it will automatically add a width and height to fit the text, the image is a background image, the size of that image isn't related to the size of the div on the screen.

This is where a CSS Sprite would be perfect.

From: masterBB
Which is because there is no width and height. Try it. It will work. When you add text it will automatically add a width and height to fit the text, the image is a background image, the size of that image isn't related to the size of the div on the screen.

Thankyou for the replies :) So I would have to put it as an image, not as a background instead then?

From: Kyle Undefined
This is where a CSS Sprite would be perfect.

I thought I was using them:

#leftnav a {

background-image: url(images/red.jpg);
text-decoration: none;
font-family: Arial;
width: 250px;
height: 50px;

}

#leftnav a:hover {

background-image: url(images/green.jpg);
padding: 10px 10px 10px 10px;
width: 250px;
height: 50px;

}

#leftnav a:active {

background-image: url(images/green2.jpg);
width: 250px;
height: 50px;

}
 
#leftnav {

position: relative; left: 20px; top: 55px;
width: 200px;
height: 400px;
float: left;

}

If not, can you make me one please using the same as above :)

CSS Sprites are only one image, and are set as backgrounds. When you hover over an element, you change the background positioning.

Take a look at this, and it's source: http://www.vipreantivirus.com/promos/spring-sale/

The tabs are a CSS Sprite, the arrow that you see move is all one image with the background position being changed. The CSS file that's imported is where it all happens at.

:)

From: Kyle Undefined
CSS Sprites are only one image, and are set as backgrounds. When you hover over an element, you change the background positioning.

Take a look at this, and it's source: http://www.vipreantivirus.com/promos/spring-sale/

The tabs are a CSS Sprite, the arrow that you see move is all one image with the background position being changed. The CSS file that's imported is where it all happens at.

:)

Thankyou for the reply :) Ok, but I still thought that I was doing that (changing the background image). Can you please make a me a working example so that I can see what I'm actually doing wrong please? :)

What I linked you to is a working example, I built that.

From: Kyle Undefined
What I linked you to is a working example, I built that.

Thankyou for the reply, and nice website :)

The only thing I can see is this:

<a href="Awards" title="VIPRE Antivirus Awards & Reviews"></a>

http://www.vipreantivirus.com/promos/spring-sale/css/style.css

From: masterBB
http://www.vipreantivirus.com/promos/spring-sale/css/style.css

Thankyou :) I still have no idea how that works though, as there is only 1 image. Infact, when I said there is only 1 image that made me remember something. Don't you have 1 image , but with 3 images (like 3 in 1), then you use some sort of coding to choose which part of the image?

It is a very width background image. He moves it over the x-axis.

From: masterBB
It is a very width background image. He moves it over the x-axis.

Thankyou for the reply :) You may have to explain that ^ for me. Could you please make this work, so that I could see what it should look like:

Button
Hover button and enlarge
When active

From: sm321
Thankyou :) I still have no idea how that works though, as there is only 1 image. Infact, when I said there is only 1 image that made me remember something. Don't you have 1 image , but with 3 images (like 3 in 1), then you use some sort of coding to choose which part of the image?

From: sm321
Thankyou for the reply :) You may have to explain that ^ for me. Could you please make this work, so that I could see what it should look like:

Button
Hover button and enlarge
When active

CSS3 can handle most of that for you, including the appearance of the buttons.

From: NCDS
CSS3 can handle most of that for you, including the appearance of the buttons.

Thankyou for the reply :) I've tried to get it too work, but I have to put text, when I was hoping the images would just appear. I have no reason why. Here's my CSS code if it helps:

#leftnav a {

background-image: url(images/red.jpg);
text-decoration: none;
font-family: Arial;
width: 250px;
height: 50px;

}

#leftnav a:hover {

background-image: url(images/green.jpg);
padding: 10px 10px 10px 10px;
width: 250px;
height: 50px;

}

#leftnav a:active {

background-image: url(images/green2.jpg);
width: 250px;
height: 50px;

}
 
#leftnav {

position: relative; left: 20px; top: 55px;
width: 200px;
height: 400px;
float: left;

}

try display: block;

From: masterBB
try display: block;

Thankyou :) That's now made it "separate" from the background. If anyone reads this part, how do you make a background image/colour work using CSS? I know how to do it in HTML, but I don't want to edit every single page.

From: sm321
Thankyou :) That's now made it "separate" from the background. If anyone reads this part, how do you make a background image/colour work using CSS? I know how to do it in HTML, but I don't want to edit every single page.

background-color = #aabbcc;
background-image = url(images/bg.png);

and there are some more options like repeating and such. You can find it with easy with googling.

From: masterBB
background-color = #aabbcc;
background-image = url(images/bg.png);

and there are some more options like repeating and such. You can find it with easy with googling.

Thankyou for the reply :) I need it to go across the whole page, not just the specific body, header etc. Aswell, what is the name of the coding used to add a picture on a tab, like this:

From: sm321
Thankyou for the reply :) I need it to go across the whole page, not just the specific body, header etc. Aswell, what is the name of the coding used to add a picture on a tab, like this:

I'm not sure if this is right or not, but have you tried just using the <title> </ title> tags?

From: NCDS
I'm not sure if this is right or not, but have you tried just using the <title> </ title> tags?

Thankyou for the reply :) Should I just put an image straight in there? That seems like a viable idea, I'll try it now.

EDIT: It just changed the tab title, with no image:


EDIT 2: I have found out that it is called a "favicon", so I'll have to look at that.

I realise I may be too late to reply, but if you need any other help with css/html/xhtml im more than willing to help out. Im doing a Diploma of Web Development at the moment so everything I code has to be the most 'semantic' way of doing it :p

From: Waf
Im doing a Diploma of Web Development

I feel very sorry for you.

From: masterBB
I feel very sorry for you.

It's what I want to do, really don't care.