wmaraci reklam

CSS Yardım Kapsayıcı Problemi

7 Mesajlar 1.119 Okunma
wmaraci reklam

fatihclkl fatihclkl WM Aracı Kullanıcı
  • Üyelik 30.10.2013
  • Yaş/Cinsiyet 28 / E
  • Meslek Back-End Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** Ç**
  • Mesajlar 469
  • Beğeniler 162 / 43
  • Ticaret 8, (%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



https://jsfiddle.net/ycgqdv0j/1/
 

 

SMM Panel, Sosyalyuvam, Bayilik Paneli, En Uygun Panel, Takipçi Paneli
reklam

stan0ne stan0ne WM Aracı Kullanıcı
  • Üyelik 30.07.2015
  • Yaş/Cinsiyet 36 / E
  • Meslek Bilgi İşlem
  • Konum Antalya
  • Ad Soyad S** B**
  • Mesajlar 38
  • Beğeniler 7 / 3
  • Ticaret 0, (%0)
katmanlar olarak öne çıkarmak, arkaya atmak için css z-index konusunu araştırın hocam
 

 

fatihclkl fatihclkl WM Aracı Kullanıcı
  • Üyelik 30.10.2013
  • Yaş/Cinsiyet 28 / E
  • Meslek Back-End Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** Ç**
  • Mesajlar 469
  • Beğeniler 162 / 43
  • Ticaret 8, (%100)
stan0ne maalesefki z-index problemi değil. Kapsayıcı problemi fakat dediğim gibi bilgim yeterli değil.
 

 

ibars ibars WM Aracı Kullanıcı
  • Üyelik 01.03.2015
  • Yaş/Cinsiyet 26 / E
  • Meslek Freelance Web Developer
  • Konum Yalova
  • Ad Soyad A** A**
  • Mesajlar 59
  • Beğeniler 9 / 13
  • Ticaret 1, (%100)
https://jsfiddle.net/3trs81eo/

Umarım istediğiniz gibi olmuştur.
 

 

wmaraci

fatihclkl fatihclkl WM Aracı Kullanıcı
  • Üyelik 30.10.2013
  • Yaş/Cinsiyet 28 / E
  • Meslek Back-End Developer
  • Konum İstanbul Anadolu
  • Ad Soyad F** Ç**
  • Mesajlar 469
  • Beğeniler 162 / 43
  • Ticaret 8, (%100)
ibars Olmuş hocam eline sağlık. Haritayı nasıl hareket ettirebilirim peki?
 

 

nozver nozver WM Aracı Kullanıcı
  • Üyelik 12.01.2019
  • Yaş/Cinsiyet 31 / E
  • Meslek Öğrenci
  • Konum Tekirdağ
  • Ad Soyad N** Ö**
  • Mesajlar 271
  • Beğeniler 36 / 81
  • Ticaret 0, (%0)
hocam





Sunum

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>





























<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 1

});
}
</script>
<script> 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}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
colors: pieColors,
dataLabels: {
enabled: true,
format: '{point.name}
{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: '\u25CF {point.name}
' +
'Area (square km): {point.y}
' +
'Population density (people per square km): {point.z}
'
},
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: '
{y}
' +
'km/h
',

},
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: '
{y:.1f}
' +
'* 1000 / min
'
},
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: '{series.name}: {point.y} ({point.percentage:.0f}%)
',
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: '{series.name}
',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}
{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>


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

kişi bu mesajı beğendi.

ibars ibars WM Aracı Kullanıcı
  • Üyelik 01.03.2015
  • Yaş/Cinsiyet 26 / E
  • Meslek Freelance Web Developer
  • Konum Yalova
  • Ad Soyad A** A**
  • Mesajlar 59
  • Beğeniler 9 / 13
  • Ticaret 1, (%100)

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

kişi bu mesajı beğendi.

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al