Czy mógłby mi ktoś powiedzieć, dlaczego div="content" wstawiany jest ponad żółty wiersz div="headers", a nie pod nim?
W add row wpisałem nazwę diva: container i tak mi dziwnie wyszło:(
Kod
<?xml-stylesheet href="lokalizacja.css" type="text/css"?>
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<TITLE>Tytuł dokumentu</TITLE>
<meta name="description" content="opis strony" />
<meta name="keywords" content="slowa kluczowe" />
<meta name="author" content="martinprz@wp.pl" />
<meta name="robots" content="all" />
<style type="text/css">
#body {width: 550px; position: relative; left: 50%; margin-left: -275px;}
#container {display: table; border: 1px solid black;}
#container div {border: 1px solid black; text-align: center;}
#hd1 {width: 550px; border: 1px solid black; color: red; background-color: white;}
#headers {display: table-row;}
#headers div {text-align: center; display: table-cell; height:20px; float: left;}
#hd2 {width: 21px; border: 1px solid black; background-color: yellow;}
#hd3 {width: 40px; border: 1px solid black; background-color: yellow;}
#hd4 {width: 60px; border: 1px solid black; background-color: yellow;}
#hd5 {width: 191px; border: 1px solid black; background-color: yellow;}
#hd6 {width: 133px; border: 1px solid black; background-color: yellow;}
#hd7 {width: 97px; border: 1px solid black; background-color: yellow;}
.content {display: table-row;}
.content div {text-align: center;display: table-cell; height:10px; font-family: Andale Mono;}
.cn1 {width: 10px;}
.cn2 {width: 43px;}
.cn3 {width: 62px;}
.cn4 {width: 197px;}
.cn5 {width: 139px;}
.cn6 {width: 100px;}
.cn1, .cn5 {background-color: orange; border: 1px solid black;}
.cn2 {background-color: aqua; border: 1px solid black;}
.cn3, .cn4 {background-color: silver; border: 1px solid black;}
.cn6 {background-color: white; border: 1px solid black;}
</style>
<script type="text/javascript">
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("div")[0];
tbody.innerHTML = tbody.innerHTML + '<div class="content">'+
'<div class="cn1"><input type="checkbox" name="checkbox"></div>'+
'<div class="cn2">tak</div>'+
'<div class="cn3">printer</div>'+
'<div class="cn4">martinstw</div>'+
'<div class="cn5">15:20 / 15.12.1987</div>'+
'<div class="cn6"><a href="delete.php?id=24"><img class="del" alt="Usuń" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="Edytuj" src="edit.gif" /></a></div></div>';
}
</script>
</HEAD>
<BODY>
<div id="body">
<div id="container">
<table>
<div>
<div id="hd1">Podgląd przebywania użytkowników</div>
</div>
<div id="headers">
<div id="hd2"></div>
<div id="hd3">Stan</div>
<div id="hd4">Status</div>
<div id="hd5">Nazwa</div>
<div id="hd6">Ostatnie logowanie</div>
<div id="hd7">Opcja</a></div>
</div>
<div id="Sort_id">
<div class="content">
<div class="cn1"><input type="checkbox" name="checkbox"></div>
<div class="cn2"></div>
<div class="cn3">printer</div>
<div class="cn4">martinstw</div>
<div class="cn5">15:20 / 15.12.1987</div>
<div class="cn6"><a href="delete.php?id=24"><img class="del" alt="Usuń" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="Edytuj" src="edit.gif" /></a></div>
</div>
<div class="content">
<div class="cn1"><input type="checkbox" name="checkbox"></div>
<div class="cn2"></div>
<div class="cn3">user</div>
<div class="cn4">martinmmmmmmm</div>
<div class="cn5">15:28 / 16.12.1987</div>
<div class="cn6"><a href="delete.php?id=24"><img class="del" alt="Usuń" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="Edytuj" src="edit.gif" /></a></div>
</div>
<div class="content">
<div class="cn1"><input type="checkbox" name="checkbox"></div>
<div class="cn2"></div>
<div class="cn3">admin</div>
<div class="cn4">martinppp</div>
<div class="cn5">06:00 / 16.12.1987</div>
<div class="cn6">
<a href="delete.php?id=24"><img class="del" border="0" alt="Usuń" src="delete.gif" /></a> /
<a href="edit.php?id=24"><img class="edit" border="0" alt="Edytuj" src="edit.gif" /></a></div>
</div>
</div>
</table>
<a href="javascript:addRow('container')">Add row</a>
</div>
</div>
</BODY>
</HTML>
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<TITLE>Tytuł dokumentu</TITLE>
<meta name="description" content="opis strony" />
<meta name="keywords" content="slowa kluczowe" />
<meta name="author" content="martinprz@wp.pl" />
<meta name="robots" content="all" />
<style type="text/css">
#body {width: 550px; position: relative; left: 50%; margin-left: -275px;}
#container {display: table; border: 1px solid black;}
#container div {border: 1px solid black; text-align: center;}
#hd1 {width: 550px; border: 1px solid black; color: red; background-color: white;}
#headers {display: table-row;}
#headers div {text-align: center; display: table-cell; height:20px; float: left;}
#hd2 {width: 21px; border: 1px solid black; background-color: yellow;}
#hd3 {width: 40px; border: 1px solid black; background-color: yellow;}
#hd4 {width: 60px; border: 1px solid black; background-color: yellow;}
#hd5 {width: 191px; border: 1px solid black; background-color: yellow;}
#hd6 {width: 133px; border: 1px solid black; background-color: yellow;}
#hd7 {width: 97px; border: 1px solid black; background-color: yellow;}
.content {display: table-row;}
.content div {text-align: center;display: table-cell; height:10px; font-family: Andale Mono;}
.cn1 {width: 10px;}
.cn2 {width: 43px;}
.cn3 {width: 62px;}
.cn4 {width: 197px;}
.cn5 {width: 139px;}
.cn6 {width: 100px;}
.cn1, .cn5 {background-color: orange; border: 1px solid black;}
.cn2 {background-color: aqua; border: 1px solid black;}
.cn3, .cn4 {background-color: silver; border: 1px solid black;}
.cn6 {background-color: white; border: 1px solid black;}
</style>
<script type="text/javascript">
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("div")[0];
tbody.innerHTML = tbody.innerHTML + '<div class="content">'+
'<div class="cn1"><input type="checkbox" name="checkbox"></div>'+
'<div class="cn2">tak</div>'+
'<div class="cn3">printer</div>'+
'<div class="cn4">martinstw</div>'+
'<div class="cn5">15:20 / 15.12.1987</div>'+
'<div class="cn6"><a href="delete.php?id=24"><img class="del" alt="Usuń" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="Edytuj" src="edit.gif" /></a></div></div>';
}
</script>
</HEAD>
<BODY>
<div id="body">
<div id="container">
<table>
<div>
<div id="hd1">Podgląd przebywania użytkowników</div>
</div>
<div id="headers">
<div id="hd2"></div>
<div id="hd3">Stan</div>
<div id="hd4">Status</div>
<div id="hd5">Nazwa</div>
<div id="hd6">Ostatnie logowanie</div>
<div id="hd7">Opcja</a></div>
</div>
<div id="Sort_id">
<div class="content">
<div class="cn1"><input type="checkbox" name="checkbox"></div>
<div class="cn2"></div>
<div class="cn3">printer</div>
<div class="cn4">martinstw</div>
<div class="cn5">15:20 / 15.12.1987</div>
<div class="cn6"><a href="delete.php?id=24"><img class="del" alt="Usuń" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="Edytuj" src="edit.gif" /></a></div>
</div>
<div class="content">
<div class="cn1"><input type="checkbox" name="checkbox"></div>
<div class="cn2"></div>
<div class="cn3">user</div>
<div class="cn4">martinmmmmmmm</div>
<div class="cn5">15:28 / 16.12.1987</div>
<div class="cn6"><a href="delete.php?id=24"><img class="del" alt="Usuń" src="delete.gif" /></a> - <a href="edit.php?id=24"><img class="edit" alt="Edytuj" src="edit.gif" /></a></div>
</div>
<div class="content">
<div class="cn1"><input type="checkbox" name="checkbox"></div>
<div class="cn2"></div>
<div class="cn3">admin</div>
<div class="cn4">martinppp</div>
<div class="cn5">06:00 / 16.12.1987</div>
<div class="cn6">
<a href="delete.php?id=24"><img class="del" border="0" alt="Usuń" src="delete.gif" /></a> /
<a href="edit.php?id=24"><img class="edit" border="0" alt="Edytuj" src="edit.gif" /></a></div>
</div>
</div>
</table>
<a href="javascript:addRow('container')">Add row</a>
</div>
</div>
</BODY>
</HTML>
