Bu bölümü kutu içine almak

[aybars]

https://hizliresim.com/4BfiZr

Üstadlardan aşağıdaki resimde çizmiş olduğum yeri kutu içine alma şansım var mı sormak istiyorum. Bu benim ve bir çok başka arkadaşın çok işine yarayacak eminim. Kolaydır belki ama bazen insan zorlanıyor.

[tarantula901]

resimleri sitenin ekine ekleyebilirsiniz.

index.cssde ara

Kod Seç Genişlet

.navigate_section {
    padding: 0.5em;
    margin: 0 0 0 0;   
}
şununla değiştir.

Kod Seç Genişlet

.navigate_section {
    padding: 0.5em;
    margin: 0 0 0 0;
    border: 1px solid #d8d8d8;
    border-radius: 7px;
}

[aybars]

çok teşekkür ederim üstadım. harika oldu

[aybars]

siteye resim ekleme yerini bulamadım:=)

üstad yukarıdaki kodu resimdeki bölüme de yapmak istiyorum. menüyü de kutu içine almak için aradım ama bulamadım.nereye koymalıyım?

[aybars]

/* clearing the floats */
#top_section
{
   /* min-height: 65px; */
   overflow: hidden;
   /* margin-bottom: 3px; */
border: 3px solid #d8d8d8;
    border-radius: 7px;

eklediğim zaten sitenin logosu ile beraber kutu içine alıyor:=)

[aybars]

Üstad verdiğin kodları deneyerek ilk bölümü gayet güzel hele getirdim ama menüyü kutu içine alamadım

[tarantula901]

ara

Kod Seç Genişlet

#main_menu {
    padding: 0 0.5em;
    float: left;
    margin: -20px 0;
    width: 98%;
}
değiştir.

Kod Seç Genişlet

#main_menu {
    padding: 5px 0.5em;
    float: left;
    margin: -20px 0;
    width: 98%;
    border: 1px solid gray;
}

[aybars]

sağ üstad nokta atışı yine.iyi ki varsınız.

son olarak bu kutunun iç dolgusuna renk eklemek için ne yapabiliriz.?

[aybars]

müsait olduğunda buna bakarsan sevinirim üstad.

[tarantula901]

bahsettiğiniz link ağacı için ise

ara

Kod Seç Genişlet

.navigate_section {
    padding: 0.5em;
    margin: 0 0 0 0;
    border: 2px solid #5A9A80;
    border-radius: 7px;   
}
değiştir.

Kod Seç Genişlet

.navigate_section {
    padding: 0.5em;
    margin: 0 0 0 0;
    border: 2px solid #5A9A80;
    border-radius: 7px;
    background: #dedede;
}
background: #dedede; kodundaki rengi istediğiniz renkle değiştirebilirsiniz.

[aybars]

üstad ellerine sağlık gayet güzel oldu. sağ olasın. Lakin zemin koyu olunca yazı rengi belirginliğini kaybetti. yazı rengini nasıl değiştirebilirim acaba?

[tarantula901]

Bahsettiğiniz navigate_section  ise

link'de değişiklik istiyorsanız.

ara

Kod Seç Genişlet

.navigate_section ul li a {
    white-space: pre;   
}

değiştir.

.navigate_section ul li a {
    white-space: pre;
    color: red;
}

color: red; yazan kısımdaki red kısmına istediğiniz renk koduyla değiştirin.

[aybars]

Üstad o verdiğin menünün bir altı oldu. ben ise bunu kast etmiştim. Burada yazıyı beyaz renk yapmak istedim.

[tarantula901]

index.cssde bulunan 

Kod Seç Genişlet

.dropmenu a {
    display: block;
    color: #000;
    text-decoration: none;
}
color: #000; yazan kısımdaki renk kodunu değiştirebilirsiniz.

[aybars]

Çok güzel oldu üstad çok teşekkür ederim. Ellerine sağlık.

Bu arada font-weight: bold; ekledim kalınlaştırdım

[tarantula901]

Çok güzel oldu üstad çok teşekkür ederim. Ellerine sağlık.

Bu arada font-weight: bold; ekledim kalınlaştırdım

ufak tefek css ogrenirseniz sitenizde ddgisiklikler yapabilirsiniz

[aybars]

Eyvallah üstad ekteki resimde siyahla karaladığım yer biraz daha uzun oluyor. aşağıdakini denedim ama olmadı.


#main_menu {
    padding: 5px 0.5em;
    float: left;
    margin: -20px 0;
    width: 96%;
    border: 2px solid #5A9A80;
    border-radius: 17px;
    background: #5A9A80;

[aybars]

%97 98 100 vs denedim ama ya uzun ya kısa oluyor alttakinden

[tarantula901]

 Kodda bulunan paddigden dolayi ondaki sayilari dusurup deneyin

[aybars]

eskisi bu

#main_menu
{
   padding: 0 0.5em;
   float: left;
   margin:-20px 0;
   width: 98%;
}

son hali ise:

#main_menu {
    padding: 5px 0.5em;
    float: left;
    margin: -20px 0;
    width: 98%;
    border: 2px solid #5A9A80;
    border-radius: 5px;
    background: #5A9A80;
}

padding eskisine döndürdüm bu sefer boşluk oluşuyor.

[aybars]

Şunu

@media screen and (max-width: 720px) {
#upper_section a img
{
 height: 100px;
}
}




Bununla değiştirdim.


@media screen and (max-width: 720px) {
#upper_section a img
{
 height: 100px;
}
#main_menu {
    width: 95%;
}
}

bu şekilde çözdüm.

[tarantula901]

İşi çözmüşsünüz tebrikler.