Html css burayı nasıl ortaya alıcam

TahaCel · Bugün, 02:09

knklar bu yanda olması lazım ama altına gidiyor nerde hata yapıyorum

mert cem · Bugün, 09:43

TahaCel yazmış:
Alıntıyı görüntüle
Alıntıyı görüntüle

Alıntıyı görüntüle
knklar bu yanda olması lazım ama altına gidiyor nerde hata yapıyorum

admın panelını contaıner ıcerısıne al ve dısplay ozelligini flex yap yanlıs dusunmedıysem sorunun cozulmus olur . artı olarak bu tıp tasarımlarda grid yapını kullanmak daha kolay olur senın ıcın

Yapayzeka · Bugün, 09:52

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="taha.css">
</head>
<body>
  <div class="container">
    <div class="admin-panel">
      <h2>Admin Panel</h2>
      <ul>
        <li><a href="#">Panel</a></li>
        <li><a href="#">Stok Bilgisi</a></li>
        <li><a href="#">Siparişler</a></li>
        <li><a href="#">Raporlar</a></li>
        <li><a href="#">Kullanıcılar</a></li>
        <li><a href="#">Çıkış Yap</a></li>
      </ul>
      <div class="stok">
        <h2>Stok Durumu</h2>
        <table>
          <thead>
            <tr>
              <th>Ürün Kodu</th>
              <th>Ürün Adı</th>
              <th>Kategori</th>
              <th>Stok</th>
              <th>Fiyat</th>
              <th>İşlem</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>58</td>
              <td>Iphone 13</td>
              <td>Elektronik</td>
              <td>25</td>
              <td>36.000TL</td>
              <td><button class="buton">Güncelle</button></td>
            </tr>
            <tr>
              <td>59</td>
              <td>Airpods</td>
              <td>Aksesuar</td>
              <td>12</td>
              <td>7.250TL</td>
              <td><button class="buton">Güncelle</button></td>
            </tr>
            <tr>
              <td>61</td>
              <td>Msi Sword 16</td>
              <td>Elektronik</td>
              <td>3</td>
              <td>52.000TL</td>
              <td><button class="buton">Güncelle</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

CSS:

body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
  background-color: #f4f4f4;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.admin-panel {
  text-align: center;
  background-color: #2c3e50;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.admin-panel ul {
  list-style: none;
  padding: 0;
}

.admin-panel ul li {
  margin: 15px 0;
}

.admin-panel ul li a {
  text-decoration: none;
  color: #bdc3c7;
  display: block;
  padding: 10px;
  border-radius: 5px;
  transition: background 0.3s;
}

.admin-panel ul li a:hover {
  background-color: #34495e;
  color: white;
}

.stok table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.stok th, .stok td {
  padding: 10px;
  border: 1px solid white;
  text-align: left;
}

.stok th {
  background-color: #2c3e50;
  color: #fff;
}

.buton {
  background-color: darkblue;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.buton:hover {
  background-color: #1c5d84;
}

Bu kodları kullanarak, içeriğinizi hem yatay hem de dikey olarak ortalayabilirsiniz. container sınıfı, içeriği ortalamak için kullanılırken, admin-panel sınıfı içeriğinizi düzenler ve stil verir. Kodlarınızı bu şekilde düzenleyerek istediğiniz sonucu elde edebilirsiniz.

Efe Gaydal[Unofficial] · Bugün, 10:34

Yapayzeka yazmış:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="taha.css"> </head> <body> <div class="container"> <div class="admin-panel"> <h2>Admin Panel</h2> <ul> <li><a href="#">Panel</a></li> <li><a href="#">Stok Bilgisi</a></li> <li><a href="#">Siparişler</a></li> <li><a href="#">Raporlar</a></li> <li><a href="#">Kullanıcılar</a></li> <li><a href="#">Çıkış Yap</a></li> </ul> <div class="stok"> <h2>Stok Durumu</h2> <table> <thead> <tr> <th>Ürün Kodu</th> <th>Ürün Adı</th> <th>Kategori</th> <th>Stok</th> <th>Fiyat</th> <th>İşlem</th> </tr> </thead> <tbody> <tr> <td>58</td> <td>Iphone 13</td> <td>Elektronik</td> <td>25</td> <td>36.000TL</td> <td><button class="buton">Güncelle</button></td> </tr> <tr> <td>59</td> <td>Airpods</td> <td>Aksesuar</td> <td>12</td> <td>7.250TL</td> <td><button class="buton">Güncelle</button></td> </tr> <tr> <td>61</td> <td>Msi Sword 16</td> <td>Elektronik</td> <td>3</td> <td>52.000TL</td> <td><button class="buton">Güncelle</button></td> </tr> </tbody> </table> </div> </div> </div> </body> </html>

sorunu cozmez

konu sahibinin istegi menüyü sola eşitleyip icerigi sagda kullanmak. AI kullanarak cevap atmadan once düsünün artık

@TahaCel hocam kodlarınızı ekran goruntusu yerıne text olarak atarsanız daha iyi olur boyle sıkıntı oluyor.

css kodunuza asagidakini ekleyin düzelecektir.

CSS:

.admin-panel {
    display: flex;
    width: 100%;
}
.stok {
    flex: 1;
    padding: 20px;
}

TahaCel · Bugün, 14:02

Efe Gaydal[Unofficial] yazmış:
sorunu cozmez
Alıntıyı görüntüle

konu sahibinin istegi menüyü sola eşitleyip icerigi sagda kullanmak. AI kullanarak cevap atmadan once düsünün artık

@TahaCel hocam kodlarınızı ekran goruntusu yerıne text olarak atarsanız daha iyi olur boyle sıkıntı oluyor.

css kodunuza asagidakini ekleyin düzelecektir.

CSS:

.admin-panel { display: flex; width: 100%; } .stok { flex: 1; padding: 20px; }

Alıntıyı görüntüle

Knk yazdım oldu ama şöyle oldu bu seferde

Sol alt böyle oldu

Efe Gaydal[Unofficial] · Bugün, 14:10

TahaCel yazmış:
Knk yazdım oldu ama şöyle oldu bu seferde
Alıntıyı görüntüle
Sol alt böyle oldu

anydesk varsa pmden ilet bakayim

Ara

Ara

Html css burayı nasıl ortaya alıcam

TahaCel

mert cem

Yapayzeka

Efe Gaydal[Unofficial]

TahaCel

Efe Gaydal[Unofficial]

BENZER KONULAR

SON KONULAR

En Son İçerikler

Çevrim içi üyeler

Forum istatistikleri