CSS resim yerine gitmiyor

doguzkaan · 23 Nisan 2020

Fotoğrafta olduğu gibi resim en sağ üste gitmiyor. Kodlarda yine resimdeki gibi, en az 1 saattir uğraşıyorum. Daha yeni başladım CSS'ye, yardımcı olursanız sevinirim.

berk1937 · 23 Nisan 2020

Width'lerin toplamı ekran genişliğini aşıyor olabilir. Width'lerle oynamayı denedin mi? Örnek vermek gerekirse; üçüncüye 510 piksel vermişsin. 1920x1080 bir ekranda, bu genişlikte, maksimum yan yana iki tane gelecektir doğal olarak ve üçüncü alt satıra geçecektir.

doguzkaan · 23 Nisan 2020

berk1937 dedi:
Width'lerin toplamı ekran genişliğini aşıyor olabilir. Width'lerle oynamayı denedin mi? Örnek vermek gerekirse; üçüncüye 510 piksel vermişsin. 1920x1080 bir ekranda, bu genişlikte, maksimum yan yana iki tane gelecektir doğal olarak ve üçüncü alt satıra geçecektir.

Maalesef, 200 e 340 yaptim yine sonuc vermedi.

berk1937 · 23 Nisan 2020

Bütün kodu paylaşır mısın? Buradaki "Ekle" kısmından "Kod"u seç ve oraya yapıştır.

doguzkaan · 23 Nisan 2020

Kod:

<html>
    <head>
        <title>ScienceTwins | Contents</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
<body>
    <header class="main-header">
        <nav class="nav main-nav">
            <li><a href="contents.html">CONTENTS</a></li>

            <li><a href="index.html">HOME</a></li>
            
            <li><a href="about.html">ABOUT</a></li>
        </nav>
        <h1 class="title">SCIENCE TWINS</h1>
    </header>
    <h1 class="mid_title">CONTENTS</h1>
    <section class="first_content">
        
        <div class="ornek">
        <img src="images/wormhole_2.jpg" height="300" width="510" >
        <p>In this text, you are gonna learn what is a wormhole and how they were creating.</p>
        <span>Writer: Oghuz Khan Dhemir</span>
        &lt;&gt;
        <span>Date:04/23/2020</span>
    </div>
    </section>
 

    <section>
        <div class="ornek">
        <img src="images/aircraft.jpg" height="300" width="510">
        <p>In this content, you are gonna learn.<br> Why do aircraft drops white gases on the back.</p>
        <span>Writer: Oghuz Khan Dhemir</span>
        &lt;&gt;
        <span>Date:04/23/2020</span>
        </div>
    </section>
    <section class="third_content">
        <div class="ornek3">
        <img src="images/first_landing.jpg" height="300" width="510">
        <p>In this content, you are gonna learn why we don't go to the moon again.</p>
        <span>Writer: Oghuz Khan Dhemir</span>
        &lt;&gt;
        <span>Date:04/23/2020</span>
        </div>
    </section>
<footer class="footer">
    <h2>
        To Comunicate With Us
    </h2>
    <nav>
        <ul>
            <li class="link"><img src="images/youtube_logo.png" height="20" width="25"></li>
            <li><img src="images/phone_logo.png "height="20" width="20"></li>
            /*Resime link eklemeyi öğren*/
        </ul>
    </nav>   
</footer>
</body>


</html>

Kod:

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');


* {
    box-sizing: border-box;
    font-family: Raleway;
    color:#777;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: .5em;
    color: white;
    text-decoration: none;
}

.nav a:hover {
    background-color: rgba(255, 255, 255, .3);
}

.main-nav {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.main-nav li{
    padding: 0 1%;
}

.main-header {
    background-image: url("images/header_image.jpg");
    background-size: cover;
    padding-bottom: 30px;
}

.title {
    text-align: center;
    font-size: 4em;
    font-family: Goudy Stout;
    color: rgba(11, 14, 227);
}

.mid_title {
    text-align: center;
    color: gray;
}

.about_part {
    text-align: center;
}

.first_content{
    float:left;
    padding:0 10px 10px 0;
}

.third_content{
    background-position:30px 20px;
    float: right;
    float: top;
    
}

.second_content{
    float:middle;
}

.footer{
    text-align: center;
}

.ornek3{
    text-align: top;
}

.link{
    text-align:center;
}

aytacbirdal · 23 Nisan 2020

Bu linkten istediğiniz istediğiniz sonuca ulaşabilirsiniz.

CSS resim yerine gitmiyor

Ayrıntılı düzenleme

doguzkaan

Hectopat

Dosya Ekleri

berk1937

Gigapat

doguzkaan

Hectopat

berk1937

Gigapat

doguzkaan

Hectopat

aytacbirdal

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz