Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Html'de divleri sıralamak sorun

Konu, 'Web Programlama' kısmında egencan tarafından paylaşıldı.

  1. egencan

    egencan Üye

    Kayıt:
    25 Ocak 2017
    Mesajlar:
    85
    Beğenilen Mesajlar:
    0
    Meslek:
    ÖĞRENCİ
    Şehir:
    İstanbul
    Merhaba,

    arkadaşlar ben bu aralar bir alışveriş sitesi yapıyorum ve arama bölümünde ürün kutularını sıralamakta sorun yaşıyorum. Kodlar ve resim aşağıdadır.

    Kod :

    Kod:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Search</title>
    </head>
    <body>
    
    <div id="tamcerceve">
    
    <?php
    
    session_start();
    
    if (isset($_SESSION['kulad1']) || !empty($_SESSION['kulad1'])) {
    
      $kulad2 = $_SESSION['kulad1'];
    
      $kulad2k = strlen($kulad2);
    
      if ($kulad2k == 1) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1125px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 2) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1132.5px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 3) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1140px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 4) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1147.5px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 5) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1155px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 6) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1162.5px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 7) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1170px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 8) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1177.5px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 9) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1185px;
    
          }
    
        </style>
    
        <?php
    
      }elseif ($kulad2k == 10) {
    
        ?>
    
        <style type="text/css">
         
          #prflmenu2{
    
            position: absolute;
            top: 115px;
            left: 1000px;
    
          }
    
          input.sepetimb{
    
            position: absolute;
            top: 117.5px;
            left: 1192.5px;
    
          }
    
        </style>
    
        <?php
    
      }
    
      ?>
    
      <div id="prflmenu2">
        <ul class="profmenu2">
          <li><?php echo($kulad2); ?>
          <ul>
          <li><a href="normalprfl.php">Profile</a></li>
          <li><a href="normalabild.php">Settings</a></li>
          <li><a href="egoldcikis.php">Log out</a></li>
          </ul>
          </li>
        </ul>
      </div>
    
      <input type="button" class="sepetimb" value="Cart" onclick="location='sepet.php'">
    
      <style type="text/css">
       
        #prflmenu2{
    
          width: 100px;
          display: inline-block;
          padding: 0px;
          text-align: center;
          cursor: pointer;
    
        }
    
        .profmenu2{
    
          position: absolute;
          display: inline-block;
          padding: 0px;
          margin: 0px;
          list-style: none;
    
        }
    
        ul.profmenu2 ul{
    
          position: absolute;
          list-style: none;
          display: none;
          min-width: 140px;
          margin-top: 3px;
          left: -1px;
    
        }
    
        ul.profmenu2 > li{
    
          float: left;
          position: relative;
          display: block;
          padding: 3px 10px 3px 20px;
          min-height: 20px;
    
        }
    
        ul.profmenu2 ul li{
    
          margin: 1px;
          text-align: left;
          padding: 3px 20px;
    
        }
    
        ul.profmenu2 li > ul{
    
          display: none;
    
        }
    
        ul.profmenu2 li:hover > ul{
          position:absolute;
          display:block;
          padding:0px;
          -moz-box-shadow: 5px 5px 5px #888;
          -webkit-box-shadow: 5px 5px 5px #888;
          box-shadow: 5px 5px 5px #888;
        }
    
      </style>
    
      <?php
    
    }else{
    
      ?>
    
      <input type="button" class="kayitb" value="Register" onclick="location='egoldk.php'">
      <input type="button" class="girisb" value="Login" onclick="location='egoldg.php'">
    
      <style type="text/css">
       
        input.kayitb{
    
          position: absolute;
          top: 115px;
          right :150px;
    
        }
    
        input.girisb{
    
          position: absolute;
          top: 115px;
          right :225px;
    
        }
    
      </style>
    
      <?php
    
    }
    
    $aramasonuc = $_GET["arama"];
    
    echo($aramasonuc);
    
    $sayfa2 = @$_GET['sayfa'];
    
    if (empty($sayfa2) || !is_numeric($sayfa2)) {
    
      $sayfa2 = 1;
    
    }
    
    $kacar2 = 25;
    
    if ($sayfa2 == 1) {
    
    $aramay = $_GET['arama'];
    
    $_SESSION['aramays'] = $aramay;
    
    $aramayss = $_SESSION['aramays'];
    
    }else{
    
    //session_start();
    
    $aramayss = $_SESSION['aramays'];
    
    }
    
    $baglanti2 = new PDO("mysql:host=localhost;dbname=egoldshopphp","php","");
    
    $vericek4 = $baglanti2 -> prepare ("select no from urunlist where urunad like '%$aramayss%'");
    $vericek4 -> execute();
    
    $satirsay2 = $vericek4 -> rowCount();
    
    $ssayisi2 = ceil($satirsay2/$kacar2);
    $nereden2 = ($sayfa2*$kacar2) - $kacar2;
    
    /*$vericek17 = $baglanti2 -> prepare("select * urunlist order by no desc limit $nereden2,$kacar2");
    $vericek17 -> execute(); */
    
    for ($i2=1; $i2 <= $ssayisi2; $i2++) {
    
      echo "<a href='egoldarama.php?arama=".$aramasonuc."&sayfa={$i2}'";
    
      if ($i2 == $sayfa2) {
    
        echo "class='aktif'";
    
      }
    
      echo ">{$i2}</a>";
    
    }
    
    $vericek5 = $baglanti2 -> query("select * from urunlist where urunad like '%$aramayss%' limit $nereden2,$kacar2");
    
    $sonuclar5 = $vericek5 -> rowCount();
    
    if ($vericek5) {
    
        if ($sonuclar5 > 0) {
    
                ?>
    
                <!--<input type="text" name="aramauruntxt" value="<?php echo($dene); ?>"> -->
    
                <style type="text/css">
    
                <?php
    
          for ($i=0; $i < $sonuclar5; $i++) {
    
            //$left1 = $i * 50;
    
            echo "#aramabtnlar{";
            echo "position: absolute;";
            echo "top: 250px;";
            echo "left: 175px;";
            echo "height: 250px;";
            echo "width: 250px;";
            echo "}";
            echo ".d".$i."{";
            //echo "width: 100px;";
            //echo "height: 100px;";
            echo "margin-top: 50px;";
            echo "float: left;";
            echo "left: ".$left1."px;";
            echo "}";
          }
    
          ?>
    
          </style>
    
          <?php
    
          //echo '<div id="aramabtnlar">';
    
          $i = -1;
    
          foreach ($vericek5 as $sonuc5) {
    
          $i++;
    
          $urunad5 = $sonuc5['urunad'];
          $urunfiyat5 = $sonuc5['urunfiyat'];
    
          $vericek6 = $baglanti2 -> query("select * from urunlistresim where urunad = '$urunad5' limit 1");
    
          foreach ($vericek6 as $sonuclar6) {
    
          $resimyol6 = $sonuclar6['resimyol'];
    
          ?>
    
        <?php echo "<div id='urunlbtnn".$i."'>"; ?>
          <a href="deneme6.php?urun=<?php echo($urunad5); ?>" style="text-decoration: none;color: black;">
              <div id="urunrsm2" style="position: absolute;left: 37.5px;top: 25px;">
                <img id="urunrsmid2" src="<?php echo($resimyol6); ?>">
              </div>
              <br/>
              <div id="urunad2" style="position: absolute;left: 15px;top: 160px;">
                <span><?php echo($urunad5); ?></span>
              </div>
              <div id="urunfiyat2" style="position: absolute;left: 102.5px;top: 177.5px;">
                <span><?php echo($urunfiyat5); ?></span>
              </div>
          </a>
        <?php echo "</div>"; ?>
    
          <?php
    
          /*echo '<form action="deneme6.php" method="post">';
          echo '<input type="submit" name="egoldurunbtn" class="d'.$i.'" value="'.$urunad3.'">';
          echo '</form>';*/
    
          }
    
          ?>
    
          <style type="text/css">
    
          <?php
    
          if ($i == 4 || $i == 8 || $i == 12 || $i == 16 || $i == 20 || $i == 24 || $i == 24) {
    
            $top2 = $i + 250;
    
          }
    
          $left2 = 25 + $i%4 * 230;
    
          echo "#urunlbtnn".$i."{";
          echo "position: absolute;";
          echo "left: ".$left2."px;";
          echo "top: ".$top2."px;";
          echo "border: 1px solid black;";
          echo "height: 200px;";
          echo "width: 200px;";
          echo "}";
    
          ?>
    
          </style>
    
          <?php
    
          }
    
        //echo '</div>';
    
    }else{
    
      ?>
    
      <div id="aramasonucyokl1">
        <label>Not found any product</label>
      </div>
    
      <style type="text/css">
       
        #aramasonucyokl1{
    
          position: absolute;
          top: 125px;
          left: 750px;
    
        }
    
      </style>
    
      <?php
    
    }
    
    }else{
    
      echo "Bir sıkıntı çıktı. Lütfen yeniden deneyin!";
    
    }
    
    $baglanti2 = null;
    
    ?>
    
      <input type="submit" class="aramab" value="Search">
      <input type="text" class="aramat" name="arama">
    
      <div id="egoldresim">
      <a href="egoldshop.php"><img src="sz_egoldshop_photo.jpg" border="0"  /></a>
      </div>
    
      <div id="aramasonucl1">
          <label>Results for <?php echo($aramayss); ?> : </label>
      </div>
    
      <style type="text/css">
    
          #aramasonucl1{
    
            position: absolute;
            top: 225px;
            left: 575px;
    
          }
       
        input.aramab{
          text-align: center;
          height: 21px;
          width : 65px;
          position: absolute;
          top: 115px;
          right: 437px;
        }
    
        input.aramat{
          height: 28;
          width: 400px;
          position: absolute;
          top: 115px;
          right: 500px;
        }
    
        #egoldresim{
          position: absolute;
          left: 75px;
        }
       
      </style>
    
      <hr style="position: absolute;top: 200px;width: 1349px;">
    
    <div id="altfooter">
    
    <input type="image" src="rsz_facebook.png" class="dfacebooki" name="dfacebook" onclick="location='https://www.facebook.com/egoldshop.ebay'">
    <input type="image" src="rsz_twitter.png" class="dtwitteri" name="dtwitter" onclick="location='https://twitter.com/e_goldshop'">
    <input type="image" src="rsz_instagram.png" class="dinstagrami" name="dinstagram" onclick="location='https://www.instagram.com/egoldshop/'">
    
    <div id="dfacebookl">
      <a href="https://www.facebook.com/egoldshop.ebay" style="text-decoration: none;color: white;"><label>https://www.facebook.com/egoldshop.ebay</label></a>
    </div>
    
    <div id="dtwitterl">
      <a href="https://twitter.com/e_goldshop" style="text-decoration: none;color: white;"><label>https://twitter.com/e_goldshop</label></a>
    </div>
    
    <div id="dinstagraml">
      <a href="https://www.instagram.com/egoldshop/" style="text-decoration: none;color: white;"><label>https://www.instagram.com/egoldshop/</label></a>
    </div>
    
    <div id="dmaill1">
      <label>E-mail : </label>
    </div>
    
    <div id="dmaill2">
      <label>epitcenter@gmail.com</label>
    </div>
    
    </div>
    
    </div>
    
    <style type="text/css">
    
    input.dfacebooki{
    
      position: absolute;
      top: 25px;
      left: 25px;
    
    }
    
    #dfacebookl{
    
      position: absolute;
      top: 25px;
      left: 65px;
    
    }
    
    input.dtwitteri{
    
      position: absolute;
      top: 25px;
      left: 450px;
    
    }
    
    #dtwitterl{
    
      position: absolute;
      top: 25px;
      left: 490px;
    
    }
    
    input.dinstagrami{
    
      position: absolute;
      top: 25px;
      left: 835px;
    
    }
    
    #dinstagraml{
    
      position: absolute;
      top: 25px;
      left: 875px;
    
    }
    
    #dmaill1{
    
      position: absolute;
      top: 65px;
      left: 575px;
    
    }
    
    #dmaill2{
    
      position: absolute;
      top: 65px;
      left: 630px;
    
    }
    
    html, body {
       margin:0;
       height:125%;
    }
    
    #tamcerceve {
       min-height:100%;
       position:relative;
    }
    
    #altfooter {
       position:absolute;
       bottom:0;
       width:100%;
       height:100px;
       background: #4D4242;
       color: white;
       text-align:center;
    }
    
    </style>
    
    </body>
    </html>
    Bu sorunu nasıl çözebilirim.

    Lütfen yardım edin.

    Cevaplarınız için şimdiden çok teşekkür ederim.

    İyi günler dileğiyle.
     

    Ekli Dosyalar:

  2. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    675
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bunu denemelisin.

    HTML:
    footer {
               background-color: #efefef;
               width: 100%; height: 60px;
               position: relative;
                clear:both;
            }
    
     
  3. egencan

    egencan Üye

    Kayıt:
    25 Ocak 2017
    Mesajlar:
    85
    Beğenilen Mesajlar:
    0
    Meslek:
    ÖĞRENCİ
    Şehir:
    İstanbul
    Merhaba,

    Bu kod şu linkteki soru için mi : Html'de butona tıklayınca footer altdan üste çıkıyor

    Lütfen yardım edin.

    Cevaplarınız için şimdiden çok teşekkür ederim.

    İyi günler dileğiyle.
     
  4. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    675
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bir yerde örnek vardı, ben henüz kullanmadım ama gerektiğinde bu yapıyı kullanacağım.
    Örneği burayada koyayım, tamamen div lerle liste. Kullanmadığım için hatalarını bilmiyorum ama bu hali ile düzgün görünüyor.

    HTML:
    <!doctype html> 
    <html> 
        <head> 
            <meta charset="utf-8" />
            <title>div listesi...</title> 
        <style type="text/css">
            .bcn {
                width:800px;
                margin: 4px;
               
            }
            .bcn ul {
                width:210px;
                list-style:none;
                float:left;
                margin:6px;
                padding:10px;           
                border: 1px solid silver;
            }
            aside {
                border: 1px solid silver;
                width: 200px;
                float: left;
            }
            footer {
                background-color: #efefef;
                        width: 100%; height: 60px;
                    position: relative;
                clear:both;
            }
            main {
               
            }
        </style>
        </head> 
     
        <body> 
            <header> 
                <p>header (sayfa başlığı)</p> 
            </header> 
     
            <nav> 
                <p>nav (menü)</p> 
            </nav> 
      <div>
            <main> 
                <div class="bcn">
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
            </div>
            <div class="bcn">
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
            </div>
            </main> 
     
            <aside> 
                aside (sağ veya sol kolon) 
            </aside>   
      </div>
            <footer> 
                footer (sayfa altı) 
            </footer> 
     
        </body> 
    </html> 
     
  5. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    675
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    hem footer hemde listedeki ürünlerin hatalı görünmemesi için.
    Genel bir sayfa yapısı.
    Örneği internette gördüm, işine yarar diye koydum.

    Büyük ticaret siteleride buna benzer <div> ler ve içinde <ul><li> ler kullanmış.
     
  6. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    675
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Yada bu şekilde biraz daha anlamlı. Bunu .html olarak kaydedip ekran görüntüsüne bakmalısın.

    HTML:
    <!doctype html> 
    <html> 
        <head> 
            <meta charset="utf-8" />
            <title>div listesi...</title> 
        <style type="text/css">
            .bcn {
                width:800px;
                margin: 4px;
               
            }
            .bcn ul {
                width:210px;
                list-style:none;
                float:left;
                margin:6px;
                padding:10px;           
                border: 1px solid silver;
            }
            aside {
                border: 1px solid silver;
                width: 200px;
                float: left;
            }
            footer {
                background-color: #efefef;
                        width: 100%; height: 60px;
                    position: relative;
                clear:both;
            }
            main {
               
            }
        </style>
        </head> 
     
        <body> 
            <header> 
                <p>header (sayfa başlığı)</p> 
            </header> 
     
            <nav> 
                <p>nav (menü)</p> 
            </nav> 
      <div>
            <main> 
                <div class="bcn">
            <a href="#urunSayfasina">
                <ul>
                    <li>ürün adı</li>
                    <li>resim</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                </ul>
            </a>
            <a href="#urunSayfasina">
                <ul>
                    <li>ürün adı</li>
                    <li>resim</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                </ul>
            </a>
            <a href="#urunSayfasina">
                <ul>
                    <li>ürün adı</li>
                    <li>resim</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                </ul>
            </a>
            </div>
            <div class="bcn">
            <a href="#urunSayfasina">
                <ul>
                    <li>ürün adı</li>
                    <li>resim</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                </ul>
            </a>
            <a href="#urunSayfasina">
                <ul>
                    <li>ürün adı</li>
                    <li>resim</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                </ul>
            </a>
            <a href="#urunSayfasina">
                <ul>
                    <li>ürün adı</li>
                    <li>resim</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                    <li>açıklama</li>
                </ul>
            </a>
            </div>
            </main> 
     
            <aside> 
                aside (sağ veya sol kolon) 
            </aside>   
      </div>
            <footer> 
                footer (sayfa altı) 
            </footer> 
     
        </body> 
    </html> 
     
  7. egencan

    egencan Üye

    Kayıt:
    25 Ocak 2017
    Mesajlar:
    85
    Beğenilen Mesajlar:
    0
    Meslek:
    ÖĞRENCİ
    Şehir:
    İstanbul
    Merhaba,

    zaten bir sayfam var. Onda divleri sıralamayı başardım. Ama bunda başaramadım.

    Ekran görüntüsü aşağıdadır.
     

    Ekli Dosyalar:

  8. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    675
    Beğenilen Mesajlar:
    185
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Bende ekran görüntüsünde senin gibi zorlanıyorum.

    style kullanımını en azından
    position,
    display
    owerflow
    clear
    float
    gibi özelliklerin kullanımını iyi bilmek gerekiyor.

    Çok uğraşmak gerekiyor, benimde o kadar vaktim yok. :cool: