Change A Href All Colors with CSS


Change A Href All Colors with CSS

a, a:link, a:visited, a:hover, a:active {
  color: #fff;
}


Vertical Align Center


Yatay/Dikey Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Sadece Dikey Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Sadece Yatay Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

Div İçinde Span Ortala

<div class="container">
  <button class="center">PHP</button>
</div>

.container {
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.center {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}


CSS Üç Nokta


CSS ile cümle sonuna üç nokta ... ile sınırlandırmak istiyorsanız aşağıdaki CSS kodunu ilgili elemana uygulayın.

.ucnokta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Adım adım Html5 Temel Web Site Kurulumu


Html5 Web Tutorial with Folder Structure

Burada gördüğünüz klasör yapısı standart bir Html5 web projesinin ilk halidir. Bazı farklılıklar olabilir. Örneğin css, js klasörleri dist veya assist gibi bir klasör içinde yer alabilir. Fakat temel olan ve benim de tavsiye ettiğim yapı budur. Gelelim bu yapıyı güncel haliyle nasıl kuracağımıza;

Not: Burada bir backhand developer olarak bir proje yaptığınızı varsayıyorum. Yani tamamen işiniz kodlar ile. Bu işi bir program (Adobe XD, Figma vs) yapıyor iseniz zaten bu tarz frontend yazılımlar size kodları hazır halde verecektir.

1. Bir web projesi için kolları sıvadığınızda ilk iş olarak temel yapıyı oluşturmak istersiniz ve bunu güncel araçlarla kurmayı dilersiniz. Ben burada microsoft, nike gibi firmalar tarafından da kullanılan HTML5 Boilerplate'i seçtim. Bu araç size standart yapıyı verecektir.

2. https://html5boilerplate.com/ adresinden son versiyonu indirin ve tüm klasörleri sitenizin root'una upload edin.

3. Bu yapıda hazırda yerleşik olmayan ama işimizi kolaylaştıracak Bootstrap framework'ü kendimiz entegre edicez. Böylece son versiyonu kullanmış oluruz. https://getbootstrap.com/ adresinden indirip upload ediniz. Zaten css ve js olarak iki klasörden oluşmakta. Bunları mevcut olanların içine eklemiş olacaksınız.

4. index.html sayfanızın head bölümünde tüm css'lerin en üstüne bunu ekleyin:

<link rel="stylesheet" href="css/bootstrap.min.css">

5. Bu iki js dosyasını (yok ise popper.min.js indirip upload edin) jquery dosyasının çağırıldığı koddan sonraya ekleyin:

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

6. Şablonunuz hazır. Artık header, content ve footer bölümlemelerinizi yaparak sayfanızı tasarlayabilirsiniz.

Bu yazıda sizlere temel ve güncel bir HTML5 şablonunun nasıl oluşturulacağını anlatmaya çalıştım.

Bootstrap Sık Kullanılan Css Class ve Anlamları

Hizalama için:
class="text-left"    Sola hizala
class="text-center"  Ortala
class="text-right"   Sağa hizala
class="text-justify" İki yana hizala
class="text-nowrap"  Nowrap
...

CSS Güzel Düğmeler (CSS Buttons)

Güzel tasarlanmış element içerebilen düğmeler hazırlamak istiyorsanız şu sitelerdeki örneklere bakmanızı tavsiye ederim:

http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/


CSS Sık Kullanılan Komutlar

CSS kullanırken sık sık ihtiyaç duyduğumuz komutlar hakkında detaylı bilgileri aşağıdaki adreslerde bulabilirsiniz:
CSS position
http://www.fatihhayrioglu.com/css-ile-konumlandirmapositioning/

CSS margin
http://www.fatihhayrioglu.com/kutu-modeli-margin-ozellikleri/

CSS eksi margin
http://www.fatihhayrioglu.com/eksi-margin-kullanimi/

CSS float ve clear
http://www.fatihhayrioglu.com/float-ve-clear-ozellikler-ile-konumlandirma/

img etiketindeki alt parametresi Firefox'da çalışmıyor

img etiketi kullandığınızda alt parametresi ile resme bir açıklama yazdırmak istiyorsanız, bu parametrenin Internet Explorer (IE) ile çalıştığını fakat Firefox ile çalışmadığını göreceksiniz.
Bu nedenle alt etiketi yerine her iki tarayıcıda da çalışan title parametresini kullanınız.

img src="bayrak.jpg" alt="Türk Bayrağı"> yerine
img src="bayrak.jpg" title="Türk Bayrağı"> şeklinde kullanın.
Bu arada a href etiketi için de title parametresi kullanın. Sorun çıkmayacaktır.

Firefox ile Css Yazarken background-image Sorunu Nasıl Çözülür?

Aşağıdaki kod a href komutu ile link verme işine yarıyor. Burada link verilen şey bir resim ve linkin üzerine gelince başka bir resim çıksın isteniyor. Bu işlem için a href komutunun hover özelliğinden yararlanılıyor.
1. Html içine şu şekilde ekleniyor:
a href="#" id="linkfotograf">< / a >

2. Css komutları ise şu şekilde:
#linkfotograf
{
width:260px;
height:35px;
background-image:url(/resim/menu_fotograf.jpg);
background-repeat:no-repeat;
}
#linkfotograf:hover
{
background-image:url(/resim/menu_fotograf1.jpg);
background-repeat:no-repeat;
}

Kod yukarıdaki şekliyle Internet Explorer ile çalışıyor fakat Mozilla Firefox yada Google Chrome ile linkin olduğu yer boş görünüyor. Bunun nedeni a href komutunda resmin sığacağı gerekli boşluk sağlanmamış olmasıdır. Resim 260-35 boyutunda. Fakat biz a href> ile < /a > arasına birşey yazmadığımız için gerekli genişlik ve yükseklik oluşmamış oluyor. Bunun çözümü ise CSS kodlarında display: block; satırını eklemektir. İşte bu kadar basit. Böylece a href komutu arasında sanki bir blok varmış gibi görünecektir. Böylece resmin görünebileceği boyutlar oluşmuş olacaktır. CSS kodunun son hali şu şekilde olacaktır:
#linkfotograf
{
display: block;
width:260px;
height:35px;
background-image:url(/resim/menu_fotograf.jpg);
background-repeat:no-repeat;
}
#linkfotograf:hover
{
background-image:url(/resim/menu_fotograf1.jpg);
background-repeat:no-repeat;
}

Firefox'da CSS Border Sorunu Yaşıyorsanız...

CSS Border kodlarınız İnternet Explorer'da çalışıyor, fakat Firefox tarayıcısında neden çalışmıyor ve nasıl yapılır diyorsanız işte çözümü:
css border kodunuzu kontrol edin "border:1 solid #000000" gibi yazan bir kod varsa oradaki 1'in yanına px yani pixel ekini yazın "border:1px solid #000000". İşte bu kadar. Aslında bu tip hatalar hep kodları kurallara uygun yazmamaktan oluyor.