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

justify-content: flex-start;

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
justify-content: flex-start;

hocam sol alta geldi sol ortaya nasıl çıkar?

533388 · 27 Ekim 2023

@yazilimologgg31 nasıl yani yukarıda mı eğer öyleyse.

.down span{
 margin-top: -200px;
}

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@yazilimologgg31 nasıl yani yukarıda mı eğer öyleyse.
.down span{ margin-top: -200px; }

hocam bunu nereye yazacağım?

533388 · 27 Ekim 2023

yazilimologgg31 dedi:
Hocam bunu nereye yazacağım?

CSS de istediğin yere ama bence en alta yaz.

@yazilimologgg31 oldu mu?

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
CSS de istediğin yere ama bence en alta yaz.

@yazilimologgg31 oldu mu?

hocam her şey tamam bir tek sol ortaya yerleştiremedim.

yazilimologgg31 dedi:
hocam her şey tamam bir tek sol ortaya yerleştiremedim.

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>

yazilimologgg31 · 27 Ekim 2023

533388 dedi:
@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> [/ICOD [/QUOTE]

533388 dedi:
@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>

hocam kodu bir daha atıyorum bakar mısınız?

yazilimologgg31 dedi:
hocam kodu bir daha atıyorum bakar mısınız?

*
{
margin: 0;
padding: 0;
}
.container{
width: 1500px;
background-image:linear-gradient(to right,rgba(165, 42, 42, 0.356),rgba(255, 0, 0, 0.208)), url(coffee.jpg);
no-repeat : center center fixed;
/* -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; */
background-size: cover;
}
.container .up
{
width: 1500px;
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;
}
.baslık{
margin: 20px;
}
.lorem{
margin-left: 20px;
margin-top: 40px;
}
.down span{
margin-bottom: -800px;
}
</style>
</head>
<body>
<div class="container">
<div class="up">
<div class="logo"><h1 class="baslık">Neos Yazılım</h1> <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, cum.</p></div>
<div class="frontend"><h1 class="baslık">Front-End</h1> <p class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure, eius.</p></div>

</div>
<div class="down">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, vel alias blanditiis aperiam neque mollitia assumenda, eius earum rerum iste atque explicabo fugiat? Eius soluta fugiat enim veritatis deleniti facere, consequatur similique quidem nemo sapiente deserunt molestias tenetur iste quaerat cupiditate doloribus id ut in? Repellat dolore dolores quia omnis vero similique. Iste perspiciatis quidem aperiam corrupti consequuntur voluptatem vero.
</div>
</div>

</body>
</html>

533388 · 27 Ekim 2023

@yazilimologgg31 sen o attığın kodda bazı classlar tanımlamışsın ondan dolayı benim attığım kodu yapıştır ama anlayarak.

yazilimologgg31 · 27 Ekim 2023

yazilimologgg31 dedi:
hocam kodu bir daha atıyorum bakar mısınız?

*
{
margin: 0;
padding: 0;
}
.container{
width: 1500px;
background-image:linear-gradient(to right,rgba(165, 42, 42, 0.356),rgba(255, 0, 0, 0.208)), url(coffee.jpg);
no-repeat : center center fixed;
/* -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; */
background-size: cover;
}
.container .up
{
width: 1500px;
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;
}
.baslık{
margin: 20px;
}
.lorem{
margin-left: 20px;
margin-top: 40px;
}
.down span{
margin-bottom: -800px;
}
</style>
</head>
<body>
<div class="container">
<div class="up">
<div class="logo"><h1 class="baslık">Neos Yazılım</h1> <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, cum.</p></div>
<div class="frontend"><h1 class="baslık">Front-End</h1> <p class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure, eius.</p></div>

</div>
<div class="down">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi, vel alias blanditiis aperiam neque mollitia assumenda, eius earum rerum iste atque explicabo fugiat? Eius soluta fugiat enim veritatis deleniti facere, consequatur similique quidem nemo sapiente deserunt molestias tenetur iste quaerat cupiditate doloribus id ut in? Repellat dolore dolores quia omnis vero similique. Iste perspiciatis quidem aperiam corrupti consequuntur voluptatem vero.
</div>
</div>

</body>
</html>

bu fotoğraftaki gibi olmalı lorem bölümü.

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

Dosya Ekleri

Benzer konular

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

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz