Garip bir CSS sorunu

04-10-2018, 02:01:49

<div class="pages">
   <a href="#">First</a>
   <a href="#">«</a>
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">»</a>
   <a href="#">Last</a>
</div>

.pages {    
   background-color: #f54242;  
   border-radius: 25px;    
   margin: 0px auto 0px auto;    
   padding: 7px 0px 7px 5px;  
}    

.pages a {    
   color: #fff;    
   padding: 4px 10px 4px 10px;    
   border-radius: 25px;    
   text-align: center;  
   font-weight: 600;    
   -webkit-transition: 0.3s;    
   transition: 0.3s;  
}    

.pages a:hover {    
   background-color: #fff;    
   color: #f54242;    
   -webkit-transition: 0.3s;    
   transition: 0.3s;  
}

Arkadaşlar kodlar yukarıdaki gibi sorun ise aşağıda resimde belirtilmiş. Bilgisayardan girince farklı, mobilden girince farklı görünüyor. Doğru görünüm mobilde ki gibi. Bilgisayardan girince son a etiketi ile .pages içeren div arasında sanki padding-right varmış gibi davranıyor tarayıcı ama aslında yok. .pages sınıfına baktığımızda "padding: 7px 0px 7px 5px;" yazıyor. Sağ iç boşluk 0 olmasına rağmen, sol iç boşluk 5px'den daha geniş duruyor. Resim olarak bilgisayar ve mobil görünümleri aşağıdadır.

Bilgisayar: https://i.hizliresim.com/5ybdnz.png
Mobil: https://i.hizliresim.com/pnlgNr.png

Not: Farklı bilgisayar ve telefonlarda denedim sonuç aynı. Bilgisayarda iken telefon genişliğine getirince bir şey değişmiyor. Telefondan giriş yapmak lazım. Localhost üzerinde çalıştığım için site adresi veremiyorum.

Edit: Link eklendi -> https://uygun.app/HTML/

04-10-2018, 02:06:43

#2

Misafir

owuzan adlı üyeden alıntı: mesajı görüntüle

<div class="pages">
   <a href="#">First</a>
   <a href="#">«</a>
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">»</a>
   <a href="#">Last</a>
</div>

.pages {    
   background-color: #f54242;  
   border-radius: 25px;    
   margin: 0px auto 0px auto;    
   padding: 7px 0px 7px 5px;  
}    

.pages a {    
   color: #fff;    
   padding: 4px 10px 4px 10px;    
   border-radius: 25px;    
   text-align: center;  
   font-weight: 600;    
   -webkit-transition: 0.3s;    
   transition: 0.3s;  
}    

.pages a:hover {    
   background-color: #fff;    
   color: #f54242;    
   -webkit-transition: 0.3s;    
   transition: 0.3s;  
}

Arkadaşlar kodlar yukarıdaki gibi sorun ise aşağıda resimde belirtilmiş. Bilgisayardan girince farklı, mobilden girince farklı görünüyor. Doğru görünüm mobilde ki gibi. Bilgisayardan girince son a etiketi ile .pages içeren div arasında sanki padding-right varmış gibi davranıyor tarayıcı ama aslında yok. .pages sınıfına baktığımızda "padding: 7px 0px 7px 5px;" yazıyor. Sağ iç boşluk 0 olmasına rağmen, sol iç boşluk 5px'den daha geniş duruyor. Resim olarak bilgisayar ve mobil görünümleri aşağıdadır.

Bilgisayar: https://i.hizliresim.com/5ybdnz.png
Mobil: https://i.hizliresim.com/pnlgNr.png

Not: Farklı bilgisayar ve telefonlarda denedim sonuç aynı. Bilgisayarda iken telefon genişliğine getirince bir şey değişmiyor. Telefondan giriş yapmak lazım. Localhost üzerinde çalıştığım için site adresi veremiyorum.

böyle sorunu kimse çözemez siteyi atın hocam

04-10-2018, 02:10:44

#3

owuzan

Misafir adlı üyeden alıntı: mesajı görüntüle

böyle sorunu kimse çözemez siteyi atın hocam

Hocam ilgili bölüm sadece bu kodlardan oluşuyor. Bir bakayım DuckDNS ile oluyorsa atayım.

Misafir adlı üyeden alıntı: mesajı görüntüle

böyle sorunu kimse çözemez siteyi atın hocam

Buyrun hocam: https://uygun.app/HTML/

04-10-2018, 02:41:17

#4

umitunver

böylemi istiyorsunuz?
http://prntscr.com/l1wjff

04-10-2018, 02:43:08

#5

owuzan

umitunver adlı üyeden alıntı: mesajı görüntüle

böylemi istiyorsunuz?
http://prntscr.com/l1wjff

Aslında hocam o sağdaki boşluk 0px olmasına rağmen soldakinden fazla. Evet böyle istiyorum ama mobilde'de böyle görünmesi lazım. -margin-right vererek bu hale sokabiliyorum ama bu sefer mobilde bozuluyor. Bu mobilde'de düzgün çalışıyor mu acaba?

04-10-2018, 02:45:13

#6

umitunver

owuzan adlı üyeden alıntı: mesajı görüntüle

Aslında hocam o sağdaki boşluk 0px olmasına rağmen soldakinden fazla. Evet böyle istiyorum ama mobilde'de böyle görünmesi lazım. -margin-right vererek bu hale sokabiliyorum ama bu sefer mobilde bozuluyor. Bu mobilde'de düzgün çalışıyor mu acaba?

Evet, marginlik iş yok hocam. padding sorunlu.
.pagination .pages {

background-color: #f54242;
border-radius: 25px;
margin: 0px auto 0px auto;
padding: 7px 5px 7px 5px;

}
Css 9. satır güncellermisiniz?

04-10-2018, 02:50:00

#7

owuzan

umitunver adlı üyeden alıntı: mesajı görüntüle

Evet, marginlik iş yok hocam. padding sorunlu.
.pagination .pages {

background-color: #f54242;
border-radius: 25px;
margin: 0px auto 0px auto;
padding: 7px 5px 7px 5px;

}
Css 9. satır güncellermisiniz?

Hocam normalde olması gereken bu, onun farkındayım ancak bu sefer sol ve sağ 5pc olmasına rağmen aradaki boşluk farklı dikkat ederseniz.

Soldaki boşluk: https://i.hizliresim.com/9N04BO.png
Sağdaki boşluk: https://i.hizliresim.com/qvVYXV.png

İki resim de dediğiniz ayarlarda aynı belge üzeründen çekildi. Dikkat edin siz de farkedeceksiniz.
Bunun tek açıklaması var bence, benim Google Chrome bozuk

04-10-2018, 02:52:15

#8

umitunver

Hocam ben öğeyi denetleden düzenliyorumda attığım ss de ki gibi düzgün sonuç veriyor

Çözemessemiz işimi bitirince yardım edebilirim

04-10-2018, 02:55:39

#9

owuzan

umitunver adlı üyeden alıntı: mesajı görüntüle

Hocam ben öğeyi denetleden düzenliyorumda attığım ss de ki gibi düzgün sonuç veriyor

Çözemessemiz işimi bitirince yardım edebilirim

Hocam ben şu an Mozilla Firefox üzerinde denedim doğru sonucu veriyor. Bilgisayar üzerinde ki Chrome yanlış sonuç veriyor nedense. Bazı özellikler gibi -webkit- ön eki kullanılacak bir özellik de değil ki bu kullanalım. Tek çare top right bottom ve left değerlerini ayrı ayrı yazmak sanırım

Teşekkürler ilginiz için.

Scarecrow adlı üyeden alıntı: mesajı görüntüle

.pages a:last-child {
padding-right: 15px;
}

Bu şekilde olması gerek.Fakat hocam bu tip işler için ul>li kullanmanız daha yararlı olacaktır.

Hocam en soldaki linkte zaten padding left 4px mevcut, ancak sağdaki linkte padding right 0px olmasına rağmen soldan fazla gösteriyor. Siz daha da fazla göstermişsiniz şu an. Ama sorun sanırım Google Chrome'dan kaynaklanıyor. Tüm yönler için ayrı ayrı yazmak şimdilik çözüm gibi duruyor.