CSS ile metni yukarıya alma

Hüsnü_Çoban · 11 Mayıs 2023

Bakın bu kodu çalıştırın ne demek istediğimi daha çok anlayacaksınız. Ortada bir metin var. "
Birini öldürmeniz, banka soymanız, gibi bir sürü yasa dışı işlere karıştığınız zaman biz müdahale ediyoruz ve sizi sonsuza kadar bir güvence sağlıyoruz."
Bu metni biraz daha yukarı taşımak istiyorum ,bunu nasıl yapabilirim? Margin ile yapınca altaki hr etiketi kayıyor.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Özgürlüğün yeni adresi! | Decrype</title>
  </head>
  <style>
    .font_weight {
      font-weight: bold;
    }
    a#pay_button {
      text-decoration: none;
      color: greenyellow;
      margin: 800px;
      border: 3px solid greenyellow;
      border-radius: 6px;
      padding: 3px;
    }

    a#pay_button:hover {
      color: white;
      border-color: #393646;
      background-color: #393646;
    }
 
    p#selection::selection{
      background-color: aqua;
      color: black;
    }

    a#user_button:hover{
      background-color: #393646;
      border-color: #393646;
      color: aqua;
    }
    #add_page_button:hover{
    background-color: green ;
    border: 5px solid green;
    }
    #add_page_button{
      text-align: center;
      margin-left: 680px;
      text-decoration: none;
   
    }
  </style>
  <header>
    <h1
      style="
        text-align: center;
        font-size: 27px;
        background-color: #6d5d6e;
        border: 3px solid #393646;
        color: white;
      "
    >
      Özgürlüğün yeni adresi | Decrype
    </h1>
  </header>
  <body bgcolor="#4F4557">
    <main>
      <section>
        <table>
          <ul>
            <li style="list-style: none">
              <p
                style="
                  font-size: 25px;
                  color: white;
                  text-align: center;
                  margin-bottom: 20px;
                  margin-right: 25px;
                "
              >
                Uygun fiyata hemen değişiklik iste!
              </p>
              <a href="#" id="pay_button" ;>Hemen şimdi sipariş ver!</a>
              <hr style="margin-right: 50px" />
            </li>
          </ul>
        </table>
        <table>
          <ul style="margin-top: -5px">
            <li style="list-style: none">
              <a
                href="#"
                id="user_button"
                style="
                  text-decoration: none;
                  color: aqua;
                  margin-left: 1650px;
                  border: 3px solid #393646;
                  padding: 3px;
                  border-radius: 8px;
                "
                class="font_weight"
                >Kayıt ol</a
              >
              <a
                href="#"
                id="user_button"
                style="
                  text-decoration: none;
                  color: aqua;
                  margin-left: 10px;
                  border: 3px solid #393646;
                  padding: 3px;
                  border-radius: 8px;
                "
                >Giriş yap</a
              >
            </li>
          </ul>
        </table>
        <h1
          style="
            color: white;
            border: 3px solid black;
            margin-inline-end: 1200px;
            border-radius: 6px;
            border-top-left-radius: 2px;
            border-left-color: gray;
            padding-left: 5px;
            margin-left: 50px;
            margin-top: -30px;
          "
        >
          Unutmayın <a href="#" style="color: aqua">kurallara</a> uymamanız
          haricinde risk size aittir.
        </h1>
      </section>
    </main>
    <aside style="float: right; width: 20%">
      <p style="font-size: 25px; color: white">Müşterilerimizin deneyimleri:</p>
      <div id="selection">
      <p id="selection"
        style="
          color: white;
          border: 3px solid gray;
          border-radius: 6px;
          padding: 4px;
        "
       
      >
        Gerçekten inanılmaz, koskoca mafyalar yıktım, büyük bir uyuşturucu
        baronu kurdum, işimi iyi yaptım ancak bir kaç şey istediğim gibi
        gitmedi. Polisler kimliğimi öğrendiğinde buraya başvurdum ve gerçekten
        uygun bir fiyata değişim yapıldı! Cidden çok memnunum.
        <br /><br />
        <strong id="selection">-Walter Hartwell White</strong>
      </p>
      <p id="selection"
        style="
          color: white;
          border: 3px solid gray;
          border-radius: 6px;
          padding: 4px;
        "
      >
        Walter denen adamdan çekmediğim kalmadı, kendisi piçin teki. Öldükten
        sonra bir kaç işimi halletmem gerekiyodu ve Walter'ın da burayı
        kullandığını hatırladım biraz zor anlaştık para konusunda ama anlaştık.
        Zamanında gazete getirip, haberleri alabiliyorsunuz sessiz sakin ve
        güzel. Ben Alaska'yı tercih ettim. <br />
        <br />
        <strong id="selection">-Jesse Pinkman</strong>
      </p>
      <p id="selection"
        style="
          color: white;
          border: 3px solid gray;
          border-radius: 6px;
          padding: 4px;
        "
      >
        Benim yaşantım biraz daha zorluydu, Mardin'den gelince hele işim daha
        çok zorlaştı, Muğla Fethiye'ye taşındık sülale boyu, babamı çok severim
        Ahmet'de babamı çok sever. MKMTAL'da okumaya başladım, 1 sene sınıfta
        kaldım ve kızlara ve 250 grama bayılırım.(250 gram = amcık) Eğer bir kız
        sorarsanız bana danışın, neyse konumuza dönelim, ben eşşek tedarikçiliği
        yapıyordum ancak kaçak olduğu için işler ters gitti. Böyle bir işi
        yapmak ne sakınca oluşturabilir değil mi? Ama tamı tamına 1.248.547 tane
        eşşek tedarik ettim kaçak olarak, bu yüzden polis 5 yıldız peşimde.
        Buranın orta seviye paketinden aldım ve Afrikaya yerleştim. Burası Anıl
        kaynıyor! Allahtan internet falan çekiyor porno izleyebiliyorum. Artık
        polisler peşimde değil! Saol Decrype. (Yaşadığımız bölgeye eşşek
        getiremiyor olmak üzdü.) <br id="selection">
        <br id="selection">
        <strong>  -Yusuf Semih Güldağ</strong>
      </p>
      <p id="selection"
        style="
          color: white;
          border: 3px solid gray;
          border-radius: 6px;
          padding: 4px;
        "
      >
        Selamlar! Benim hayatım Muğla'da geçiyor. Çok sevdiğim sevgilim vardı,
        çok uzun süre çıktık ve bir gün şehvet yaşamak istedik. O kadar çok
        şehvet yaşadıkki tam 4461984623 tane çocuğu tek postada hamile kaldım
        ama bu kadarına bakamayacağım için hepsini doğurup sokağa attım ve polis
        beni aramaya başladı. Sonra sevgilimle yurt dışı paketini aldık ve orda
        1 milyon tane daha yapmayı düşünüyoruz. 999.999 tanesine kürtaj yaptırıp
        geri kalan 1 tanesine bakacağız. Oda Ahmet istedi diye. Kız olcakmış.
        Öyle diyor beyfendi. Paket işe yaradı ama teşekkürler Decrype! <br />
        <br />
        <strong> -Ayşe Korkmaz </strong>
      </p>
    </div>
    </aside>
    <main>
      <h1
        style="
          color: white;
          font-size: 30px;
          margin-left: 50px;
          margin-top: 80px;
        "
      >
        En yeni paketlerimiz:
      </h1>
      <div
        style="
          border: 5px solid #393646;
          float: left;
          width: 20%;
          margin-left: 45px;
          padding-left: 10px;
          border-radius: 8px;
        "
      >
        <h1 style="color: aquamarine; font-size: 20px; float: right; width: 83%;">
          Bilgisayar bağımlısı paketi
        </h1>
        <p style="color: white">
          Yaşadığınız konum farketmeksizin yeni kimliklerinizle bilgisayar oyunu
          oynayabilirsiniz. elektrik, yemek derdi yok. &#129327
        </p>
        <p style="color: greenyellow; float: right; width: 60%; font-style: italic;">  470.000$ </p>
      </div>
      <div
        style="
          border: 5px solid #393646;
          float: left;
          width: 20%;
          margin-left: 45px;
          padding-left: 10px;
          border-radius: 8px;
        "
      >
        <h1 style="color: aquamarine; font-size: 20px; float: right; width: 78%">
          Ultra ekonomi paketi
        </h1>
        <br /><br />
        <p style="color: white">
          Sadece Netflix ve Kanal D erişimi olan bir TV yeriniz Alaska, TV 2K
          çözünürlük, yemek derdi yok!
        </p>
        <br />
        <p style="color: greenyellow; float: right; width: 60%; font-style: italic;">125.000$</p>
      </div>
      <div
        style="
          border: 5px solid #393646;
          float: left;
          width: 20%;
          margin-left: 45px;
          padding-left: 10px;
          border-radius: 8px;
        "
      >
        <h1 style="color: aquamarine  ; font-size: 20px; float: right; width: 72%">
          Mobil oyun paketi
        </h1>
        <br /><br />
        <p style="color: white">
          Sınırsız internet erişimi ile Asus ROG serisi telefon veya Galaxy S23
          telefon verilip internet erişimi sınırsız olacaktır. Elektrik, yemek
          derdi yok!
        </p>
        <p style="color: greenyellow; float: right; width: 60%; font-style: italic;">270.000$</p>
      </div>
    </main>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <hr style="width: 100px" />
    <h2 style="font-size: 30px; margin-left: 45px; color: white;" >Alaska paketleri:</h2>
    <a href="alaska-home.html" id="add_page_button" style="border: 3px solid green; border-radius: 7px; color: white; margin-bottom: 80px;" target="_blank">Tüm Alaska paketlerine göz atın!</a>
    <article><div style="margin-left: 45px; border: 5px solid #393646; border-radius: 8px; margin-right: 1410px;">
       <h1 style="color: aquamarine; text-align: center; padding-top: 5px; font-size: 20px;">Alaska Premium paketi</h1>
        <p style="color: white; padding-left: 10px;">Alaska'da TV, 8.000 TL değerinde televizyon ve sınırsız internet erişimi olan bir 1+1 doğalgaz ısıtmalı ev.</p> <br>
        <p style="color: greenyellow; text-align: center; font-style: italic; padding-right: 7px;">380.000$</p>
          </div>
       <p style="font-style: italic; color: #C1D0B5; padding-left: 45px;">Diğer Alaska paketlerimiz yolda, takipte kalın!</p>
    </article>
    <article>
      <main>
        <h1 style="color: white;  font-size: 30px; margin-left: 660px;">
          İşimiz nedir?
        </h1>
        <div>
        <ul style="list-style-type: none; margin-right: 1500px">
          <li>
            <p style="color: white; ;">Yasa dışı bir suç işlediğinizde size güvenceye almak için buradayız.Hayır avukatlık değil! Sizi polislerden tamamen kurtarıyoruz...</p>
          </li>
        </ul>
      </div>
      <div style="margin-bottom: 0px;">
        <ul style="list-style-type: none; margin-left: 500px; margin-right: 900px; ">
          <li>
            <p style="color: white;">Birini öldürmeniz, banka soymanız, gibi bir sürü yasa dışı işlere karıştığınız zaman biz müdahale ediyoruz ve sizi sonsuza kadar bir güvence sağlıyoruz.</p>
          </li>
        </ul>
      </div>
      </main>
    </article>
    <footer>
      <div>

      <hr style="margin-top: 200px" />
      <a href="#" style="color: aquamarine; text-decoration: none">İletişim</a>
      <br />
      <br />
      <a href="#" style="color: aquamarine; text-decoration: none"
        >Instagram sayfası
      </a>
      <br />
      <br />
      <a href="#" style="color: aquamarine; text-decoration: none"
        >Şikayet et</a
      >
      <p style="color: cadetblue">Bir hakkımız yokki saklı olsun.</p>
    </div>
    </footer>
  </body>
</html>

Againbirth · 11 Mayıs 2023

Bootstrap kullan istediğini daha kolay ve daha hızlı halledebilirsin.

Hüsnü_Çoban · 11 Mayıs 2023

Againbirth dedi:
Bootstrap kullan istediğini daha kolay ve daha hızlı halledebilirsin.

Eğitim aşamasındayım ve bootstrap'a daha geçmedim. Bu yüzden elimdeki imkanlarla öğprenmeye çalışıyorum.

CSS ile metni yukarıya alma

Ayrıntılı düzenleme

Hüsnü_Çoban

Hectopat

Againbirth

Kilopat

Hüsnü_Çoban

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz