Çözüldü İki H1 etiketini yan yana yazabilmek

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

jevousaime

Centipat
Katılım
24 Kasım 2022
Mesajlar
40
Daha fazla  
Cinsiyet
Erkek
Örnek bir web sitesi çalışması yapiyorum ve iki h1i yan yana getirmek istiyorum sanki sayfa ikiye bolünmüş bir H1 ve elemanlar solda digeri sagda olacak sekilde.
HTML kodlarim.

HTML:
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Welcome to the new world.</title>
 <link rel="stylesheet" href="style.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=Montserrat:wght@300&family=Raleway:wght@300&display=swap"
 rel="stylesheet"
 />
 </head>
 <body>
 <h1 id="mainh1">Kod, Electronic & Vizyon.</h1>
 <p id="mainp">
 Strengthening the Iron Claw of the Turk with Midnight Noir: The Leader of.
 Defense Industry. Innovation in Electronics, Power in Vision!"
 </p>
 <h2 id="crewinfo">Introduce us</h2>
 <div class="aboutus">
 <a href="#">About Noir Crew</a>
 <a href="#">About Our Services</a>
 <a href="#">About New World Art</a>
 </div>
 <h2 id="hitabe" class="inline-h1">Atatürk's Address To Turkish Youth</h2>
 <p id="hitabep">
 Turkish Youth! Your first duty is forever to preserve and to defend.
 Turkish Independence and the Turkish Republic. This is the very foundation.
 of your existence and your future. This foundation is your most precious.
 treasure. In the future, too, there may be malevolent people at home and.
 abroad who will wish to deprive you of this treasure. If someday you are.
 compelled to defend your independence and your republic, you must not.
 tarry to weigh the possibilities and circumstances of the situation before.
 taking up your duty. These possibilities and circumstances may turn out to.
 be extremely unfavourable. The enemies conspiring against your.
 independence and your republic may have behind them a victory.
 unprecedented in the annals of the world. It may be that, by violence and.
 ruse, all the fortresses of your beloved fatherland may be captured, all.
 its shipyards occupied, all its armies dispersed and every part of the.
 country invaded. And sadder and graver than all these circumstances, those.
 who hold power within the country may be in error, misguided, and may even.
 be traitors. Furthermore, they may identify their personal interests with.
 the political designs of the invaders. The country may be impoverished,
 ruined, and exhausted. Youth of Turkey's future, Even in such.
 circumstances, it is your duty to save the Turkish Independence and.
 Republic. You will find the strength you need in your noble blood. Gazi.
 Mustafa Kemal Atatürk.
 </p>
 </body>
</html>

CSS kodlarim.

CSS:
body {
 background-image: url(background.png);
}

#mainh1 {
 font-family: "Raleway", sans-serif;
 font-size: 60px;
 margin-top: 70px;
 margin-left: 30px;
 color: white;
}

#mainp {
 color: white;
 font-size: 20px;
 text-align: left;
 font-family: "Montserrat", sans-serif;
 margin-left: 30px;
 max-width: 600px;
}

#crewinfo {
 color: white;
 font-size: 40px;
 text-align: left;
 margin-left: 30px;
 font-family: "Raleway", sans-serif;
}

.aboutus a {
 color: white;
 font-family: "Montserrat", sans-serif;
 margin-left: 30px;
 max-width: 600px;
 text-align: left;
 display: inline-block;
 margin-right: 10px;
}

#hitabe {
 color: white;
 font-size: 40px;
 text-align: right;
 margin-top: 10px;
 margin-right: 30px;
 font-family: "Raleway", sans-serif;
}



Fotoğrafta görebileceğiniz üzere Atatürk'ün gençliğe hitabesini baslığıyla beraber sag tarafa yapıştırmak istiyorum digerlerioyle ayni hizaya simdiden tesekkur ederim.
 

Dosya Ekleri

  • Ekran Alıntısı.PNG
    135,8 KB · Görüntüleme: 40
Çözüm
Teşekkür ederim web programlamacilikta cok yeniyim o yuzden beni mazur gorun flexboxu nereye yazacagim tam olarak. Tam anlatabilmek icin istedigim taslagi buraya koyuyorum.
Arka plan ve yazı renklerini siz halledersiniz.
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to the new world.</title>
    <link rel="stylesheet" href="style.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=Montserrat:wght@300&family=Raleway:wght@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div>
      <h1 id="mainh1">Kod, Electronic & Vizyon.</h1>
      <p id="mainp">
        Strengthening the Iron Claw of the Turk with Midnight Noir: The Leader of. Defense Industry. Innovation in
        Electronics, Power in Vision!"
      </p>
      <h2 id="crewinfo">Introduce us</h2>
      <div class="aboutus">
        <a href="#">About Noir Crew</a>
        <a href="#">About Our Services</a>
        <a href="#">About New World Art</a>
      </div>
    </div>
    <div>
      <h2 id="hitabe" class="inline-h1">Atatürk's Address To Turkish Youth</h2>
      <p id="hitabep">
        Turkish Youth! Your first duty is forever to preserve and to defend. Turkish Independence and the Turkish
        Republic. This is the very foundation. of your existence and your future. This foundation is your most precious.
        treasure. In the future, too, there may be malevolent people at home and. abroad who will wish to deprive you of
        this treasure. If someday you are. compelled to defend your independence and your republic, you must not. tarry
        to weigh the possibilities and circumstances of the situation before. taking up your duty. These possibilities
        and circumstances may turn out to. be extremely unfavourable. The enemies conspiring against your. independence
        and your republic may have behind them a victory. unprecedented in the annals of the world. It may be that, by
        violence and. ruse, all the fortresses of your beloved fatherland may be captured, all. its shipyards occupied,
        all its armies dispersed and every part of the. country invaded. And sadder and graver than all these
        circumstances, those. who hold power within the country may be in error, misguided, and may even. be traitors.
        Furthermore, they may identify their personal interests with. the political designs of the invaders. The country
        may be impoverished, ruined, and exhausted. Youth of Turkey's future, Even in such. circumstances, it is your
        duty to save the Turkish Independence and. Republic. You will find the strength you need in your noble blood.
        Gazi. Mustafa Kemal Atatürk.
      </p>
    </div>
  </body>
</html>
CSS:
body {
  display: flex;
}

body > div {
  flex: 1;
}

#mainh1 {
  font-family: "Raleway", sans-serif;
  font-size: 60px;
  margin-top: 70px;
  margin-left: 30px;
}

#mainp {
  font-size: 20px;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  margin-left: 30px;
  max-width: 600px;
}

#crewinfo {
  font-size: 40px;
  text-align: left;
  margin-left: 30px;
  font-family: "Raleway", sans-serif;
}

.aboutus a {
  font-family: "Montserrat", sans-serif;
  margin-left: 30px;
  max-width: 600px;
  text-align: left;
  display: inline-block;
  margin-right: 10px;
}

#hitabe {
  font-size: 40px;
  text-align: right;
  margin-top: 10px;
  margin-right: 30px;
  font-family: "Raleway", sans-serif;
}
2. H1'e style açıp konumunu değiştirmeyi denedin mi?
 
Yanlış hatırlamıyorsam ben div açıp css'den değiştiriyordum yerlerini.
 
Flexbox kullanın, yapamazsanız tekrar yardımcı olurum.
 
Flexbox kullanın, yapamazsanız tekrar yardımcı olurum.

Teşekkür ederim web programlamacilikta cok yeniyim o yuzden beni mazur gorun flexboxu nereye yazacagim tam olarak. Tam anlatabilmek icin istedigim taslagi buraya koyuyorum.
 

Dosya Ekleri

  • Ekran Alıntısı.PNG
    173,4 KB · Görüntüleme: 31
Teşekkür ederim web programlamacilikta cok yeniyim o yuzden beni mazur gorun flexboxu nereye yazacagim tam olarak. Tam anlatabilmek icin istedigim taslagi buraya koyuyorum.
Arka plan ve yazı renklerini siz halledersiniz.
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to the new world.</title>
    <link rel="stylesheet" href="style.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=Montserrat:wght@300&family=Raleway:wght@300&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div>
      <h1 id="mainh1">Kod, Electronic & Vizyon.</h1>
      <p id="mainp">
        Strengthening the Iron Claw of the Turk with Midnight Noir: The Leader of. Defense Industry. Innovation in
        Electronics, Power in Vision!"
      </p>
      <h2 id="crewinfo">Introduce us</h2>
      <div class="aboutus">
        <a href="#">About Noir Crew</a>
        <a href="#">About Our Services</a>
        <a href="#">About New World Art</a>
      </div>
    </div>
    <div>
      <h2 id="hitabe" class="inline-h1">Atatürk's Address To Turkish Youth</h2>
      <p id="hitabep">
        Turkish Youth! Your first duty is forever to preserve and to defend. Turkish Independence and the Turkish
        Republic. This is the very foundation. of your existence and your future. This foundation is your most precious.
        treasure. In the future, too, there may be malevolent people at home and. abroad who will wish to deprive you of
        this treasure. If someday you are. compelled to defend your independence and your republic, you must not. tarry
        to weigh the possibilities and circumstances of the situation before. taking up your duty. These possibilities
        and circumstances may turn out to. be extremely unfavourable. The enemies conspiring against your. independence
        and your republic may have behind them a victory. unprecedented in the annals of the world. It may be that, by
        violence and. ruse, all the fortresses of your beloved fatherland may be captured, all. its shipyards occupied,
        all its armies dispersed and every part of the. country invaded. And sadder and graver than all these
        circumstances, those. who hold power within the country may be in error, misguided, and may even. be traitors.
        Furthermore, they may identify their personal interests with. the political designs of the invaders. The country
        may be impoverished, ruined, and exhausted. Youth of Turkey's future, Even in such. circumstances, it is your
        duty to save the Turkish Independence and. Republic. You will find the strength you need in your noble blood.
        Gazi. Mustafa Kemal Atatürk.
      </p>
    </div>
  </body>
</html>
CSS:
body {
  display: flex;
}

body > div {
  flex: 1;
}

#mainh1 {
  font-family: "Raleway", sans-serif;
  font-size: 60px;
  margin-top: 70px;
  margin-left: 30px;
}

#mainp {
  font-size: 20px;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  margin-left: 30px;
  max-width: 600px;
}

#crewinfo {
  font-size: 40px;
  text-align: left;
  margin-left: 30px;
  font-family: "Raleway", sans-serif;
}

.aboutus a {
  font-family: "Montserrat", sans-serif;
  margin-left: 30px;
  max-width: 600px;
  text-align: left;
  display: inline-block;
  margin-right: 10px;
}

#hitabe {
  font-size: 40px;
  text-align: right;
  margin-top: 10px;
  margin-right: 30px;
  font-family: "Raleway", sans-serif;
}
 
Çözüm

Cok teşekkür ederim yardimlariniz icin.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…