Çözüldü CSS'te yazı sağ üste nasıl konumlandırılır?

yazilimologgg31 · 27 Ekim 2023

Arkadaşlar bu Front-End yazısını sağ üste, arada boşluk olmadan nasıl koyabilirim?

533388 · 27 Ekim 2023

@yazilimologgg31 sol orta derken anlamadım attığım kodda sola ve ortaya yaslıyor sen biraz daha az veya fazla değer verirsen olur.

<style>
*
{
margin: 0;
padding: 0;
}
.container{
 background: url('indir.jpg');
 no-repeat :center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container .up
{
width: 1400px;
height: 500px;
display: flex;
flex-direction: row;
justify-content: center;
}
.container .up .logo
{

border: 5px aqua groove;
width: 1000px;
height: 175px;
color: white;
}
.container .up .frontend
{ color: white;
width: 1000px;
height: 175px;

border: 5px red groove;
}
.container .down
{
display: flex;
justify-content: flex-start;
color: white;
}
.down span{
 margin-top: -200px;
}
</style>
</head>
<body>
<div class="container">

<div class="up">
<div class="logo">Neos Yazılım <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, cum.</p></div>
<div class="frontend">Front-End</div>

</div>
<div class="down">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lacus dapibus, feugiat lorem nec, sagittis eros. Nunc risus urna, tristique accumsan varius ac, porttitor vel ex. Phasellus gravida, metus et porta lobortis, ipsum tellus vulputate tortor, a aliquam elit felis ac justo. Etiam leo libero, molestie quis tristique id, condimentum a metus. Mauris tristique nibh in nulla auctor viverra. Pellentesque scelerisque massa molestie fringilla sollicitudin. Suspendisse potenti. Vestibulum sed mauris at orci efficitur facilisis.</span></div>
</div>

</body>
</html>

533388 · 27 Ekim 2023

@yazilimologgg31 Flex-direction row.

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 Flex-direction row.

Tamamdır hocam.

533388 · 27 Ekim 2023

@yazilimologgg31 oldu mu?

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 oldu mu?

Maalesef, ilk haline dönüyor.

533388 · 27 Ekim 2023

@yazilimologgg31 evde bakacağım ve kod olarak atarsan iyi olur.

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 evde bakacağım ve kod olarak atarsan iyi olur.

Tamamdır hocam tam olarak kaçta yazarsınız? Çünkü 12 de süresi bitiyor ödevin, göndermem gerekecek de.

533388 · 27 Ekim 2023

@yazilimologgg31 aksam 10 gibi en geç 11 de bakarım merak etme. Kodlari da atmayı unutma.

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 aksam 10 gibi en geç 11 de bakarım merak etme. Kodlari da atmayı unutma.

Hocam geldiğinizde yazarsanız iyi olur.

533388 · 27 Ekim 2023

@yazilimologgg31 tamam hocam.

Buyrun hocam.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *
    {
      margin: 0;
      padding: 0;
    }
    .container .up
    {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .container .up .logo
    {
      margin: 0 100px;
      border: 10px black solid;
    }
    .container .up .frontend
    {
      margin: 0 100px;
      border: 10px red solid;
    }
    .container .down
    {
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="up">
      <div class="logo">LOGO</div>
      <div class="frontend">Frontend</div>
    </div>
    <div class="down">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit ratione voluptates eum vero consequuntur et, itaque delectus? A, laborum!
    </div>
  </div>
</body>
</html>

@yazilimologgg31 oldu mu hocam?

yazilimologgg31 · 27 Ekim 2023

533388 dedi:

@yazilimologgg31 tamam hocam.

Buyrun hocam.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *
    {
      margin: 0;
      padding: 0;
    }
    .container .up
    {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .container .up .logo
    {
      margin: 0 100px;
      border: 10px black solid;
    }
    .container .up .frontend
    {
      margin: 0 100px;
      border: 10px red solid;
    }
    .container .down
    {
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="up">
      <div class="logo">LOGO</div>
      <div class="frontend">Frontend</div>
    </div>
    <div class="down">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit ratione voluptates eum vero consequuntur et, itaque delectus? A, laborum!
    </div>
  </div>
</body>
</html>

@yazilimologgg31 oldu mu hocam?

hocam fotoğrafın içine alttaki yazıyı alamıyorum yine ya

533388 dedi:

@yazilimologgg31 tamam hocam.

Buyrun hocam.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *
    {
      margin: 0;
      padding: 0;
    }
    .container .up
    {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .container .up .logo
    {
      margin: 0 100px;
      border: 10px black solid;
    }
    .container .up .frontend
    {
      margin: 0 100px;
      border: 10px red solid;
    }
    .container .down
    {
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="up">
      <div class="logo">LOGO</div>
      <div class="frontend">Frontend</div>
    </div>
    <div class="down">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit ratione voluptates eum vero consequuntur et, itaque delectus? A, laborum!
    </div>
  </div>
</body>
</html>

@yazilimologgg31 oldu mu hocam?

hocam orda mısınız?

Çözüldü CSS'te yazı sağ üste nasıl konumlandırılır?

Ayrıntılı düzenleme

yazilimologgg31

Centipat

533388

533388

Hectopat

yazilimologgg31

Centipat

533388

Hectopat

yazilimologgg31

Centipat

533388

Hectopat

yazilimologgg31

Centipat

533388

Hectopat

yazilimologgg31

Centipat

533388

Hectopat

yazilimologgg31

Centipat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar