Çözüldü İki farklı öğeyi tek bir div yapısı içine almak

Bingoo · 24 Şubat 2023

Arkadaşlar web sitesi tasarlarken bir sorunla karşılaştım. Sorun tam olarak şöyle;

Alt taraftaki yazılacaklar listesini karan carpet yazan yerin sağ tarafına koymak istiyorum. Bunu da şu şekilde denedim;

Bir üst sınıfı oluşturdum ve bu sınıfı hem karan carpet yazan H1 öğesine hem de ulli sıralamalarına verdim lakin sonuç gördüğünüz gibi alt alta iki adet oluştu. Bunu nasıl çözebilirim?

Eray T · 24 Şubat 2023

Float kullanmışsınız. Flex kullanın.

CSS:

display: flex;
flex-direction: row;

Bilgisayara geçince düzeltip atacağım.

VenomBey · 24 Şubat 2023

İki tane div classı var onu düzenleyin.

HTML:

<div class="ust">

Bu kodun divini en aşağıya çekin fazla olanı silin.

Bingoo · 24 Şubat 2023

Müsait olduğum zaman deneyip çözümü söyleyeceğim.

Eray T · 24 Şubat 2023

Bingoo dedi:
Müsait olduğum zaman deneyip çözümü söyleyeceğim.

Kodları kod olarak atar mısınız? Düzenleyeceğim.

Bingoo · 24 Şubat 2023

Eray T dedi:
Kodları kod olarak atar mısınız? Düzenleyeceğim.

HTML:

<html>
    <head>
        <style>
            body{
                background-color: grey;
                font-family: serif;
                margin: 0;
                padding: 0;
                
            }
            .ust{
                background-color: #ffdf00;
            }
            .sayfa{
                width: 960px;
                margin: auto;
            }
            h1 {
                float: left;
                font-family:sans-serif;
                margin-top: 20px;
                margin-left: 20px;
            }
            #menu{
            float: right;
            width: 650px;
            margin: 30px 0 0 0;
            padding: 0;
            font-size: 13px;
            text-align: right;
        }
        #menu ul{
            
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #menu ul li{
            display: inline;
            margin-right: 20px;
        }
        #menu ul li a{
            text-decoration: none;
            font-size: 13px;
            font-family: Verdana;
            color: #DBDBDB;
        }
          
        </style>
    </head>
    <body>
        <div class="ust">
            <div class="sayfa">
         <h1>Karan Carpet</h1>
        </div>
        <div class="ust">
        <div id="menu">
            <ul>
                <li>yazılacaklar</li>
                <li>yazılacaklar</li>
                <li>yazılacaklar</li>
                <li>yazılacaklar</li>
                <li>yazılacaklar</li>
            </ul>
        </div>

    </body>
</html>

Biraz değiştirdim ama gene de olmadı.

Eray T · 24 Şubat 2023

@Bingoo bu kodu dener misiniz?

HTML:

<html>
    <head>
        <style>

            *{ margin: 0; padding: 0; text-decoration: none; }


            body{
                background-color: #fff;
                font-family: serif;
         
            }

            header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 20px;
                background-color: green;
             }

                header > a{
                    color: #fff;
                    font-size: 25px;
                }            
         

             header > nav{
                justify-content: center; align-items: center; display: flex;
             }
             header > nav > ul{
                justify-content: center; align-items: center; display: flex; flex-direction: row;
             }

             header > nav > ul > li{
                list-style: none;
                margin: 0 20px;
             }
             header > nav > ul > li > a{
                color: #fff;
             }


         
        </style>
    </head>
    <body>
        <header>
            <a href="#">Logo</a>
            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </nav>
        </header>

    </body>
</html>

Bingoo · 24 Şubat 2023

Eray T dedi:

@Bingoo bu kodu dener misiniz?

HTML:

<html>
 <head>
 <style>

 *{ margin: 0; padding: 0; text-decoration: none; }

 body{
 background-color: #fff;
 font-family: serif;

 }

 header{
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 20px;
 background-color: green;
 }

 header > a{
 color: #fff;
 font-size: 25px;
 }

 header > nav{
 justify-content: center; align-items: center; display: flex;
 }
 header > nav > ul{
 justify-content: center; align-items: center; display: flex; flex-direction: row;
 }

 header > nav > ul > li{
 list-style: none;
 margin: 0 20px;
 }
 header > nav > ul > li > a{
 color: #fff;
 }

 </style>
 </head>
 <body>
 <header>
 <a href="#">Logo</a>
 <nav>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 <li><a href="#">Link 5</a></li>
 </ul>
 </nav>
 </header>

 </body>
</html>

Evet tam istediğim gibi ama bir sorum olacak. Bu bilgileri nereden edindiniz?

Eray T · 24 Şubat 2023

Bingoo dedi:
Evet, tam istediğim gibi ama bir sorum olacak. Bu bilgileri nereden edindiniz?

8.5 yıldır yazılım geliştiriyorum

VenomBey · 24 Şubat 2023

Eray T dedi:
8.5 yıldır yazılım geliştiriyorum

Ders paylaşıyor musunuz?

Çözüldü İki farklı öğeyi tek bir div yapısı içine almak

Ayrıntılı düzenleme

Bingoo

Hectopat

Eray T

Eray T

Terapat

VenomBey

Hectopat

Bingoo

Hectopat

Eray T

Terapat

Bingoo

Hectopat

Eray T

Terapat

Bingoo

Hectopat

Eray T

Terapat

VenomBey

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz