• 16-03-2024, 20:40:41
    #1
    Merhaba, Include kullanarak navbar.php yi çekiyorum birde sayfanın ortasında gözükecek card.phpyi de include ile index.php çekiyorum fakat navbar bozuluyor ve kart navbarın içine giriyor bu sorunu nasıl çözebilirim navbar ve kartı bootstrap ile yaptım şimdiden teşekkürler.

    <?php include 'navbar.php';
        include 'card.php'
        ?>
  • 16-03-2024, 20:51:43
    #2
    merthealt adlı üyeden alıntı: mesajı görüntüle
    Merhaba, Include kullanarak navbar.php yi çekiyorum birde sayfanın ortasında gözükecek card.phpyi de include ile index.php çekiyorum fakat navbar bozuluyor ve kart navbarın içine giriyor bu sorunu nasıl çözebilirim navbar ve kartı bootstrap ile yaptım şimdiden teşekkürler.

    <?php include 'navbar.php';
        include 'card.php'
        ?>
    konu php ile değil, html kodlarınızla ilgili.

    html etiketleriniz içiçe giriyor muhtemelen.

    navbar'da kapatmadığınız etiketler olabilir, onları kontrol edin.
  • 16-03-2024, 20:52:33
    #3
    İki sayfadan da html kodları geliyorsa burada php tarafında bir sorun yoktur. Tasarımda sıkıntı vardır, include yerine PHP'den çıkartıp navbar ve card .php dosyalarındaki kodları alt alta koymayı denersen sorunun devam ettiğimi görebilirsin. Div açılış ve kapanışlarına göz atmanı öneriririm.
  • 16-03-2024, 21:15:49
    #4
    merthealt adlı üyeden alıntı: mesajı görüntüle
    Merhaba, Include kullanarak navbar.php yi çekiyorum birde sayfanın ortasında gözükecek card.phpyi de include ile index.php çekiyorum fakat navbar bozuluyor ve kart navbarın içine giriyor bu sorunu nasıl çözebilirim navbar ve kartı bootstrap ile yaptım şimdiden teşekkürler.

    <?php include 'navbar.php';
        include 'card.php'
        ?>
    Böyle iç içe sokuyorsunuz zaten. Ayrı ayrı, navbar.php yi navbar yerinde include edin:
    <?php include 'navbar.php'; ?>
    card.php yide card ın olduğu yere:
    <?php include 'card.php'; ?>
  • 17-03-2024, 02:57:42
    #5
    ozgur_medya adlı üyeden alıntı: mesajı görüntüle
    İki sayfadan da html kodları geliyorsa burada php tarafında bir sorun yoktur. Tasarımda sıkıntı vardır, include yerine PHP'den çıkartıp navbar ve card .php dosyalarındaki kodları alt alta koymayı denersen sorunun devam ettiğimi görebilirsin. Div açılış ve kapanışlarına göz atmanı öneriririm.
    evet dediğiniz gibi html kodlarında sorun var teşekkür ederim
  • 17-03-2024, 03:02:34
    #6
    ozgur_medya adlı üyeden alıntı: mesajı görüntüle
    İki sayfadan da html kodları geliyorsa burada php tarafında bir sorun yoktur. Tasarımda sıkıntı vardır, include yerine PHP'den çıkartıp navbar ve card .php dosyalarındaki kodları alt alta koymayı denersen sorunun devam ettiğimi görebilirsin. Div açılış ve kapanışlarına göz atmanı öneriririm.
    evet hocam doğru ama halen bulamadım sorunu
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap demo</title>
        <link rel="stylesheet" href="navbar/navbar.css">
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
      </head>
    <body>
    <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Test</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    
    </body>
    </html>
    card.php kodları
    <link rel="stylesheet" href="card/card.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
    <title>Kart Örneği</title>
    </head>
    <body>
    <div class="kart">
        <img src="test.png" alt="img">
        <div class="ikonlar">
            <i class="fab fa-codepen"></i>
            <i class="fas fa-image"></i>
            <
        </div>         
        <div class="aciklama">
            <p>Kart açıklama kısmı</p>
        </div>
        <button class="btn">içerik</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  • 17-03-2024, 09:57:20
    #7
    merthealt adlı üyeden alıntı: mesajı görüntüle
    evet hocam doğru ama halen bulamadım sorunu
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap demo</title>
        <link rel="stylesheet" href="navbar/navbar.css">
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
      </head>
    <body>
    <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Test</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    
    </body>
    </html>
    card.php kodları
    <link rel="stylesheet" href="card/card.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
    <title>Kart Örneği</title>
    </head>
    <body>
    <div class="kart">
        <img src="test.png" alt="img">
        <div class="ikonlar">
            <i class="fab fa-codepen"></i>
            <i class="fas fa-image"></i>
            <
        </div>        
        <div class="aciklama">
            <p>Kart açıklama kısmı</p>
        </div>
        <button class="btn">içerik</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    Kullandığın yapı çok saçma, ikisinde de html5 taglarını açıp kapatmışsın. Navbar.php ve card.php içinde sadece o companentin içeriğini barındır. Yapamazsan iki kodu da gpt ye yaz düzeltir.
  • 17-03-2024, 20:18:42
    #8
    merthealt adlı üyeden alıntı: mesajı görüntüle
    evet hocam doğru ama halen bulamadım sorunu
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap demo</title>
        <link rel="stylesheet" href="navbar/navbar.css">
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
      </head>
    <body>
    <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Test</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    
    </body>
    </html>
    card.php kodları
    <link rel="stylesheet" href="card/card.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
    <title>Kart Örneği</title>
    </head>
    <body>
    <div class="kart">
        <img src="test.png" alt="img">
        <div class="ikonlar">
            <i class="fab fa-codepen"></i>
            <i class="fas fa-image"></i>
            <
        </div>        
        <div class="aciklama">
            <p>Kart açıklama kısmı</p>
        </div>
        <button class="btn">içerik</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    Merhaba,
    Şu şekilde dener misin?
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap demo</title>
        <link rel="stylesheet" href="navbar/navbar.css">
         
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
      </head>
    <body>
    <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Test</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    
        
    <div class="kart">
        <img src="test.png" alt="img">
        <div class="ikonlar">
            <i class="fab fa-codepen"></i>
            <i class="fas fa-image"></i>
        </div>        
        <div class="aciklama">
            <p>Kart açıklama kısmı</p>
        </div>
        <button class="btn">içerik</button>
    </div>
    
    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
    </html>
  • 18-03-2024, 02:41:41
    #9
    FikirBulutu adlı üyeden alıntı: mesajı görüntüle
    Merhaba,
    Şu şekilde dener misin?
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap demo</title>
        <link rel="stylesheet" href="navbar/navbar.css">
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/9c14f68dfc.js" crossorigin="anonymous"></script>
      </head>
    <body>
    <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Test</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    
        
    <div class="kart">
        <img src="test.png" alt="img">
        <div class="ikonlar">
            <i class="fab fa-codepen"></i>
            <i class="fas fa-image"></i>
        </div>        
        <div class="aciklama">
            <p>Kart açıklama kısmı</p>
        </div>
        <button class="btn">içerik</button>
    </div>
    
    
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
    </html>
    Sorunu çözdüm hocam yardımınız için çok teşekkür ederim.