Kod
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Faux Column CSS Layouts - 2 Column - faux-11-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script language="JavaScript" type="text/JavaScript">
//object detection to return the correct object depending upon broswer type. Used by the getAXHA(); function.
function getNewHttpObject() {
var objType = false;
try {
objType = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
objType = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
objType = new XMLHttpRequest();
}
}
return objType;
}
//Function used to update page content with new xhtml fragments by using a javascript object, the dom, and http.
function getAXAH(url,elementContainer){
document.getElementById(elementContainer).innerHTML = '<blink class="redtxt">Loading...<\/blink>';
var theHttpRequest = getNewHttpObject();
theHttpRequest.onreadystatechange = function() {processAXAH(elementContainer);};
theHttpRequest.open("GET", url);
theHttpRequest.send(false);
function processAXAH(elementContainer){
if (theHttpRequest.readyState == 4) {
if (theHttpRequest.status == 200) {
document.getElementById(elementContainer).innerHTML = theHttpRequest.responseText;
} else {
document.getElementById(elementContainer).innerHTML="<p><span class='redtxt'>Error!<\/span> HTTP request return the following status message: " + theHttpRequest.statusText +"<\/p>";
}
}
}
}
</script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
This is the Header
</div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"><ul>
<li><a href="1.html" onclick="getAXAH('1.html','leftcolumn');getAXAH('2.html','rightcolumn');return false;">Load blue Lorem Ipsum <strong>bold</strong> text</a> ‌ </li>
<li><a href="2.html" onclick="getAXAH('2.html','leftcolumn');getAXAH('3.html','rightcolumn');return false;">Load green Lorem Ipsum <em>italic</em> text </a> ‌ </li>
<li><a href="3.html" onclick="getAXAH('3.html','leftcolumn');getAXAH('1.html','rightcolumn');return false;">Load red Lorem Ipsum regular text </a></li> ‌
<li><a href="Lorem-ipsum-nothing.htm" onclick="getAXAH('Lorem-ipsum-nothing.htm','content');return false;">Show example of Error</a></li>
</ul></div>
<!-- End Navigation -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<a href="#">Download this CSS Layout</a>
<h1>Faux Column CSS Layouts</h1>
<p> cos cos cos </p>
<div class="clear"></div>
</div>
<!-- End Right Column -->
<div class="clear"></div>
</div>
<!-- End Faux Columns -->
</div>
<!-- End Wrapper -->
</body>
</html>
cz. 1
i css
Kod
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#faux {
background: url(faux-3-2-col.gif);
margin-bottom: 10px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 10px 0px 0px 0px;
background: #D1DBDB;
}
#navigation {
color: #333;
padding: 10px;
margin: 0px 0px 0px 0px;
background: #ABBEBE;
}
#leftcolumn {
display: inline;
color: #333;
margin: 10px;
padding: 0px;
width: 220px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 663px;
display: inline;
}
.clear { clear: both; background: none; }
ul li {display:inline}
chce zrobić aby te teksty teraz nie są równe aby były równe( są one zamieszczone w 2 divach każdy osobno)