HTML, CSS - posouvání divu až za hranice při zmenšování okna – CSS – Fórum

HTML, CSS - posouvání divu až za hranice při zmenšování okna

~ Anonymní uživatel
~ 45 příspěvků

10. 2. 2015 #1

Dobrý den,

prosím vás, mám jednoduchou stránku s obrázkem na pozadí a jedním blokem. Pozadí se při změně velikosti okna přizpůsouje.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    <title>Test pozadí</title>
  </head>

  <body>
    <div id="pozadi">
      <div id="blok">
          Testovací text
      </div>    
    </div>

  </body>
</html>

CSS:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#pozadi {
  height: 100%;
  min-height: 600px;
  width: 100%;
  min-width: 1024px;
  background-image: url('bg05.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid transparent;
}

#blok {
  margin: 0 auto;
  width: 700px;
  height: 70px;
  text-align: center;
  color: white;
  background-color: red;

  margin-top: 50%
}

Ten malý červený obdelník "blok" bych rád umístil ke spodnímu okraji obrazovky na střed.

Dal jsem mu tedy jednoduše margin-top: xx%. Myslel jsem, že výsledná hodnota se bude brát % z výšky okna. Ale ono se to počítá ze šířky okna a to je problém. Protože při zmenšení výšky okna se "blok" posouvá více dolů, za hranici okna.

Chtěl bych, aby se "blok" držel stále spodního okraje, tedy aby se hodnota margin-top zmenšovala při zmenšení výšky okna.

Je nějak možné nastavit, aby se výsledná hodnota margin-top počítala z výšky okna?

Děkuji.

Nahlásit jako SPAM

IP: 89.190.62.–

Marek Šloser

~ Anonymní uživatel
~ 9 příspěvků

10. 2. 2015 #2

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#pozadi {
  height: 100%;
  min-height: 600px;
  width: 100%;
  min-width: 1024px;
  background-image: url('bg05.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  border: 1px solid transparent;
}

#blok {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 700px;
  height: 70px;
  text-align: center;
  color: white;
  background-color: red;
}

Nahlásit jako SPAM

IP: 80.188.28.–

Luk

~ Anonymní uživatel
~ 45 příspěvků

10. 2. 2015 #3

Děkuju !

Nahlásit jako SPAM

IP: 89.190.62.–