lostyazilim
tr.link

Div kutucuk sorunu :)

10 Mesajlar 2.393 Okunma
acebozum
tr.link

MehmetMasa MehmetMasa WM Aracı Kullanıcı
  • Üyelik 05.10.2016
  • Yaş/Cinsiyet 26 / E
  • Meslek Yazılımcı
  • Konum İzmir
  • Ad Soyad M** M**
  • Mesajlar 1946
  • Beğeniler 552 / 554
  • Ticaret 40, (%100)
Merhaba arkadaşlar, Öğrene öğrene html/css tema kodlamaya çalışıyorum.

Site mobil, tablet tarzı şeylerde açıldıgında görüntünün kaymaması için divleri şu şekilde yapmak istiyorum.

Büyük bir tane div bunun içinde sağ taraf için bir div %70 kaplicak şekilde post div
ve sol tarafa %30 kaplicak şeklinde sosyal medya, arama bölümü vsnin olacagı div.
ve bunun içerigi olan divler şekllinde olmasını istiyorum.
Büyük bir div oluşturdum bunun içine postun %70i kaplicagı div oluşturdum css verdim ve %30 kaplicak divi oluşturdum css verdim bunları 1 div içine alınca kayma oluyor almayınca yan yana gelmiyor :(
Tam anlamadınız kodlar ile örnek vereyim.










Burası post bölümü yani sayfanın sağ tarafında ki %70lik alanı kaplicak yer.
En büyük divde sağdan soldan boşluk vermek istiyorum..
#enbuyukdiv {margin-right:105px; margin-left:105px;}

Post Css;

#post {float:left; width:790px; height:565px; background-color:#34495E; margin-bottom:15px; } büyüklük ve uzunlugu %li olarak yazıyorum ama gelmiyor buda farklı sorunum.







    Arama Yap





    Giriş Yap





    Sosyal Medya








#buyukdiv {border:1px; border-style:solid; border-color:#f4f4f4; float:right; width:50%;}
#enbuyukdiv {margin-right:105px; margin-left:105px;}

Birde fotograf bırakayım.

http://i.hizliresim.com/j8azlg.png
http://i.hizliresim.com/1L3j8b.png
 

 

wmaraci
reklam

onur1989tc onur1989tc Kimlik Onayı Bekliyor Banlı Kullanıcı
  • Üyelik 21.04.2017
  • Yaş/Cinsiyet 35 / E
  • Meslek WordPress
  • Konum İzmir
  • Ad Soyad O** K**
  • Mesajlar 35
  • Beğeniler 8 / 9
  • Ticaret 0, (%0)
Merhabalar. Birine float: left verirken diğerine right vermelisiniz. Bir de ilk kodunuzdaki div açılış-kapanış sayıları birbirini tutmamakta.









Html böyle olsun. CSS ise şöyle olmalı.

#Tum {
width: 1000px;
margin: 0px auto 0px auto; //ortalama için
}
#Sol {
width: 595px; //5px ara boşluk. Normalde 600 olacaktı.
float: left;
}
#Sag {
width: 395px; //5px ara boşluk daha. toplamda 10px boşluk bıraktık.
float: right;
}

Not: paddingx2+marginx2+borderx2 yani bu değerler de varsa bunlar hangi div'e eklendiyse o div genişliğinden çıkartılır.
CezaLet

kişi bu mesajı beğendi.

MehmetMasa MehmetMasa WM Aracı Kullanıcı
  • Üyelik 05.10.2016
  • Yaş/Cinsiyet 26 / E
  • Meslek Yazılımcı
  • Konum İzmir
  • Ad Soyad M** M**
  • Mesajlar 1946
  • Beğeniler 552 / 554
  • Ticaret 40, (%100)
En büyük div'in kapanışı footer div açılışının hemen üstünde

Hocam bir tane büyük div olucak bütün hepsini kapsayan, bunun içinde post divi kapsayan bir div ve post div olucak.
Büyük div menü ve footer arasında kalan yeri kaplicak şekildle olucak
İcerikdiv'in içinde 1 tane post div olucak içerikdiv %70 ile sol tarafa sabitlenicek ve içindeki post divler işlem görücek.
İcerikdiv kapatılacak yine Enbuyukdiv'in içinde
buyukdiv açılacak bu div ise %30 ile sağ tarafa sabitlenecek ver içerisinde giriş yapma, sosyal medya bölümü, arama bölümü olucak.
Divler sabitlenicek sabitlenen divler içerisinde div açıp tema oluşturucak divler % ile sabitlendiginden sayfa kayma sorunu olmayacak :)
 

 

cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)






Buradaki kodlarda bir kapanış etiketi eksik, yani div açılmış ama kapanmamış, 3 div var 2 kapanış etiketi var.

Diğer verdiğinizde de en sonda bir tane fazladan kapanış div etiketi mevcut. Bunlara dikkat etmelisiniz. Kayma sorunlarının temel nedenlerinden birisidir bunlar zaten.
 

 

wmaraci
wmaraci

MehmetMasa MehmetMasa WM Aracı Kullanıcı
  • Üyelik 05.10.2016
  • Yaş/Cinsiyet 26 / E
  • Meslek Yazılımcı
  • Konum İzmir
  • Ad Soyad M** M**
  • Mesajlar 1946
  • Beğeniler 552 / 554
  • Ticaret 40, (%100)
üstte açıkladıgım gibi en altta 1 tane fazla dediginiz üstteki divin kapanışı :) O div menü ve footer arasını kaplayan büyük bir div :) içerisinde 2 tane daha oluşturup birini %70 sol diğerini %30 sağ tarafa yerleştirip içlerinde divlerle işlem yapmak istiyorum tahminimce kayma işlemini engelleyecektir.
 

 

cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)

mehmetmasa adlı üyeden alıntı

üstte açıkladıgım gibi en altta 1 tane fazla dediginiz üstteki divin kapanışı :) O div menü ve footer arasını kaplayan büyük bir div :) içerisinde 2 tane daha oluşturup birini %70 sol diğerini %30 sağ tarafa yerleştirip içlerinde divlerle işlem yapmak istiyorum tahminimce kayma işlemini engelleyecektir.


Tam olarak tüm html ve css kodlarınızı ekleyin konuya yardımcı olayım sorun hakkında. Bu arada beni etiketlerseniz ya da mesajımı alıntı yaparsanız konuyu takip edebilirim. Daha hızlı iletişim sağlanır.
 

 

MehmetMasa MehmetMasa WM Aracı Kullanıcı
  • Üyelik 05.10.2016
  • Yaş/Cinsiyet 26 / E
  • Meslek Yazılımcı
  • Konum İzmir
  • Ad Soyad M** M**
  • Mesajlar 1946
  • Beğeniler 552 / 554
  • Ticaret 40, (%100)
cgrclk Hocam yan yana getirme sorununu çözdüm gözümden ufak birşey kaçmış ama şimdi post bölümünde pikselleri %li olarak ayarlayamadıgım için mobil ve tablet görünümde felan iç içe giriyor onu nasıl yapıcam çözemedim :) width:70% yazıyorum hiç birşey çıkmıyor mesela






Amatör Yazarlar








<script></script>
<script></script>










    Arama Yap





    Giriş Yap





    Sosyal Medya















Resimleride ekleyeyim.

http://i.hizliresim.com/69Elj7.png
http://i.hizliresim.com/vblQqv.png
 

 

cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)
Sadece kapsayan divlerin genişliklerini yüzdelik olarak ayarlaman yeterli olmaz, içeridekileri de uyumlu hale getirmen lazım. Onların genişliklerini de yüzdelik olarak ayarlamalısın.
 

 

MehmetMasa MehmetMasa WM Aracı Kullanıcı
  • Üyelik 05.10.2016
  • Yaş/Cinsiyet 26 / E
  • Meslek Yazılımcı
  • Konum İzmir
  • Ad Soyad M** M**
  • Mesajlar 1946
  • Beğeniler 552 / 554
  • Ticaret 40, (%100)
cgrclk Hocam dediklerinizi yaptım istedigim şekli almaya başladı ama hala ufak bir sorunum var :) Mobilden açıldıgında webte yan tarafta gözüken giriş yapma, arama kutucukları alt tarafa insin :)
Bunu nasıl yapabilirim kaynak vs var mı?

http://i.hizliresim.com/ZZaWqg.png
http://i.hizliresim.com/Npd3oQ.png
http://i.hizliresim.com/EgBb0v.png
http://i.hizliresim.com/oja25Q.png
 

 

onur1989tc onur1989tc Kimlik Onayı Bekliyor Banlı Kullanıcı
  • Üyelik 21.04.2017
  • Yaş/Cinsiyet 35 / E
  • Meslek WordPress
  • Konum İzmir
  • Ad Soyad O** K**
  • Mesajlar 35
  • Beğeniler 8 / 9
  • Ticaret 0, (%0)
Bir şey bilmeden sıfırdan tema yapamazsın. Sabahtan akşama kadar soru sorar durursun sadece. Benden sana tavsiye, soru sormaktansa araştır. Biz soru sormadan öğrendik demiyorum, ama bu kadar sık sormadık, sormaktan çok araştırdık. Buyur, mobile göre kodlama için CSS media kullanmalısın.

https://www.w3schools.com/css/css3_mediaqueries_ex.asp
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)