Çö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

Hectopat
Katılım
11 Ağustos 2022
Mesajlar
2.549
Çö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
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
ErrorCorrection dedi:
Flex ile çözülürse uğraşmayın hocam boşuna. O derslere geldiğimde yaparım ben. Kafam karışmasın boşuna.
Genişletmek için tıkla...
Bir şeyler denedim ama çözüldü mü bilmiyorum tam anlamı ile test edemedim, şöyle bıraktım.


Kod: 
body {
  margin: 0;
}

* {
  margin: 0;
}

.main-header {
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #E8D5C4;
  padding: 15px 0 15px 10px;
}

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

.main-div {
  display: flex;
}

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

.main-div__item {
  margin-left: 10px;
}

.main-div__item-login {
  margin-left: auto;
}

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

.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 h2 {
  height: 500px;
  color: white;
  width: 100%;
  text-align: center;
  padding-top: 100px;
}

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

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

.main h3 {
  color: #804674;
}

.main-texts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 50px;
}

.main-row {
  flex: 1;
  margin: 15px;
  padding: 60px;
  box-sizing: border-box;
  background-color: #F5F5F5;
}

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


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.main-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background-image: url("https://wallpaperaccess.com/full/6993861.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.main-header h2 {
  margin: 0;
  font-size: 3em;
  color: #fff;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em 0;
}

.main-div__header {
  text-align: center;
  max-width: 800px;
  margin-bottom: 2em;
}

.main-div__header h3 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.main-div__header p {
  font-size: 1.2em;
  color: #777;
  margin: 0;
}

.main-texts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
}

.main-row {
  flex: 1;
  margin: 1em;
  max-width: 400px;
}

.main-row h3 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.main-row p {
  font-size: 1.2em;
  color: #777;
  margin: 0;
}
 

Dosya Ekleri

  • Screenshot_20.png
    562 KB · Görüntüleme: 35
Artı 0 Eksi

Resim çok iyi

Elinize sağlık.
 
Artı 0 Eksi
Mesaj yazmak için giriş yapmalı ya da kaydolmalısınız.

Benzer konular

  • Soru
CSS elemanları yan yana sıralama
Mesaj
7
Görüntüleme
733
RaSGooL
Y
Bootstrap grid yapısı kullanırken ikonlar yan yana gelmiyor
Mesaj
2
Görüntüleme
197
delikarga
  • Soru
CSS sayfayı küçültünce yazılar taşıyor
2
Mesaj
10
Görüntüleme
1.513
300319
3
I
DataTable Liste Yan Yana Geliyor
Mesaj
1
Görüntüleme
387
dgknbzglu
  • Çözüldü
Çözüldü  İki H1 etiketini yan yana yazabilmek
Mesaj
7
Görüntüleme
355
jevousaime
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…