Giriş Yap / Kayıt Ol

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!

2Beğeni
  • 1 Yazan nozver
  • 1 Yazan ibars

Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > HTML - CSS - XML

CSS Yardım Kapsayıcı Problemi

  #1  
Okunmamış 19 Nisan 2019, 12:22
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
Merhaba Arkadaşlar,

Ufak bir sorunum var günlerdir aşamadım.CSS konusunda da bilgim çok bölük bölük olduğu için tam çözemedim. Daha öncede açmıştım konuyu ama yardım eden olmadı.

Hem haritayı oynatamıyorum kaydıramıyorum imleç ile hem grafikleri öne çıkartamıyorum. Opacity verince hepsini kapsıyor. Yardımcı olursanız sevinirim.

ŞUANKİ HALİ


OLMASI GEREKEN


  #2  
Okunmamış 19 Nisan 2019, 14:08
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Temmuz 2015
Yaş / Cinsiyet: 31 / Erkek
Meslek: Bilgi İşlem
Konum: Antalya
Ad, Soyad: Sa... Bo...
Mesajlar: 39
Beğeniler: 4 / 8
Ticaret: 0, 0%
katmanlar olarak öne çıkarmak, arkaya atmak için css z-index konusunu araştırın hocam
  #3  
Okunmamış 19 Nisan 2019, 14:16
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
stan0ne maalesefki z-index problemi değil. Kapsayıcı problemi fakat dediğim gibi bilgim yeterli değil.
  #4  
Okunmamış 19 Nisan 2019, 20:24
ibars Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 01 Mart 2015
Yaş / Cinsiyet: 21 / Erkek
Konum: Yalova
Ad, Soyad: Ay... Ak...
Mesajlar: 57
Beğeniler: 13 / 8
Ticaret: 1, 100%
https://jsfiddle.net/3trs81eo/

Umarım istediğiniz gibi olmuştur.
  #5  
Okunmamış 19 Nisan 2019, 22:51
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 30 Ekim 2013
Cinsiyet: Erkek
Meslek: Öğrenci
Ad, Soyad: Fa... Ço...
Mesajlar: 443
Beğeniler: 45 / 150
Ticaret: 7, 100%
ibars Olmuş hocam eline sağlık. Haritayı nasıl hareket ettirebilirim peki?
  #6  
Okunmamış 19 Nisan 2019, 23:17
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 12 Ocak 2019
Yaş / Cinsiyet: 26 / Erkek
Meslek: Öğrenci
Konum: Tekirdağ
Ad, Soyad: Ni... Öz...
Mesajlar: 213
Beğeniler: 63 / 26
Ticaret: 0, 0%
hocam

Kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sunum</title>
<link href='style1.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
</head>

<body>

  

<div class="grid-container">

  <div class="container">
  <div id="map"></div>  
    <div class="left-side">
      <div id="a"></div>
      <div id="b"></div>
      <div id="c"></div>
    </div>
    <div class="right-side">
      <div id="d"></div>
      <div id="e"></div>
      <div id="f"></div>
    </div>
    <div class="bottom-side">
      <div id="b1"></div>
      <div id="b2"></div>
    </div>
    <div class="logo-left"></div>
    <div class="logo-right"></div>
  </div>
</div>

 <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 1
          
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzVWNVDoBdXY6kxdxX4rYuZDkk9VZUsSg&callback=initMap"
    async defer></script>
    
   
    <script>
// Make monochrome colors
var pieColors = (function () {
    var colors = [],
        base = Highcharts.getOptions().colors[0],
        i;

    for (i = 0; i < 10; i += 1) {
        // Start out with a darkened base color (negative brighten), and end
        // up with a much brighter color
        colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
    }
    return colors;
}());

// Build the chart
Highcharts.chart('a', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
    backgroundColor: '#ffffff00'

    },
    title: {
        text: 'Browser market',
    margin: 0,
    style: {
      font: 'normal 15px Verdana, sans-serif',
            color : 'white'
                        }
    },
  exporting: { enabled: false },
  credits: {
      enabled: false
  },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            colors: pieColors,
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
                distance: -50,
                filter: {
                    property: 'percentage',
                    operator: '>',
                    value: 4
                }
            }
        }
    },
    series: [{
      dataLabels: {
            allowOverlap:false,
            },
        name: 'Share',
        data: [
            { name: 'Chrome', y: 61.41 },
            { name: 'Internet Explorer', y: 11.84 },
            { name: 'Firefox', y: 10.85 },
            { name: 'Edge', y: 4.67 },
            { name: 'Safari', y: 4.18 },
            { name: 'Other', y: 7.05 }
        ]
    }]
});
</script>
<script>
Highcharts.chart('b', {
    chart: {
        type: 'variablepie',
    backgroundColor: '#ffffff00'

    },
  exporting: { enabled: false },
  credits: {
      enabled: false
  },
    title: {
        text: 'Countries',
    margin: 0,
    style: {
      font: 'normal 15px Verdana, sans-serif',
            color : 'white'
                        }
    },
    tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
            'Area (square km): <b>{point.y}</b><br/>' +
            'Population density (people per square km): <b>{point.z}</b><br/>'
    },
    series: [{
        minPointSize: 10,
        innerSize: '20%',
        zMin: 0,
        name: 'countries',
        data: [{
            name: 'Spain',
            y: 505370,
            z: 92.9
        }, {
            name: 'France',
            y: 551500,
            z: 118.7
        }, {
            name: 'Poland',
            y: 312685,
            z: 124.6
        }, {
            name: 'Czech Republic',
            y: 78867,
            z: 137.5
        }, {
            name: 'Italy',
            y: 301340,
            z: 201.8
        }, {
            name: 'Switzerland',
            y: 41277,
            z: 214.5
        }, {
            name: 'Germany',
            y: 357022,
            z: 235.6
        }]
    }]
});

</script>
<script>


Highcharts.chart('c', {

    chart: {
        type: 'columnrange',
        inverted: true,
    backgroundColor: '#ffffff00'

    },

    title: {
        text: 'Temperature variation',
    style: {
      font: 'normal 15px Verdana, sans-serif',
            color : 'white'
                        }
    },
  exporting: { enabled: false },
  credits: {
      enabled: false
  },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
      style: {
                color: 'white',
                fontSize:'8px'
                }
            }
    },

    yAxis: {
        title: {
            text: 'Temperature ( °C )'
        },
    labels: {
      style: {
                color: 'white',
                fontSize:'8px'
                }
            }
    },

    tooltip: {
        valueSuffix: '°C'
    },

    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                format: '{y}°C'
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Temperatures',
    color: '#ffffff',
        data: [
            [-9.9, 10.3],
            [-8.6, 8.5],
            [-10.2, 11.8],
            [-1.7, 12.2],
            [-0.6, 23.1],
            [3.7, 25.4],
            [6.0, 26.2],
            [6.7, 21.4],
            [3.5, 19.5],
            [-1.3, 16.0],
            [-8.7, 9.4],
            [-9.0, 8.6]
        ]
    }]

});

</script>
<script>
//4.grafik
var gaugeOptions = {

    chart: {
        type: 'solidgauge',
    backgroundColor: '#ffffff00'
    },

    title: null,
  exporting: { enabled: false },
  credits: {
      enabled: false
  },

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// The speed gauge
var chartSpeed = Highcharts.chart('b1', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 200
    },
  title: {
            text: '',
      style: {
        font: 'normal 15px Verdana, sans-serif',
        color : 'white'
                        }
        },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Speed',

        data: [80],
        dataLabels: {
            format: '<div style="text-align:bottom;x:100px"><span style="font-size:18px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white') + '">{y}</span><br/>' +
                   '<span style="font-size:10px;color:silver">km/h</span></div>',

        },
        tooltip: {
            valueSuffix: ' km/h'

        }
    }]

}));

// The RPM gauge
var chartRpm = Highcharts.chart('b2', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 5
    },
  title: {
            text: 'RPM',
      style: {
      font: 'normal 15px Verdana, sans-serif',
            color : 'white'
                        }
        },
    series: [{
        name: 'RPM',
        data: [1],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:18px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'white') + '">{y:.1f}</span><br/>' +
                   '<span style="font-size:10px;color:silver">* 1000 / min</span></div>'
        },
        tooltip: {
            valueSuffix: ' revolutions/min'
        }

    }]
}));

// Bring life to the dials
setInterval(function () {
    // Speed
    var point,
        newVal,
        inc;

    if (chartSpeed) {
        point = chartSpeed.series[0].points[0];
        inc = Math.round((Math.random() - 0.5) * 100);
        newVal = point.y + inc;

        if (newVal < 0 || newVal > 200) {
            newVal = point.y - inc;
        }

        point.update(newVal);
    }

    // RPM
    if (chartRpm) {
        point = chartRpm.series[0].points[0];
        inc = Math.random() - 0.5;
        newVal = point.y + inc;

        if (newVal < 0 || newVal > 5) {
            newVal = point.y - inc;
        }

        point.update(newVal);
    }
}, 2000);

</script>
<script>
//5.grafik
$.getJSON(
    'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
    function (data) {

        Highcharts.chart('d', {
            chart: {
                zoomType: 'x',
        backgroundColor: '#ffffff00'
            },
            title: {
                text: 'Traffic Density',
        style:{ "color":"#ffffff"}
            },
           // subtitle: {
            //    text: document.ontouchstart === undefined ?
            //            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            //},
      credits: {
        enabled: false
      },
      exporting: { enabled: false },

            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,

        labels: {
          style: {
                    color: 'white'
                }
        }
            },
            yAxis: {
                title: {
                    text: 'Percentage %',
          style:{ "color":"#ffffff"}
        },
        labels: {
          style: {
                    color: 'white'
                }
        }

            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'USD to EUR',
                data: data
            }]
        });
    }
);
</script>
<script>

Highcharts.chart('e', {
    chart: {
        type: 'column',
    backgroundColor: '#ffffff00'

    },
    title: {
        text: 'Stacked column chart',
    style:{ "color":"#ffffff"},
        margin: 0,


    },
  credits: {
    enabled: false
    },
  exporting: { enabled: false },

    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    labels: {
      style: {
                color: 'white',
                fontSize:'8px'
                }
            }
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
    labels: {
      style: {
        color: 'white'
          }
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]

    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }],

});
</script>

<script>

Highcharts.chart('f', {
    chart: {
        type: 'spline',
    backgroundColor: '#ffffff00',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: '',
    style:{ "color":"#ffffff"},
    margin: 0,


    },
  credits: {
    enabled: false
      },
  exporting: { enabled: false },

    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150,
    labels: {
      style: {
        color: 'white'
          }
        }
    },
    yAxis: {
        title: {
            text: ''
        },
    labels: {
      style: {
        color: 'white'
          }
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
</script>
Kod:
html,body, .grid-container { height: 100%; margin: 0; }
span {font-size: 1vw;}
.grid-container * {
  position: relative;
}
.grid-container *:after {
  position: absolute;
  top: 0;
  left: 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "map map map map map" "map map map map map" "map map map map map" "map map map map map";
}
.container {
  z-index: 0;
}
#map, .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr;
  grid-template-areas: "logo-left . . . logo-right" "left-side . . . right-side" "left-side . . . right-side" "left-side bottom-side bottom-side bottom-side right-side";
  grid-area: map;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
#map{z-index:0}
.container div:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
}
.left-side {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "a" "b" "c";
  grid-area: left-side;
  background-color:rgba(25,25,112,.4);
}
#a {
  position: relative;
  grid-area: a;
  border: 2px solid white;
  border-radius: 40px 5px 40px 2px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
#b {
  grid-area: b;
  border: 2px solid white;
  border-radius: 40px 5px 40px 2px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
#c {
  grid-area: c;
  border: 2px solid white;
  border-radius: 40px 5px 40px 2px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
.right-side {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "d" "e" "f";
  grid-area: right-side;
  background-color:rgba(25,25,112,.4);
}
#d {
  grid-area: d;
  border: 2px solid white;
  border-radius: 40px 5px 40px 2px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
#e {
  grid-area: e;
  border: 2px solid white;
  border-radius: 40px 5px 40px 2px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
#f {
  grid-area: f;
  border: 2px solid white;
  border-radius: 40px 5px 40px 2px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);

}
.bottom-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "b1 b2";
  grid-area: bottom-side;
}
#b1 {
  grid-area: b1;
  border: 2px solid white;
  border-radius: 20px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
#b2 {
  grid-area: b2;
  border: 2px solid white;
  border-radius: 20px;
  margin: 5px;
  background-color: rgba(69,119,178,.4);
}
.logo-left {
  grid-area: logo-left;
  font-size:3vw;
  color: white;
  background-color:rgba(25,25,112,.4);
}
.logo-right {
  grid-area: logo-right;
  font-size:3vw;
  color: white;
  background-color:rgba(25,25,112,.4);
}
bu şekilde oldu sanırım kolay gelsin
fatihclkl bunu beğendi.
Konu nozver tarafından (19 Nisan 2019, 23:40 ) değiştirilmiştir.
  #7  
Okunmamış 20 Nisan 2019, 01:32
ibars Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 01 Mart 2015
Yaş / Cinsiyet: 21 / Erkek
Konum: Yalova
Ad, Soyad: Ay... Ak...
Mesajlar: 57
Beğeniler: 13 / 8
Ticaret: 1, 100%
Alıntı:
fatihclkl Adlı Üyeden Alıntı
ibars Olmuş hocam eline sağlık. Haritayı nasıl hareket ettirebilirim peki?
Kusura bakmayın direk olması gereken diye paylaştığınız resime bakıp yaptım hiç dikkat etmedim ona. En az kod ve en stabil hali şu şekilde: https://jsfiddle.net/84qx1ocd/
fatihclkl bunu beğendi.
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 23:11.