CSS'te float sorunu

Atakan D. · 1 Eylül 2020

Merhabalar herkese. Sağdaki "en fazla okunanlar" kutucuğunda resimleri ufak resimlerin yanına getiremiyorum, yardımcı olursanız çok sevinirim... Float ve display seçeneklerini farklılaştırmayı denedim.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>MagazinBlog</title>
<link rel="stylesheet" href="blog.css">
<meta name="keywords" content="blog,site,yazı,seo,internet">
<meta name="description" content="GezginBlog sitesi altında gezip gördüğünüz yerler hakkında içerik üretebilir ve burada yayınlayabilirsiniz. Kategoriler sekmesine tıklayarak farklı yerlere ait bloglarınızı yazın ve bizimle paylaşın. Kullanıcılar yorum ve beğeni bırakabilir. Yorumlar için bildirim seçeneğini işaretlemeyi unutmayın. ">
<meta charset="utf-8">

</head>

<body>

<header>
<a href="#">
<h1>Seyyar Blog</h1>
</a>
</header>
<nav>

<div class="menu">
<span><a href="#">Ana Sayfa</a></span>
<span><a href="#">BLOG</a></span>
<span><a href="#">Son Girdiler</a></span>
<span class="userevent"><a href="#">Kayıt Ol</a></span>
<span class="userevent"><a href="#">Giriş Yap</a></span>
</div>

</nav>

<div id="container">

<div id="blog-post-container">

<div id="blog-post-1" class="blgpst">
<img src="blog-vesika/caner-cindoruk.jpg" alt="" class="img">
<span class="date">
28.01.2020.

</span>
<ul>
<li>
<p>

Bloğumda kullanıcı arayüzü ve kullanıcı deneyimi adına öğretici paylaşımlarda bulunmak istiyorum, bu benim ilk blog makalem olacak. Bu makalede yaptığınız site tasarımlarınızdaki resimlerin nasıl gölgelendirilmesi gerektiğiyle ilgili bir tüyo vereceğim.

</p>
</li>
</ul>

</div>

<div id="blog-post-2" class="blgpst">
<img src="blog-vesika/cuneyt-ozdem%C4%B1r.jpg" alt="" class="img">
<span class="date">
28.02.2020.

</span>
<ul>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero assumenda nisi quod pariatur sequi cumque esse illum labore quasi laboriosam, magni aliquid quidem, quos quisquam qui fuga nulla eos aut. Voluptates ab consectetur neque doloribus debitis itaque quia similique at incidunt assumenda.
</p>
</li>

</ul>

</div>
<div id="blog-post-3" class="blgpst">
<img src="blog-vesika/fahriye-evcen.jpg" alt="" class="img">
<span class="date">
28.03.2020.
</span>

<ul>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit molestias laudantium reiciendis quaerat dolor consequuntur, ipsam vitae sequi labore asperiores quibusdam, assumenda. Fugiat et assumenda soluta in quod ipsa tempora cum, ex quis earum.
</p>
</li>
</ul>

</div>
<div id="blog-post-4" class="blgpst">
<img src="blog-vesika/mehmet-aslantug.jpg" alt="" class="img">
<span class="date">
28.04.2020.
</span>
<ul>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, blanditiis voluptatibus hic quae id sunt dicta, voluptatum nobis quam non vel necessitatibus animi ex officiis assumenda ratione. Facilis quam eos distinctio.
</p>
</li>
</ul>

</div>
<div id="blog-post-5" class="blgpst">
<img src="blog-vesika/mine-tugay.jpeg" alt="" class="img">
<span class="date">
25.05.2020.
</span>
<ul>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi doloremque dolor cumque molestiae recusandae consequuntur maiores, facere modi aut ab! Alias incidunt dolorem ipsum ut voluptate autem debitis molestiae, facere aut praesentium! </p>
</li>
</ul>

</div>
<div id="blog-post-6" class="blgpst">
<img src="blog-vesika/ozgu-namal.jpg" alt="" class="img">
<span class="date">
28.06.2020.
</span>
<ul>
<li>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptate facere dolore modi aspernatur molestiae, voluptatum tempore, adipisci, quisquam libero deleniti eum nobis hic, eius voluptas.
</p>
</li>
</ul>

</div>

<span id="newcontent">
<h3>
Konu Oluştur.
</h3>
</span>

</div>
<div id="content">
<h2>En Fazla Okunanlar</h2>
<ul>
<div class="enfazla">
<li><img src="blog-vesika/caner-cindoruk.jpg" alt=""></li>
<a href="">
Technopat’ta Neler Oluyor? Yeni Sunucumuza Geçiş ve 2020 Ortasında Durum</a>
</div>

<div class="enfazla">
<li><img src="blog-vesika/cuneyt-ozdem%C4%B1r.jpg" alt=""></li>
<a href=""> Windows 10 Sürüm 20H2 Neler Sunuyor?</a>

</div>

<div class="enfazla">
<li><img src="blog-vesika/tar%C4%B1kakan.jpg" alt=""></li>
<a href="">Bilgisayarda SYS dosyaları eksikliği nedenli alınan Mavi Ekranlar #1</a>

</div>

<div class="enfazla">
<li><img src="blog-vesika/mehmet-aslantug.jpg" alt=""></li>
<a href="">Turbox, Izoly, Frisby ve Everest'in ortak üretecekleri bilgisayarların özellikleri belli oldu</a>
</div>

<div class="enfazla">
<li><img src="blog-vesika/ozgu-namal.jpg" alt=""></li>
<a href="">[YHA] Türkiye'ye 5G geldi!</a>
</div>
</ul>

</div>

</div>

</body>

</html>

CSS:

body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #97bcda;

}

nav {
background-color: darkslategray;
margin: 0px;
padding: 0px;
}

#container {
width: 1800px;
margin: auto;

box-sizing: border-box;

}

header {
background-image: url(header/roadtrip-los-angeles-las-vegas-p-1200x750.jpg);
background-size: auto;
background-position: top;
height: 350px;
width: 50%;
margin: auto;
position: static;
box-sizing: border-box;

}

header a {
text-decoration: none;
display: block;
font-size: 2em;
font-weight: bold;
text-align: center;
margin: 0px;
padding: 0;
color: white;
font-family: sans-serif;
}

.userevent {
float: right;
margin-left: 100px;

}

.menu {
display: block;

line-height: 35px;
text-align: center;
font-family: sans-serif;

position: relative;
left: 190px;
width: 80%;
opacity: 100;

}

.menu span {
display: inline-block;
margin: 0px;
padding-top: 10px;
overflow: auto;

}

.menu span a {
color: whitesmoke;
text-decoration: none;
font-size: 20px;
margin-right: 15px;
text-align: center;
letter-spacing: 1px;
text-align: center;
padding-right: 10px;
padding-left: 10px;
font-weight: 700;
margin-top: 10px;

}

.header-container {

border: 2px gray solid;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
background-color: #97bcda;
margin: 0;
padding: 0;
position: relative;

box-sizing: border-box;
box-shadow: 10px 10px 10px gray;
overflow: auto;
}

.blgpst {

display: inline-block;
background-color: #97bcda;
position: relative;
left: 200px;
top: 15px;
margin-right: 160px;
text-align: center;
box-sizing: border-box;
overflow: auto;
margin-top: 35px;
height: 500px;
width: 25%;
margin-bottom: 10px;

}

.blgpst:hover{
background-color: aliceblue;
opacity: 70%;
cursor: pointer;
transition: 0.3s;
}

.blgpst p {

text-decoration: none;

margin: 10px;
text-align: center;

font-family: sans-serif, monospace;
font-size: 22px;
letter-spacing: 0.5px;
word-spacing: 2px;
padding-top: 20px;

}

ul {
margin: 0px;
padding: 0px;
list-style: none;

}

.date {
position: static;
display:block;
color: black;

}

.img {
width: 35%;
height: 30%;

}

#content h2 {
margin: 10px 75px auto;
color: black;
font-weight: 1000;

}

#content {
position: absolute;
left: 1350px;
top: 600px;
border: 2px solid white;
height: 55%;
width: 25%;
box-sizing: border-box;
display: table;
}

#content:hover{
background-color: white;
opacity: 50%;
}

#content img {
width: 50px;
height: 50px;
margin: 20px 10px auto;

}

.enfazla > a {

text-decoration: none;
list-style: none;

margin: 0px;
font-size: 20px;
color: black;

width: 80%;

}
.enfazla a:hover{
color: black;
}

.enfazla {
display: block;
padding: 5px;
box-sizing: border-box;

}

#newcontent {
border: solid 3px white;
margin: 0px;
padding: 0px;
width: 10em;
height: 5em;
display: block;
box-sizing: border-box;
position: relative;
bottom: 1600px;
left: 1300px;

}

h3 {

text-align: center;
padding: 0;
position: relative;

}

Fatalis · 1 Eylül 2020

Tam olarak ne yapmak istediğini anlamadım site içerisinden bir görüntü paylaşıp anlatır mısın tam ne yapmak istediğini?

Atakan D. · 2 Eylül 2020

Fatalis dedi:
Tam olarak ne yapmak istediğini anlamadım site içerisinden bir görüntü paylaşıp anlatır mısın tam ne yapmak istediğini?

Kusura bakma resimleri hesaba katmadım. Aşağıya koydum resmi. Sağda kutu var ya En Fazla Okunanlar diye. O ufak resimlerin yanına aynı bizim Technopat'taki gibi yazıları getirmek istiyorum.

berk1937 · 2 Eylül 2020

Bir şeyleri yan yana getirmeye çalışıyorsan eğer (örneğin sağ tarafta içerik ve sol tarafta son yazılan mesajlar gibi), flexbox kullanabilirsin.

Örnek:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

HTML:

<div class="ana-div">
  <div class="bolum-div">
  içerik
  </div>
  <div class="bolum-div">
  içerik
  </div>
</div>

CSS:

.ana-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.bolum-div {
  border: 1px solid black;
}

Atakan D. · 2 Eylül 2020

Mevzu edilen tüm div'leri inline-block yaptım ve sorun düzeldi, teşekkürler..

CSS'te float sorunu

Ayrıntılı düzenleme

Atakan D.

Kilopat

Fatalis

Megapat

Atakan D.

Kilopat

Dosya Ekleri

berk1937

Kilopat

Edit fiddle - JSFiddle - Code Playground

Atakan D.

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz