问:
onLocationChanged never called
I don't know why my map doesn't call to onLocationChanged when I press my button. These are my permissions:

```<code><uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission android:name="android.permission.ACCESS_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
</code>```

This is my class:

public class NuevaCarreraFragment extends Fragment implements OnMapReadyCallback, LocationListener, View.OnClickListener {

```<code>private View view;
private LiveButton btnIniciarCarrera;
private LiveButton btnFinalizarCarrera;
private SupportMapFragment mapFragment;
private GoogleMap mGoogleMap;
private LocationManager locationManager;

public static NuevaCarreraFragment newInstance() {
    Bundle args = new Bundle();
    NuevaCarreraFragment fragment = new NuevaCarreraFragment();
    fragment.setArguments(args);
    return fragment;
}

/** Ciclo de vida **/

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    // Comprobamos si la vista ya ha sido inflada previamente
    if (view != null) {
        ViewGroup parent = (ViewGroup) view.getParent();
        if (parent != null)
            parent.removeView(view);
    }

    try {// Si no ha sido inflada previamente...
        view = inflater.inflate(R.layout.fragment_nueva_carrera, container, false);

        // Instanciamos los componentes
        btnIniciarCarrera = (LiveButton) view.findViewById(R.id.button_iniciar_carrera);
        btnFinalizarCarrera = (LiveButton) view.findViewById(R.id.button_finalizar_carrera);
        mapFragment = (SupportMapFragment) getChildFragmentManager().findFragmentById(R.id.map);

        // Escuchamos a nuestros componentes
        btnIniciarCarrera.setOnClickListener(this);
        btnFinalizarCarrera.setOnClickListener(this);

        // Sincronizamos nuestro mapa
        mapFragment.onCreate(savedInstanceState);
        mapFragment.getMapAsync(this);

    } catch (InflateException e) {
        e.printStackTrace();
    }

    return view;
}

@Override
public void onStart() {
    super.onStart();
}

@Override
public void onResume() {
    super.onResume();
    if (mapFragment != null) {
        mapFragment.onResume();
    }
}

@Override
public void onPause() {
    if (mapFragment != null) {
        locationManager.removeUpdates(this);
        mapFragment.onPause();
    }
    super.onPause();
}

@Override
public void onStop() {
    super.onStop();
}

@Override
public void onDestroy() {
    Fragment fragment = getFragmentManager().findFragmentById(R.id.map);
    if (fragment != null) {
        getFragmentManager().beginTransaction()
                .remove(fragment)
                .commit();
    }
    super.onDestroy();
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    Fragment fragment = getFragmentManager().findFragmentById(R.id.map);
    if (fragment != null) {
        getFragmentManager().beginTransaction()
                .remove(fragment)
                .commit();
    }
}

@Override
public void onLowMemory() {
    super.onLowMemory();
    if (mapFragment != null) {
        mapFragment.onLowMemory();
    }
}

@Override
public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    if (mapFragment != null) {
        mapFragment.onSaveInstanceState(outState);
    }
}

/** OnClickListener **/

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.button_iniciar_carrera:
            // Inicializamos el localizador
            locationManager = (LocationManager) getActivity().getSystemService(Context.LOCATION_SERVICE);
            if (ActivityCompat.checkSelfPermission(getActivity(), Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(getActivity(), Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
                // TODO: Consider calling
                //    ActivityCompat#requestPermissions
                // here to request the missing permissions, and then overriding
                //   public void onRequestPermissionsResult(int requestCode, String[] permissions,
                //                                          int[] grantResults)
                // to handle the case where the user grants the permission. See the documentation
                // for ActivityCompat#requestPermissions for more details.
                return;
            }
            if (locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER)) {
                locationManager.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 0, 0, this);
            } else if (locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) {
                locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, this);
            }
            break;
        case R.id.button_finalizar_carrera:
            locationManager.removeUpdates(this);
            break;
    }

}

/** OnMapReadyCallback and LocationListener interface methods **/

@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;

    LatLng sydney = new LatLng(-33.867, 151.206);

    mGoogleMap.addMarker(new MarkerOptions()
            .title("Sydney")
            .snippet("The most populous city in Australia.")
            .position(sydney));

    mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 13));
}

/** LocationListener interface methods **/

@Override
public void onLocationChanged(Location location) {
    double latitude = location.getLatitude();
    double longitude = location.getLongitude();
    LatLng misCoordenadas = new LatLng(latitude, longitude);
    Geocoder geocoder = new Geocoder(getContext());
    try {
        List<Address> addressList = geocoder.getFromLocation(latitude, longitude, 1);
        String direccion = addressList.get(0).getAddressLine(0);
        direccion += "," + addressList.get(0).getLocality();
        direccion += "," + addressList.get(0).getCountryName();

        mGoogleMap.addMarker(new MarkerOptions()
                .position(misCoordenadas)
                .title(direccion)
                .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE)));
        mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(misCoordenadas, 17));
    } catch (IOException e) {
        e.printStackTrace();
    }
}

@Override
public void onStatusChanged(String provider, int status, Bundle extras) {

}

@Override
public void onProviderEnabled(String provider) {

}

@Override
public void onProviderDisabled(String provider) {

}
</code>```

The map is properly displayed, but it does not get my location :(.
Any idea ?

UPDATE

Finally I was able to solve de problem implementing Google API Client and Fused Location Api.

答:
Does the app has permission ? Did you handle the not granted case ?

And those provider(s) the app requests are enabled ?

Did you debug the app, and reach the any of locationManager.requestLocationUpdates line ?

Seems like the app is not requesting due to lacking of 1 and 2

Title: onLocationChanged never called

Body:
I don't know why my map doesn't call to onLocationChanged when I press my button. These are my permissions:

<uses-permission android:name="android.permission.ACCESS_GPS" />
<uses-permission android:name="android.permission.ACCESS_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

This is my class:

public class NuevaCarreraFragment extends Fragment implements OnMapReadyCallback, LocationListener, View.OnClickListener {

private View view;
private LiveButton btnIniciarCarrera;
private LiveButton btnFinalizarCarrera;
private SupportMapFragment mapFragment;
private GoogleMap mGoogleMap;
private LocationManager locationManager;

public static NuevaCarreraFragment newInstance() {
    Bundle args = new Bundle();
    NuevaCarreraFragment fragment = new NuevaCarreraFragment();
    fragment.setArguments(args);
    return fragment;
}

/** Ciclo de vida **/

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    // Comprobamos si la vista ya ha sido inflada previamente
    if (view != null) {
        ViewGroup parent = (ViewGroup) view.getParent();
        if (parent != null)
            parent.removeView(view);
    }

    try {// Si no ha sido inflada previamente...
        view = inflater.inflate(R.layout.fragment_nueva_carrera, container, false);

        // Instanciamos los componentes
        btnIniciarCarrera = (LiveButton) view.findViewById(R.id.button_iniciar_carrera);
        btnFinalizarCarrera = (LiveButton) view.findViewById(R.id.button_finalizar_carrera);
        mapFragment = (SupportMapFragment) getChildFragmentManager().findFragmentById(R.id.map);

        // Escuchamos a nuestros componentes
        btnIniciarCarrera.setOnClickListener(this);
        btnFinalizarCarrera.setOnClickListener(this);

        // Sincronizamos nuestro mapa
        mapFragment.onCreate(savedInstanceState);
        mapFragment.getMapAsync(this);

    } catch (InflateException e) {
        e.printStackTrace();
    }

    return view;
}

@Override
public void onStart() {
    super.onStart();
}

@Override
public void onResume() {
    super.onResume();
    if (mapFragment != null) {
        mapFragment.onResume();
    }
}

@Override
public void onPause() {
    if (mapFragment != null) {
        locationManager.removeUpdates(this);
        mapFragment.onPause();
    }
    super.onPause();
}

@Override
public void onStop() {
    super.onStop();
}

@Override
public void onDestroy() {
    Fragment fragment = getFragmentManager().findFragmentById(R.id.map);
    if (fragment != null) {
        getFragmentManager().beginTransaction()
                .remove(fragment)
                .commit();
    }
    super.onDestroy();
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    Fragment fragment = getFragmentManager().findFragmentById(R.id.map);
    if (fragment != null) {
        getFragmentManager().beginTransaction()
                .remove(fragment)
                .commit();
    }
}

@Override
public void onLowMemory() {
    super.onLowMemory();
    if (mapFragment != null) {
        mapFragment.onLowMemory();
    }
}

@Override
public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    if (mapFragment != null) {
        mapFragment.onSaveInstanceState(outState);
    }
}

/** OnClickListener **/

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.button_iniciar_carrera:
            // Inicializamos el localizador
            locationManager = (LocationManager) getActivity().getSystemService(Context.LOCATION_SERVICE);
            if (ActivityCompat.checkSelfPermission(getActivity(), Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(getActivity(), Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
                // TODO: Consider calling
                //    ActivityCompat#requestPermissions
                // here to request the missing permissions, and then overriding
                //   public void onRequestPermissionsResult(int requestCode, String[] permissions,
                //                                          int[] grantResults)
                // to handle the case where the user grants the permission. See the documentation
                // for ActivityCompat#requestPermissions for more details.
                return;
            }
            if (locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER)) {
                locationManager.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 0, 0, this);
            } else if (locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) {
                locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, this);
            }
            break;
        case R.id.button_finalizar_carrera:
            locationManager.removeUpdates(this);
            break;
    }

}

/** OnMapReadyCallback and LocationListener interface methods **/

@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;

    LatLng sydney = new LatLng(-33.867, 151.206);

    mGoogleMap.addMarker(new MarkerOptions()
            .title("Sydney")
            .snippet("The most populous city in Australia.")
            .position(sydney));

    mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 13));
}

/** LocationListener interface methods **/

@Override
public void onLocationChanged(Location location) {
    double latitude = location.getLatitude();
    double longitude = location.getLongitude();
    LatLng misCoordenadas = new LatLng(latitude, longitude);
    Geocoder geocoder = new Geocoder(getContext());
    try {
        List<Address> addressList = geocoder.getFromLocation(latitude, longitude, 1);
        String direccion = addressList.get(0).getAddressLine(0);
        direccion += "," + addressList.get(0).getLocality();
        direccion += "," + addressList.get(0).getCountryName();

        mGoogleMap.addMarker(new MarkerOptions()
                .position(misCoordenadas)
                .title(direccion)
                .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE)));
        mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(misCoordenadas, 17));
    } catch (IOException e) {
        e.printStackTrace();
    }
}

@Override
public void onStatusChanged(String provider, int status, Bundle extras) {

}

@Override
public void onProviderEnabled(String provider) {

}

@Override
public void onProviderDisabled(String provider) {

}

The map is properly displayed, but it does not get my location :(.
Any idea ?

UPDATE

Finally I was able to solve de problem implementing Google API Client and Fused Location Api.


来源: stackexchange

问:
can I use bootstrap css and javascript on office add in API
can I use bootstrap framework on office add in API
boostrap css instead of fabric
also if yes am I will face any problem?</p>

答:
Absolutely no problem to use bootstrap or any css library on an office.js add-in.
Remember an add-in is just a web page with a js library : office.js that helps you to communicate with Office host.</p>

ContentLicense: CC BY-SA 3.0


问:
Strange redirect and session behaviour
I have a registration divided into few steps. Current page is saved in session. But my functions behave weird. If we refresh step1, variable in session is changed to 2, and instead of it step2 is loaded. Inside this step I'm checking if the user had been already created, and if not reduce step to 1 and redirect to the view hoping that step will be rendered. But instead I'm getting

```<code>def my_rte_landing(request):
    step = request.session.get("step", request.REQUEST.get("step", 1))
    logging.debug("my_rte_landing top step: %s" % step)

    if request.method == "POST":
        (... next steps ...)
    else:
        if step == 1:
            logging.debug("step 1")
            html = render_step1(request)
            request.session["step"] = 2

            return render_to_response('socialauth/login_page.html',{'html': html,}, context_instance=RequestContext(request))
        else:
            logging.debug("step 2")
            logging.debug("step2, step: %s" % request.session.get('step'))
            new_user = True
            new_user_id = request_user_uid(request, request.user.id)
            html = render_step2(request)
            request.session["step"] = 3

            return render_to_response('socialauth/login_page.html',
                                    {'html': html}, context_instance=RequestContext(request))
</code>```

here's my function checking for existence of user:

```<code>def request_user_uid(request, user_id):
    if request.session['step'] == 2:
        logging.debug("1 here")
        id = get_user_id(user_id)
        if id:
            logging.debug("2. here")
            return id

        request.session['step'] = 1
        logging.debug("3. here")
        logging.debug("step: %s" % request.session.get('step'))
    return HttpResponseRedirect(reverse('my_rte_landing'))
</code>```

And my debug looks like this (I'm visiting page for the first time, not logging, refresh, I can see step2, refresh , still step 2)

```<code>2010-11-30 17:11:21,434 DEBUG my_rte - nie zalogowany
2010-11-30 17:11:23,245 DEBUG my_rte_landing top step: 1
2010-11-30 17:11:23,246 DEBUG step 1
(first refresh)
2010-11-30 17:11:34,626 DEBUG my_rte_landing top step: 2
2010-11-30 17:11:34,626 DEBUG step 2
2010-11-30 17:11:34,626 DEBUG step2, step: 2
2010-11-30 17:11:34,626 DEBUG 1 here
2010-11-30 17:11:34,628 DEBUG 3. here
2010-11-30 17:11:34,628 DEBUG step: 1
(second refresh)
2010-11-30 17:11:59,523 DEBUG my_rte_landing top step: 3
2010-11-30 17:11:59,523 DEBUG step 2
2010-11-30 17:11:59,524 DEBUG step2, step: 3
</code>```

答:
You reset the step ..

```<code>        new_user_id = request_user_uid(request, request.user.id)
        # request.session["step"] is currently set to 1 ... however the
        #  following lines undo that...
        html = render_step2(request)
        request.session["step"] = 3
</code>```

So while you might set step == 1 in request_user_uid() the very next thing you do is set it back to 3...

ContentLicense: CC BY-SA 2.5

Title: Strange redirect and session behaviour

Body:
I have a registration divided into few steps. Current page is saved in session. But my functions behave weird. If we refresh step1, variable in session is changed to 2, and instead of it step2 is loaded. Inside this step I'm checking if the user had been already created, and if not reduce step to 1 and redirect to the view hoping that step will be rendered. But instead I'm getting

def my_rte_landing(request):
    step = request.session.get("step", request.REQUEST.get("step", 1))
    logging.debug("my_rte_landing top step: %s" % step)

    if request.method == "POST":
        (... next steps ...)
    else:
        if step == 1:
            logging.debug("step 1")
            html = render_step1(request)
            request.session["step"] = 2

            return render_to_response('socialauth/login_page.html',{'html': html,}, context_instance=RequestContext(request))
        else:
            logging.debug("step 2")
            logging.debug("step2, step: %s" % request.session.get('step'))
            new_user = True
            new_user_id = request_user_uid(request, request.user.id)
            html = render_step2(request)
            request.session["step"] = 3

            return render_to_response('socialauth/login_page.html',
                                    {'html': html}, context_instance=RequestContext(request))

here's my function checking for existence of user:

def request_user_uid(request, user_id):
    if request.session['step'] == 2:
        logging.debug("1 here")
        id = get_user_id(user_id)
        if id:
            logging.debug("2. here")
            return id

        request.session['step'] = 1
        logging.debug("3. here")
        logging.debug("step: %s" % request.session.get('step'))
    return HttpResponseRedirect(reverse('my_rte_landing'))

And my debug looks like this (I'm visiting page for the first time, not logging, refresh, I can see step2, refresh , still step 2)

2010-11-30 17:11:21,434 DEBUG my_rte - nie zalogowany
2010-11-30 17:11:23,245 DEBUG my_rte_landing top step: 1
2010-11-30 17:11:23,246 DEBUG step 1
(first refresh)
2010-11-30 17:11:34,626 DEBUG my_rte_landing top step: 2
2010-11-30 17:11:34,626 DEBUG step 2
2010-11-30 17:11:34,626 DEBUG step2, step: 2
2010-11-30 17:11:34,626 DEBUG 1 here
2010-11-30 17:11:34,628 DEBUG 3. here
2010-11-30 17:11:34,628 DEBUG step: 1
(second refresh)
2010-11-30 17:11:59,523 DEBUG my_rte_landing top step: 3
2010-11-30 17:11:59,523 DEBUG step 2
2010-11-30 17:11:59,524 DEBUG step2, step: 3

Body:
You reset the step ..

        new_user_id = request_user_uid(request, request.user.id)
        # request.session["step"] is currently set to 1 ... however the
        #  following lines undo that...
        html = render_step2(request)
        request.session["step"] = 3

So while you might set step == 1 in request_user_uid() the very next thing you do is set it back to 3...


问:
Header tag and divs with ids
I have header tag and a div tag. Also i have navigation menu with sub menus in it. They are for navigating through my web page with links to separate divs wit ids. And when i press on any of sub menus it goes to that div in the webpage but it's behind the header. It's like under that div. I want when i press to any link from nav menu to go to that part of page but to position bellow the header.

Image 1

Image 2

html,body {
 margin: 0px;
    padding: 0px;
 overflow-x: auto;
 overflow-y: auto;
 line-height: 1;
}

header {
 width: 100%;
 height: 80px;
 position: fixed;
 background-color: black;
}

header img {
 float: left;
 height: 78px;
 margin-top:-12.5px;
}

.wrapper {
 max-width: 960px;
 margin: 14px auto;
}

nav {
 float: right;
 height: auto;
}

nav ul {

}

nav ul li {
 display: inline-block;
 margin-left: 15px;
 margin-top: -15px;
 list-style: none;
}

#button1 {
 background-color: rgb(1,152,51);
 color: white;
 text-align: center;
 border: none;
 width: 70px;
 height: 50px;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-transition: -webkit-transform 2s, background 2s, width 2s, height 2s, border 2s, font-size 2s;
    -o-transition-property: width, height, border, -o-transform, background, font-size, border-radius; border; font-weight;
    -o-transition-duration: 2s,2s,2s,2s,2s,2s,2s;
    -moz-transition-property: width, height, border, -o-transform, background, font-size, border-radius; border; font-weight;
    -moz-transition-duration: 2s,2s,2s,2s,2s,2s,2s;
    transition-property: width, height, border, transform, background, font-size, border-radius; border; font-weight
    transition-duration: 2s,2s,2s,2s,2s,2s,2s;
}

#button1:hover {
 width: 150px;
    height: 50px;
    -webkit-transform: rotatex(360deg);
    transform: rotatex(360deg);
    border: solid white 4px;
    background-color: transparent;
    font-weight: bold;
    font-size: 16px;
    border-radius: 25px;
 line-height: 10px;
}

div.picture {
 margin-top:80px;
 width:100%;
 height:500px;
 background-image:url(../images/pozadina.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

div.picture1 {
 margin-top: 20px;
 float: left;
 height: 980px;
 width: 47.5%;
 z-index: 1;
 background-position: center;
 background-repeat: no-repeat;
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
            40% 0%,
            75% 84%,
            from(#4D9C41),
            to(#19911D),
            color-stop(.6,#54DE5D))
}

/* menu vo voda.html */

  #primary_nav_wrap ul {
   list-style:none;
   position:relative;
   float:left;
   margin:0;
   padding:0
  }

  #primary_nav_wrap ul a {
   display:block;
   color:#333;
   text-decoration:none;
   font-size: 18px;
   line-height: 16px;
   padding:0 15px;
  }

  #primary_nav_wrap ul li {
   position:relative;
   float:left;
   margin:0;
   padding:0
  }

  #primary_nav_wrap ul li.current-menu-item {
   background:#ddd
  }

  #primary_nav_wrap ul li:hover {
   background: rgb(1,152,51)
  }

  #primary_nav_wrap ul ul {
   display:none;
   position:absolute;
   left: 100%;
   top:0;
   background: rgb(1,152,51);
   padding:0
  }

  #primary_nav_wrap ul ul li {
   float:none;
   width:200px
  }

  #primary_nav_wrap ul ul a {
   line-height:120%;
   padding:10px 15px
  }

  #primary_nav_wrap ul ul ul {
   top:0;
   left:100%
  }

  #primary_nav_wrap ul li:hover > ul {
   display:block
  }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Вода</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
 <header>
  <div class="wrapper">

    <img src="images/logo.svg">

   <div style="margin-top: -13.5px; float: left;">

     <p style="color: green; font-size: 26px; letter-spacing: 1px; font-weight:bold;">
      Екологија
     </p>

   </div>
   <nav>
    <ul>
     <li>

       <button id="button1">
        <p>
         Вода
        </p>
       </button>

     </li>
     <li>

       <button id="button1">
        <p>
         Енергија
        </p>
       </button>

     </li>
     <li>

       <button id="button1">
        <p>
         Вода
        </p>
       </button>

     </li>
     <li>

       <button id="button1">
        <p>
         Вода
        </p>
       </button>

     </li>
      </ul>
     </nav>
  </div>
 </header>
 <section>
  <div style="width: 100%; height: auto; background-color: rgb(1,152,51); position: absolute; z-index: -1; overflow: visible;">
   <div style="max-width: 100%; min-width: 540px; margin: 0 auto; margin-top: 80px;">
    <div style="margin-top: 20px; float: left;">
     <nav id="primary_nav_wrap">
      <ul>
       <li style="width: 200px; line-height: 0px;">Влијание врз човековата цивилизација
        <ul>
         <li>- Здравје и загадување</li>
         <li>- Човекова употреба

          <ul>
           <li>- Земјоделство</li>
           <li>- Водата како научен стандард</li>
           <li>- Вода за пиење</li>
           <li>- Хигиена</li>
          </ul>
         </li>
        </ul>
       </li>
           </ul>
        </nav>
    </div>
    <div style="float: left; width: 65%; margin-top:20px; font-size: 18px; height: auto; overflow-y: auto;" class="scrollbar" id="style-15">
     <h3 style="margin-top: 0px;">
      ВОДА
     </h3>
     <section>
      <p>
       Вода — супстанца, чиишто молекули се составени од атоми на водород и кислород и е важна за сите познати форми на живот. <br>
       Во најчеста употреба, водата се јавува во течна агрегатна состојба, но таа има и цврста состојба (мраз) и гасна агрегатна состојба (водни испарувања или пареа). Водата покрива 71% од површината на планетата Земја. На Земјата, најчесто се наоѓа во океаните и другите големи водни тела, со 1,6% вода под површината во водоносни слоеви и 0,001% во воздухот како пареа, облаци (оформени од цврсти и течни водни честици кои лебдат во воздухот) и кондензација. Океаните содржат 97% од површинската вода, глечерите и поларните ледени покривки 2,4% и другите површински води како реки, езера и езерца 0,6%. Многу мала количина од Земјината вода се содржи во биолошките тела и во вештачки изработените производи. <br> Водата на Земјата постојано се движи во циклус на испарување или транспирација (евапотранспирација), кондензација и истечни води кои најчесто стигнуваат до морињата. Над површината, испарувањето и транспирацијата придонесуваат за кондензацијата врз земјата. <br> Чистата, свежа вода за пиење е неопходна за човекот и другите форми на живот. Пристапот до безбедна вода за пиење во последнава декада сигурно и значително се подобрува скоро во секој дел на светот. Постои јасна врска меѓу пристапот до безбедна вода за пиење и БДП по глава на жител. Но, некои набљудувачи предвидуваат дека до 2025 повеќе од половина од светското население ќе се соочи со ранливост поврзана со вода. Во извештај од ноември 2009 се предвидува дека до 2030, во некои региони на светот кои се во развој, побарувачката за вода ќе ги надмине резервите за 50%.[6] Водата има важен дел во светската економија, бидејќи функционира како растворувач за голем број различни хемиски материи и го олеснува индустриското ладење и транспорт. Приближно 70% од свежата вода се користи во земјоделството.
      </p>
     </section>

    </div>
    <img src="images/Glacial_iceberg_in_Argentina.jpg" style="float: right; width: 15%; position: absolute; margin-top: 20px; margin-left: 10px; z-index: -1;">
   </div>

   <div style="clear: both; float: left; height: auto; margin-right: 150px; margin-left: 150px;">
   <br><br>
    <div id="Влијание врз човековата цивилизација">
     <h2>Влијание врз човековата цивилизација</h2>
     <hr>
     <p style="font-size: 18px;">Историски гледано, цивилизацијата најмногу напреднала околу реките и големите водни патишта. Месопотамија, која се смета за лулка на цивилизацијата била сместена меѓу теченијата на плодните реки Тигар и Еуфрат. Животот на населението во Древен Египет било целосно зависело од течението на реката Нил. Големите пристанишни градови како Ротердам, Лондон, Монтреал, Париз, Њујорк, Буенос Ариес, Шангај, Токио, Чикаго и Хонг Конг, делумно го должат својот развој и проширување поради лесната пристапливост преку вода и зголемувањето на трговијата, што е директен резултат на тоа. Островите со безбедни пристаништа, како Сингапур напреднале поради истата причина. Во делови од Северна Африка и Блискиот Исток, каде водата е поретка, пристап до чиста вода за пиење бил и е главен фактор за човековиот развој.</p>
    </div>
    <br>
    <div id="Здравје и загадување">
     <h2>Здравје и загадување</h2>
     <p style="font-size: 18px;">
      Водата погодна за човекова употреба се нарекува вода за пиење или вода погодна за пиење. Водата, која не е за пиење може да се направи погодна за пиење со филтрација или дестилација (да се загрее додека не испари и после пареата да се собере без нечистотиите кои ги остава) или на други начини (хемиска или топлинска преработка која ги убива бактериите). Понекогаш, изразот „безбедна вода“ важи за водата погодна за пиење од понизок квалитет (на пр. успешно се користи за исхрана кај луѓе кои имаат слаб пристап до процеси за прочистување на вода и прави повеќе добро отколку штета). Водата, која не е погодна за пиење, но не е штетна за луѓето кога се употребува за пливање или капење се нарекува со повеќе имиња, покрај вода погодна за пиење и понекогаш се нарекува „безбедна вода“ или „вода безбедна за капење“. Хлорот, кој ги иритира кожата и мукозната мембрана, се користи да ја направи водата безбедна за капење или пиење. Неговата употреба е строго техничка и најчесто се контролира со владини прописи (најчесто еден дел од милион од водата за пиење и 1-2 дела од милион хлор кој сè уште не реагирал со нечистотиите за вода за капење). <br><br> Овој природен ресурс станува сè поредок на одредени места и неговата достапност е голем социјален и економски проблем. Моментално, околу 1 милијарда луѓе ширум светот редовно пијат загадена вода. На 29. средба на Г8 средбата во 2003 година, повеќето земји ја прифатија целта до 2015 да се преполови бројот на луѓе ширум светот кои немаат пристап до безбедна вода за пиење и санитација. Иако ова е цел која тешко може да се достигне, веројатно е дека повеќе од половина милијарда луѓе ќе останат без пристап до безбедна вода за пиење и повеќе од милијарда луѓе без пристап до соодведна санитација. Слабиот квалитет на водата и лошата санитација се смртоносни. Околу 5 милиони смртни случаи се последица поради загадена вода за пиење. Светската здравстена организација проценува дека безбедната вода би можела да спречи 1,4 смртни случаи на деца од дијареа секоја година.[22] Но, водата не е исцрплив ресурс, туку се рециклилира како вода погодна за пиење преку дождови во многу поголеми количества од човековата потрошувачка. Поради тоа, прилично малото количество на водни резерви на Земјата (околу 1% од нашата вода за пиење, која се надополнува преку водоносни слоеви секои 1 до 10 години) е необновлив ресурс. Поретка е дистрибуцијата на вода погодна за пиење и наводнување отколку количеството кое постои на Земјата. Земјите кои немаат вода го користат увозот на добра како првичен начин за увоз на вода, бидејќи производствениот процес користи околу 10 до 100 пати вода од масата на производите. <br><br> Во земјите во развој, 90% од отпадите води сè уште непреработени се вливаат во локалните реки и потоци. Околу 50 држави, со прилика третина од светското население, исто така страдаат од среден или висок воден притисок и 17 од нив годишно извлекуваат повеќе вода од колку што се надополнува со природниот воден циклус.[23] Притисокт дејстува не само врз телата со свежа вода како реки и езера туку и го намалува квалитетот на подземните водни ресурси.
     </p>
    </div>
    <br>
    <div id="Човекова употреба">
     <h2>Човекова употреба</h2>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Водата како научен стандард">
     <h3>Водата како научен стандард</h3>
     <p>
      На 7 април 1795, во Франција било одлучено грамот да биде еднаков на „апсолутната маса на волумен чиста вода, еднаков на куб од стотинка од метар и на температурата на мраз кој се топи“.[26] За практични цели, потребен бил метален стандард за пример, илијада пати поголем. Поради тоа било потребно точно да се одреди масата на еден литар вода. И покрај фактот дека дефиницијата за грамот ја специфицирала водата на 0 °C, темпераура која лесно може да се добие одново, научниците одлучиле да го редефинираат стандардот и да ги изведат нивните мерки на температурата кога водата е најгуста, што тогаш била 4 °C. <br><br> Температурната скала на Келвин од меѓународниот систем се основа на трите точки на водата, дефинирани на точно 273,16 К или 0,01 °C. Скалата е попрецизна од Целзиусовата температурна скала, што првично била дефинирана според точката на вриење (100 °C) и точката на топење (0 °C) на водата. <br><br> Природната вода главно се состои од изотопите на водород-1 и кислород-16, но постои и мало количество на потешки изотопи како водород-2 (деутериум). Количеството на деутериум оксиди или тешка вода е многу мало, но сепак влијае врз својствата на водата. Водата од реките и езерата содржи помалку деутериум од морската вода. Поради тоа, стандарната вода е дефинирана во спецификацијата на Виенскскиот стандард за океански води.
     </p>
    </div>
    <div id="Вода за пиење">
     <h3>Вода за пиење</h3>
     <p>
      Во зависност од големината на човечкото тело, истото се состои од 55% до 78% од вода. За да функционира правилно, на телото му се потребни меѓу еден и седум литри вода дневно за да се избегне дехидрација. Точното количество зависи од степенот на активност, температурата, влажноста, но и други фактори. Поголемиот дел од ова се внесува преку храна или пијалоци, наместо пиење чиста вода. Не е јасно колку вода е потребно да се внесе од страна на здрави луѓе, иако повеќето се согласуваат дека 6 до 7 чаши вода (отприлика 2 литри) денвно, најмалку е потребо за да се одржи соодветна хидрација. Медицинската литература претпочита помало внесување, обично 1 литар вода за просечен маж, исклучувајќи ги дополнитлните потреби кои се резултат на губитокот на течности заради вежбање или топло време. За тие што имаат здрави бубрези, тешко е да се исие премногу вода, но опасно е да не се испие доволно. Луѓето можат да испијат повеќе вода од потребното за време на вежбање што ги доведува до ризик од труење од вода (хиперхидрација), што може да биде смртоносна. Фактот дека еден човек треба да испие 8 чаши вода дневно не може да се препише на ниту еден научен извор. Постојат и други митови, како на пример влијанието на водата за спречување на дебелеењето. <br><br> Водата од телото се лачи на повеќе начини: преку урина и фецес, преку потење и преку издишување на водни испарувања во здивот. Со физичко исцрпување и изложување на топлина, губитоот на вода ќе се зголеми и дневните потреби за вода исто така ќе се зголемат. На луѓето им е потребна вода која не содржи премногу нечистотии. Чести нечистотии се металните соли и оксидите (вклучуајќи бакар, железо, калциум и олово) и/или штетни бактерии како на пример бактеријата Vibrio. Некои раствори се прифатливи и дури пожелни за подобрување на вкусот и за добивањена неопходните електролити. Најголемиот извор на вода погодна за пиење е Бајкалското Езеро, кое содржи многу малку сол и калциум и затоа и се смета за многу чисто.
     </p>
    </div>
    <div id="Хигиена">
     <h3>Хигиена</h3>
     <p>
      Способноста на водата да прави раствори и емулзии се користи за миење. Голем број индустриски процеси зависат од реакциите добиени со хемикалии растворени во вода, како на пример лебдењето на цврсти честици во водена кашеста маса или употребата на вода за да се растворат и извлечат материите.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
    <div id="Земјоделство">
     <h3>Земјоделство</h3>
     <p>
      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
     </p>
    </div>
   </div>
  </div>

 </section>
</body>
</html></code>```

答:
all you need is #primary_nav_wrap is visible like header on scrolling . If you set the header css you must understand how its work.. Anyways I just added content-one and side-nav-div this two class name on two div before #primary_nav_wrap check the html section .

And check css and find those class checkout what I have done.

*{
box-sizing:border-box;
}
   html,
body {
  margin: 0px;
  padding: 0px;
  overflow-x: auto;
  overflow-y: auto;
  line-height: 1;
}

header {
  width: 100%;
  height: 80px;
  position: fixed;
  background-color: black;
}

header img {
  float: left;
  height: 78px;
  margin-top: -12.5px;
}

.wrapper {
  max-width: 960px;
  margin: 14px auto;
}

nav {
  float: right;
  height: auto;
}

nav ul {}

nav ul li {
  display: inline-block;
  margin-left: 15px;
  margin-top: -15px;
  list-style: none;
}

#button1 {
  background-color: rgb(1, 152, 51);
  color: white;
  text-align: center;
  border: none;
  width: 70px;
  height: 50px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: -webkit-transform 2s, background 2s, width 2s, height 2s, border 2s, font-size 2s;
  -o-transition-property: width, height, border, -o-transform, background, font-size, border-radius;
  border;
  font-weight;
  -o-transition-duration: 2s, 2s, 2s, 2s, 2s, 2s, 2s;
  -moz-transition-property: width, height, border, -o-transform, background, font-size, border-radius;
  border;
  font-weight;
  -moz-transition-duration: 2s, 2s, 2s, 2s, 2s, 2s, 2s;
  transition-property: width, height, border, transform, background, font-size, border-radius;
  border;
  font-weight transition-duration: 2s, 2s, 2s, 2s, 2s, 2s, 2s;
}

#button1:hover {
  width: 150px;
  height: 50px;
  -webkit-transform: rotatex(360deg);
  transform: rotatex(360deg);
  border: solid white 4px;
  background-color: transparent;
  font-weight: bold;
  font-size: 16px;
  border-radius: 25px;
  line-height: 10px;
}

div.picture {
  margin-top: 80px;
  width: 100%;
  height: 500px;
  background-image: url(../images/pozadina.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

div.picture1 {
  margin-top: 20px;
  float: left;
  height: 980px;
  width: 47.5%;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
}

#style-15::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6, #54DE5D))
}

/* menu vo voda.html */
.content-one{
display:inline-block;

width:100%;
}
.side-nav-div{
position:relative;
width:7em;

}
nav#primary_nav_wrap{
position:fixed;
top:80px;
left:0;

}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  line-height: 16px;
  padding: 0 15px;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
  background: #ddd
}

#primary_nav_wrap ul li:hover {
  background: rgb(1, 152, 51)
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: rgb(1, 152, 51);
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover > ul {
  display: block
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вода</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
 <div class="wrapper">

   <img src="images/logo.svg">

  <div style="margin-top: -13.5px; float: left;">

    <p style="color: green; font-size: 26px; letter-spacing: 1px; font-weight:bold;">
     Екологија
    </p>

  </div>
  <nav>
   <ul>
    <li>

      <button id="button1">
       <p>
        Вода
       </p>
      </button>

    </li>
    <li>

      <button id="button1">
       <p>
        Енергија
       </p>
      </button>

    </li>
    <li>

      <button id="button1">
       <p>
        Вода
       </p>
      </button>

    </li>
    <li>

      <button id="button1">
       <p>
        Вода
       </p>
      </button>

    </li>
     </ul>
    </nav>
 </div>
</header>
<section>
 <div style="width: 100%; height: auto; background-color: rgb(1,152,51); position: absolute; z-index: -1; overflow: visible;">
  <div class="content-one" style="max-width: 100%; min-width: 540px; margin: 0 auto; margin-top: 80px;">
   <div class="side-nav-div" style="margin-top: 20px; float: left;">
    <nav id="primary_nav_wrap">
     <ul>
      <li style="width: 200px; line-height: 0px;">Влијание врз човековата цивилизација
       <ul>
        <li>- Здравје и загадување</li>
        <li>- Човекова употреба

         <ul>
          <li>- Земјоделство</li>
          <li>- Водата како научен стандард</li>
          <li>- Вода за пиење</li>
          <li>- Хигиена</li>
         </ul>
        </li>
       </ul>
      </li>
       </ul>
    </nav>
   </div>
   <div style="float: left; width: 65%; margin-top:20px; font-size: 18px; height: auto; overflow-y: auto;" class="scrollbar" id="style-15">
    <h3 style="margin-top: 0px;">
     ВОДА
    </h3>
    <section>
     <p>
      Вода — супстанца, чиишто молекули се составени од атоми на водород и кислород и е важна за сите познати форми на живот. <br>
      Во најчеста употреба, водата се јавува во течна агрегатна состојба, но таа има и цврста состојба (мраз) и гасна агрегатна состојба (водни испарувања или пареа). Водата покрива 71% од површината на планетата Земја. На Земјата, најчесто се наоѓа во океаните и другите големи водни тела, со 1,6% вода под површината во водоносни слоеви и 0,001% во воздухот како пареа, облаци (оформени од цврсти и течни водни честици кои лебдат во воздухот) и кондензација. Океаните содржат 97% од површинската вода, глечерите и поларните ледени покривки 2,4% и другите површински води како реки, езера и езерца 0,6%. Многу мала количина од Земјината вода се содржи во биолошките тела и во вештачки изработените производи. <br> Водата на Земјата постојано се движи во циклус на испарување или транспирација (евапотранспирација), кондензација и истечни води кои најчесто стигнуваат до морињата. Над површината, испарувањето и транспирацијата придонесуваат за кондензацијата врз земјата. <br> Чистата, свежа вода за пиење е неопходна за човекот и другите форми на живот. Пристапот до безбедна вода за пиење во последнава декада сигурно и значително се подобрува скоро во секој дел на светот. Постои јасна врска меѓу пристапот до безбедна вода за пиење и БДП по глава на жител. Но, некои набљудувачи предвидуваат дека до 2025 повеќе од половина од светското население ќе се соочи со ранливост поврзана со вода. Во извештај од ноември 2009 се предвидува дека до 2030, во некои региони на светот кои се во развој, побарувачката за вода ќе ги надмине резервите за 50%.[6] Водата има важен дел во светската економија, бидејќи функционира како растворувач за голем број различни хемиски материи и го олеснува индустриското ладење и транспорт. Приближно 70% од свежата вода се користи во земјоделството.
     </p>
    </section>

   </div>
   <img src="images/Glacial_iceberg_in_Argentina.jpg" style="float: right; width: 15%; position: absolute; margin-top: 20px; margin-left: 10px; z-index: -1;">
  </div>

  <div style="clear: both; float: left; height: auto; margin-right: 150px; margin-left: 150px;">
  <br><br>
   <div id="Влијание врз човековата цивилизација">
    <h2>Влијание врз човековата цивилизација</h2>
    <hr>
    <p style="font-size: 18px;">Историски гледано, цивилизацијата најмногу напреднала околу реките и големите водни патишта. Месопотамија, која се смета за лулка на цивилизацијата била сместена меѓу теченијата на плодните реки Тигар и Еуфрат. Животот на населението во Древен Египет било целосно зависело од течението на реката Нил. Големите пристанишни градови како Ротердам, Лондон, Монтреал, Париз, Њујорк, Буенос Ариес, Шангај, Токио, Чикаго и Хонг Конг, делумно го должат својот развој и проширување поради лесната пристапливост преку вода и зголемувањето на трговијата, што е директен резултат на тоа. Островите со безбедни пристаништа, како Сингапур напреднале поради истата причина. Во делови од Северна Африка и Блискиот Исток, каде водата е поретка, пристап до чиста вода за пиење бил и е главен фактор за човековиот развој.</p>
   </div>
   <br>
   <div id="Здравје и загадување">
    <h2>Здравје и загадување</h2>
    <p style="font-size: 18px;">
     Водата погодна за човекова употреба се нарекува вода за пиење или вода погодна за пиење. Водата, која не е за пиење може да се направи погодна за пиење со филтрација или дестилација (да се загрее додека не испари и после пареата да се собере без нечистотиите кои ги остава) или на други начини (хемиска или топлинска преработка која ги убива бактериите). Понекогаш, изразот „безбедна вода“ важи за водата погодна за пиење од понизок квалитет (на пр. успешно се користи за исхрана кај луѓе кои имаат слаб пристап до процеси за прочистување на вода и прави повеќе добро отколку штета). Водата, која не е погодна за пиење, но не е штетна за луѓето кога се употребува за пливање или капење се нарекува со повеќе имиња, покрај вода погодна за пиење и понекогаш се нарекува „безбедна вода“ или „вода безбедна за капење“. Хлорот, кој ги иритира кожата и мукозната мембрана, се користи да ја направи водата безбедна за капење или пиење. Неговата употреба е строго техничка и најчесто се контролира со владини прописи (најчесто еден дел од милион од водата за пиење и 1-2 дела од милион хлор кој сè уште не реагирал со нечистотиите за вода за капење). <br><br> Овој природен ресурс станува сè поредок на одредени места и неговата достапност е голем социјален и економски проблем. Моментално, околу 1 милијарда луѓе ширум светот редовно пијат загадена вода. На 29. средба на Г8 средбата во 2003 година, повеќето земји ја прифатија целта до 2015 да се преполови бројот на луѓе ширум светот кои немаат пристап до безбедна вода за пиење и санитација. Иако ова е цел која тешко може да се достигне, веројатно е дека повеќе од половина милијарда луѓе ќе останат без пристап до безбедна вода за пиење и повеќе од милијарда луѓе без пристап до соодведна санитација. Слабиот квалитет на водата и лошата санитација се смртоносни. Околу 5 милиони смртни случаи се последица поради загадена вода за пиење. Светската здравстена организација проценува дека безбедната вода би можела да спречи 1,4 смртни случаи на деца од дијареа секоја година.[22] Но, водата не е исцрплив ресурс, туку се рециклилира како вода погодна за пиење преку дождови во многу поголеми количества од човековата потрошувачка. Поради тоа, прилично малото количество на водни резерви на Земјата (околу 1% од нашата вода за пиење, која се надополнува преку водоносни слоеви секои 1 до 10 години) е необновлив ресурс. Поретка е дистрибуцијата на вода погодна за пиење и наводнување отколку количеството кое постои на Земјата. Земјите кои немаат вода го користат увозот на добра како првичен начин за увоз на вода, бидејќи производствениот процес користи околу 10 до 100 пати вода од масата на производите. <br><br> Во земјите во развој, 90% од отпадите води сè уште непреработени се вливаат во локалните реки и потоци. Околу 50 држави, со прилика третина од светското население, исто така страдаат од среден или висок воден притисок и 17 од нив годишно извлекуваат повеќе вода од колку што се надополнува со природниот воден циклус.[23] Притисокт дејстува не само врз телата со свежа вода како реки и езера туку и го намалува квалитетот на подземните водни ресурси.
    </p>
   </div>
   <br>
   <div id="Човекова употреба">
    <h2>Човекова употреба</h2>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Водата како научен стандард">
    <h3>Водата како научен стандард</h3>
    <p>
     На 7 април 1795, во Франција било одлучено грамот да биде еднаков на „апсолутната маса на волумен чиста вода, еднаков на куб од стотинка од метар и на температурата на мраз кој се топи“.[26] За практични цели, потребен бил метален стандард за пример, илијада пати поголем. Поради тоа било потребно точно да се одреди масата на еден литар вода. И покрај фактот дека дефиницијата за грамот ја специфицирала водата на 0 °C, темпераура која лесно може да се добие одново, научниците одлучиле да го редефинираат стандардот и да ги изведат нивните мерки на температурата кога водата е најгуста, што тогаш била 4 °C. <br><br> Температурната скала на Келвин од меѓународниот систем се основа на трите точки на водата, дефинирани на точно 273,16 К или 0,01 °C. Скалата е попрецизна од Целзиусовата температурна скала, што првично била дефинирана според точката на вриење (100 °C) и точката на топење (0 °C) на водата. <br><br> Природната вода главно се состои од изотопите на водород-1 и кислород-16, но постои и мало количество на потешки изотопи како водород-2 (деутериум). Количеството на деутериум оксиди или тешка вода е многу мало, но сепак влијае врз својствата на водата. Водата од реките и езерата содржи помалку деутериум од морската вода. Поради тоа, стандарната вода е дефинирана во спецификацијата на Виенскскиот стандард за океански води.
    </p>
   </div>
   <div id="Вода за пиење">
    <h3>Вода за пиење</h3>
    <p>
     Во зависност од големината на човечкото тело, истото се состои од 55% до 78% од вода. За да функционира правилно, на телото му се потребни меѓу еден и седум литри вода дневно за да се избегне дехидрација. Точното количество зависи од степенот на активност, температурата, влажноста, но и други фактори. Поголемиот дел од ова се внесува преку храна или пијалоци, наместо пиење чиста вода. Не е јасно колку вода е потребно да се внесе од страна на здрави луѓе, иако повеќето се согласуваат дека 6 до 7 чаши вода (отприлика 2 литри) денвно, најмалку е потребо за да се одржи соодветна хидрација. Медицинската литература претпочита помало внесување, обично 1 литар вода за просечен маж, исклучувајќи ги дополнитлните потреби кои се резултат на губитокот на течности заради вежбање или топло време. За тие што имаат здрави бубрези, тешко е да се исие премногу вода, но опасно е да не се испие доволно. Луѓето можат да испијат повеќе вода од потребното за време на вежбање што ги доведува до ризик од труење од вода (хиперхидрација), што може да биде смртоносна. Фактот дека еден човек треба да испие 8 чаши вода дневно не може да се препише на ниту еден научен извор. Постојат и други митови, како на пример влијанието на водата за спречување на дебелеењето. <br><br> Водата од телото се лачи на повеќе начини: преку урина и фецес, преку потење и преку издишување на водни испарувања во здивот. Со физичко исцрпување и изложување на топлина, губитоот на вода ќе се зголеми и дневните потреби за вода исто така ќе се зголемат. На луѓето им е потребна вода која не содржи премногу нечистотии. Чести нечистотии се металните соли и оксидите (вклучуајќи бакар, железо, калциум и олово) и/или штетни бактерии како на пример бактеријата Vibrio. Некои раствори се прифатливи и дури пожелни за подобрување на вкусот и за добивањена неопходните електролити. Најголемиот извор на вода погодна за пиење е Бајкалското Езеро, кое содржи многу малку сол и калциум и затоа и се смета за многу чисто.
    </p>
   </div>
   <div id="Хигиена">
    <h3>Хигиена</h3>
    <p>
     Способноста на водата да прави раствори и емулзии се користи за миење. Голем број индустриски процеси зависат од реакциите добиени со хемикалии растворени во вода, како на пример лебдењето на цврсти честици во водена кашеста маса или употребата на вода за да се растворат и извлечат материите.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
  </div>
 </div>

</section>
</body>
</html>
 </code>```

Title: Header tag and divs with ids

Body:
I have header tag and a div tag. Also i have navigation menu with sub menus in it. They are for navigating through my web page with links to separate divs wit ids. And when i press on any of sub menus it goes to that div in the webpage but it's behind the header. It's like under that div. I want when i press to any link from nav menu to go to that part of page but to position bellow the header.

Image 1

Image 2

html,body {
 margin: 0px;
    padding: 0px;
 overflow-x: auto;
 overflow-y: auto;
 line-height: 1;
}

header {
 width: 100%;
 height: 80px;
 position: fixed;
 background-color: black;
}

header img {
 float: left;
 height: 78px;
 margin-top:-12.5px;
}

.wrapper {
 max-width: 960px;
 margin: 14px auto;
}

nav {
 float: right;
 height: auto;
}

nav ul {

}

nav ul li {
 display: inline-block;
 margin-left: 15px;
 margin-top: -15px;
 list-style: none;
}

#button1 {
 background-color: rgb(1,152,51);
 color: white;
 text-align: center;
 border: none;
 width: 70px;
 height: 50px;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-transition: -webkit-transform 2s, background 2s, width 2s, height 2s, border 2s, font-size 2s;
    -o-transition-property: width, height, border, -o-transform, background, font-size, border-radius; border; font-weight;
    -o-transition-duration: 2s,2s,2s,2s,2s,2s,2s;
    -moz-transition-property: width, height, border, -o-transform, background, font-size, border-radius; border; font-weight;
    -moz-transition-duration: 2s,2s,2s,2s,2s,2s,2s;
    transition-property: width, height, border, transform, background, font-size, border-radius; border; font-weight
    transition-duration: 2s,2s,2s,2s,2s,2s,2s;
}

#button1:hover {
 width: 150px;
    height: 50px;
    -webkit-transform: rotatex(360deg);
    transform: rotatex(360deg);
    border: solid white 4px;
    background-color: transparent;
    font-weight: bold;
    font-size: 16px;
    border-radius: 25px;
 line-height: 10px;
}

div.picture {
 margin-top:80px;
 width:100%;
 height:500px;
 background-image:url(../images/pozadina.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

div.picture1 {
 margin-top: 20px;
 float: left;
 height: 980px;
 width: 47.5%;
 z-index: 1;
 background-position: center;
 background-repeat: no-repeat;
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
            40% 0%,
            75% 84%,
            from(#4D9C41),
            to(#19911D),
            color-stop(.6,#54DE5D))
}

/* menu vo voda.html */

  #primary_nav_wrap ul {
   list-style:none;
   position:relative;
   float:left;
   margin:0;
   padding:0
  }

  #primary_nav_wrap ul a {
   display:block;
   color:#333;
   text-decoration:none;
   font-size: 18px;
   line-height: 16px;
   padding:0 15px;
  }

  #primary_nav_wrap ul li {
   position:relative;
   float:left;
   margin:0;
   padding:0
  }

  #primary_nav_wrap ul li.current-menu-item {
   background:#ddd
  }

  #primary_nav_wrap ul li:hover {
   background: rgb(1,152,51)
  }

  #primary_nav_wrap ul ul {
   display:none;
   position:absolute;
   left: 100%;
   top:0;
   background: rgb(1,152,51);
   padding:0
  }

  #primary_nav_wrap ul ul li {
   float:none;
   width:200px
  }

  #primary_nav_wrap ul ul a {
   line-height:120%;
   padding:10px 15px
  }

  #primary_nav_wrap ul ul ul {
   top:0;
   left:100%
  }

  #primary_nav_wrap ul li:hover > ul {
   display:block
  }

<!DOCTYPE html>

 <meta charset="utf-8">
 <title>Вода</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

      Екологија

       <button id="button1">

         Вода

       </button>

       <button id="button1">

         Енергија

       </button>

       <button id="button1">

         Вода

       </button>

       <button id="button1">

         Вода

       </button>

Влијание врз човековата цивилизација

- Здравје и загадување

- Човекова употреба

- Земјоделство

- Водата како научен стандард

- Вода за пиење

- Хигиена

      ВОДА

       Вода — супстанца, чиишто молекули се составени од атоми на водород и кислород и е важна за сите познати форми на живот.

       Во најчеста употреба, водата се јавува во течна агрегатна состојба, но таа има и цврста состојба (мраз) и гасна агрегатна состојба (водни испарувања или пареа). Водата покрива 71% од површината на планетата Земја. На Земјата, најчесто се наоѓа во океаните и другите големи водни тела, со 1,6% вода под површината во водоносни слоеви и 0,001% во воздухот како пареа, облаци (оформени од цврсти и течни водни честици кои лебдат во воздухот) и кондензација. Океаните содржат 97% од површинската вода, глечерите и поларните ледени покривки 2,4% и другите површински води како реки, езера и езерца 0,6%. Многу мала количина од Земјината вода се содржи во биолошките тела и во вештачки изработените производи.
 Водата на Земјата постојано се движи во циклус на испарување или транспирација (евапотранспирација), кондензација и истечни води кои најчесто стигнуваат до морињата. Над површината, испарувањето и транспирацијата придонесуваат за кондензацијата врз земјата.
 Чистата, свежа вода за пиење е неопходна за човекот и другите форми на живот. Пристапот до безбедна вода за пиење во последнава декада сигурно и значително се подобрува скоро во секој дел на светот. Постои јасна врска меѓу пристапот до безбедна вода за пиење и БДП по глава на жител. Но, некои набљудувачи предвидуваат дека до 2025 повеќе од половина од светското население ќе се соочи со ранливост поврзана со вода. Во извештај од ноември 2009 се предвидува дека до 2030, во некои региони на светот кои се во развој, побарувачката за вода ќе ги надмине резервите за 50%.[6] Водата има важен дел во светската економија, бидејќи функционира како растворувач за голем број различни хемиски материи и го олеснува индустриското ладење и транспорт. Приближно 70% од свежата вода се користи во земјоделството.

Влијание врз човековата цивилизација

Историски гледано, цивилизацијата најмногу напреднала околу реките и големите водни патишта. Месопотамија, која се смета за лулка на цивилизацијата била сместена меѓу теченијата на плодните реки Тигар и Еуфрат. Животот на населението во Древен Египет било целосно зависело од течението на реката Нил. Големите пристанишни градови како Ротердам, Лондон, Монтреал, Париз, Њујорк, Буенос Ариес, Шангај, Токио, Чикаго и Хонг Конг, делумно го должат својот развој и проширување поради лесната пристапливост преку вода и зголемувањето на трговијата, што е директен резултат на тоа. Островите со безбедни пристаништа, како Сингапур напреднале поради истата причина. Во делови од Северна Африка и Блискиот Исток, каде водата е поретка, пристап до чиста вода за пиење бил и е главен фактор за човековиот развој.

Здравје и загадување

      Водата погодна за човекова употреба се нарекува вода за пиење или вода погодна за пиење. Водата, која не е за пиење може да се направи погодна за пиење со филтрација или дестилација (да се загрее додека не испари и после пареата да се собере без нечистотиите кои ги остава) или на други начини (хемиска или топлинска преработка која ги убива бактериите). Понекогаш, изразот „безбедна вода“ важи за водата погодна за пиење од понизок квалитет (на пр. успешно се користи за исхрана кај луѓе кои имаат слаб пристап до процеси за прочистување на вода и прави повеќе добро отколку штета). Водата, која не е погодна за пиење, но не е штетна за луѓето кога се употребува за пливање или капење се нарекува со повеќе имиња, покрај вода погодна за пиење и понекогаш се нарекува „безбедна вода“ или „вода безбедна за капење“. Хлорот, кој ги иритира кожата и мукозната мембрана, се користи да ја направи водата безбедна за капење или пиење. Неговата употреба е строго техничка и најчесто се контролира со владини прописи (најчесто еден дел од милион од водата за пиење и 1-2 дела од милион хлор кој сè уште не реагирал со нечистотиите за вода за капење).

 Овој природен ресурс станува сè поредок на одредени места и неговата достапност е голем социјален и економски проблем. Моментално, околу 1 милијарда луѓе ширум светот редовно пијат загадена вода. На 29. средба на Г8 средбата во 2003 година, повеќето земји ја прифатија целта до 2015 да се преполови бројот на луѓе ширум светот кои немаат пристап до безбедна вода за пиење и санитација. Иако ова е цел која тешко може да се достигне, веројатно е дека повеќе од половина милијарда луѓе ќе останат без пристап до безбедна вода за пиење и повеќе од милијарда луѓе без пристап до соодведна санитација. Слабиот квалитет на водата и лошата санитација се смртоносни. Околу 5 милиони смртни случаи се последица поради загадена вода за пиење. Светската здравстена организација проценува дека безбедната вода би можела да спречи 1,4 смртни случаи на деца од дијареа секоја година.[22] Но, водата не е исцрплив ресурс, туку се рециклилира како вода погодна за пиење преку дождови во многу поголеми количества од човековата потрошувачка. Поради тоа, прилично малото количество на водни резерви на Земјата (околу 1% од нашата вода за пиење, која се надополнува преку водоносни слоеви секои 1 до 10 години) е необновлив ресурс. Поретка е дистрибуцијата на вода погодна за пиење и наводнување отколку количеството кое постои на Земјата. Земјите кои немаат вода го користат увозот на добра како првичен начин за увоз на вода, бидејќи производствениот процес користи околу 10 до 100 пати вода од масата на производите.

 Во земјите во развој, 90% од отпадите води сè уште непреработени се вливаат во локалните реки и потоци. Околу 50 држави, со прилика третина од светското население, исто така страдаат од среден или висок воден притисок и 17 од нив годишно извлекуваат повеќе вода од колку што се надополнува со природниот воден циклус.[23] Притисокт дејстува не само врз телата со свежа вода како реки и езера туку и го намалува квалитетот на подземните водни ресурси.

Човекова употреба

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Водата како научен стандард

      На 7 април 1795, во Франција било одлучено грамот да биде еднаков на „апсолутната маса на волумен чиста вода, еднаков на куб од стотинка од метар и на температурата на мраз кој се топи“.[26] За практични цели, потребен бил метален стандард за пример, илијада пати поголем. Поради тоа било потребно точно да се одреди масата на еден литар вода. И покрај фактот дека дефиницијата за грамот ја специфицирала водата на 0 °C, темпераура која лесно може да се добие одново, научниците одлучиле да го редефинираат стандардот и да ги изведат нивните мерки на температурата кога водата е најгуста, што тогаш била 4 °C.

 Температурната скала на Келвин од меѓународниот систем се основа на трите точки на водата, дефинирани на точно 273,16 К или 0,01 °C. Скалата е попрецизна од Целзиусовата температурна скала, што првично била дефинирана според точката на вриење (100 °C) и точката на топење (0 °C) на водата.

 Природната вода главно се состои од изотопите на водород-1 и кислород-16, но постои и мало количество на потешки изотопи како водород-2 (деутериум). Количеството на деутериум оксиди или тешка вода е многу мало, но сепак влијае врз својствата на водата. Водата од реките и езерата содржи помалку деутериум од морската вода. Поради тоа, стандарната вода е дефинирана во спецификацијата на Виенскскиот стандард за океански води.

Вода за пиење

      Во зависност од големината на човечкото тело, истото се состои од 55% до 78% од вода. За да функционира правилно, на телото му се потребни меѓу еден и седум литри вода дневно за да се избегне дехидрација. Точното количество зависи од степенот на активност, температурата, влажноста, но и други фактори. Поголемиот дел од ова се внесува преку храна или пијалоци, наместо пиење чиста вода. Не е јасно колку вода е потребно да се внесе од страна на здрави луѓе, иако повеќето се согласуваат дека 6 до 7 чаши вода (отприлика 2 литри) денвно, најмалку е потребо за да се одржи соодветна хидрација. Медицинската литература претпочита помало внесување, обично 1 литар вода за просечен маж, исклучувајќи ги дополнитлните потреби кои се резултат на губитокот на течности заради вежбање или топло време. За тие што имаат здрави бубрези, тешко е да се исие премногу вода, но опасно е да не се испие доволно. Луѓето можат да испијат повеќе вода од потребното за време на вежбање што ги доведува до ризик од труење од вода (хиперхидрација), што може да биде смртоносна. Фактот дека еден човек треба да испие 8 чаши вода дневно не може да се препише на ниту еден научен извор. Постојат и други митови, како на пример влијанието на водата за спречување на дебелеењето.

 Водата од телото се лачи на повеќе начини: преку урина и фецес, преку потење и преку издишување на водни испарувања во здивот. Со физичко исцрпување и изложување на топлина, губитоот на вода ќе се зголеми и дневните потреби за вода исто така ќе се зголемат. На луѓето им е потребна вода која не содржи премногу нечистотии. Чести нечистотии се металните соли и оксидите (вклучуајќи бакар, железо, калциум и олово) и/или штетни бактерии како на пример бактеријата Vibrio. Некои раствори се прифатливи и дури пожелни за подобрување на вкусот и за добивањена неопходните електролити. Најголемиот извор на вода погодна за пиење е Бајкалското Езеро, кое содржи многу малку сол и калциум и затоа и се смета за многу чисто.

Хигиена

      Способноста на водата да прави раствори и емулзии се користи за миење. Голем број индустриски процеси зависат од реакциите добиени со хемикалии растворени во вода, како на пример лебдењето на цврсти честици во водена кашеста маса или употребата на вода за да се растворат и извлечат материите.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Земјоделство

      Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.

Body:
all you need is #primary_nav_wrap is visible like header on scrolling . If you set the header css you must understand how its work.. Anyways I just added content-one and side-nav-div this two class name on two div before #primary_nav_wrap check the html section .

And check css and find those class checkout what I have done.

*{
box-sizing:border-box;
}
   html,
body {
  margin: 0px;
  padding: 0px;
  overflow-x: auto;
  overflow-y: auto;
  line-height: 1;
}

header {
  width: 100%;
  height: 80px;
  position: fixed;
  background-color: black;
}

header img {
  float: left;
  height: 78px;
  margin-top: -12.5px;
}

.wrapper {
  max-width: 960px;
  margin: 14px auto;
}

nav {
  float: right;
  height: auto;
}

nav ul {}

nav ul li {
  display: inline-block;
  margin-left: 15px;
  margin-top: -15px;
  list-style: none;
}

#button1 {
  background-color: rgb(1, 152, 51);
  color: white;
  text-align: center;
  border: none;
  width: 70px;
  height: 50px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: -webkit-transform 2s, background 2s, width 2s, height 2s, border 2s, font-size 2s;
  -o-transition-property: width, height, border, -o-transform, background, font-size, border-radius;
  border;
  font-weight;
  -o-transition-duration: 2s, 2s, 2s, 2s, 2s, 2s, 2s;
  -moz-transition-property: width, height, border, -o-transform, background, font-size, border-radius;
  border;
  font-weight;
  -moz-transition-duration: 2s, 2s, 2s, 2s, 2s, 2s, 2s;
  transition-property: width, height, border, transform, background, font-size, border-radius;
  border;
  font-weight transition-duration: 2s, 2s, 2s, 2s, 2s, 2s, 2s;
}

#button1:hover {
  width: 150px;
  height: 50px;
  -webkit-transform: rotatex(360deg);
  transform: rotatex(360deg);
  border: solid white 4px;
  background-color: transparent;
  font-weight: bold;
  font-size: 16px;
  border-radius: 25px;
  line-height: 10px;
}

div.picture {
  margin-top: 80px;
  width: 100%;
  height: 500px;
  background-image: url(../images/pozadina.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

div.picture1 {
  margin-top: 20px;
  float: left;
  height: 980px;
  width: 47.5%;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
}

#style-15::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6, #54DE5D))
}

/* menu vo voda.html */
.content-one{
display:inline-block;

width:100%;
}
.side-nav-div{
position:relative;
width:7em;

}
nav#primary_nav_wrap{
position:fixed;
top:80px;
left:0;

}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  line-height: 16px;
  padding: 0 15px;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
  background: #ddd
}

#primary_nav_wrap ul li:hover {
  background: rgb(1, 152, 51)
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: rgb(1, 152, 51);
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover > ul {
  display: block
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вода</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
 <div class="wrapper">
  <a href="index.html" style="text-decoration: none;">
   <img src="images/logo.svg">
  </a>
  <div style="margin-top: -13.5px; float: left;">
   <a href="index.html" style="text-decoration: none;">
    <p style="color: green; font-size: 26px; letter-spacing: 1px; font-weight:bold;">
     Екологија
    </p>
   </a>
  </div>
  <nav>
   <ul>
    <li>
     <a href="voda.html" style="text-decoration: none;">
      <button id="button1">
       <p>
        Вода
       </p>
      </button>
     </a>
    </li>
    <li>
     <a href="" style="text-decoration: none;">
      <button id="button1">
       <p>
        Енергија
       </p>
      </button>
     </a>
    </li>
    <li>
     <a href="" style="text-decoration: none;">
      <button id="button1">
       <p>
        Вода
       </p>
      </button>
     </a>
    </li>
    <li>
     <a href="" style="text-decoration: none;">
      <button id="button1">
       <p>
        Вода
       </p>
      </button>
     </a>
    </li>
     </ul>
    </nav>
 </div>
</header>
<section>
 <div style="width: 100%; height: auto; background-color: rgb(1,152,51); position: absolute; z-index: -1; overflow: visible;">
  <div class="content-one" style="max-width: 100%; min-width: 540px; margin: 0 auto; margin-top: 80px;">
   <div class="side-nav-div" style="margin-top: 20px; float: left;">
    <nav id="primary_nav_wrap">
     <ul>
      <li style="width: 200px; line-height: 0px;"><a href="#Влијание врз човековата цивилизација">Влијание врз човековата цивилизација</a>
       <ul>
        <li><a href="#Здравје и загадување">- Здравје и загадување</a></li>
        <li><a href="#Човекова употреба">- Човекова употреба</a>

         <ul>
          <li><a href="#Земјоделство">- Земјоделство</a></li>
          <li><a href="#Водата како научен стандард">- Водата како научен стандард</a></li>
          <li><a href="#Вода за пиење">- Вода за пиење</a></li>
          <li><a href="#Хигиена">- Хигиена</a></li>
         </ul>
        </li>
       </ul>
      </li>
       </ul>
    </nav>
   </div>
   <div style="float: left; width: 65%; margin-top:20px; font-size: 18px; height: auto; overflow-y: auto;" class="scrollbar" id="style-15">
    <h3 style="margin-top: 0px;">
     ВОДА
    </h3>
    <section>
     <p>
      Вода — супстанца, чиишто молекули се составени од атоми на водород и кислород и е важна за сите познати форми на живот. <br>
      Во најчеста употреба, водата се јавува во течна агрегатна состојба, но таа има и цврста состојба (мраз) и гасна агрегатна состојба (водни испарувања или пареа). Водата покрива 71% од површината на планетата Земја. На Земјата, најчесто се наоѓа во океаните и другите големи водни тела, со 1,6% вода под површината во водоносни слоеви и 0,001% во воздухот како пареа, облаци (оформени од цврсти и течни водни честици кои лебдат во воздухот) и кондензација. Океаните содржат 97% од површинската вода, глечерите и поларните ледени покривки 2,4% и другите површински води како реки, езера и езерца 0,6%. Многу мала количина од Земјината вода се содржи во биолошките тела и во вештачки изработените производи. <br> Водата на Земјата постојано се движи во циклус на испарување или транспирација (евапотранспирација), кондензација и истечни води кои најчесто стигнуваат до морињата. Над површината, испарувањето и транспирацијата придонесуваат за кондензацијата врз земјата. <br> Чистата, свежа вода за пиење е неопходна за човекот и другите форми на живот. Пристапот до безбедна вода за пиење во последнава декада сигурно и значително се подобрува скоро во секој дел на светот. Постои јасна врска меѓу пристапот до безбедна вода за пиење и БДП по глава на жител. Но, некои набљудувачи предвидуваат дека до 2025 повеќе од половина од светското население ќе се соочи со ранливост поврзана со вода. Во извештај од ноември 2009 се предвидува дека до 2030, во некои региони на светот кои се во развој, побарувачката за вода ќе ги надмине резервите за 50%.[6] Водата има важен дел во светската економија, бидејќи функционира како растворувач за голем број различни хемиски материи и го олеснува индустриското ладење и транспорт. Приближно 70% од свежата вода се користи во земјоделството.
     </p>
    </section>

   </div>
   <img src="images/Glacial_iceberg_in_Argentina.jpg" style="float: right; width: 15%; position: absolute; margin-top: 20px; margin-left: 10px; z-index: -1;">
  </div>

  <div style="clear: both; float: left; height: auto; margin-right: 150px; margin-left: 150px;">
  <br><br>
   <div id="Влијание врз човековата цивилизација">
    <h2>Влијание врз човековата цивилизација</h2>
    <hr>
    <p style="font-size: 18px;">Историски гледано, цивилизацијата најмногу напреднала околу реките и големите водни патишта. Месопотамија, која се смета за лулка на цивилизацијата била сместена меѓу теченијата на плодните реки Тигар и Еуфрат. Животот на населението во Древен Египет било целосно зависело од течението на реката Нил. Големите пристанишни градови како Ротердам, Лондон, Монтреал, Париз, Њујорк, Буенос Ариес, Шангај, Токио, Чикаго и Хонг Конг, делумно го должат својот развој и проширување поради лесната пристапливост преку вода и зголемувањето на трговијата, што е директен резултат на тоа. Островите со безбедни пристаништа, како Сингапур напреднале поради истата причина. Во делови од Северна Африка и Блискиот Исток, каде водата е поретка, пристап до чиста вода за пиење бил и е главен фактор за човековиот развој.</p>
   </div>
   <br>
   <div id="Здравје и загадување">
    <h2>Здравје и загадување</h2>
    <p style="font-size: 18px;">
     Водата погодна за човекова употреба се нарекува вода за пиење или вода погодна за пиење. Водата, која не е за пиење може да се направи погодна за пиење со филтрација или дестилација (да се загрее додека не испари и после пареата да се собере без нечистотиите кои ги остава) или на други начини (хемиска или топлинска преработка која ги убива бактериите). Понекогаш, изразот „безбедна вода“ важи за водата погодна за пиење од понизок квалитет (на пр. успешно се користи за исхрана кај луѓе кои имаат слаб пристап до процеси за прочистување на вода и прави повеќе добро отколку штета). Водата, која не е погодна за пиење, но не е штетна за луѓето кога се употребува за пливање или капење се нарекува со повеќе имиња, покрај вода погодна за пиење и понекогаш се нарекува „безбедна вода“ или „вода безбедна за капење“. Хлорот, кој ги иритира кожата и мукозната мембрана, се користи да ја направи водата безбедна за капење или пиење. Неговата употреба е строго техничка и најчесто се контролира со владини прописи (најчесто еден дел од милион од водата за пиење и 1-2 дела од милион хлор кој сè уште не реагирал со нечистотиите за вода за капење). <br><br> Овој природен ресурс станува сè поредок на одредени места и неговата достапност е голем социјален и економски проблем. Моментално, околу 1 милијарда луѓе ширум светот редовно пијат загадена вода. На 29. средба на Г8 средбата во 2003 година, повеќето земји ја прифатија целта до 2015 да се преполови бројот на луѓе ширум светот кои немаат пристап до безбедна вода за пиење и санитација. Иако ова е цел која тешко може да се достигне, веројатно е дека повеќе од половина милијарда луѓе ќе останат без пристап до безбедна вода за пиење и повеќе од милијарда луѓе без пристап до соодведна санитација. Слабиот квалитет на водата и лошата санитација се смртоносни. Околу 5 милиони смртни случаи се последица поради загадена вода за пиење. Светската здравстена организација проценува дека безбедната вода би можела да спречи 1,4 смртни случаи на деца од дијареа секоја година.[22] Но, водата не е исцрплив ресурс, туку се рециклилира како вода погодна за пиење преку дождови во многу поголеми количества од човековата потрошувачка. Поради тоа, прилично малото количество на водни резерви на Земјата (околу 1% од нашата вода за пиење, која се надополнува преку водоносни слоеви секои 1 до 10 години) е необновлив ресурс. Поретка е дистрибуцијата на вода погодна за пиење и наводнување отколку количеството кое постои на Земјата. Земјите кои немаат вода го користат увозот на добра како првичен начин за увоз на вода, бидејќи производствениот процес користи околу 10 до 100 пати вода од масата на производите. <br><br> Во земјите во развој, 90% од отпадите води сè уште непреработени се вливаат во локалните реки и потоци. Околу 50 држави, со прилика третина од светското население, исто така страдаат од среден или висок воден притисок и 17 од нив годишно извлекуваат повеќе вода од колку што се надополнува со природниот воден циклус.[23] Притисокт дејстува не само врз телата со свежа вода како реки и езера туку и го намалува квалитетот на подземните водни ресурси.
    </p>
   </div>
   <br>
   <div id="Човекова употреба">
    <h2>Човекова употреба</h2>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Водата како научен стандард">
    <h3>Водата како научен стандард</h3>
    <p>
     На 7 април 1795, во Франција било одлучено грамот да биде еднаков на „апсолутната маса на волумен чиста вода, еднаков на куб од стотинка од метар и на температурата на мраз кој се топи“.[26] За практични цели, потребен бил метален стандард за пример, илијада пати поголем. Поради тоа било потребно точно да се одреди масата на еден литар вода. И покрај фактот дека дефиницијата за грамот ја специфицирала водата на 0 °C, темпераура која лесно може да се добие одново, научниците одлучиле да го редефинираат стандардот и да ги изведат нивните мерки на температурата кога водата е најгуста, што тогаш била 4 °C. <br><br> Температурната скала на Келвин од меѓународниот систем се основа на трите точки на водата, дефинирани на точно 273,16 К или 0,01 °C. Скалата е попрецизна од Целзиусовата температурна скала, што првично била дефинирана според точката на вриење (100 °C) и точката на топење (0 °C) на водата. <br><br> Природната вода главно се состои од изотопите на водород-1 и кислород-16, но постои и мало количество на потешки изотопи како водород-2 (деутериум). Количеството на деутериум оксиди или тешка вода е многу мало, но сепак влијае врз својствата на водата. Водата од реките и езерата содржи помалку деутериум од морската вода. Поради тоа, стандарната вода е дефинирана во спецификацијата на Виенскскиот стандард за океански води.
    </p>
   </div>
   <div id="Вода за пиење">
    <h3>Вода за пиење</h3>
    <p>
     Во зависност од големината на човечкото тело, истото се состои од 55% до 78% од вода. За да функционира правилно, на телото му се потребни меѓу еден и седум литри вода дневно за да се избегне дехидрација. Точното количество зависи од степенот на активност, температурата, влажноста, но и други фактори. Поголемиот дел од ова се внесува преку храна или пијалоци, наместо пиење чиста вода. Не е јасно колку вода е потребно да се внесе од страна на здрави луѓе, иако повеќето се согласуваат дека 6 до 7 чаши вода (отприлика 2 литри) денвно, најмалку е потребо за да се одржи соодветна хидрација. Медицинската литература претпочита помало внесување, обично 1 литар вода за просечен маж, исклучувајќи ги дополнитлните потреби кои се резултат на губитокот на течности заради вежбање или топло време. За тие што имаат здрави бубрези, тешко е да се исие премногу вода, но опасно е да не се испие доволно. Луѓето можат да испијат повеќе вода од потребното за време на вежбање што ги доведува до ризик од труење од вода (хиперхидрација), што може да биде смртоносна. Фактот дека еден човек треба да испие 8 чаши вода дневно не може да се препише на ниту еден научен извор. Постојат и други митови, како на пример влијанието на водата за спречување на дебелеењето. <br><br> Водата од телото се лачи на повеќе начини: преку урина и фецес, преку потење и преку издишување на водни испарувања во здивот. Со физичко исцрпување и изложување на топлина, губитоот на вода ќе се зголеми и дневните потреби за вода исто така ќе се зголемат. На луѓето им е потребна вода која не содржи премногу нечистотии. Чести нечистотии се металните соли и оксидите (вклучуајќи бакар, железо, калциум и олово) и/или штетни бактерии како на пример бактеријата Vibrio. Некои раствори се прифатливи и дури пожелни за подобрување на вкусот и за добивањена неопходните електролити. Најголемиот извор на вода погодна за пиење е Бајкалското Езеро, кое содржи многу малку сол и калциум и затоа и се смета за многу чисто.
    </p>
   </div>
   <div id="Хигиена">
    <h3>Хигиена</h3>
    <p>
     Способноста на водата да прави раствори и емулзии се користи за миење. Голем број индустриски процеси зависат од реакциите добиени со хемикалии растворени во вода, како на пример лебдењето на цврсти честици во водена кашеста маса или употребата на вода за да се растворат и извлечат материите.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
   <div id="Земјоделство">
    <h3>Земјоделство</h3>
    <p>
     Најважната употреба на водата во земјоделството е за наводнување, што е клучен фактор за производството на храна. Наводнувањето зазема до 90% од повлечената вода во некои земји во развој и значајни размери во земји со поголем економски развој.
    </p>
   </div>
  </div>
 </div>

</section>
</body>
</html>


问:
Why is this not a valid definition of dependent function types in agda?
I was watching a lecture where the lecturer said that it was impossible, or at least very difficult to define Pi types in Agda. But I'm convinced there has to be a way. Given a type in a universe and a family from the type to the universe, any function from the type to some type in the family will be of the Pi type. So I thought it would make sense to use a lambda:

```<code>data Pi (A : Set) (B : A -> Set) : Set where
  \ (a : A) -> (b : B a) : Pi A B
</code>```

When I try to load this it gives me a parse error. I'm not sure why, perhaps it doesn't want \ to be a type constructor, but it kind of makes sense to consider a lambda to be a type constructor of a function type. Note that I am using the latex feature for Agda in Emacs but I don't think I can write latex in stack overflow. That being said, I tried replacing the lowercase lambda with an uppercase one to see if it wanted a unique type constructor, but to no avail.

答:
You can use the uppercase lambda after fixing the typo in : Pi A B, that is

```<code>data Pi (A : Set) (B : A -> Set) : Set where
  Λ : ((a : A) -> B a) -> Pi A B
</code>```

Body:
I was watching a lecture where the lecturer said that it was impossible, or at least very difficult to define Pi types in Agda. But I'm convinced there has to be a way. Given a type in a universe and a family from the type to the universe, any function from the type to some type in the family will be of the Pi type. So I thought it would make sense to use a lambda:

data Pi (A : Set) (B : A -> Set) : Set where
  \ (a : A) -> (b : B a) : Pi A B

When I try to load this it gives me a parse error. I'm not sure why, perhaps it doesn't want \ to be a type constructor, but it kind of makes sense to consider a lambda to be a type constructor of a function type. Note that I am using the latex feature for Agda in Emacs but I don't think I can write latex in stack overflow. That being said, I tried replacing the lowercase lambda with an uppercase one to see if it wanted a unique type constructor, but to no avail.

Body:
You can use the uppercase lambda after fixing the typo in : Pi A B, that is

data Pi (A : Set) (B : A -> Set) : Set where
  Λ : ((a : A) -> B a) -> Pi A B


问:
React Router V4 structure
I have two layouts: MainLayout and EmptyLayout for Login and SignUp component.

This is my current structure:

```<code>import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/login">
        <EmptyLayout>
          <LogInContainer />
        </EmptyLayout>
      </Route>
      <Route path="/">
        <MainLayout>
          <Switch>
            <Route exact path="/marketing" >
              <MarketingComponent />
            </Route>
            <Route exact path="/dashboard" >
              <DashboardContainer />
            </Route>
            <Route exact path="/admin/users" >
              <UsersContainer />
            </Route>
            <Route exact path="/admin/users/add" >
              <AddUsersContainer />
            </Route>
          </Switch>
        </MainLayout>
      </Route>
    </Switch>
  </Router>
);
</code>```

Is this a good approach?
How can I include 404 pages here?

```<code><EmptyLayout>
  <NotFound />
</EmptyLayout>
</code>```

答:
The <Switch/> component renders the first <Route/> that matches, and a <Route/> without path always matches, so you can simply put your 404 content inside <Route>...</Route> as the last child of your <Switch/>.

That said, RRv4 is very powerful because you can set up routes anywhere in your app, so like in Tyler's answer, you could make the /add part of the route be handled in your <UsersContainer/>. This will be even easier once relative routes land.

Title: React Router V4 structure

Body:
I have two layouts: MainLayout and EmptyLayout for Login and SignUp component.

This is my current structure:

import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/login">
        <EmptyLayout>
          <LogInContainer />
        </EmptyLayout>
      </Route>
      <Route path="/">
        <MainLayout>
          <Switch>
            <Route exact path="/marketing" >
              <MarketingComponent />
            </Route>
            <Route exact path="/dashboard" >
              <DashboardContainer />
            </Route>
            <Route exact path="/admin/users" >
              <UsersContainer />
            </Route>
            <Route exact path="/admin/users/add" >
              <AddUsersContainer />
            </Route>
          </Switch>
        </MainLayout>
      </Route>
    </Switch>
  </Router>
);

Is this a good approach?
How can I include 404 pages here?

<EmptyLayout>
  <NotFound />
</EmptyLayout>