Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Nieprawidłowe wstawianie divów (tabelka)
Forum PHP.pl > Forum > Po stronie przeglądarki
martinstw
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>
erix
Nie no, bez przesady, semantyczne layouty, ale tutaj trochę przegiąłeś. 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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.