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

kelrasS

kelrasS

Hectopat
Katılım
20 Nisan 2021
Mesajlar
151
Daha fazla  
Cinsiyet
Erkek
1.PNG

Ö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?
2.PNG
 

Dosya Ekleri

  • 2.PNG
    2.PNG
    22,9 KB · Görüntüleme: 43
Son düzenleyen: Moderatör:
Tarihe göre sırala Puana göre sırala
<!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/[email protected]/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/[email protected]/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ı[email protected]<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?
 
Artı 0 Eksi
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/[email protected]/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/[email protected]/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ı[email protected]<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?
Genişletmek için tıkla...
Tabii ki.
 
Artı 0 Eksi
.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ı.
 
Artı 0 Eksi
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ı.
Genişletmek için tıkla...
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;
}
}
Genişletmek için tıkla...
Ortak tasarıma sahip olanları dışarı çıkartabilirsiniz.
 
Artı 0 Eksi

Benzer konular

0.0_lucas
Div iç içe geçiyor
Mesaj
0
Görüntüleme
159
0.0_lucas
0.0_lucas
C
  • Çözüldü
Çözüldü  HTML'de hamburger menu ile slayt iç içe geçiyor
Mesaj
2
Görüntüleme
733
Coderman128
C
M
HTML'de Div elementi yerine semantic element kullanmanın artısı nedir?
Mesaj
4
Görüntüleme
372
await
await
emregunel0
HTML <div> yanına yeni div nasıl açılır?
Mesaj
3
Görüntüleme
1.174
emregunel0
emregunel0
Yeniçocuk
HTML'de Nasıl Gelişilir?
2
Mesaj
14
Görüntüleme
1.940
Darksandor
Darksandor

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı