Çözüldü CSS Yazıları nasıl ayarlayabilirim?

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

kaankesen

Hectopat
Katılım
28 Kasım 2020
Mesajlar
757
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
Dünden beri uğraşıyorum ama yapamıyorum üstteki orijinal olan altındaki ise benim kopyalamaya çalıştığım site. Ama bir türlü aşağıdaki alt başlıkları yan yana getiremiyorum.
ss1.JPG
ss2.JPG

CSS: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
#with-image-content{
    background: url(../home-bg\ \(1\).jpeg);
    height: 500px;
    width: 100%;
    background-position: center;
 
}
.header-link{
    background-color: #FC997C;
    padding: 8px 16px;
}
.header-navs {
    display: inline-block;
    margin-left: 1500px;

}
#movieapp{
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-size: 24px;
 
}
#header__item{
    display: inline-block;
 
}
.header__item-mid{
    margin-right: 10px;
    margin-left: 20px;
}
#header__item a{
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
}
#header__item a::before{
    content: "\2022";
}
.login-button{
    border: 2px solid white;
    background-color: #2e4c6d;
    border-radius: 5px;
    padding: 4px 8px;
}
.welcomeapp{
    padding: 10px;
    text-align: center;
}
#howitworks{
    text-align: center;
    margin-top: 20px;
    color: gray;
    font-size: 36px;
}
.article-2{
    text-align: center;
    margin-top: 50px;
    color: #2e4c6d;
}
.article-4{
text-align: right;
margin-right: 250px;
color: #2e4c6d;
}
#works_text{
    text-align: center;
}
.article-3{
    text-align: left;
    margin-left: 250px;
    color: #2e4c6d;
}
#article-3_text{
    margin-right: 100px;
    margin-left: 50px;
}
#icon-box{
    display: inline-block
}
#enjoy_text{
    text-align: right;
    margin-right: 70px;
}
#article-4_text_texts{
    text-align: right;
    margin-right: 200px;
}
</style>
</head>
<body>
    <header class="header-link">
        <a href="#" id="movieapp">MovieApp</a>
        <nav class="header-navs">
            <ul class="header_items">
                <li id="header__item">
                    <a href="#">Home</a>
                </li>
                <li id="header__item" class="header__item-mid">
                    <a href="#">Contact</a>
                </li>
                <li id="header__item" class="login-button" >
                    <a href="#">Login</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="with-image-content">
            <h2 class="welcomeapp">Welcome to my app</h2>
        </div>
    </main>
    <section class="article-1">
        <h2 id="howitworks">How it works?</h2>
    </section>
        <p id="works_text">We will show you step by step how to start watching your favorite movies & tv shows starting now!</p>
    <section class="article-2" >
        <h2 id="icon-box">Register</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio et in ipsa iusto placeat praesentium. <br>
         Quos, sunt, sit laborum, ipsa error modi eum qui provident velit magnam ducimus ipsum ad?</p>
    </section>
    <section class="article-3" >
        <h2 id="icon-box">Choose a Plan</h2>
    </section>
    <p id="article-3_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ea molestias blanditiis delectus <br> <p style="margin-left: 200px;">facilis tempore consectetur voluptatem fugit</p>
    </p>
    <section class="article-4" >
        <h2 id="icon-box">Enjoy Movies</h2>
    </section>
    <p id="enjoy_text"  class="texts">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor repellendus <br> <p id="article-4_text_texts"  class="texts">minus doloribus tenetur accusamus?</p></p>
</body>
</html>
[ICODE][ICODE][/ICODE][/ICODE]
 
Son düzenleyen: Moderatör:
Çözüm
dgknbzglu
Dener misin?


HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        #with-image-content {
            background: url(../home-bg\ \(1\).jpeg);
            height: 500px;
            width: 100%;
            background-position: center;
        }

        .header-link {
            background-color: #FC997C;
            padding: 8px 16px;
            overflow: hidden;
        }

        .header-navs {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .header_items {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        #movieapp {
            font-weight: bold;
            text-decoration: none;
            color: white;
            font-size: 24px;
        }

        #header__item {
            margin-left: 20px;
            list-style: none;
        }

        .header__item-mid {
            margin-right: 10px;
            margin-left: 20px;
        }

        #header__item a {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: bold;
            margin-left: 20px;
        }

        #header__item a::before {
            content: "\2022";
            margin-right: 5px;
        }

        .login-button {
            border: 2px solid white;
            background-color: #2e4c6d;
            border-radius: 5px;
            padding: 4px 8px;
            margin-left: 20px;
        }

        .welcomeapp {
            padding: 10px;
            text-align: center;
        }

        #howitworks {
            text-align: center;
            margin-top: 20px;
            color: gray;
            font-size: 36px;
        }

        #works_text {
            text-align: center;
            margin-top: 20px;
        }

        .articles-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .article {
            flex: 1;
            margin: 20px;
        }

        .article h2 {
            text-align: center;
            color: #2e4c6d;
        }

        .article p {
            text-align: justify;
        }
    </style>
</head>
<body>
    <header class="header-link">
        <a href="#" id="movieapp">MovieApp</a>
        <nav class="header-navs">
            <ul class="header_items">
                <li id="header__item">
                    <a href="#">Home</a>
                </li>
                <li id="header__item" class="header__item-mid">
                    <a href="#">Contact</a>
                </li>
                <li id="header__item" class="login-button">
                    <a href="#">Login</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="with-image-content">
            <h2 class="welcomeapp">Welcome to my app</h2>
        </div>
    </main>
    <section class="article-1">
        <h2 id="howitworks">How it works?</h2>
        <p id="works_text">We will show you step by step how to start watching your favorite movies & tv shows starting now!</p>
    </section>
    <div class="articles-container">
        <section class="article">
            <h2 id="icon-box">Register</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio et in ipsa iusto placeat praesentium. <br> Quos, sunt, sit laborum, ipsa error modi eum qui provident velit magnam ducimus ipsum ad?</p>
        </section>
        <section class="article">
            <h2 id="icon-box">Choose a Plan</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ea molestias blanditiis delectus <br> <p style="margin-left: 200px;">facilis tempore consectetur voluptatem fugit</p></p>
        </section>
        <section class="article">
            <h2 id="icon-box">Enjoy Movies</h2>
            <p id="enjoy_text"  class="texts">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor repellendus <br> <p id="article-4_text_texts"  class="texts">minus doloribus tenetur accusamus?</p></p>
        </section>
    </div>
</body>
</html>
Tarihe göre sırala Puana göre sırala
Dener misin?


HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        #with-image-content {
            background: url(../home-bg\ \(1\).jpeg);
            height: 500px;
            width: 100%;
            background-position: center;
        }

        .header-link {
            background-color: #FC997C;
            padding: 8px 16px;
            overflow: hidden;
        }

        .header-navs {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .header_items {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        #movieapp {
            font-weight: bold;
            text-decoration: none;
            color: white;
            font-size: 24px;
        }

        #header__item {
            margin-left: 20px;
            list-style: none;
        }

        .header__item-mid {
            margin-right: 10px;
            margin-left: 20px;
        }

        #header__item a {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: bold;
            margin-left: 20px;
        }

        #header__item a::before {
            content: "\2022";
            margin-right: 5px;
        }

        .login-button {
            border: 2px solid white;
            background-color: #2e4c6d;
            border-radius: 5px;
            padding: 4px 8px;
            margin-left: 20px;
        }

        .welcomeapp {
            padding: 10px;
            text-align: center;
        }

        #howitworks {
            text-align: center;
            margin-top: 20px;
            color: gray;
            font-size: 36px;
        }

        #works_text {
            text-align: center;
            margin-top: 20px;
        }

        .articles-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .article {
            flex: 1;
            margin: 20px;
        }

        .article h2 {
            text-align: center;
            color: #2e4c6d;
        }

        .article p {
            text-align: justify;
        }
    </style>
</head>
<body>
    <header class="header-link">
        <a href="#" id="movieapp">MovieApp</a>
        <nav class="header-navs">
            <ul class="header_items">
                <li id="header__item">
                    <a href="#">Home</a>
                </li>
                <li id="header__item" class="header__item-mid">
                    <a href="#">Contact</a>
                </li>
                <li id="header__item" class="login-button">
                    <a href="#">Login</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="with-image-content">
            <h2 class="welcomeapp">Welcome to my app</h2>
        </div>
    </main>
    <section class="article-1">
        <h2 id="howitworks">How it works?</h2>
        <p id="works_text">We will show you step by step how to start watching your favorite movies & tv shows starting now!</p>
    </section>
    <div class="articles-container">
        <section class="article">
            <h2 id="icon-box">Register</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio et in ipsa iusto placeat praesentium. <br> Quos, sunt, sit laborum, ipsa error modi eum qui provident velit magnam ducimus ipsum ad?</p>
        </section>
        <section class="article">
            <h2 id="icon-box">Choose a Plan</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ea molestias blanditiis delectus <br> <p style="margin-left: 200px;">facilis tempore consectetur voluptatem fugit</p></p>
        </section>
        <section class="article">
            <h2 id="icon-box">Enjoy Movies</h2>
            <p id="enjoy_text"  class="texts">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor repellendus <br> <p id="article-4_text_texts"  class="texts">minus doloribus tenetur accusamus?</p></p>
        </section>
    </div>
</body>
</html>
 
Artı 0 Eksi
Çözüm
dgknbzglu dedi:
Dener misin?


HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        #with-image-content {
            background: url(../home-bg\ \(1\).jpeg);
            height: 500px;
            width: 100%;
            background-position: center;
        }

        .header-link {
            background-color: #FC997C;
            padding: 8px 16px;
            overflow: hidden;
        }

        .header-navs {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .header_items {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        #movieapp {
            font-weight: bold;
            text-decoration: none;
            color: white;
            font-size: 24px;
        }

        #header__item {
            margin-left: 20px;
            list-style: none;
        }

        .header__item-mid {
            margin-right: 10px;
            margin-left: 20px;
        }

        #header__item a {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: bold;
            margin-left: 20px;
        }

        #header__item a::before {
            content: "\2022";
            margin-right: 5px;
        }

        .login-button {
            border: 2px solid white;
            background-color: #2e4c6d;
            border-radius: 5px;
            padding: 4px 8px;
            margin-left: 20px;
        }

        .welcomeapp {
            padding: 10px;
            text-align: center;
        }

        #howitworks {
            text-align: center;
            margin-top: 20px;
            color: gray;
            font-size: 36px;
        }

        #works_text {
            text-align: center;
            margin-top: 20px;
        }

        .articles-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .article {
            flex: 1;
            margin: 20px;
        }

        .article h2 {
            text-align: center;
            color: #2e4c6d;
        }

        .article p {
            text-align: justify;
        }
    </style>
</head>
<body>
    <header class="header-link">
        <a href="#" id="movieapp">MovieApp</a>
        <nav class="header-navs">
            <ul class="header_items">
                <li id="header__item">
                    <a href="#">Home</a>
                </li>
                <li id="header__item" class="header__item-mid">
                    <a href="#">Contact</a>
                </li>
                <li id="header__item" class="login-button">
                    <a href="#">Login</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="with-image-content">
            <h2 class="welcomeapp">Welcome to my app</h2>
        </div>
    </main>
    <section class="article-1">
        <h2 id="howitworks">How it works?</h2>
        <p id="works_text">We will show you step by step how to start watching your favorite movies & tv shows starting now!</p>
    </section>
    <div class="articles-container">
        <section class="article">
            <h2 id="icon-box">Register</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio et in ipsa iusto placeat praesentium. <br> Quos, sunt, sit laborum, ipsa error modi eum qui provident velit magnam ducimus ipsum ad?</p>
        </section>
        <section class="article">
            <h2 id="icon-box">Choose a Plan</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ea molestias blanditiis delectus <br> <p style="margin-left: 200px;">facilis tempore consectetur voluptatem fugit</p></p>
        </section>
        <section class="article">
            <h2 id="icon-box">Enjoy Movies</h2>
            <p id="enjoy_text"  class="texts">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam dolor repellendus <br> <p id="article-4_text_texts"  class="texts">minus doloribus tenetur accusamus?</p></p>
        </section>
    </div>
</body>
</html>
Genişletmek için tıkla...
Hocam ellerinize sağlık çözümünü bana da söyler misiniz rica etsem?
ss3.JPG
 
Artı 0 Eksi
Menü kısmında da margin-left:1500px; vermiştin sanıyorum ki menü elemanlarını sağa yaslamak için.
Bunun için de flex kullandım ve sağa yaslamak için de justify-content: flex-end; kullandım.

Articles-container adında bir div oluşturup flex özelliği verdim.
Justify-content: space-around; ile içeriklerin eşit parçalarda sayfaya yayılmasını sağladım.
Flex-wrap: wrap; ile sayfa küçülürse alta inmesini sağladım.

Geri kalanlar zaten anlaşılır şeyler sen de karşılaştırarak görebilirsin.

CSS eğitimi almanda fayda var.
Kolay gelsin.
 
Artı 0 Eksi
dgknbzglu dedi:
Menü kısmında da margin-left:1500px; vermiştin sanıyorum ki menü elemanlarını sağa yaslamak için.
Bunun için de flex kullandım ve sağa yaslamak için de justify-content: flex-end; kullandım.

Articles-container adında bir div oluşturup flex özelliği verdim.
Justify-content: space-around; ile içeriklerin eşit parçalarda sayfaya yayılmasını sağladım.
Flex-wrap: wrap; ile sayfa küçülürse alta inmesini sağladım.

Geri kalanlar zaten anlaşılır şeyler sen de karşılaştırarak görebilirsin.

CSS eğitimi almanda fayda var.
Kolay gelsin.
Genişletmek için tıkla...
Teşekkür ederim hocam halen CSS öğrenimim devam etmektedir tekrardan ellerinize sağlık.
 
Artı 0 Eksi

Benzer konular

Dabaddu37
  • Çözüldü
Çözüldü  HTML / CSS Menü boşluğunu nasıl gideririm?
Mesaj
7
Görüntüleme
3B
xenefon
xenefon
eminilhan
HTML/CSS Sitede Tasarım Problemi
2
Mesaj
16
Görüntüleme
2B
xenefon
xenefon
EmreEfe
Visual Studio ASP.NET CSS Dosyası Tanımlama Sorunu
Mesaj
2
Görüntüleme
5B
EmreEfe
EmreEfe
bmk3636
CSS Editörü önerisi
Mesaj
2
Görüntüleme
822
Anteros
Anteros
RizedenÇay
Video izleyerek HTML CSS öğrenilir mi?
Mesaj
7
Görüntüleme
474
Haxlenw
H

Yeni konular

Yeni mesajlar

Geri
Yukarı