 [JS] Nieprawidłowe wstawianie divów (tabelka) |
| [JS] Nieprawidłowe wstawianie divów (tabelka) |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 55 Pomógł: 0 Dołączył: 1.11.2008 Ostrzeżenie: (0%) 
 |
Witam wszystkich!
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> Ten post edytował martinstw 31.12.2008, 10:56:50 |
 |
 
|
 |
|
Post
#2
|
|
|
Grupa: Moderatorzy Postów: 15 467 Pomógł: 1451 Dołączył: 25.04.2005 Skąd: Szczebrzeszyn/Rzeszów |
Nie no, bez przesady, semantyczne layouty, ale tutaj trochę przegiąłeś. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
Tutaj jak najbardziej, IMHO powinieneś użyć tabelki, a nie męczyć <div/>ami. Owszem, semantyczne layouty, jak najbardziej, ale we wszystkim naprawdę potrzebny jest umiar. Gdyby robić wszystko wg Twojego pomysłu, to tabelki powinny być całkiem wykreślone ze specyfikacji. |
|
|
|
 |
|
Aktualny czas: 18.09.2025 - 09:06 |
