Forum Moderators: not2easy
I thought about optimizing a site for a bit better ranking in search engines. The ability to move around divs is one of the main arguments for using CSS, but I can't find real life examples of using it in site designs anywhere...
So, what I want is to place for example the menu AFTER the content in the code, but have the menu show before the content when viewing the page.
Examples:
DISPLAY
1. Header
2. Menu
3. Content
4. Footer
CODE
1. Header
2. Content
3. Menu
4. Footer
Another example is that I'd like to have my "produced by X" before the content in code, but to the far bottom in the view.
DISPLAY
1. Header
2. Menu
3. Content
4. Footer
CODE
1. Header
2. Produced by X
3. Content
4. Menu
5. Footer
My problem lies in that how hard I try, I can't grasp position:. In the last example, if I use position:absolute;bottom:0px on the "produced by X", it drops out of the flow. position:relative is even more confusing.
Hopefully someone could reach out here...
/Martin
It's very possible. An example would be this (this is taken from a tutorial on my website - it's a 3 column floated layout, but you can see the example and ajust to your needs - it's a place to start anyway!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="stylesheet.css" />
<!--[if IE 6]>
<style type="text/css">
* {
height:0;}
#header {
position:relative;}
#left {
left:200px;}
</style>
<![endif]-->
<!--[if lte IE 5.5000]>
<style type="text/css">
* {
height:0;}
</style>
<![endif]-->
</head>
<body>
<div id="outer_left">
<div id="wrapper">
<div id="content">
Nine undervear keepin ker oompaloomp die weiner sparkin, ya. Hast, leiderhosen waltz dummkopf lookinpeepers kaboodle makin stein morgen achtung du. Pretzel gestalt, spritz lookinpeepers die frankfurter noodle dummkopf. Octoberfest glockenspiel pretzel das wearin morgen weiner leiderhosen nutske, hast. Buerger pukein hans relaxern deutsch footzerstompen deutsch hast die ist nicht, haus dummkopf, meister.
</div>
<div id="left">
left column here
</div>
<div id="right">
right column here
</div>
<hr />
</div>
</div>
<div id="header">
header here
</div>
</body>and the CSS:
* {
margin:0;
padding:0;
border:0;}
body {
font-family: Arial, Helvetica, sans-serif;
color:#000;
background:#FFF;
text-align:left;}
#header {
position:absolute;
left:0;
top:0;
width:100%;
text-align:center;
height:150px;
background:#A6885A;}
#outer_left {
position:absolute;
left:0;
top:0;
width:100%;
background:url("bg.gif");
background-repeat:repeat-y;}
#wrapper {
position:relative;
left:0;
top:0;
background:url("bg.gif");
background-repeat:repeat-y;
background-position:right top;
padding:0 200px 150px 200px;}
#left {
position:relative;
left:-200px;
top:150px;
float:left;
width:200px;
margin-left:-100%;
padding:10px 0;}
#content {
position:relative;
top:150px;
float:left;
width:100%;
position:relative;
background:transparent;}
#right {
position:relative;
top:150px;
float:left;
width:200px;
padding:10px 0;
margin-right:-200px;}
hr {
clear:both;
visibility:hidden;}If you want a footer, just replace the <hr /> tag with a footer div, and remove the "visibility:hidden;" stuff.
