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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
ErrorCorrection

ErrorCorrection

Hectopat
Katılım
11 Ağustos 2022
Mesajlar
2.544
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
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;
}
 
Çözüm
Beroski
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.
Genişletmek için tıkla...
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ı.
Tarihe göre sırala Puana göre sırala
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?
Genişletmek için tıkla...
Main-row ile alakalı bir sorun var sanırım.
 
Artı 0 Eksi
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.
Genişletmek için tıkla...

Tamam, yan yana duruyor.

1677696279608.png
 
Artı 0 Eksi
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.
Genişletmek için tıkla...

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
Genişletmek için tıkla...

1677696480960.png
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?
 
Artı 0 Eksi
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.
Genişletmek için tıkla...
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ı.
 
Son düzenleme:
Artı 0 Eksi
Çözüm
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.
 
Artı 0 Eksi

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı