HTML "p" etiketi aşağı doğru nasıl kaydırılır?

Hüsnü_Çoban

Hüsnü_Çoban

Hectopat
Katılım
5 Nisan 2020
Mesajlar
2.681
Çözümler
9
Daha fazla  
Cinsiyet
Erkek
Meslek
Sivil Polis
Bir p etiketini aşağıya atamadım, makale gibi olmasını istiyorum.
Kod düzenine aldanmayın taslak yapım sadece.
HTML: 
    <!DOCTYPE html>
    <html lang="tr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Lato:ital@1&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
        <link rel="icon" href="indir.jpg">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,700&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.4.0/css/all.min.css"/>
        <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
        <title>Seku Turları</title>
    </head>
    <header style="box-shadow: 0 0 2px 3px #C2C2C2; border-radius: 22px; padding: 5px;">
            <h1 id="main_label">Seku Turları</h1>
            <i class="fa-solid fa-sailboat fa-lg" style="color: white;"></i>
            <ul style="list-style: none; display: inline;" id="list_model">
                <li class="list_model" style="display: inline; vertical-align: middle;">
                    <a class="list_model hover_class" id="nav_margin" href="index.html" >Anasayfa</a>
                </li>
                <li class="list_model">
                    <a class="list_model hover_class" href="#" style="margin-right: 15px; margin-left: 15px;" >Hakkımızda</a>
                </li>
                <li class="list_model">
                    <a class="list_model hover_class" href="#" >Turlarımız</a>
                </li>
            </ul>
        </header>
    <body style="background-image: url(4k\ photo.jpg); background-size: contain">
        <h1 id="main_page_label">
            Tatilinizin keyfini çıkarın!
        </h1>
        <h2 id="main_page_as_label">
            Her şeyi bize bırakın Seku Turları size yardımcı olacak.
        </h2>
    <div id="main_div">
        <div style="text-align: center;">   <br><br>
        <i class="fa-regular fa-face-smile-beam" style="font-size: 35px;"></i>
        <h2 id="bottom_label" style="font-size: 25px;">
            Son derece verimli bir tur
        </h2>
        <p style="color: black; font-size: 17px; font-family: 'AR One Sans', sans-serif;" id="bottom_label_p">Müşterilerimize özel hizmet ile son derece keyifli bir tur...</p>
    <br><br>
        <i class="fa-brands fa-slack" style="font-size: 35px;" ></i>
        <h2 >
            Yüksek verim ile kesintisiz eğlence!
        </h2>
        <p>
            Kesintisiz müzik ile kesintisiz eğlence!
        </p> <br><br>
        <i class="fa-solid fa-utensils" style="font-size: 35px;"></i>
        <h2>
            Leziz yemekler
        </h2>
        <p>
            Leziz yemeklerimizle doygun bir gezintinin keyfini çıkarın.
        </p>
    </div>
    </div> <br>
    <div style="background-color: white; display:inline-flex; border-radius: 16px;">
        <img src="tekne2.png" alt="Tekne fotoğrafı" style="max-width: 75%; height: auto; object-fit: cover; border-radius: 16px;">
        <h1 style="margin-left: 110px; display: block;">Açık hava ve deniz</h1><div>
            <p style="float:;">31UAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
        </div>
       
            <!--  <iconify-icon icon="iconoir:sea-and-sun" style="font-size: 45px; margin-top: 15px; margin-left: 85px;"></iconify-icon>
        <h1 style=" text-align: right;">
            Açık hava ve deniz
        </h1 >
        <p>
            Yoğun iş temposu, günlük stres ve sorumluluklar... Hayatın getirdiği baskılar bazen üzerimizde ağırlık oluşturabilir. Bu yüzden, zaman zaman kendimize zaman ayırıp, stresten uzaklaşmak önemlidir. İşte tam da bu noktada, açık hava ve deniz tatili size ihtiyacınız olan rahatlama ve yeniden enerji kazanma imkanı sunar.
        </p>-->
        </div>      
    </body>
    </html>
CSS: 
#main_label{
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    text-align: left;
    display: inline;
    color: white;
    vertical-align: middle;
   
}

.list_model{
  text-decoration: none;
  display:inline;
  font-family: 'Roboto', sans-serif;
    color: white;
    vertical-align:middle;
   

}

#nav_margin{
    margin-left: 1370px;
    font-family: 'Roboto', sans-serif;
    color: white;
    vertical-align: middle;
}


#main_page_label{
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 85px;
    text-align: center;
    margin-top: 250px;
    transition: text-shadow 0.3s ease;
}

#main_page_as_label{
    color: white;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 20   px;
    text-shadow: 2px 2px 2px black;
    margin-bottom: 570px;
}


#main_page_label:hover{
    text-shadow: 0px 1px 7px white;
}

#main_div{
    border: 2px solid white;
    background-color: white;
    border-radius: 16px;
    font-family: 'Raleway', sans-serif;
}




#bottom_label_p{
    margin-left: 22px;
}



#tour_check{
    border: 2px solid white;
    border-radius: 16px;
   
}

.hover_class{
    transition: background-color 0.3s ease;
    border-radius: 16px;
    padding: 5px;
 
}

.hover_class:hover{
    background-color: #9EDDFF;
}
 

Dosya Ekleri

  • 1696084579321.png
    1696084579321.png
    1,4 MB · Görüntüleme: 40
Koda bakmadım ama eğer bu position işlemleriyle uğraşmak istemiyorsanız CSS'de Flex yapısını ya da bunun alternatifi olan Grid yapısını kullanabilirsiniz. İşinizi gerçekten çok kolaylaştırır.
 
Hüsnü_Çoban dedi:
<h1 style="margin-left: 110px; display: block;">Açık hava ve deniz</h1><div> <p style="float:;">31UAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> </div>
Genişletmek için tıkla...
Şuradan bahsediyorsunuz sanırım. style kısmını kaldırın, hatalı girilmiş bir şey zaten. O kısmı komple silip şu şekilde yapın. Sağa yaslamak için margin vermek saçma olmuş.
HTML: 
<div class="delikarga">
    <h1>Açık Hava ve Deniz</h1>
    <p class="metin">UUUUUUUUUUUUUUUUAAAAA</p>
</div>
CSS: 
.delikarga {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items: flex-end;
}
 
Eray T dedi:
P etiketi içine bu kodu girer misiniz?

CSS: 
word-wrap: break-word;
Genişletmek için tıkla...
Değişmedi,t
Wandervals dedi:
Koda bakmadım ama eğer bu position işlemleriyle uğraşmak istemiyorsanız CSS'de Flex yapısını ya da bunun alternatifi olan Grid yapısını kullanabilirsiniz. İşinizi gerçekten çok kolaylaştırır.
Genişletmek için tıkla...
Tam o konudayım oraları çözmeye çalışıyorum.
delikarga dedi:
Şuradan bahsediyorsunuz sanırım. style kısmını kaldırın, hatalı girilmiş bir şey zaten. O kısmı komple silip şu şekilde yapın. Sağa yaslamak için margin vermek saçma olmuş.
HTML: 
<div class="delikarga">
    <h1>Açık Hava ve Deniz</h1>
    <p class="metin">UUUUUUUUUUUUUUUUAAAAA</p>
</div>
CSS: 
.delikarga {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items: flex-end;
}
Genişletmek için tıkla...
Hemen deniyorum.

delikarga dedi:
Şuradan bahsediyorsunuz sanırım. style kısmını kaldırın, hatalı girilmiş bir şey zaten. O kısmı komple silip şu şekilde yapın. Sağa yaslamak için margin vermek saçma olmuş.
HTML: 
<div class="delikarga">
    <h1>Açık Hava ve Deniz</h1>
    <p class="metin">UUUUUUUUUUUUUUUUAAAAA</p>
</div>
CSS: 
.delikarga {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items: flex-end;
}
Genişletmek için tıkla...
1696085774219.png

Tam istediğim gibi hocam teşekkürler şimdi bunun üstüne "icon" koyup devam edeceğim işime ancak bunu birde yukarı almak için "p"ye "margin" atayım mı? Birde neleri kullandınız bende öğreneyim.
 
Son düzenleme:

Benzer konular

2
  • Soru
HTML a etiketi çalışmıyor
Mesaj
1
Görüntüleme
765
DGDev
D
E
HTML projesinde fotoğraf aşağı kaydırılmıyor
Mesaj
3
Görüntüleme
234
xDaxer
X
rauzy
HTML resim eklemek için hangi etiketi kullanmalı?
Mesaj
4
Görüntüleme
157
rauzy
rauzy
Unaxpre
HTML çalıştırıldığında sayfa aşağı inmiyor
Mesaj
1
Görüntüleme
1B
Vegas
Vegas
William Crusader
  • Soru
HTML ve CSS kullanarak sitede aşağı kaydırma efekti nasıl yapılır?
Mesaj
0
Görüntüleme
1B
William Crusader
William Crusader

Yeni konular

Yeni mesajlar

Geri
Yukarı