CSS beceriksizliğim

[Aket-Atum]

Başlarken belirteyim, CSS'i şu ana kadar style="" şeklinde tag dışında hiç kullanmadım, bir deneyimim yok yani konu ile ilgili.

Olayı şuraya sordum

http://stackoverflow.com/questions/35951280/overriding-css-properties

Biri güzel bir cevap vermişti ama sonra sildi falan. hala yapamadım işi.

Şimdi durum şu. Sitede hali hazırda ufak bir menü vardı, ben bunu değiştirmeye çalışıyorum. Şeklini önce hallederim, basınca seçeneklerin açılması kısmı zorlar diye düşünürken css devreye girdi ve beni ezdi.

Problem: Nedense listeyi içine koyduğum sidebar düz beyaz gözüküyor. Page sourcetan bakınca orada birşeyler var ama gözükür değiller. !İmportantlarla denedim de bana mısın demedi.

Yapmaya çalıştığım yapı şu

A
-1
-2
-3
B
-1
-2
-3
C
-1
-2
-3

Burada A,B ve C ana başlık, 1,2,3 ler de link olacak.

Problem ise, yapıyı html'de yazıyorum ama sidebarda gözükmüyor.

Eski halinde nedense sadece tagı içerisindekiler gözüküyordu ama o da istediğim işe yaramasını engelliyordu. Takıldım kaldım, var mıdır yardım edebilecek biri?

[di]

Abi block ve non-block elementleri ve nasi kullanildigini cozmen lazim oncelikle. Bir de hangisi hangisini kapsar, hangisi nerde kullanilmaz.

A default olarak non-block element mesela. Genislik yukseklik verdiginde sallamaz + li, h1 vesaire A icine konulmaz, tam tersine A onlarin icinde yer alir.

Bir de verdigin CSS "usermenu" id'li ve "mail-container" class'li elementin altindaki .mail-header altindaki .header-buttons altindaki li altindaki a diye gidiyo ama HTML icinde bulamadim ben onu. CSS'inin point ettigi yerin var olmamasi muhtemel.

Ek olarak boyle deneme yanilma ile olmaz, ac inspector'i, orda yap ne yapiyosan, sonra editorune gecir. Sac bas yolmaktan kurtarir seni.

[Aket-Atum]

Abi css classlar falan dediğim gibi bilmediğim şeyler, Lead de sağolsun trip atıyor bu aralar soramıyorum birşey.

mesela şu ikisi

#usermenu.mail-container .mail-header .header-buttons li a {
width: 32px;
height: 32px;
border: 1px solid #FFF;
}

#usermenu.mail-container .mail-header .header-buttons li a i {
color: #FFF;
font-size: 16px;
line-height: 30px;
}

en sondaki (ilkinde a , ikincisinde a i) elementi mi etkiliyor bunlar? 4-5 tane div içinde olacak tak diye sadece onu bulup mu etkileyecek?

edit: O ilk ikisi sayfanın ayrı bir yerindelermiş :D

[di]

Abi deployment yapiyorum ben as usual, haliyle oturup anlatamicam ama surda selector'lardan baslayip devam edersen kafa karisikliklari hizlica cozersin gibi geldi;

http://codingdomain.com/webdevelopment/css/crash-course/

[Korax]

soruyu tam anlasaydim yardim edebilirdim belki sdf

buarada di'nin dedigi mevzuya mutlaka bak, yoksa html kisminda da sacmasapan bisey cikar ortaya.

Aket-Atum said:

mesela şu ikisi

#usermenu.mail-container .mail-header .header-buttons li a {
width: 32px;
height: 32px;
border: 1px solid #FFF;
}

#usermenu.mail-container .mail-header .header-buttons li a i {
color: #FFF;
font-size: 16px;
line-height: 30px;
}

en sondaki (ilkinde a , ikincisinde a i) elementi mi etkiliyor bunlar? 4-5 tane div içinde olacak tak diye sadece onu bulup mu etkileyecek?

edit: O ilk ikisi sayfanın ayrı bir yerindelermiş :D

evet

atiyorum bi div'in icindeki bi elementi secip onun uzerinde islem yapmak istiyosun, div'in class'i ahmet olsun, icinde de mehmet class'ina sahip baska bi element olsun ve bu mehmet class'ina sahip elementin icinde bi table elementi olsun.

bu table elementini secmek icin

div.ahmet .mehmet table { color: #fff; }

gibi yazabilirsin. Ya da table'a direk bi class verip table.classIsmi olarak ta secebilirsin. Yukardakinin bilale anlatir gibi versiyonu: "ahmet classina sahip olan div elementinin icinde mehmet class'ina sahip olan elementlerin icindeki table'i secip rengini #fff yap" demis olduk.

[pulkas]

yaptigin isin cok basindaysan eger;

1: pingendo http://pingendo.com/

default empty page ac bi tane.solda componentlerden layoutunu olustur.icine navbarini sidebarini yap.sag panelde tasarimda sectigin elemanin css attributelari geliyo.oradan da ver stili..sagdaki panelde stili verirken id atarsin bide.o idye eder sag paneldeki stiller yetersiz geliyosa altta
html/ css yazar.oradan css bolumunun en altina istedigin teraneyi yaz sonra.

2: pinegrow http://pinegrow.com/
yukaridakilerin aynisini yapiyosun asagi yukari.fakat ekstra bunda neredeyse butun css taglarini sidebarlardan kontrol edebiliyosun.yeni tag olusturmak falan cok basit.

3: dreamweaver
bootstrap falan kullanmayacaksan eger hiyerarsiyi takip etmek cok kolay bunda.tasarimla kod ic ice.bi yandan html yazip idleri classlari atadiktan sonra live view i acip takir takir css i giydirebilirsin.

4: codepen http://codepen.io/pen/
yaptigin herseyi adim adim takip edebilirsin.ote yandan firefox yada chromeda inspect element dersen an be an dreamweaver daki live view gibi yaptigin herseyi takip edersin.

codepende ayrica yapilmis sittirilyon tane calisma var.onlari copy/paste yapip duzenleyip nasil calistiklarini inceleyebilirsin.

hayirli forumlar

http://www.hayatinanlaminedir.com/resimler/2013/09/bana-bal%C4%B1k-tutmay%C4%B1-%C3%B6%C4%9Fret.jpg

https://goo.gl/JQ8xhC

[pulkas]

suda ilham kaynagi olarak dursun : http://www.awwwards.com/awards-of-the-day/

[Aket-Atum]

Korax said:

soruyu tam anlasaydim yardim edebilirdim belki sdf

abi anlatım için çok sağol, cidden öyle anlatılmasına ihtiyacım vardı :D

Sorum da, "ulan neden bu sidebar divinin içinde bu meret gözükmüyor". page sourceta bakınca orada ama işte..birşeyler engelliyor

[Editor]

pulkas ne kadar çöp bilgi dolduruyorsun yahu

[Revangelis]

Anladigim kadariyla ana divinin height almasi icin birsey yapmamissin, float veya height verip baksana
Hic anlamamis da olabilirim tabi sdf

[Kojiroh]

Position absolute falan olabilir bikaç yerde, bundan dolayı da bi şeyler bi şeylerin üzerine çıkıp görünmesini engelliyo olabilir.

Ama hayal etmesi zor işte, yazılarla backround'un aynı renkte olmasına kadar her şey olabilir. O yüzden bence en iyisi sen kodu bi yere koy (codepen'dir jsfiddle'dır) ordan bakalım

[Aket-Atum]

Valla bir şekile hallettim, tree menu gözüküyor en azından ama beğendiremedim :D

farklı birşeyler yapacağız.

Şimdiki belam ajax :D

[nienna]

pratik için kendim layout yazayım dedim de problemim var ben de sorayım.

header, footer {
padding: 0px;
color: white;
background-color:rgb(0,128,192);
height:80px;
box-shadow: 5px 5px grey;
text-align:center;
line-height:80px;}

position fixed eklersem olmuyor, tarayıcı boyutunu override edip nasıl sabit bi genişlik ayarlayabilirim? şu an tarayıcı penceresine göre boyutlanıyor.

[ad3m]

width
max-width

[ad3m]

Sabit genişlik width bu arada max olanı boyuta göre ölçekler kendini ama neden böyle birşey istiyorsun ki?