Çö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 dedi:
Hocam fotoğrafın içine alttaki yazıyı alamıyorum yine ya.

Hocam kodları atar mısın ekran fotosu olarak değil ama.

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
Hocam kodları atar mısın ekran fotosu olarak değil ama.

hocam nasıl gönderebilirm onu?

<style>
*
{
margin: 0;
padding: 0;
}
.container .up
{
width: 1400px;
height: 500px;

background-image: url(coffee.jpg);
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
{
margin-top: 50px;
display: flex;
justify-content: center;
}

</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">
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 dedi:
hocam nasıl gönderebilirm onu?

<style>
*
{
margin: 0;
padding: 0;
}
.container .up
{
width: 1400px;
height: 500px;

background-image: url(coffee.jpg);
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
{
margin-top: 50px;
display: flex;
justify-content: center;
}

</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">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit ratione voluptates eum vero consequuntur et, itaque delectus? A, laborum!
</div>
</div>

</body>
</html>

böyle olur mu hocam?

533388 · 27 Ekim 2023

@yazilimologgg31 olur ama gönderdiğiniz kodda resim yok.

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 olur ama gönderdiğiniz kodda resim yok.

hocam rastgele bir resim varsa onu koyabilirsin farketmez.

533388 · 27 Ekim 2023

@yazilimologgg31 nereye koyim tam olarak.

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 nereye koyim tam olarak.

böyle bir şey olacak işte hocam.

533388 · 27 Ekim 2023

@yazilimologgg31 anladım arka plana.

@yazilimologgg31 hocam.

HTML:

<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
{
margin-top: 50px;
display: flex;
justify-content: center;
color: white;
}

</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">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit ratione voluptates eum vero consequuntur et, itaque delectus? A, laborum!
</div>
</div>

</body>
</html>

Siz biraz daha iyi bir resim ve CSS ile daha güzel şeyler yaparsınız renkler falan çok kötü.

@533388 resim sizde olmadığı için gözükmez.

@yazilimologgg31 oldu mu?

yazilimologgg31 · 27 Ekim 2023

533388 dedi:

@yazilimologgg31 anladım arka plana.

@yazilimologgg31 hocam.

HTML:

<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
{
margin-top: 50px;
display: flex;
justify-content: center;
color: white;
}

</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">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit ratione voluptates eum vero consequuntur et, itaque delectus? A, laborum!
</div>
</div>

</body>
</html>

Siz biraz daha iyi bir resim ve CSS ile daha güzel şeyler yaparsınız renkler falan çok kötü.

@533388 resim sizde olmadığı için gözükmez.

@yazilimologgg31 oldu mu?

hocam no repeat center kısmı tam olmamış doğrusu nasıl tam olarak?

533388 · 27 Ekim 2023

@yazilimologgg31


 no-repeat :center center fixed;

Onun dışında oldu mu hocam?

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 no-repeat :center center fixed;
Onun dışında oldu mu hocam?

oldu hocam da alttaki yazıyı nasıl sol ortaya alabilirim??

Çö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

Dosya Ekleri

533388

Hectopat

yazilimologgg31

Centipat

533388

Hectopat

yazilimologgg31

Centipat

Benzer konular

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