Çö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.
umıtozdogan

umıtozdogan

Hectopat
Katılım
28 Kasım 2020
Mesajlar
782
Çözümler
4
Daha fazla  
Sistem Özellikleri
RX 6700 XT - Ryzen 5 5600
Cinsiyet
Erkek
Meslek
Öğrenci
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

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

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı