CSS Help please

Printable View

Show 40 post(s) from this thread on one page

04-21-2012, 02:23 PM
sm321

CSS Help please

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 Code:

<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.
04-21-2012, 02:36 PM
NCDS

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

not the greatest for css/html, but this is a pretty trivial thing.
04-21-2012, 03:01 PM
Brandon

a {font-size:16px; font-style: oblique; font-family:"Times New Roman";}
04-21-2012, 03:04 PM
Frement

CSS has property font-size.

Example: font-size: 16px;
Example 2: font-size: 16pt;
04-22-2012, 08:43 AM
sm321

Quote:

Originally Posted by 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.

Quote:

Originally Posted by 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?

Quote:

Originally Posted by 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 :)
04-22-2012, 08:54 AM
Kyle Undefined

Technically, you should be using em's ;)
04-22-2012, 09:01 AM
sm321

Quote:

Originally Posted by 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 Code:

<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>
04-22-2012, 09:11 AM
Kyle Undefined

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

HTML Code:

<!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>
04-22-2012, 09:44 AM
sm321
Quote:

Originally Posted by Kyle Undefined

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

HTML Code:

<!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:

HTML 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?
04-22-2012, 06:52 PM
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:

HTML Code:

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?
04-23-2012, 06:29 AM
sm321

Quote:

Originally Posted by 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:

HTML Code:

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.

Quote:

Originally Posted by 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.
04-23-2012, 08:54 PM
SlothScripts

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!
04-29-2012, 07:49 AM
sm321

Ok, I've made some sort of progress:

Style Sheet:

HTML Code:

#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 Code:

<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:

http://puu.sh/s4pT

As that is meant to be all symmetrical.
04-29-2012, 08:38 AM
masterBB

You forgot to put it in the container:

HTML Code:

<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>
04-29-2012, 08:40 AM
sm321

Quote:

Originally Posted by masterBB

You forgot to put it in the container:

HTML Code:

<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 :)
04-29-2012, 08:42 AM
masterBB

He ninjas me in every thread. That bastard!
04-29-2012, 09:06 AM
Kyle Undefined

Quote:

Originally Posted by masterBB

He ninjas me in every thread. That bastard!

It was actually in a PM :p
05-02-2012, 08:38 AM
sm321

I need to do this - http://www.sythe.org/showthread.php?...5#post10901955. Also, how can I align my whole body text in the complete center of the page? (The page is 1300px wide).
05-02-2012, 09:11 AM
masterBB

It is not part of the content you see.

HTML Code:

<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.
05-02-2012, 04:53 PM
sm321

Quote:

Originally Posted by masterBB

It is not part of the content you see.

HTML Code:

<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:

http://puu.sh/szon

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?
05-02-2012, 05:06 PM
Brandon

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 ;)
05-03-2012, 06:26 AM
sm321

Quote:

Originally Posted by 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

Code:

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 :)
05-03-2012, 06:32 AM
masterBB

It doesn't seem you have set your float properly.
05-03-2012, 10:50 AM
sm321

Quote:

Originally Posted by 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.
05-03-2012, 09:12 PM
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
05-04-2012, 11:33 AM
sm321

Quote:

Originally Posted by 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:

http://i47.tinypic.com/2a6t3lc.jpg

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:

http://i46.tinypic.com/25ro2lt.jpg

Thankyou.
05-04-2012, 11:52 AM
masterBB

Quote:

Originally Posted by 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).
05-04-2012, 11:57 AM
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:

Code:

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

Which can be called like:

Code:

<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
05-04-2012, 01:05 PM
sm321

Quote:

Originally Posted by 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.

Quote:

Originally Posted by 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:

Code:

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

Which can be called like:

Code:

<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 http://i47.tinypic.com/2a6t3lc.jpg
The hover over is http://i46.tinypic.com/25ro2lt.jpg
The click is http://i46.tinypic.com/25k4vw0.jpg

Thankyou for all the replies :)

Css:

css Code:

/* Stylesheet CSS */

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

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

05-04-2012, 01:22 PM
sm321
Quote:

Originally Posted by 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).
Quote:
Originally Posted by masterBB

Css:

css Code:

/* 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):

HTML Code:

{ 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 http://i47.tinypic.com/2a6t3lc.jpg

Hover + enlarge slightly http://i46.tinypic.com/25ro2lt.jpg

Active http://i46.tinypic.com/25k4vw0.jpg
05-04-2012, 01:46 PM
Kyle Undefined

Code:

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

There ya go.
05-04-2012, 05:06 PM
sm321

Quote:

Originally Posted by Kyle Undefined

Code:

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:
http://puu.sh/sU0l

When hovered over it:
http://puu.sh/sU0s
05-04-2012, 05:09 PM
masterBB
Quote:

Originally Posted by 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.
css Code:
```
a {
  width: 100px;
  height: 30px;
}
```
or
css Code:
```
a {
  min-width: 100px;
  min-height: 30px;
}
```
05-04-2012, 05:16 PM
sm321
Quote:
Originally Posted by masterBB

css Code:

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

or

css Code:

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

HTML Code:

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

The images don't appear.
05-04-2012, 05:46 PM
masterBB

Quote:

Originally Posted by sm321

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

HTML Code:

<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.
05-04-2012, 05:54 PM
Kyle Undefined

This is where a CSS Sprite would be perfect.
05-04-2012, 10:07 PM
sm321

Quote:

Originally Posted by 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?

Quote:

Originally Posted by Kyle Undefined

This is where a CSS Sprite would be perfect.

I thought I was using them:

HTML Code:

#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 :)
05-04-2012, 10:12 PM
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.

:)
05-04-2012, 10:20 PM
sm321

Quote:

Originally Posted by 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? :)

Show 40 post(s) from this thread on one page

All times are GMT. The time now is 06:51 AM.