CSS Faq - HTML Forums

Jon Hanlon · 01-09-2002, 06:07 PM

Q. How do I remove the underlining from links?
A. Using a Stylesheet
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:hover {text-decoration: none}
A:active {text-decoration: none}
</style>

whkoh · 01-10-2002, 05:23 AM

Q.
How do I make links change on-hover?

A.
<style type="text/css">
a:hover {text-decoration:overline)
</style>

<style type="text/css">
a:hover {text-decoration:underline)
</style>

<style type="text/css">
a:hover {text-decoration:line-through)
</style>

<style type="text/css">
a:hover {text-decoration:none)
</style>

Dr. Web · 01-16-2002, 11:38 AM

CSS Faq

Q. When setting up forms on a page is there anyway, script or otherwise to get rid of the spacing that the form tags make? Or are there any tips or tricks to get around this?

A. use a style declaration.

<form name=form1 action="myActionPage.cfm" method=post style="display: inline;">

Goldilocks · 03-04-2002, 06:46 AM

Place this code in your HTML between the <HEAD> tags:

<style>

</style>

Replace the hexidecimal codes with your own choices or just use color names i.e. red, blue, etc.

NOTE: This only works for IE5.1+. It doesn't work in any current version of Netscape.

Dr. Web · 03-31-2002, 12:19 PM

CSS Faq

Q. How do I make different links have different properties? Maybe I want one to be green and highlight red, while the others need to be yellow, and highlight blue.

A. Use CSS classes for your href's. You may create as many classes as you like, and all you need to do is reference them. Here is an example of how to use three different classes on the same page.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style>
a.swiss:link {color: red; text-decoration: none;}
a.swiss:visited{color: red; text-decoration: none;}
a.swiss:hover {color: yellow; text-decoration: none;}
a.swiss:active{color: red; text-decoration: none;}

a.cheese:link {color: blue; text-decoration: none;}
a.cheese:visited{color: blue; text-decoration: none;}
a.cheese:hover {color: #cccccc; text-decoration: none;}
a.cheese:active{color: blue; text-decoration: none;}

a.wow:link {color: black; text-decoration: underline;}
a.wow:visited{color: black; text-decoration: underline;}
a.wow:hover{color: blue; text-decoration: underline;}
a.wow:active{color: black; text-decoration: underline;}
</STYLE> 


</style>
</head>

<body>

<a href="zonk.html" class="swiss">swiss</a>&nbsp;&nbsp;&nbsp;
<a href="zonk.html" class="cheese">cheese</a>&nbsp;&nbsp;&nbsp;
<a href="zonk.html" class="wow">w o w</A>

</body>
</html>

scoutt · 09-22-2002, 11:57 AM

How do I get table headers at top of each printed page?

I remember seeing posts which have asked how to have table headers displayed at the top of each Printed page. Well here's a solution:

Code:

<thead style="display: table-header-group">
<tr>
  <td>Column1 Header</td>
  <td>Column2 Header</td>
</tr>
</thead>

This is IE4+, NS6 compatible

Pegasus · 09-04-2005, 03:35 AM

Q: How do I get my pages to go to the edges of the window?

A: Add this to your body CSS style:

{margin: 0px; padding: 0px; }

Pegasus · 09-04-2005, 03:36 AM

Q: How do I get rid of the blue border around images that I've made into links?

A: Add this to your CSS style information:

img {border: none; }

Pegasus · 07-08-2006, 12:58 AM

Q. I have two <div> sections. I would like them to be on the same line. How do I do this?

A. Add this code to the CSS of the second of the two:

display: inline;

wrestlenovi · 07-17-2006, 10:30 PM

Q: How do I add a fixed background image so it stays where it is even when I scroll down the page?

A: Add This inside the head tags of your HTML.

Code:

<style type="text/css">
body 
{
background-image: 
url('image.jpg');
background-attachment: 
fixed
}
</style>

welshsteve · 05-24-2007, 05:49 AM

Q: What's the difference between absolute and relative positioning?

A: Setting the positioning as absolute allows you to specify a new positioning context for an element relative to the positioning context of it's parent element. This removes the absolutely positioned element from the normal flow of the document.

Setting the positioning as relative positions the element relative to it's place in the normal document flow.

e.g.

In this example the first div element is positioned 50px from the left and 125px down from the base point (parent). The second div is contained within the first, so its positioning is also determined by the first div element's base point. It therefore occupies the same space. This example creates a new positioning context as the elements are absolutely positioned outside the documents normal flow.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Positioning</title>

	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

</head>

<body>

<h1 style="border: 1px solid #000;">Header</h1>
<div style="position: absolute; left: 50px; top: 125px; border: 1px solid #000; width: 200px;">
        <div style="position: absolute; left: 0; top: 0; border: 1px solid #000; width: 198px;">
                This is the text.
        </div>
</div>

</body>

</html>

In this next example, the second div element is positioned relatively. It is placed 120px from the left and 150px from the top of the position it would occupy in the normal flow of the document.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Positioning</title>

	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

</head>

<body>

<h1 style="border: 1px solid #000;">Header</h1>
<div style="position: absolute; left: 50px; top: 125px; border: 1px solid #000; width: 200px;">
        This is text for the first.
 </div>
 
 <div style="position: relative; left: 120px; top: 150px; border: 1px solid #000; width: 198px;">
                This is the text for the second.
</div>


</body>

</html>

Try experimenting with the left and top setting of the relatively positioned div.

REMEMBER: it's left and top settings are relative to the elements position in the normal flow of the document. In other words, if you were to change these settings to 0 for both left and top, the second div would then appear after the header element and before the first div. This can occur because the first div is absolutely positioned, and is therefore no longer a part of the normal flow of the document.

These settings allow you to overlap elements on the screen. When two elements overlap, you need to decide which of these takes precedence. In other words, which of the two elements appears "on top" and which appears "behind". This is achieved using the z-index selector.

In this example the second div takes precedence because it's z-index value is higher than that of the first div.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Positioning</title>

	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

</head>

<body>

<h1 style="border: 1px solid #000;">Header</h1>
<div style="position: absolute; left: 50px; top: 50px; border: 1px solid #000; width: 200px; background-color: #aff;z-index:1;">
        This is text for the first.
 </div>
 
 <div style="position: relative; left: 0; top: 0; border: 1px solid #000; width: 198px; background-color: #ffa;z-index:2;">
                This is the text for the second.
</div>


</body>

</html>

I hope this makes sense to you

It's my first tutorial.

deadwing · 11-10-2007, 06:33 PM

Quote:

Originally Posted by Dr. Web

CSS Faq

Q. How do I make different links have different properties? Maybe I want one to be green and highlight red, while the others need to be yellow, and highlight blue.

A. Use CSS classes for your href's. You may create as many classes as you like, and all you need to do is reference them. Here is an example of how to use three different classes on the same page.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style>
a.swiss:link {color: red; text-decoration: none;}
a.swiss:visited{color: red; text-decoration: none;}
a.swiss:hover {color: yellow; text-decoration: none;}
a.swiss:active{color: red; text-decoration: none;}

a.cheese:link {color: blue; text-decoration: none;}
a.cheese:visited{color: blue; text-decoration: none;}
a.cheese:hover {color: #cccccc; text-decoration: none;}
a.cheese:active{color: blue; text-decoration: none;}

a.wow:link {color: black; text-decoration: underline;}
a.wow:visited{color: black; text-decoration: underline;}
a.wow:hover{color: blue; text-decoration: underline;}
a.wow:active{color: black; text-decoration: underline;}
</STYLE> 


</style>
</head>

<body>

<a href="zonk.html" class="swiss">swiss</a>&nbsp;&nbsp;&nbsp;
<a href="zonk.html" class="cheese">cheese</a>&nbsp;&nbsp;&nbsp;
<a href="zonk.html" class="wow">w o w</A>

</body>
</html>

I was just getting ready to ask about this when I found the tutorial. Thanks!

Also, is there a way to apply a class to regular text? I was going to use header tags, but as you know, header tags make the text in its own paragraph. I wanted to be able to define my own headers such as this:

H1 {font-size: 8pt; font-family: Verdana; font-weight: bold; color: #A1410E}
H2 {font-size: 10pt; font-family: Verdana}

without having a large space between the header text and regular text. Any ideas on how to remedy this?

Thanks!