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

ErrorCorrection · 22 Şubat 2023

Tam ekran da böyle.

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

Nasıl düzeltebilirim?

300319 · 22 Şubat 2023

Yazıların olduğu Container'ın yüksekliğini Auto yapınca düzelmesi lazım. Kodları atar mısınız?

ErrorCorrection · 22 Şubat 2023

300319 dedi:
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>

300319 · 22 Şubat 2023

Çok fazla hatalı kod bloğu var. Düzenleyip atacağım.

ErrorCorrection · 22 Şubat 2023

300319 dedi:
Çok fazla hatalı kod bloğu var. Düzenleyip atacağım.

Düzenlediğiniz yerleri yorum satırı içinde açıklarsanız çok iyi olur.

Fatalis · 22 Şubat 2023

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.

ErrorCorrection · 22 Şubat 2023

Fatalis dedi:
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.

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?

Fatalis · 22 Şubat 2023

ErrorCorrection dedi:
Python'da böyle değildi ya.
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>

300319 · 22 Şubat 2023

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>

ErrorCorrection · 22 Şubat 2023

300319 dedi:

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.

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

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

300319

Zettapat

ErrorCorrection

Hectopat

300319

Zettapat

ErrorCorrection

Hectopat

Fatalis

Terapat

ErrorCorrection

Hectopat

Fatalis

Terapat

300319

Zettapat

ErrorCorrection

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz