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ı, ö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 bayılırım. Eğer bir kız.
 sorarsanız bana danışın, neyse konumuza dönelim. <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. Sonra sevgilimle yurt dışı paketini aldık ve orda.
 1 milyon tane daha yapmayı düşünüyoruz. O da 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 , , 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

Kilopat

Againbirth

Gigapat

Hüsnü_Çoban

Kilopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz