CSS sayfayı küçültünce yazılar taşıyor

ErrorCorrection

Hectopat
Katılım
11 Ağustos 2022
Mesajlar
2.549
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
Tam ekran da böyle.

1677075852636.png


Ama sayfayı küçültünce böyle oluyor. (sayfayı ekranda 2ye bölğnce)

1677075906915.png


Nasıl düzeltebilirim?
 
Yazıların olduğu Container'ın yüksekliğini Auto yapınca düzelmesi lazım. Kodları atar mısınız?
HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Website</title>
    <style type="text/css" media="screen">
        :root{
            word-spacing: 1px;
            letter-spacing: 0,6px;
            background-color: #E8D5C4;
            font-family: fantasy;
            margin-right:60px;
            margin-left: 60px;
            color: #3f3f3f;
        }span{
        display: block;
        font-size: 20px;
        }a{
            margin-left: 200px;
        }body{
            margin-top: 80px;
            background-color: #EEEEEE;
            border-radius: 10px;
            padding-bottom: 100px;
            height: auto;
        }h1{
            padding-top: 50px;
            margin-left: 20px;
            text-align: center;
        }p{
            margin-left: 20px;
            margin-right: 20px;
        }b > span{
            margin-left: 20px;
        }.movietext{
            position: absolute;
            margin-right: 100px;
            line-height: 30px;
            height: auto;
        }
    </style>
</head>
<body>
    <h1 style="color: #315eb8;">Ölmeden Önce İzlenmesi Gereken En İyi 45 Film</h1>
    <p>Sizler için ölmeden önce kesinlikle izlenmesi gereken filmler listesi hazırladık. Yerli ve yabancı, Hollywood, Bollywood ve Avrupa sinemasından en iyi filmleri bulabileceğiniz bu listedeki 45 başyapıt niteliğindeki filmi seyrederseniz gözünüz açık gitmezsiniz bizce :)</p>
<b><span>1-Good Will Hunting/Can Dostum</span></b><br>
<a href="https://www.beyazperde.com/filmler/film-363/fragman-19513689/"><img src="https://tr.web.img2.acsta.net/c_310_420/pictures/bzp/01/363.jpg" width="250px" width="500px" alt="Can Dostum" style="border-radius: 10%;" style="display:inline;"></a>
<p class="movietext" style="display:inline;">‘Can Dostum’, orijinal ismiyle ‘Good Will Hunting’in senaryosunu Matt Damon ve Ben Affleck üstlenmiştir.<br> Robin Williams ve Matt Damon’ın başrollerinde yer aldığı film, IQ’su oldukça yüksek olmasına rağmen MIT’de temizlik görevlisi olarak çalışan Will adındaki gencin üniversitenin profesörlerinden biri tarafından keşfedilmesini konu alıyor.<br> 1997 yapımı filmin yönetmeniyse Gus Van Sant. ‘Good Will Hunting’, “En İyi Senaryo” dalında Oscar kazandığı yıl, Robin Williams da filmdeki rolüyle “En İyi Yardımcı Erkek Oyuncu” Oscar’ına layık görülmüştür. <br>
<span  style="color: #b3b3b3;display:inline;">Yönetmen</span><b> Eric Toledano, Olivier Nakache</b><br>
<span  style="color: #b3b3b3;display:inline;">Senarist</span><b> Eric Toledano, Philippe Pozzo di Borgo </b><br>
<span  style="color: #b3b3b3;display:inline;">Oyuncular</span><b> François Cluzet, Omar Sy, Anne Le Ny  </b>
</p>
<script type="text/javascript">
 Oyuncular: François Cluzet, Omar Sy, Anne Le Ny

</script>
</body>
</html>
 
Kodlarda width, height attribute'larını kullandığınızı gördüm, bunlar deprecated kullanımlar. HTML5 tarafından desteklenmiyorlar, şu an tarayıcılar bunları çalıştırıyor ancak 5 sene sonra da çalıştıracağının hiçbir garantisi yok. Bunun yerine CSS ile halledin tüm stil işlemlerinizi, style="" şeklindeki inline CSS dediğimiz kullanıma da çok alışmayın. Pek iyi bir kullanım değil çünkü.

Gelişmeniz, daha düzenli işler yapmanız için bu bilgileri vermek istedim.
 
Kodlarda width, height Attribute'larını kullandığınızı gördüm, bunlar deprecated kullanımlar. HTML5 tarafından desteklenmiyorlar, şu an tarayıcılar bunları çalıştırıyor ancak 5 sene sonra da çalıştıracağının hiçbir garantisi yok. Bunun yerine CSS ile halledin tüm stil işlemlerinizi, style="" şeklindeki inline CSS dediğimiz kullanıma da çok alışmayın. Pek iyi bir kullanım değil çünkü.

Gelişmeniz, daha düzenli işler yapmanız için bu bilgileri vermek istedim.

Python'da böyle değildi ya. :D
Hocam karışık yazıyorum ama aklımda kalıyor. Ne yaparsam böyle karışık yapıyorum biraz. Trigonametri falan çözerken de karışık yazıyorum sürekli.
Width ve height yerine ne kullabilirim hocam?
 
Python'da böyle değildi ya. :D
Hocam karışık yazıyorum ama aklımda kalıyor. Ne yaparsam böyle karışık yapıyorum biraz. Trigonametri falan çözerken de karışık yazıyorum sürekli.
Width ve height yerine ne kullabilirim hocam?
Ayrı bir CSS dosyası oluşturun, projenin kök klasörüne styles adında bir klasör açıp içine yeni bir .css dosyası oluşturabilirsiniz. Daha sonra sayfanın <head> kısmından <link> etiketini kullanarak bu dosyayı çağırabilirsiniz, tüm CSS kodlarınızda bu dosyanın içinde olsun <style> etiketleri içinde olmasın.

CSS dosyasını şu şekilde çağırabilirsin:

HTML:
<!-- styles klasörü altındaki app.css'i çağırıyorum -->
<head>
    <title>Website</title>
    <link rel="stylesheet" href="styles/app.css">
</head>
 
Temel halarını giderdim fazla vaktim olmadığı için;

HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Website</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        body{
            padding: 50px;
            background-color: #E8D5C4;
            color: #3f3f3f;
        }
        .container{
            justify-content: center;
            align-items: center;
            display: flex;
            background-color: #fff;
            flex-direction: column;
            border-radius: 40px;
            padding: 10px;
        }


        .container > h1{ color: #315eb8; }

        .middle_box{
            justify-content: center; align-items: center; display: flex; flex-direction: row; width: 100%; height: auto;
        }


        .boxs_1{
            width: auto;
            height: 100%;

        }


        .image_box{
            width: auto;
            height: auto;
        }


        .boxs_2{
            width: 50%;
            height: 100%;
        }

    
        @media (max-width: 740px){
            .middle_box{ flex-direction: column; }
        }


    
      
    </style>
</head>
<body>

<div class="container">
<h1>Ölmeden Önce İzlenmesi Gereken En İyi 45 Film</h1>
<p>Sizler için ölmeden önce kesinlikle izlenmesi gereken filmler listesi hazırladık. Yerli ve yabancı, Hollywood, Bollywood ve Avrupa sinemasından en
iyi filmleri bulabileceğiniz bu listedeki 45 başyapıt niteliğindeki filmi seyrederseniz gözünüz açık gitmezsiniz bizce :)</p>
    <div class="middle_box">
        <div class="boxs_1">
            <b><span>1-Good Will Hunting/Can Dostum</span></b>
            <div class="image_box">
                <a href="https://www.beyazperde.com/filmler/film-363/fragman-19513689/">
                    <img src="https://tr.web.img2.acsta.net/c_310_420/pictures/bzp/01/363.jpg" alt="Can Dostum">
                </a>
            </div>
        </div>
        <div class="boxs_2">
            <p class="movietext" style="display:inline;">‘Can Dostum’, orijinal ismiyle ‘Good Will Hunting’in senaryosunu Matt Damon ve Ben Affleck üstlenmiştir.<br> Robin Williams ve Matt Damon’ın başrollerinde yer aldığı film, IQ’su oldukça yüksek olmasına rağmen MIT’de temizlik görevlisi olarak çalışan Will adındaki gencin üniversitenin profesörlerinden biri tarafından keşfedilmesini konu alıyor.<br> 1997 yapımı filmin yönetmeniyse Gus Van Sant. ‘Good Will Hunting’, “En İyi Senaryo” dalında Oscar kazandığı yıl, Robin Williams da filmdeki rolüyle “En İyi Yardımcı Erkek Oyuncu” Oscar’ına layık görülmüştür. <br>
                <span style="color: #b3b3b3;display:inline;">Yönetmen</span><b> Eric Toledano, Olivier Nakache</b><br>
                <span style="color: #b3b3b3;display:inline;">Senarist</span><b> Eric Toledano, Philippe Pozzo di Borgo </b><br>
                <span style="color: #b3b3b3;display:inline;">Oyuncular</span><b> François Cluzet, Omar Sy, Anne Le Ny  </b>
            </p>
        </div>
    </div>

</div>
</body>
</html>
 
Temel halarını giderdim fazla vaktim olmadığı için;

HTML:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Website</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 }
 body{
 padding: 50px;
 background-color: #E8D5C4;
 color: #3f3f3f;
 }
 .container{
 justify-content: center;
 align-items: center;
 display: flex;
 background-color: #fff;
 flex-direction: column;
 border-radius: 40px;
 padding: 10px;
 }

 .container > h1{ color: #315eb8; }

 .middle_box{
 justify-content: center; align-items: center; display: flex; flex-direction: row; width: 100%; height: auto;
 }

 .boxs_1{
 width: auto;
 height: 100%;

 }

 .image_box{
 width: auto;
 height: auto;
 }

 .boxs_2{
 width: 50%;
 height: 100%;
 }

 @media (max-width: 740px){
 .middle_box{ flex-direction: column; }
 }

 </style>
</head>
<body>

<div class="container">
<h1>Ölmeden Önce İzlenmesi Gereken En İyi 45 Film</h1>
<p>Sizler için ölmeden önce kesinlikle izlenmesi gereken filmler listesi hazırladık. Yerli ve yabancı, Hollywood, Bollywood ve Avrupa sinemasından en
iyi filmleri bulabileceğiniz bu listedeki 45 başyapıt niteliğindeki filmi seyrederseniz gözünüz açık gitmezsiniz bizce :)</p>
 <div class="middle_box">
 <div class="boxs_1">
 <b><span>1-Good Will Hunting/Can Dostum</span></b>
 <div class="image_box">
 <a href="https://www.beyazperde.com/filmler/film-363/fragman-19513689/">
 <img src="https://tr.web.img2.acsta.net/c_310_420/pictures/bzp/01/363.jpg" alt="Can Dostum">
 </a>
 </div>
 </div>
 <div class="boxs_2">
 <p class="movietext" style="display:inline;">‘Can Dostum’, orijinal ismiyle ‘Good Will Hunting’in senaryosunu Matt Damon ve Ben Affleck üstlenmiştir.<br> Robin Williams ve Matt Damon’ın başrollerinde yer aldığı film, IQ’su oldukça yüksek olmasına rağmen MIT’de temizlik görevlisi olarak çalışan Will adındaki gencin üniversitenin profesörlerinden biri tarafından keşfedilmesini konu alıyor.<br> 1997 yapımı filmin yönetmeniyse Gus Van Sant. ‘Good Will Hunting’, “En İyi Senaryo” dalında Oscar kazandığı yıl, Robin Williams da filmdeki rolüyle “En İyi Yardımcı Erkek Oyuncu” Oscar’ına layık görülmüştür. <br>
 <span style="color: #b3b3b3;display:inline;">Yönetmen</span><b> Eric Toledano, Olivier Nakache</b><br>
 <span style="color: #b3b3b3;display:inline;">Senarist</span><b> Eric Toledano, Philippe Pozzo di Borgo </b><br>
 <span style="color: #b3b3b3;display:inline;">Oyuncular</span><b> François Cluzet, Omar Sy, Anne Le Ny </b>
 </p>
 </div>
 </div>

</div>
</body>
</html>

Hocam açıklamamışsınız. :( ben CSS de biraz beginnerim. O yüzden anlamadım çoğunu.
 

Technopat Haberler

Yeni konular

Geri
Yukarı