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

doguzkaan

Hectopat

Dosya Ekleri

berk1937

Gigapat

doguzkaan

Hectopat

berk1937

Gigapat

doguzkaan

Hectopat

aytacbirdal

Megapat