Drie kolommen met div's, zonder gebruik van een table:
div.left {float: left; clear: left;}
div.middle {float: left; clear: none;}
div.right {float: left; clear: right;}
Stijlbladen kunnen op drie verschillende manieren worden verbonden met het HTML-document: extern (afzonderlijke css-file), intern (binnen de header) en inline (binnen de openingstag); in oplopende cascade van prioriteit:
Emil Stenström:
One of the least followed parts of CSS is the very idea behind it, the idea of separation of content and design. The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects. Usually those two are made in different parts of a webpage's lifetime. The design is determined at the beginning and then you start filling it with content and keep the design fixed. So if you just want to add content to your site you don't want to be forced to mess around with the design, would you? The same thing is true the other way around, if you decide on a redesign, why should you have mess around with the content, making sure it fits in the new layout?
There are basically two ways to make 2 column layouts with floats. Either you float all the columns (float-float) or you float all but the last one (float-margin). The former method makes it easier to work with clearing inside of the second columns though, so if you are going for a complex layout float-float might be better. The latter has the advantage that you don't have to set a width on the last column. It will fill whatever space is availiable. My favourite is still float-margin though, the automatically expanding second column makes sure the the full width is used no matter what.
If you want to put something below a float you need to clear it. Clearing moves the element down until it is below any floats, exactly where we want the footer. So both navigation and content are floated and given a width to match the 600 pixels wide header, and the footer is cleared.
Inline elements (no line break before or after the element)
The most common LCD monitors on the market today follow the wide-screen format. That wide ratio can play havoc with Web site designers and their layout of Web pages. However, with a little bit of Cascading Style Sheet (CSS) code, you can control your Web page design by centering it on any screen despite its horizontal to vertical ratio.
<html>
<head>
<title>Centering a page layout with CSS</title>
<style type="text/css">
<!--
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<h1>The Gettysburg Address</h1>
<h2>Gettysburg, Pennsylvania<br />
November 19, 1863</h2>
<p>
Four score and seven years ago our fathers brought forth on this
continent, a new nation, conceived in Liberty, and dedicated to the
proposition that all men are created equal. Now we are engaged in a
great civil war, testing whether that nation, or any nation so
conceived and so dedicated, can long endure.</p>
</div>
</body>
</html>
Class selectors are very powerful. However, it is not advisable to use a class to style HTML elements to look like other elements.
One example of this would be styling the contents of a <div> or a <p> element to look like a heading.
<div class="heading">Heading here</div>
.heading
{
font-weight: bold;
font-size: 140%;
color: #600;
}
The problem with the example above is that some browsers may not recognise style sheets or may have style sheets turned off when they view your page. So, the styled <div> or <p> may not look like a heading at all. Structurally, you should use the correct HTML elements where possible and style them according to your needs.
23-6-2008 Genealogie-css-templates
Pat Geary
Web Style Guide, 2nd ed. Patrick Lynch, and Sarah Horton This is the online version of the book by the same name.
NewYork Public Library Style Guide
Kompozer
KompoZer is based on Gecko, the layout engine inside Mozilla; it's a
super-fast, very reliable, standards conformant engine maintained on a
daily basis by a wide community of developers. Its remarkable support of
XML, CSS and JavaScript offers the best authoring platform on the
market. Its architecture based on XUL makes it the most extensible
editing tool ever.
28-6-2008 SEO Training Class Search Engine Optimization 100% free
Voor kleine zaken, genealogie- en parochie-sites
The word 'cascading' in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared 'inline' on the tag itself would override all other CSS.
An example can be with a special heading on the page where you want to have a little more padding than you typically do for a heading. Instead of creating a class elsewhere that will only be used on this one occasion, it makes sense to me to just include the CSS inline. I have to stress that inline CSS is something you should rarely if ever use because it can get messy quick.
Templates
There are several options:
<link rel="stylesheet" type="text/css" href="print.css" media="print" /> The only difference between this link element and the link to your screen style sheet is the attribute: media="print" Most style sheets are written for the screen, so the media can be left off, or written as: media="screen"
The print.css style sheet would look like this:
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
a {
text-decoration : underline;
color : #0000ff;
}
#navigation, #advertising, #other {
display : none;
}
Save print.css in the same directory as the file,include the
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
in the head of your document, and your page will print perfectly
while displaying however you would like.
Rootsweb Web Training
Should links open in a new window?
Rootsweb provides several folders in which to have web pages
family genealogy history religions folklore school-alumini college-allumini
all folders have _html at the end
as in misc_html - which I gather is meant to be used as an index to everything else
and the URL to misc_html as in my case is http://freepages.rootsweb.ancestry.com/~lankshear/
I am using Filezilla to access these folders using FTP host as
users.freepages.rootsweb.com
The other URL addresses I have are
http://freepages.genealogy.rootsweb.ancestry.com/~lankshear/
http://freepages.religions.rootsweb.ancestry.com/~lankshear/
Note the address contains religions or genealogy but the folder into which you put the applicable index.htm or html and other pages etc is religions_html etc
So just create new index page etc
Ron Lankshear - Sydney Aust (from London- Shepherds Bush & Chiswick)
However, there are some good reasons for not using external style sheets:
The biggest problem with using CSS is that it isn't reliable or consistent across browsers.
There are many situations on Web pages where you have an image that you'd like to appear inside the text with the text flowing around it. With the CSS float property it's easy to float your image to the right of the text and have the text flow around it on the left side.
Write a paragraph of text and add an image at the beginning of the paragraph (before the text, but after the <p> tag):
<p> <img src="xx-sample.jpg" alt="yy" style="float:right;margin:0 0 0 5px;"/> Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua. Sunt in culpa quis nostrud exercitation excepteur sint occaecat. Mollit anim id est laborum. </p>