CSS ile nasıl kutu koyulur?

Katılım
26 Ağustos 2021
Mesajlar
494
Çözümler
2
Daha fazla  
Cinsiyet
Erkek
Ekran görüntüsü 2023-02-21 211856.png


HTML Kodu

Kod:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="icon" type="logo.png"/>
  

    <div class="topnav">
        <a href="index.html">Anasayfa</a>
        <a href="merch.html">Merch</a>
        <a href="#about">About</a>
      </div>
</head>
<body>

    <div id="maincont">
        <div id="mainust">
          <h1>lorem ipsum dolor sit amet.</h1>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Morbi at urna. Curabitur et urna. In et massa a lorem
            pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Morbi at urna. Curabitur et urna. In et massa a lorem
            pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Morbi at urna. Curabitur et urna. In et massa a lorem
            pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Morbi at urna. Curabitur et urna. In et massa a lorem
            pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Morbi at urna. Curabitur et urna. In et massa a lorem
            pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkads</p>
        </div>
        <div id="mainorta">
            <h1>lorem ipsum dolor sit amet.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Morbi at urna. Curabitur et urna. In et massa a lorem
              pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Morbi at urna. Curabitur et urna. In et massa a lorem
              pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Morbi at urna. Curabitur et urna. In et massa a lorem
              pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Morbi at urna. Curabitur et urna. In et massa a lorem
              pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkadsLorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Morbi at urna. Curabitur et urna. In et massa a lorem
              pharetra sodales. Pellentesque non pede. Phasellus tinciduntasdkads</p>
          </div>
      </div>
  
</body>
</html>

CSS Kodu

Kod:
.topnav {
  background-color: #0f0e0e;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: orange;
  color: white;
}

.topnav a.active {
  background-color: darkorange;
  color: white;
}

#maincont
{
    width: 900;
    height: 880px;
    background: #333;
}

body {

background-color: orange;

}

#main
{
    float: left;
    width: 500;
    height: 500;
    padding: 15px 15px 0 15px;
    overflow: auto;
    line-height: 150%;
}

#main p
{
    margin: 0 0 15px 0;
    padding: 0;
}

#main h1, h2, h3
{
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    font-size: 180%;
    letter-spacing: -1px;
    font-weight: normal;
    font-family: arial, verdana;
    border-bottom: 1px solid #777;
}

#mainust
{
    float: left;
    width: 350;
    height: 900;
    padding: 15px 15px 0 15px;
    overflow: auto;
    line-height: 150%;
  background-color: orange ;
  margin-top: 10px;
  margin-bottom: 10px;

  margin-left: 300px;
  margin-right: 300px;
}

#mainorta
{
    float: left;
    width: 350;
    height: 900;
    padding: 15px 15px 0 15px;
    overflow: auto;
    line-height: 150%;
  background-color: orange ;
  margin-top: 10px;
  margin-bottom: 10px;

  margin-left: 300px;
  margin-right: 300px;
}

Kırmızı yerlere kutu koymak istiyorum.
Hangi kodları değiştirmem lazım? Yardım ederseniz sevinirim.
 
Son düzenleyen: Moderatör:
Bu kadar fazla css kullanırsan ilerde işin içinden çıkamazsın. Bu tarz şeyler için bootstrap kullanmanı tavsiye ederim. İnternette çok fazla kaynak var ve kullanımı basit.
 
Bu kadar fazla css kullanırsan ilerde işin içinden çıkamazsın. Bu tarz şeyler için bootstrap kullanmanı tavsiye ederim. İnternette çok fazla kaynak var ve kullanımı basit.
2023 yılındayız, Bootstrap gibi özelleştirilemez bir kütüphaneyi kimse zorunda olmadığı sürece kullanmamalı.

Sorunuza gelecek olursak, bunun en efektif ve kolay çözümü üstteki arkadaşın da dediği gibi Grid veya Flex kullanmaktır.
 

Geri
Yukarı