0
Kayıt Ol

css yardım

7

●

121

  • 24-05-2020, 19:58:18
    #1
    Mettwork
    Mettwork
    Ben şimdi yeni başladım da böyle bir şey yaptım arkadaşlar. Bu Haberi Duyunca inanamayacaksınız yazısı fotoğrafın üzerine değil de yazının yanında olsun istiyorum bunu nasıl yapabilirim?

    Kodları aşağıya ekliyorum.

    <!DOCTYPE html>
<html>

<head>
    <title>Tasarım</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #efefef;
            margin:0;
            padding:0;
        }

        .container {
            background-color: white;
            width: 1100px;
            height: 800px;
            margin: 0 auto;
            padding-top: 10px;
        }

        .container .menu {
            background-color: red;
        }

        .menu {
            background-color: black;
            border-radius: 2px;
            width:     250px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            vertical-align: middle;
            line-height: 50px;

        }

        .logotext {
            font-size: xx-large;
            color: white;
            font-weight: bold;
            font-family: Tahoma;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
            width: 400px;
            margin: auto;
            border-radius: 4px;
            margin-top: 5px;
        }

        .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .topnav a:hover {
            background-color: gray;
            color: white;
        }

        .topnav a.active{
            background-color: green;
            color: white;
        }

        .icerikalani {
            background-color: gray;
            margin: auto;
            margin-top: 10px;
            width: 390px;
            padding-top: 4px;
            overflow: hidden;
        }

        .icerikalani .icerikfoto {
            max-height: 75px;
        }

        .icerik a.baslik {
            font-family: Tahoma;
            font-weight: bolder;
            color: white;
            position: relative;
            top: -60px;


        }
    </style>
</head>

<body>
    <div class="container">
        <div class="menu">    <span class="logotext">Logo Alanı</span>
        </div>
        <div class="topnav">    <a class="active">asfasfsdf</a>
            <a>asfasfsdf</a>
            <a>asfasfsdf</a>
            <a>asfasfsdf</a>
        </div>
        <div class="icerikalani">
            <div class="icerik">
                <img src="https://bit.ly/2X2zcUN" class="icerikfoto">    <a class="baslik">Bu Haberi Duyunca İnanamayacaksınız!</a>
            </div>
        </div>
    </div>
</body>

</html>
  • 24-05-2020, 20:03:35
    #2
    eryilmazyasin
    eryilmazyasin
    baslik class'ında her şeyi sil önce bi daha sonra icerik class'ına display flex ekle sana tavsiyem float kullanma onun yerine flex ile her türlü hizalama işlemlerini halledebilirsin öğrendiğin kaynakların güncel olmasına dikkat et
  • 24-05-2020, 20:03:44
    #3
    compfix
    compfix
    Aşağıdaki şekilde düzenleyin.
    .icerik a.baslik {
display:flex;
float:right;


}
    Şu şekilde olacaktır.
    https://prnt.sc/smx0o5
  • 24-05-2020, 20:05:17
    #4
    Caxing
    Caxing 
    <div class="icerikalani">
<div class="icerikresim">
<img src="https://bit.ly/2X2zcUN" class="icerikfoto">
</div>
<div class="icerikbaslik">
<a class="baslik">Bu Haberi Duyunca İnanamayacaksınız!</a>
</div>
</div>
    Bu kısmı böyle yapıp dener misiniz ?

    .icerikalani .icerikresim {
width: 40%;
height: 100%;
float:left;
}

.icerikalani .icerikbaslik {
width: 60%;
height: 100%;
float:left;
}
    Not: display flex kullanmak istersen css de icerikalani yazana display:flex; ekleyip , resim olana genişlik verip başlık olana flex:2; eklersen başlık olan kısım genişliği kendi ayarlar.
  • 24-05-2020, 20:30:06
    #5
    Mettwork
    Mettwork
    compfix adlı üyeden alıntı: mesajı görüntüle
    Aşağıdaki şekilde düzenleyin.
    .icerik a.baslik {
display:flex;
float:right;


}
    Şu şekilde olacaktır.
    https://prnt.sc/smx0o5


    O yazıyı biraz uzatınca aşağıda gözüküyor malesef.

    https://prnt.sc/smx3gn

    Caxing adlı üyeden alıntı: mesajı görüntüle 
    <div class="icerikalani">
<div class="icerikresim">
<img src="https://bit.ly/2X2zcUN" class="icerikfoto">
</div>
<div class="icerikbaslik">
<a class="baslik">Bu Haberi Duyunca İnanamayacaksınız!</a>
</div>
</div>
    Bu kısmı böyle yapıp dener misiniz ?

    .icerikalani .icerikresim {
width: 40%;
height: 100%;
float:left;
}

.icerikalani .icerikbaslik {
width: 60%;
height: 100%;
float:left;
}
    Not: display flex kullanmak istersen css de icerikalani yazana display:flex; ekleyip , resim olana genişlik verip başlık olana flex:2; eklersen başlık olan kısım genişliği kendi ayarlar.
    attığınız kodlarla pek istediğim sonuca ulaşamadım ama not olarak eklediğinizi yapınca tam istediğim gibi oldu.ama şimdi de altına açıklama ve buton eklemek istiyorum yanında çıkıyorlar



    https://prnt.sc/smxdgx
  • 24-05-2020, 20:38:04
    #6
    Caxing
    Caxing
    Mettwork adlı üyeden alıntı: mesajı görüntüle
    [/URL]

    O yazıyı biraz uzatınca aşağıda gözüküyor malesef.

    https://prnt.sc/smx3gn



    attığınız kodlarla pek istediğim sonuca ulaşamadım ama not olarak eklediğinizi yapınca tam istediğim gibi oldu.ama şimdi de altına açıklama ve buton eklemek istiyorum yanında çıkıyorlar



    https://prnt.sc/smxdgx
    Dikdörtgeni parçalamanız lazım istediğinize göre. Misal resim olacağı için önce 2 ye bölmelisiniz sol kısım sağ kısım diye. Sol kısım yüzde 40 , sağ kısım yüzde 60 diyelim. Ondan sonra sağ kısımı ortadan ikiye bölün misal, üst kısıma başlık alt kısıma içerik ve butonları koyarsınız. Tek tek parçalarsanız daha kolay olur kurcalayarak çözebilirsiniz.
  • 24-05-2020, 21:07:40
    #7
    Mettwork
    Mettwork
    Caxing adlı üyeden alıntı: mesajı görüntüle
    Dikdörtgeni parçalamanız lazım istediğinize göre. Misal resim olacağı için önce 2 ye bölmelisiniz sol kısım sağ kısım diye. Sol kısım yüzde 40 , sağ kısım yüzde 60 diyelim. Ondan sonra sağ kısımı ortadan ikiye bölün misal, üst kısıma başlık alt kısıma içerik ve butonları koyarsınız. Tek tek parçalarsanız daha kolay olur kurcalayarak çözebilirsiniz.
    div içine div yapıcam o zaman bir sürü de işte o parçalama işleminin adı ne tam olarak css dökümanlarından bakayım
  • 24-05-2020, 22:33:47
    #8
    Caxing
    Caxing
    Mettwork adlı üyeden alıntı: mesajı görüntüle
    div içine div yapıcam o zaman bir sürü de işte o parçalama işleminin adı ne tam olarak css dökümanlarından bakayım
    Video izleyin youtubedan sizin için daha yararlı olur. Dashboard kodlama falan gibisinden.