Css de border yüksekliğini nasil kontrol edebiliriz - Height Fix


Css kullanırken kenar çizgileri bazen nesne de taşma yapar ve kaymalara neden olur. Liste düzenin de oluşturduğumuz bir menü de fare üzerine gelince üst veya alt border değerini kullanarak efek vermek isteyebiliriz. Bu bir üst nesneyi etkiler ve yükseklik veya en değerlerinde değişme olur.



Bunun gibi durumlarda farklı alternatifler kullanabiliriz.

İlk Yöntem: Background kullanmak
background:url(line.png) bottom right no-repeat;

İkinci Yöntem: box-sizing

.div { 
 width: 300px; 
 height: 100px; 
 border: 3px solid blue; 
}

div tag en 306 boy 106 değerini alacak


.div { 
 width: 300px; 
 height: 100px; 
 border: 3px solid blue; 
 box-sizing: border-box; 
}

box-sizing padding ve border değerlerinden gelen ölçülerin nesneye eklemez, nesne varsayılan ölçüsünü kabul eder.

Üçün Yöntem: Sonuncu yöntemim ::after pseudo elementi
.main-menu > li:hover > a::after { 
 color: #333333; 
 content: '';
 height: 3px;
 width: 100%;
 position: absolute;
 right: 0;
 bottom: 0;
 background-color: #F56969;
}

Menüler için ideal bir yöntem. Width ve Height değerleri nesne için sabit olarak kullanılabilir.
Kullanabileceğim 3 yöntem pratik ve en az kodla şuan da bunlar.

0 yorum

Yorumda bulunarak kendin için, senden sonrakiler için ve bu blog için bir şeyler yazabilirsin. Durma sor, paylaş. Buraya bir hatıra bırak ;)

HTML: Bazı HTML etiketlerini kullanabilirsiniz.(b,a,i vb.)
UYARI: Yorumlar onaylanmadan direk yayınlanıyor. Yorumunuzun yayında kalması için etik kurallara dikkat edelim.

© Php, E-Ticaret ve Web Programlama
Blogger ozkistyle programmer theme
Released under Creative Commons 3.0 CC BY-NC 3.0