Çözüldü CSS yazılar yan yana gelmiyor

ErrorCorrection · 1 Mart 2023

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<header class="main-header">
<div class="navbar">
    <a href="#" class="main_logo">GetDomain.com</a>
    <div class="main-div">
    <ul class="main-div__items">
        <li class="main-div__item"><a href="#">Home</a></li>
        <li class="main-div__item"><a href="#">Get Domain</a></li>
        <li class="main-div__item"><a href="#">Say Hello</a></li>
        <li class="main-div__item main-div__item-login"><a href="about.html">About</a></li>
    </ul>
    </div>
</div>
<div class="section">
<h2>Welcome to MyWorld</h2>
</div>
</header>
<main class="main">
    <div class="main-div__header">
        <h3>How it works</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>

    <div class = "main-texts">
        <div class = "main-row">
           
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
           
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
           
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

</main>
</body>
</html>

CSS:

body{
    margin: 0;
    }
*{
    margin: 0;
    }
.navbar{
background-color: #E8D5C4;
padding: 15px 0 15px 10px;
    }
.main-div__item a{
    text-decoration: none;
    color: #4E6E81;
    font-weight: bold;
    font-size: 15px;
    font-family: sans-serif;
    }
.main-div{
    display: inline-block;
    width: calc(100% - 150px);
    text-align: right;
    }
.main-div__items{
    margin: 0;
    padding: 0;
    list-style: none;
    }  
.main-div__item{
    display: inline-block;
    margin-left: 10px;
    box-sizing: border-box;
    }
.main_logo{
    color: #40513B;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    }
.main-div__item a:hover{
    color: #BE6DB7;
    }
.main-div__item::before{
    content: "\2022";
    }
    .main-div__item-login a{
        color: #fff;
        background-color: #3795BD;
        border: 2px solid white;
        padding: 7px 12px;
        /*    border-radius: 10px 30px;    */
        border-radius: 10px;
    }.main-div__item-login a:hover{
        color:#3795BD;
        background-color: white;
        border-color: #3795BD;
    }.main-div__item-login::before{
        content: none;
    }.section{
        height: 500px;
        width: 100%;
        background-image: url(way.jpg);
        background-position: center;
    }.section h2{
        height: 500px;
        color: white;
        width: 100%;
        text-align: center;
        padding-top: 100px;
    }
.main-div__header{
    margin: 0 25%;
    text-align: center;
    margin-top: 30px;
}.main-row{
    display: inline-block;
    width: 30%;
    padding: 60px;
    margin: 15px;
}.main{
    text-align: center;
}.main h3{
    color: #804674;
}.main-texts h3{
    margin-bottom: 30px;
}

Beroski · 1 Mart 2023

ErrorCorrection dedi:
Hocam ben böyle olunca anlamıyorum. Sadece değiştirdiğiniz yerleri atar mısınız? Biraz uğraştırır mı bilmiyorum ama çok iyi olur benim için.

Sorun çözüldüğünü söylediğiniz zaman anlatacaktım, merak etmeyin kodları ayırdım

Kod:

.main-row {
    display: inline-block;
    width: 25%;
    padding: 60px;
    margin: 15px;
    box-sizing: border-box; /* Düzelttiğim */
}

Kod:

.main-texts {
    display: flex; /* Düzelttiğim */
    justify-content: space-between; /* Düzelttiğim */
    flex-wrap: wrap; /* Düzelttiğim */
    margin-top: 30px; /* Düzelttiğim */
}

box-sizing: border-box; ile yan yana sığmasını sağladım main-texts sınıfına display: flex, justify-content: space-between ve flex-wrap: wrap atadım ve yan yana sığmasını sağladım, sorun tamamen sınıf atamalarıydı.

682784 · 1 Mart 2023

Şu anda PC yanımda değil değil, büyük ihtimalle alana kadar arkadaşlar yardımcı olur. Mesaj yazılmazsa yardımcı olabilirim.

300319 · 1 Mart 2023

Yazılar yan yana duruyor. Sorun nedir?

Beroski · 1 Mart 2023

Tekrar dener misiniz.

Kod:

body {
  margin: 0;
}

* {
  margin: 0;
}

.navbar {
  background-color: #E8D5C4;
  padding: 15px 0 15px 10px;
}

.main-div__item a {
  text-decoration: none;
  color: #4E6E81;
  font-weight: bold;
  font-size: 15px;
  font-family: sans-serif;
}

.main-div {
  display: inline-block;
  width: calc(100% - 150px);
  text-align: right;
}

.main-div__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-div__item {
  display: inline-block;
  margin-left: 10px;
  box-sizing: border-box;
}

.main_logo {
  color: #40513B;
  text-decoration: none;
  font-size: 15px;
  font-weight: bolder;
}

.main-div__item a:hover {
  color: #BE6DB7;
}

.main-div__item::before {
  content: "\2022";
}

.main-div__item-login a {
  color: #fff;
  background-color: #3795BD;
  border: 2px solid white;
  padding: 7px 12px;
  border-radius: 10px;
}

.main-div__item-login a:hover {
  color: #3795BD;
  background-color: white;
  border-color: #3795BD;
}

.main-div__item-login::before {
  content: none;
}

.section {
  height: 500px;
  width: 100%;
  background-image: url(way.jpg);
  background-position: center;
}

.section h2 {
  height: 500px;
  color: white;
  width: 100%;
  text-align: center;
  padding-top: 100px;
}

.main-div__header {
  margin: 0 25%;
  text-align: center;
  margin-top: 30px;
}

.main-row {
  display: inline-block;
  width: calc(100% / 3 - 30px);
  padding: 60px;
  margin: 15px;
  box-sizing: border-box;
}

.main {
  text-align: center;
}

.main h3 {
  color: #804674;
}

.main-texts h3 {
  margin-bottom: 30px;
}

300319 dedi:
Yazılar yan yana duruyor. Sorun nedir?

Main-row ile alakalı bir sorun var sanırım.

300319 · 1 Mart 2023

Beroski dedi:

Tekrar dener misiniz.

Kod:

body {
  margin: 0;
}

* {
  margin: 0;
}

.navbar {
  background-color: #E8D5C4;
  padding: 15px 0 15px 10px;
}

.main-div__item a {
  text-decoration: none;
  color: #4E6E81;
  font-weight: bold;
  font-size: 15px;
  font-family: sans-serif;
}

.main-div {
  display: inline-block;
  width: calc(100% - 150px);
  text-align: right;
}

.main-div__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-div__item {
  display: inline-block;
  margin-left: 10px;
  box-sizing: border-box;
}

.main_logo {
  color: #40513B;
  text-decoration: none;
  font-size: 15px;
  font-weight: bolder;
}

.main-div__item a:hover {
  color: #BE6DB7;
}

.main-div__item::before {
  content: "\2022";
}

.main-div__item-login a {
  color: #fff;
  background-color: #3795BD;
  border: 2px solid white;
  padding: 7px 12px;
  border-radius: 10px;
}

.main-div__item-login a:hover {
  color: #3795BD;
  background-color: white;
  border-color: #3795BD;
}

.main-div__item-login::before {
  content: none;
}

.section {
  height: 500px;
  width: 100%;
  background-image: url(way.jpg);
  background-position: center;
}

.section h2 {
  height: 500px;
  color: white;
  width: 100%;
  text-align: center;
  padding-top: 100px;
}

.main-div__header {
  margin: 0 25%;
  text-align: center;
  margin-top: 30px;
}

.main-row {
  display: inline-block;
  width: calc(100% / 3 - 30px);
  padding: 60px;
  margin: 15px;
  box-sizing: border-box;
}

.main {
  text-align: center;
}

.main h3 {
  color: #804674;
}

.main-texts h3 {
  margin-bottom: 30px;
}

Main-row ile alakalı bir sorun var sanırım.

Tamam, yan yana duruyor.

ErrorCorrection · 1 Mart 2023

Beroski dedi:

Tekrar dener misiniz?

Kod:

body {
 margin: 0;
}

* {
 margin: 0;
}

.navbar {
 background-color: #E8D5C4;
 padding: 15px 0 15px 10px;
}

.main-div__item a {
 text-decoration: none;
 color: #4E6E81;
 font-weight: bold;
 font-size: 15px;
 font-family: sans-serif;
}

.main-div {
 display: inline-block;
 width: calc(100% - 150px);
 text-align: right;
}

.main-div__items {
 margin: 0;
 padding: 0;
 list-style: none;
}

.main-div__item {
 display: inline-block;
 margin-left: 10px;
 box-sizing: border-box;
}

.main_logo {
 color: #40513B;
 text-decoration: none;
 font-size: 15px;
 font-weight: bolder;
}

.main-div__item a:hover {
 color: #BE6DB7;
}

.main-div__item::before {
 content: "\2022";
}

.main-div__item-login a {
 color: #fff;
 background-color: #3795BD;
 border: 2px solid white;
 padding: 7px 12px;
 border-radius: 10px;
}

.main-div__item-login a:hover {
 color: #3795BD;
 background-color: white;
 border-color: #3795BD;
}

.main-div__item-login::before {
 content: none;
}

.section {
 height: 500px;
 width: 100%;
 background-image: url(way.jpg);
 background-position: center;
}

.section h2 {
 height: 500px;
 color: white;
 width: 100%;
 text-align: center;
 padding-top: 100px;
}

.main-div__header {
 margin: 0 25%;
 text-align: center;
 margin-top: 30px;
}

.main-row {
 display: inline-block;
 width: calc(100% / 3 - 30px);
 padding: 60px;
 margin: 15px;
 box-sizing: border-box;
}

.main {
 text-align: center;
}

.main h3 {
 color: #804674;
}

.main-texts h3 {
 margin-bottom: 30px;
}

Main-row ile alakalı bir sorun var sanırım.

Hocam ben böyle olunca anlamıyorum. Sadece değiştirdiğiniz yerleri atar mısınız? Biraz uğraştırır mı bilmiyorum ama çok iyi olur benim için.

300319 dedi:
Tamam, yan yana duruyor.

Eki Görüntüle 1686660

CSS:

.main-div__header{
 margin: 0 25%;
 text-align: center;
 margin-top: 30px;
 margin-bottom: 50px;
}.main-row{
 display: inline-block;
 width: 30%;
 padding: 30px;
 margin: 15px;
}.main{
 text-align: center;
}.main h3{
 color: #804674;
}.main-texts h3{
 margin-bottom: 30px;
}.col2{
 display: inline-block;
 width: 49%;
 height: 100px;
 background-color: red;
}

Hocam bende olmuyor ama tarayıcı ile ilgili bir şey mi?

300319 · 1 Mart 2023

Monitörünüzün çözünürlüğü nedir? Kutu sığmazsa otomatik olarak alta geçer.

Beroski · 1 Mart 2023

ErrorCorrection dedi:
Hocam ben böyle olunca anlamıyorum. Sadece değiştirdiğiniz yerleri atar mısınız? Biraz uğraştırır mı bilmiyorum ama çok iyi olur benim için.

Sorun çözüldüğünü söylediğiniz zaman anlatacaktım, merak etmeyin kodları ayırdım

Kod:

.main-row {
    display: inline-block;
    width: 25%;
    padding: 60px;
    margin: 15px;
    box-sizing: border-box; /* Düzelttiğim */
}

Kod:

.main-texts {
    display: flex; /* Düzelttiğim */
    justify-content: space-between; /* Düzelttiğim */
    flex-wrap: wrap; /* Düzelttiğim */
    margin-top: 30px; /* Düzelttiğim */
}

box-sizing: border-box; ile yan yana sığmasını sağladım main-texts sınıfına display: flex, justify-content: space-between ve flex-wrap: wrap atadım ve yan yana sığmasını sağladım, sorun tamamen sınıf atamalarıydı.

ErrorCorrection · 1 Mart 2023

300319 dedi:
Monitörünüzün çözünürlüğü nedir? Kutu sığmazsa otomatik olarak alta geçer.

1600 900 ama şöyle bir sorun var.
2 div klediğimde ve bunlara genişlik 50% verdiğimde alt alta geçiyor. 49% yaptığımda düzeliyor. Bunun nedeni nedir?

300319 · 1 Mart 2023

Flex yapısını öğremeniz lazım. Sorun yok aslında. Monitörünüzün genişliği 1600px, benim 1920px. O yüzden sizin alta atıyor. %50 yaparsanız 2 kutu sığar 1600px içine.

Çözüldü CSS yazılar yan yana gelmiyor

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

Beroski

682784

Hectopat

300319

Zettapat

Beroski

Hectopat

300319

Zettapat

ErrorCorrection

Hectopat

300319

Zettapat

Beroski

Hectopat

ErrorCorrection

Hectopat

300319

Zettapat

Benzer konular