0
Kayıt Ol

resim yanına yazı

4

●

87

  • 30-04-2020, 19:17:17
    #1
    algoritmik
    algoritmik
    Arkadaşlar merhaba resimin yanına 2 reklam alanı ve onun yanına 2 adet sidebar gibi bir şey yapmam gerekiyor.One-page tasarlayacağım için anasayfayı dolduracağım bunlarla.Tıkladıkça aşağı inecek.Benim sıkıntım şurada bu li içerisindeki yazıları bir türlü yana alamıyorum.
    En son hepsini tek div içerisinde denedim div in özelliği inline-block olduğundan yana alır diye düşündüm fakat yine olmadı.Yapıyı şu şekile getirdim en son.Bu yazıları nasıl sağa alırım yan yana resimle aynı hizada ?


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">

    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <ul class="item">
    <li class="items"><a href="">Anasayfa</a> </li>
    <li class="items"><a href="">Ä°letiÅŸim</a></li>      

        </ul>
    </div>
    <div class="image">

        <img src="x1.jpg" alt="" class="img-1">
        
     
   
        <img src="indir.jpg" alt="">
   
        <img src="indir.jpg" alt="">
 
        <ul class="sidebar-item">
            <li class="sidebar-items"><a href="">1AAA.</a></li>
            <li class="sidebar-items"><a href="">1AAA.</a></li>
            <li class="sidebar-items"><a href="">1AAAA.</a></li>
            <li class="sidebar-items"><a href="">1AAA.</a></li>
            <li class="sidebar-items"><a href="">1AAA.</a></li>
        </ul>

        <ul class="sidebar2-item">
            <li class="sidebar2-items">1AAAAA.</li>
            <li class="sidebar2-items">2.AAAA</li>
        </ul>
 
    </div>
</body>
</html>
  • 30-04-2020, 19:28:39
    #2
    alasayvan
    alasayvan
    Kimlik doğrulama veya yönetimden onay bekliyor.
    Hocam, css'de alanlarınızı "%" yüzdelik dilimlerle bölebilirsiniz sonrada float:left; etiketi ile yan yana koyabilirsiniz, resim alanı için bir sınıf belirleyerek, örneğin;

    <div class="kutu1"><h1>A</h1></div>
<div class="kutu2"><h1>A</h1></div>
<div class="kutu3"><h1>A</h1></div>
    .kutu1{
width:30%;
height: auto;
background-color:gray;
float: left;
}

.kutu2{
width:50%;
height: auto;
background-color:blue;
float: left;
}


.kutu3{
width:20%;
height: auto;
background-color:purple;
float: left;
}
  • 30-04-2020, 20:53:53
    #3
    algoritmik
    algoritmik
    alasayvan adlı üyeden alıntı: mesajı görüntüle
    Hocam, css'de alanlarınızı "%" yüzdelik dilimlerle bölebilirsiniz sonrada float:left; etiketi ile yan yana koyabilirsiniz, resim alanı için bir sınıf belirleyerek, örneğin;

    <div class="kutu1"><h1>A</h1></div>
<div class="kutu2"><h1>A</h1></div>
<div class="kutu3"><h1>A</h1></div>
    .kutu1{
width:30%;
height: auto;
background-color:gray;
float: left;
}

.kutu2{
width:50%;
height: auto;
background-color:blue;
float: left;
}


.kutu3{
width:20%;
height: auto;
background-color:purple;
float: left;
}
    Hocam öncelikle teşekkür ederim.Bu yapıyı denedim nispeten masa üstünde istediğim görüntüyü verdi fakat mobilde batırdı etti biraz daha editledim ileriye giderek fakat bu %ler mobilde büyük dert açıyor başa hiç bir resim tam ekran alta alta sığmıyor bu seferde

    kod yapısı şu şekilde bu konuda var mıdır bir ipucu 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">

    <title>Document</title>
</head>
<body>
    <div class="navbar">
        <ul class="item">
    <li class="items"><a href="">Anasayfa</a> </li>
    <li class="items"><a href="">Ä°letiÅŸim</a></li>      

        </ul>
    </div>
    <div class="images">
    <div class="image">

        <img src="x1.jpg" alt="" class="img-1">
        
    </div>
   
        <div class="ads">
        <img src="indir.jpg">
        <img src="indir.jpg" alt="">
    </div>


     
</div>
   
<div class="general-sidebar">

    <div class="sidebar">
        <ul class="sidebar-item">
            <li class="sidebar-items"><a href="">1AAA.</a></li>
            <li class="sidebar-items"><a href="">1AAA.</a></li>
            <li class="sidebar-items"><a href="">1AAAA.</a></li>
            <li class="sidebar-items"><a href="">1AAA.</a></li>
            <li class="sidebar-items"><a href="">1AAA.</a></li>
        </ul>
    </div>
    <div class="sidebar2">
        <ul class="sidebar2-item">
            <li class="sidebar2-items">1AAAAA.</li>
            <li class="sidebar2-items">2.AAAA</li>
        </ul>
    </div>
</div>
</body>
</html>


    
.image{

    width:35%;
    height: auto;
    float: left;
}



.ads{

    width: 17.5%;
    height:auto;
    float: left;
    margin-right: 1rem;
}

.ads2{
    width: 17.5%;
    height:auto;
    float: left;
}

.sidebar{
    width: 10%;
    float: left;
}
.sidebar2{
    width: 10%;
    float: left;
}
.sidebar .sidebar-item {

  
    list-style: none;
}
.sidebar2 .sidebar2-item {

  
    list-style: none;
}
.navbar .item{
    list-style: none;

}
@media screen and (max-width: 600px)
{


    
    .images{
        width: 100%;
        display:flex;
        flex-direction: column;
        align-items:center
    }
    .general-sidebar{

        display:flex;
        flex-direction: column;
        justify-content: center;
    }

    .img-1{

       width:100%;
    }
}
  • 30-04-2020, 21:18:00
    #4
    alasayvan
    alasayvan
    Hocam mobil için nasıl bir görüntü elde etmek istiyorsunuz yan yana dizdiğimizde çok saçma kalır dediğiniz gibi, çok fazla daralırlar. Alt alta sekme yapısında olsun isterseniz ona göre bir örnek verebilirim.

    Demek istediğim bu şekilde image etiketi olan en üstte altında 2 ye bölünmüş halde ads etiketindeki görselleriniz şeklinde mi istiyorsunuz?
  • 30-04-2020, 22:37:48
    #5
    algoritmik
    algoritmik
    alasayvan adlı üyeden alıntı: mesajı görüntüle
    Hocam, css'de alanlarınızı "%" yüzdelik dilimlerle bölebilirsiniz sonrada float:left; etiketi ile yan yana koyabilirsiniz, resim alanı için bir sınıf belirleyerek, örneğin;

    <div class="kutu1"><h1>A</h1></div>
<div class="kutu2"><h1>A</h1></div>
<div class="kutu3"><h1>A</h1></div>
    .kutu1{
width:30%;
height: auto;
background-color:gray;
float: left;
}

.kutu2{
width:50%;
height: auto;
background-color:blue;
float: left;
}


.kutu3{
width:20%;
height: auto;
background-color:purple;
float: left;
}
    alasayvan adlı üyeden alıntı: mesajı görüntüle
    Hocam mobil için nasıl bir görüntü elde etmek istiyorsunuz yan yana dizdiğimizde çok saçma kalır dediğiniz gibi, çok fazla daralırlar. Alt alta sekme yapısında olsun isterseniz ona göre bir örnek verebilirim.

    Demek istediğim bu şekilde image etiketi olan en üstte altında 2 ye bölünmüş halde ads etiketindeki görselleriniz şeklinde mi istiyorsunuz?
    yapmaya çalıştığım tam olarak sizin fotoğrafta gösterdiğiniz hocam sadece 2 ul yi ayrı ayrı yanyana almak istiyorum.