Question 44347 in Html Question posted in
Some basic documentation can be found here.

How to make the bar when getting to 100% not to get out the map size borders? – Html

The bar is getting to 100% equal from both sides from the center to the left and to the right. but in the end the bar is a bit out the map borders. how to make the bar to reach to 100% but also to reach only to the map borders from the inside?

The css of the bar

body
{
  margin:0px auto;
  padding:0px;
  font-family:helvetica;
}
.progress 
{
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px;
  margin-left: 10%;
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
h1
{
  text-align:center;
  font-size:35px;
  margin-top:60px;
  color:#A9BCF5;
}
h1 p
{
  text-align:center;
  margin:0px;
  font-size:18px;
  text-decoration:underline;
  color:grey;
}

the css of the map

<style>#map
    {
        width: 1600px;
        height:850px;
        margin: 0;
        position: absolute;
        top: 48%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }
    
    #map.fullscreen {
        position: fixed;
        width:100%;
        height: 100%;
      }</style>

I tried to create a demo in the JSFidlle site but it’s not working. not showing the bar at all.

https://jsfiddle.net/q391jwdo/2/

This is what I mean that the bar is getting out of the map borders:

out of the map borders and I want the bar to get to the map borders from the inside and not to get out more than the map borders on both sides.

This is what I tried to do:

in the html file created a parent div and put in there the div of the map and the bar:

<div class="MyContainer">
  <div class='bar' id='bar1'></div>
  <div id="map"></div>
</div>

then in the css file of the bar I added this

.MyContainer
{
  width: 100%;
}

but now the bar is on the top of the screen.

Tags:

2

Answers


  1. 0

    You can put the div map inside a big div (parent) and the map inside it and the bar inside the big div and give it a 100% width, because they will be on one level!!

    Login or Signup to reply.
  2. 0

    I think this

    <div class="MyContainer">
  <div class='bar' id='bar1'></div>
  <div id="map"></div>
</div>

    Is what you need, you just need to remove the margin-left: 10% from your bar class, and set bar’s width to 100%. Or you can do something like margin: 10% and width: 80%, like this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search