HTML Yakınlaştırma Hatası

Galip Akcan · 16 Eylül 2020

Kod:

<!doctype html>
<html>
<head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<style type="text/css">
}
  body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #e8e8e8;
}

article {
  width: 800px;
  margin: 20px auto;
  box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
}

section {
  text-align: center;
  padding: 20px 40px;
}

section:nth-child(odd) {
  background: #ccc;
}

h1 {
  text-align: center;
}

img {
  border: 1px solid black;
  margin-right: 20px;
}

.base img {
  width: 400px;
  height: 300px;
  margin-left: -37px;
  margin-top:-53px;
  z-index: 0;
}

.fill img {
  object-fit: fill;
  margin-left: -1100px;
  border-radius: 25px
}

.contain img {
  object-fit: contain;
}

.cover img {
  object-fit: cover;
}

.scale-down img {
  object-fit: scale-down;
}

.none img {
  object-fit: none;
}
#rcorners1 {
  background-color: white !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  text-align: center !important;
  position: absolute;
  width: 350px !important;
  height: 60px !important;
  z-index: 2;
  margin-top: 217px;
  margin-left: 30px;
  opacity:0.9;
}
#rcorners {
  position: absolute;
  z-index: 1;
  width: 400px;
  height:350px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  -webkit-box-shadow: 0 0 0 4px white, 0 5px 3px black;
  -moz-box-shadow: 0 0 0 4px white, 0 5px 3px black;
  box-shadow: 0 0 0 4px white, 0 5px 3px black;
  background-color: white;

}


.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
.resim-zoom{
  position: relative;
  z-index: 0;
  -webkit-transform: scale(1);
   -ms-transform: scale(1);
    -moz-transform: scale(1);
     transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
       -webkit-transition: all .3s ease-in;
        -ms-transition: all .3s ease-in;
         }
         .resim-zoom:hover{
          z-index:3;
           -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
             -moz-transform: scale(1.5);
             transform: scale(1.5);
           }    
</style>
</head>
<body>

    </style>  
</head>
<body style = "background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;background-position: center; background-image: url(https://3.bp.blogspot.com/-O6t8kFrS07k/T3Lftx6TG6I/AAAAAAAAP4Y/6grRiq6y6uY/s1600/backgroud-blue-sea.jpg)">

<div id="rcorners"><p></p><section class="base base"><img class="resim-zoom" style="border-radius: 15px;border:0" src="https://mscmedx.net/wp-content/uploads/2020/07/seo-1187x800.png"></div></section>

  <div id="rcorners1">
<p style="margin-top: 15px; font-family: 'Roboto', sans-serif;font-size: 15px;text-align: center;">SEO Hizmeti <br><button class="teklif teklif1">Teklif Al <i class="fa fa-shopping-cart"></i></button></p>
</div>
</div>
</body>
</html>

Merhabalar bugün web sitesi tasarlarken bir sorunla karşılaştım. Bu sorun mouse üzerine geldiğinde büyüyen resmin div'in dışına taşması. Aşağıya kodları bırakıyorum. Desteğinizi bekliyorum.

Atakan D. · 16 Eylül 2020

Aynı sorunu ben de yaşıyorum. Olayı responsive, ve media ile çözecekmişsin. Benzer konuyu ben de açtım.

Galip Akcan · 16 Eylül 2020

Atakan D. dedi:
Aynı sorunu ben de yaşıyorum. Olayı responsive, ve media ile çözecekmişsin. Benzer konuyu ben de açtım.

Sen çözebildin mi?

dgknbzglu · 16 Eylül 2020

Galip Akcan dedi:
Merhabalar bugün web sitesi tasarlarken bir sorunla karşılaştım. Bu sorun mouse üzerine geldiğinde büyüyen resmin div'in dışına taşması. Aşağıya kodları bırakıyorum. Desteğinizi bekliyorum.

HTML:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style type="text/css">
.resim{
    width: 500px;
    height: 281px;
    background:url("https://mscmedx.net/wp-content/uploads/2020/07/seo-1187x800.png");
    background-size: 100% auto;
    background-position: 50% 50%;
    transition: background-size  .2s;
  }
.resim:hover{
    background-size: 130% auto;
}
</style>
</head>
<body>
<div class="resim"></div>
</body>
</html>

Bence şöyle basit bir şekilde çözebilirsin, fakat mobil uyumu olmayacaktır.
Framework kullanmalısın. Bootstrap gibi...

Galip Akcan · 16 Eylül 2020

dgknbzglu dedi:

HTML:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style type="text/css">
.resim{
    width: 500px;
    height: 281px;
    background:url("https://mscmedx.net/wp-content/uploads/2020/07/seo-1187x800.png");
    background-size: 100% auto;
    background-position: 50% 50%;
    transition: background-size  .2s;
  }
.resim:hover{
    background-size: 130% auto;
}
</style>
</head>
<body>
<div class="resim"></div>
</body>
</html>

Bence şöyle basit bir şekilde çözebilirsin, fakat mobil uyumu olmayacaktır.
Framework kullanmalısın. Bootstrap gibi...

Biraz daha detaylı anlatır mısın?

dgknbzglu · 16 Eylül 2020

Yapmaya çalıştığın şey her ne ise, mobil uyumlu hale getirmen gerek. Günümüzde bilgisayar üzerinden ne kadar ziyaret ediliyorsa mobilden de bir o kadar ziyaret alıyor siteler. Bu yüzden Bootstrap öğrenebilirsin.

Bootstrap Nedir? Kapsamlı Acemi Rehberi

Bootstrap nedir öğrenmek ister misiniz? Bu rehberimizde son derece popüler olan bu framework'ü kapsamlı biçimde anlattık.

www.hostinger.web.tr

HTML Yakınlaştırma Hatası

Ayrıntılı düzenleme

Galip Akcan

Hectopat

Atakan D.

Kilopat

Galip Akcan

Hectopat

dgknbzglu

Kilopat

Galip Akcan

Hectopat

dgknbzglu

Kilopat

Bootstrap Nedir? Kapsamlı Acemi Rehberi

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz