HTML'de iç içe giren div nasıl önlenir?

kelrasS · 16 Eylül 2023

Öncelikle iyi günler. Web sayfam bu şekildeyken sorun yok ama yakınlaştırınca veya telefon ekranı olarak bakınca iç içe giriyorlar. Bunu nasıl önlerim?

snageX · 16 Eylül 2023

712661 dedi:
Eğer kodu bana atarsan, düzenleyip, sana geri verebilirim.

Bence kendisi öğrenmesi daha iyi, responsive her zaman kullanılması gereken bir şey bence.

712661 · 16 Eylül 2023

snageX dedi:
Bence kendisi öğrenmesi daha iyi, responsive her zaman kullanılması gereken bir şey bence.

Kodun içerisine notlar bırakabilirim. Böylece atacağım kodu incelerse daha iyi öğrenir diye düşünüyorum.

kelrasS · 16 Eylül 2023

<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="website icon" type="png" href="/resimler/LogoYazısız.png">
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>deneme</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='stil.css'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="website icon" type="png" href="LogoYazısız.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src='main.js'></script>

</head>
<body style="background-color: #cacaca">
<nav class="navbar navbar-expand-lg " style="position: fixed; width: 100%; background-color: #000000; z-index: 9999;">
<div class="container-fluid" style="margin-left: 100px;">
<a class="navbar-brand" href="index.html"><img src="resimler/logo siyah.png" style="width: 200px; height: 75px;" alt="resme alternatif yazı"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span style=" background-color: #FFDE59;" class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">
<li class="nav-item">
<b><a class="nav-link active" aria-current="page" href="index.html"><p style="color: white;">Anasayfa</p></a></b>
</li>
<li class="nav-item">
<a class="nav-link" href="islemler.html"><p style="color: white;">İşlemler</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="iletisim.html"><p style="color: white;">İletişim</p></a>
</li>
<div class="bayrak">
<a href="#"><img src="resimler/TurkBayrak.png" alt="Türkçe" style="width: 50px;"></a>
<a href="#"><img src="resimler/ingilizbayrak.png" alt="English" style="width: 50px;"></a>
</div>
</ul>

</div>
</div>
</nav>
<div style="height: 200px;"></div>
<div class="iletisimAnaDiv">
<div class="iletisimicerik">
<div class="KRMZiletisimyazi">
<p class="iletisimicyazi">
awdawda awdsecd<br/>
auwfboıa@gmail.com<br/>
0 111 111 11 11<br/>
<a href="whatsapp://send?phone=+901111111111" style="text-decoration:none ">WhatsApp</a><br/>
</p>
</div>
<div class="foto">
<img src="resimler/vesikalık.jpg" alt="" class="vesikalık">
</div>
</div>
</div>
</body>
</html>

CSS kodlarınıda atayim mi?

712661 · 16 Eylül 2023

kelrasS dedi:
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="website icon" type="png" href="/resimler/LogoYazısız.png">
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>deneme</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='stil.css'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="website icon" type="png" href="LogoYazısız.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src='main.js'></script>

</head>
<body style="background-color: #cacaca">
<nav class="navbar navbar-expand-lg " style="position: fixed; width: 100%; background-color: #000000; z-index: 9999;">
<div class="container-fluid" style="margin-left: 100px;">
<a class="navbar-brand" href="index.html"><img src="resimler/logo siyah.png" style="width: 200px; height: 75px;" alt="resme alternatif yazı"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span style=" background-color: #FFDE59;" class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">
<li class="nav-item">
<b><a class="nav-link active" aria-current="page" href="index.html"><p style="color: white;">Anasayfa</p></a></b>
</li>
<li class="nav-item">
<a class="nav-link" href="islemler.html"><p style="color: white;">İşlemler</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="iletisim.html"><p style="color: white;">İletişim</p></a>
</li>
<div class="bayrak">
<a href="#"><img src="resimler/TurkBayrak.png" alt="Türkçe" style="width: 50px;"></a>
<a href="#"><img src="resimler/ingilizbayrak.png" alt="English" style="width: 50px;"></a>
</div>
</ul>

</div>
</div>
</nav>
<div style="height: 200px;"></div>
<div class="iletisimAnaDiv">
<div class="iletisimicerik">
<div class="KRMZiletisimyazi">
<p class="iletisimicyazi">
awdawda awdsecd<br/>
auwfboıa@gmail.com<br/>
0 111 111 11 11<br/>
<a href="whatsapp://send?phone=+901111111111" style="text-decoration:none ">WhatsApp</a><br/>
</p>
</div>
<div class="foto">
<img src="resimler/vesikalık.jpg" alt="" class="vesikalık">
</div>
</div>
</div>
</body>
</html>

CSS kodlarınıda atayim mi?

Tabii ki.

kelrasS · 16 Eylül 2023

.iletisimAnaDiv{
margin-top: 4%;
width: 85%;
height: 400px;
margin: auto;
background-color: #909090;
}
.KRMZiletisimyazi{
background-color: #ff0000;
text-align: center;
width: 40%;
position:absolute;
margin-top: 5%;
display: block;
}
.iletisimicyazi{
font-size: xx-large;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color: #ffffff;
text-align: left;
width: 250px;
margin-left: 5%;

}
.iletisimfoto{
margin-left: 40%;
background-color: #70caca;
width: auto;
height: auto;
}
.vesikalık{
float: right;
margin-right: 15%;
margin-top: 4%;
height: auto;
width: 200px;
height: 250px;
display: block;
}
.foto{
background-color: #70caca;
width: 280px;
height: 300px;
float: right;
margin-right: 15%;
margin-top: 4%;
display: block;
}

orda kullandığım css kodları.

snageX · 16 Eylül 2023

Kod paylaşımı için de hastebin kullanabilirsiniz, konu dışı fakat işinize yarayabilir birileri ile proje paylaşacağınız zaman. Hastebin: Send and Save Text or Code Snippets for Free | Toptal®

712661 · 16 Eylül 2023

kelrasS dedi:
.iletisimAnaDiv{
margin-top: 4%;
width: 85%;
height: 400px;
margin: auto;
background-color: #909090;
}
.KRMZiletisimyazi{
background-color: #ff0000;
text-align: center;
width: 40%;
position:absolute;
margin-top: 5%;
display: block;
}
.iletisimicyazi{
font-size: xx-large;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color: #ffffff;
text-align: left;
width: 250px;
margin-left: 5%;

}
.iletisimfoto{
margin-left: 40%;
background-color: #70caca;
width: auto;
height: auto;
}
.vesikalık{
float: right;
margin-right: 15%;
margin-top: 4%;
height: auto;
width: 200px;
height: 250px;
display: block;
}
.foto{
background-color: #70caca;
width: 280px;
height: 300px;
float: right;
margin-right: 15%;
margin-top: 4%;
display: block;
}

orda kullandığım css kodları.

HTML:
<div class="container">
<div class="content">
<img src="image.jpeg">
<div>
<p>
Yazı 1
</p>
<p>
Yazı 2
</p>
<p>
Yazı 3
</p>
<p>
Yazı 4
</p>
<p>
Yazı 5
</p>
</div>
</div>
</div>

CSS:
@media only screen and (min-width: 769px) {
.content {
display: flex;
width: calc(100% - 3em);
background-color: gray;
margin: auto;
align-items: center;
padding: 1em 0;
}

.content div {
margin-left: auto;
margin-right: 1em;
}

.content img {
height: 5em;
width: 5em;
margin-left: 1em;
}
}
@media only screen and (max-width: 768px) {
.content img {
height: 5em;
width: 5em;
}
.content {
width: calc(100% - 3em);
background-color: gray;
margin: auto;
padding: 1em 0;
text-align: center;
}
.content div {
margin-top: 1em;
}
}

712661 dedi:
HTML:
<div class="container">
<div class="content">
<img src="image.jpeg">
<div>
<p>
Yazı 1
</p>
<p>
Yazı 2
</p>
<p>
Yazı 3
</p>
<p>
Yazı 4
</p>
<p>
Yazı 5
</p>
</div>
</div>
</div>

CSS:
@media only screen and (min-width: 769px) {
.content {
display: flex;
width: calc(100% - 3em);
background-color: gray;
margin: auto;
align-items: center;
padding: 1em 0;
}

.content div {
margin-left: auto;
margin-right: 1em;
}

.content img {
height: 5em;
width: 5em;
margin-left: 1em;
}
}
@media only screen and (max-width: 768px) {
.content img {
height: 5em;
width: 5em;
}
.content {
width: calc(100% - 3em);
background-color: gray;
margin: auto;
padding: 1em 0;
text-align: center;
}
.content div {
margin-top: 1em;
}
}

Ortak tasarıma sahip olanları dışarı çıkartabilirsiniz.

249873 · 17 Eylül 2023

Büyük ihtimal kutuya bir with verdin. 800px gibi. Sonra resim kısmını da position absolute dedin. Ama bu yöntem çok sağlıklı değil.

712661 · 17 Eylül 2023

Silinen üye dedi:
Büyük ihtimal kutuya bir with verdin. 800px gibi. Sonra resim kısmını da position absolute dedin. Ama bu yöntem çok sağlıklı değil.

Uzunluk ölçüsü olarak "%" kullanmış.

E1Rhan · 18 Eylül 2023

Responsive tasarım öğrenmen gerek.

HTML'de iç içe giren div nasıl önlenir?

Ayrıntılı düzenleme

kelrasS

Hectopat

Dosya Ekleri

snageX

Hectopat

712661

Picopat

kelrasS

Hectopat

712661

Picopat

kelrasS

Hectopat

snageX

Hectopat

712661

Picopat

249873

Kilopat

712661

Picopat

E1Rhan

Megapat

Benzer konular

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