Autor Zpráva
marek888
Profil
Dobrý den. Mám zde tyto stránky : http://www.pandorafields.xf.cz/ . Problém na těchto stránkách je ten, že když se na stránky přijde podívat třeba někdo, kdo má jiné rozličení, než já, tak ten text, co se dá posunovat, se strací. Nevím jak udělat aby se ten text předělal, přeformátoval, aby se neztrácel někam do stracena. Stránky mám vyřešené pomocí Css, kde jsem si nastavil v % šířku. Děkuji za všechny příspěvky.
MyShare
Profil
Nazdar trošku som sa v tom špáral čisto zo zvedavosti a spravil som niečo ako toto

<!DOCTYPE html>
<html>
<head>
 <meta http-eqiv="content-type" content="text/html;charset=utf-8">
 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <style type="text/css">
  #container {
      width: 760px;
      height: 410px;
      margin: 0 auto;
    margin-top: 50px;
  }
  .window {
      width: 580px;
      height: 195px;
      float: left;
    overflow: hidden;
  }
  .right_menu {
      width: 170px;
      float: right;
  }
  .left_menu {
      position: fixed;
      padding: 2px 5px 0px 2px;
  }
  .left_menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  .left_menu ul li {
      display: block;
  }
  .monitor {
      width: 480px;
      float: right;
  }
  .word {
      width: 100%;
      overflow: auto;
  }
  h1 { font-size: 24px; }
  .title { text-align: center;border-bottom: 3px solid blue; }
 </style>
</head>
<body>
 <div id="container">
  <div class="window">
  <div class="left_menu">
   <ul>
    <li><a href="#hello">Hello</a></li>
    <li><a href="#hello2">Hello 2</a></li>
   </ul>
  </div>
  <div class="monitor" id="hello">
   <div class="word">
    <h1 class="title">Hello</h1>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse justo erat, feugiat sit amet vestibulum at, tincidunt sit amet dolor. Cras nulla dolor, pulvinar nec lobortis quis, aliquet a orci. Donec pulvinar semper volutpat. Aliquam lobortis suscipit ultricies. Sed in diam quis purus condimentum molestie. Etiam ultrices consequat leo quis posuere.
    </p>
   </div>
   <div class="word" id="hello2">
    <h1 class="title">Hello2</h1>
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse justo erat, feugiat sit amet vestibulum at, tincidunt sit amet dolor. Cras nulla dolor, pulvinar nec lobortis quis, aliquet a orci. Donec pulvinar semper volutpat. Aliquam lobortis suscipit ultricies. Sed in diam quis purus condimentum molestie. Etiam ultrices consequat leo quis posuere.
    </p>
   </div>
  </div>
  </div>
  <div class="right_menu">
    <a href=""><img src="http://www.pandorafields.xf.cz/01.jpg"></a> <br>
    <a href=""><img src="http://www.pandorafields.xf.cz/02.jpg"></a> <br>
    <a href=""><img src="http://www.pandorafields.xf.cz/03.jpg"></a> <br>
    <a href=""><img src="http://www.pandorafields.xf.cz/04.jpg"></a> <br>
    <a href=""><img src="http://www.pandorafields.xf.cz/05.jpg"></a> <br>
    <a href=""><img src="http://www.pandorafields.xf.cz/06.jpg"></a>
  </div>
 </div>
</body>
</html>

Hádam ti to pomôže nejako :)
marek888
Profil
Díky moc, já jsem se to pokusil nějak přepsat do kodu. Funguje to vítečně, ale ještě to budu muset vyladit. Můžu se jenom zeptat, jestli by nešlo, že se tam to bude posouvat jako předtím a ne takto. Jinak díky moc!
MyShare
Profil
Nazdar

stačí ak toto
.window {
      width: 580px;
      height: 195px;
      float: left;
    overflow: hidden;
  }

zmeniš na toto
.window {
      width: 580px;
      height: 195px;
      float: left;
      overflow-y: scroll;
  }

Vlastne som len zmenil overflow z hidden na scroll

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0