How do you make a whole div into a link?
You can't put 'a' tags around a div, but you can do this with javascript :HTML
<div onclick="javascript:location='http://bonrouge.com'" id="mydiv">
... stuff goes here ...
</div>
If you want to use an empty div with a background image as a link instead of putting your image into the html, you can do something like this:
CSS
#empty {
background-image:url(wine.jpg);
width:50px;
height:50px;
margin:auto;}
#empty a {
display:block;
height:50px;}
* html #empty a {
display:inline-block;}
HTML
<div id="empty"><a href="#n"></a></div>
How do I have links of different colors on the same page?
Recommending people to use classes in their 'a' tags like this :
CSS
Recommending people to use classes in their 'a' tags like this :
CSS
a.red {
color:red;}
a.blue {
color:blue;}
HTML
<a href="#" class="red">A red link</a>
<a href="#" class="blue">A blue link</a>
This is a valid way to do it, but usually, this isn't what a page looks like - two links next to each other with different colours - it's usually something like a menu with one kind of link and main body text or another menu with different links. In this (normal) situation, To go higher up the cascade to style the links. Something like this :
CSS
a {
color:red;}
#menu a {
color:blue;}
HTML
<ul id="menu">
<li><a href="#">A red link</a></li>
<li><a href="#">A red link</a></li>
</ul>
<div id="content">
<p>There's <a href="#">a blue link</a> here.</p>
</div>
What is shorthand property?
Shorthand property is a property made up of individual properties that have a common "addressee". For example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:
H1 {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 160%;
font-family: serif}
can be all shorthanded to a space separated list:
H1 {font: bold italic small-caps 160% serif}
Note: To make things even simpler the line-height property can be specified together with the font-size property:
H1 {font: bold italic small-caps 160%/170% serif}
How to use CSS building a standards based HTML template?
It should:
1. Contain: header, navigation, content, footer
2. Use well-structured HTML
3. Be error-free and encourage good coding
Let’s start with number one there:
HTML document split up in four parts all with different meaning, use the
-tag. Div is short for “division” and isn’t header, navigation and so on ...
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Your own page title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">
<h1>The name of this page</h1>
</div>
<div id="navigation">
<h2>Navigation</h2><ul>
<li><a href="first.html">First</a></li>
<li><a href="second.html">Second</a></li>
<li><a href="third.html">Third</a></li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Some sample content, add your own here</p>
</div>
<div id="footer">
<p>This page is written by [Your name] and builds
n a <a href="http://friendlybit.com">
Friendlybit template</a>.</p>
</div>
</body>
</html>
body {
background-color: Green;}
div {
border: 3px solid Black;
padding: 7px;
width: 600px;}
h1, h2, h3, h4, h5, h6 {
margin: 0;}
#navigation {
float: left;
width: 150px;}
#content {
float: left;
width: 430px;}
#footer {
clear: both;}
float: left;
width: 150px;}
#content {
float: left;
width: 430px;}
#footer {
clear: both;}
No comments:
Post a Comment