Bootstrap Yardım

01-03-2018, 12:14:52

Arkadaşlar merhaba,
Bilenlere çok komik gelecek bir sorunum var (=
Bootstrap 3.0.2 ile hazırladığım bir sitem var, burada solda fixed bir side div im mevcut. Yine üstte fixed top navbar ım mevcut. Özel bir tema kullanmıyorum, standart Bootstrap yapısı, basic design.
Şimdi sorunum şurada, soldaki div i scroll overflow y yapmak istiyorum, css yazıyorum da, ama bir türlü halledemiyorum. Daha doğrusu tarayıcıda kod bir türlü çalışmıyor.

<div class="row">
  <div class="side-menu">
    <nav class="navbar navbar-default" role="navigation">

şeklinde başlıyor,

.side-menu {
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
overflow-y: scroll;
}
.side-menu .navbar {
border: none;
}

şeklinde de CSS bölümü var.
Sizce nerede hata yapıyorum?
Şimdiden çok teşekkürler.

01-03-2018, 13:38:44

#2

AspavA

ozraksy adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar merhaba,
Bilenlere çok komik gelecek bir sorunum var (=
Bootstrap 3.0.2 ile hazırladığım bir sitem var, burada solda fixed bir side div im mevcut. Yine üstte fixed top navbar ım mevcut. Özel bir tema kullanmıyorum, standart Bootstrap yapısı, basic design.
Şimdi sorunum şurada, soldaki div i scroll overflow y yapmak istiyorum, css yazıyorum da, ama bir türlü halledemiyorum. Daha doğrusu tarayıcıda kod bir türlü çalışmıyor.
<div class="row"> <div class="side-menu"> <nav class="navbar navbar-default" role="navigation">
şeklinde başlıyor,
.side-menu { position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; overflow-y: scroll; } .side-menu .navbar { border: none; }
şeklinde de CSS bölümü var.
Sizce nerede hata yapıyorum?
Şimdiden çok teşekkürler.

https://jsfiddle.net/v06c8d3c/21/ işini görür sanırım

01-03-2018, 16:02:53

#3

Onur89TR

Tavsiyem önce manuel olarak yazmayı öğrenmeniz. Bootstrap başlangıç için kafa karıştırıcı olabilir.

01-03-2018, 19:31:13

#4

cesalp

ozraksy adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar merhaba,
Bilenlere çok komik gelecek bir sorunum var (=
Bootstrap 3.0.2 ile hazırladığım bir sitem var, burada solda fixed bir side div im mevcut. Yine üstte fixed top navbar ım mevcut. Özel bir tema kullanmıyorum, standart Bootstrap yapısı, basic design.
Şimdi sorunum şurada, soldaki div i scroll overflow y yapmak istiyorum, css yazıyorum da, ama bir türlü halledemiyorum. Daha doğrusu tarayıcıda kod bir türlü çalışmıyor.
<div class="row"> <div class="side-menu"> <nav class="navbar navbar-default" role="navigation">
şeklinde başlıyor,
.side-menu { position: fixed; width: 300px; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; overflow-y: scroll; } .side-menu .navbar { border: none; }
şeklinde de CSS bölümü var.
Sizce nerede hata yapıyorum?
Şimdiden çok teşekkürler.

height 100% veirsen scroll olmayacaktır. Belirli bir px vermen lazım ki aşağıya kaydırabilesin

02-03-2018, 20:41:30

#5

ozraksy

AspavA adlı üyeden alıntı: mesajı görüntüle

https://jsfiddle.net/v06c8d3c/21/ işini görür sanırım

cesalp adlı üyeden alıntı: mesajı görüntüle

height 100% veirsen scroll olmayacaktır. Belirli bir px vermen lazım ki aşağıya kaydırabilesin

Kıymetli cevaplarınız için çok teşekkürler, evet dediğiniz gibi, dik alan için height ta px istiyor. Ama anlayamadığım, bu menüyü ekrana fikslemenin herhangi bir yolu yok mu acaba?
Örnek olarak ekşi'deki yapıya baktım,

    <div id="index-section" class="robots-nocontent">
      <nav id="partial-index" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="clearfix dropdown ">
      <h2 title="157 başlık">gündem</h2>
</div>
<ul class="topic-list partial" data-timestamp="636556198861438990">

şeklinde başlayan gündemde tam böyle bir fiksleme yapmışlar. Buna benzer bir şey yapmam mümkün müdür?
Tekrar teşekkürler.

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Tavsiyem önce manuel olarak yazmayı öğrenmeniz. Bootstrap başlangıç için kafa karıştırıcı olabilir.

Teşekkürler kıymetli görüşleriniz için.

Arkadaşlar tekrar teşekkürler yardımlarınız için, sorunu hallettim, belki ihtiyacı olan olur diye buraya da yazayım;

    <div class="side-menu">
    <div class="kayar-menu">
    <nav class="navbar navbar-default" role="navigation">

.side-menu {
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
bottom: 0;
}
.kayar-menu {
position: absolute;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
overflow-y: auto;
overflow-x: hidden;
bottom: 0;
}