This question has been answered by sottwell. See the first response.
☆ A M B ☆
☆ A M B ☆
body {
background: url(paper.jpg);
}
☆ A M B ☆
<html>
<head>
This is where you must do some important things, including connecting with your css file and setting the path to your installation. If this is set right then your picture link is relative, ie /images/coolpic.jpg. Setting the path says that the system knows that the site is www.coolpics.com and so can attach that to the front of the picture path above. The code for the path is relatively simple if your install isn't a custom job, I use <base href="[[++site_url]]" /> and also this will help your site be better for search <title>[[++site_name]] - [[*longtitle]]</title>
</head>
<body>
Normally you would put your html here with the pic you wanted, but I think Susan's css code is all you need! There is, I believe, no html image element involved at all, as the css connects the <body> element with the pic.
Note that this code goes in the css file not in the template! It is possible to put most or even all css into the html itself, but...it would make the work harder. Split them up, call to the css up in the <head> section, and then its much easier. In css, first its the selector (like <body> or by class or id), and then the styling, including color, size, position, the works.
<header>
Here is where you can put your top pic if you want to, or some navigation, both of these will be html with css for styling and placement. Navigation can also go farther down, and again css controls its location as much as if not more than the html.
Stuff like the navigation can be cut out later and put into a chunk, that makes the template easy to read and helps when you want to control some changes across multiple templates.
</header>
<section>
Ok I am going to have 2 sections, first one will have my [*content] element, which means the contents of each individual page.
But if I want to I can have a navigation in here too, and use some code like float:left to push it out of the way, to one side or above of below, of the contents. It might matter if the html of a nav is right before or after the content call, but still you got control.
</section>
<section>
This section is for something else, navigation, some tools to give other contents, maybe just my flickr stream. There are a lot of tools and methods once you know what you want.
</section>
<footer>
There are some traditional elements you can consider for this space. Copyright coolpics.com
</footer>
</body>
</html>
☆ A M B ☆
<!doctype html>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <header> <h1>Logo</h1> <nav>Link List here</nav> </header> <main>Content</main> <aside>Sidebar</aside> <footer>Document Footer</footer> </body> </html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<header>
<h1>Logo</h1>
<nav>Link List here</nav>
</header>
<main>
<!-- Start Content -->
<article>
<header>
<h2>Article header</h2>
<p>short intro text / subline etc.</p>
</header>
<p>Article content in a normal paragraph</p>
<footer>Info about the article writer</footer>
</article>
<!-- / End Content -->
</main>
<aside>Sidebar</aside>
<footer>Document Footer</footer>
</body>
</html><!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <header role="banner"> <h1>Logo</h1> <nav>Link List here</nav> </header> <main role="main">Content</main> <aside role="complementary">Sidebar</aside> <footer role="contentinfo">Document Footer</footer> </body> </html>
main[role=main]{}
header[role=banner]{}
header[role=banner] h1{}
header[role=banner] nav{}
main[role=main]{}
aside[role=complementary]{}
footer[role=contentinfo]{}header{}
footer{}
main[role=main]{}
header[role=banner]{}
header[role=banner] h1{}
header[role=banner] nav{}
main[role=main]{}
aside[role=complementary]{}
footer[role=contentinfo]{}main[role=main]{}
header[role=banner]{}
header[role=banner] h1{}
header[role=banner] nav{}
main[role=main]{}
main[role=main] header{}
main[role=main] footer{}
aside[role=complementary]{}
footer[role=contentinfo]{}main[role=main]{}
header[role=banner]{}
header[role=banner] h1{}
header[role=banner] nav{}
main[role=main]{}
main[role=main] article header{}
main[role=main] article footer{}
aside[role=complementary]{}
footer[role=contentinfo]{}<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <div id="header"> <h1>Logo</h1> <div class="nav">Link List here</div> </div> <div id="content">Content</div> <div id="sidebar">Sidebar</div> <div id="footer">Footer</div> </body> </html>