???????

Раздел "заметки" содержит ответы на различные распространенные среди начинающих веб-мастеров вопросы, которые по своему объему не тянут на полноценные статьи. Для заметок, как и для статей и уроков, существует возможность комментирования.

????????? Apache + PHP + MySQL ? Windows

??? ??????? ?????????? ? ???? ??? ????????? ?? ????????????? ? ???? ?? ?????????? ?????????? ???-???????:

?????????? ???????????? ?????????? ??? ???????????????? ????? ???????????????? ???-??????????, ????? ???, ????????, Joomla ? Drupal. ??? ???????????? ????? ???????????? ??? ???????????? ????????, ????????????? ? ?????????? ?????.

???????????? ??????????? ?? ?????? ? XHTML

????? ?? ???????? ??????? ???????? ????????? ??????????? ??? ?????????? ??????? ??????? ????????? ??? ? ???? ? ????????????? ?? ??????:

<div style="text-align: center">
  <img src="pan.jpg" width="400" height="120" alt="????????" />
</div>

???????????? HTML-???????? ?? ?????? ?????? ??? ?????? JavaScript

????? ???-??????? ?????????? ????? ? ?????????? ????????????????? ??? ?????????? ?????????? ????. ????? ????? ???? ??????????? ?? ?????? ?????? ? ????????????? ?? ?????????? ????? ??????????????? ?????????? ?????????:

left = (??????_???????_???????_???????? / 2) - (??????_????? / 2)
top = (??????_???????_???????_???????? / 2) - (??????_????? / 2)

????????? ?? ??????????:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      body {height:2000px;}
      #layer1 {width: 300px; height: 200px; background: #aaa; position: fixed; left: 100px; top: 100px; display: none;}
      #capt1 {text-align: right;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      function show()
      {
          var block = document.getElementById('layer1');
          block.style.display = 'block';
          block.style.left = parseInt(document.documentElement.clientWidth)/2 - parseInt(block.offsetWidth)/2 + "px";
          block.style.top = parseInt(document.documentElement.clientHeight)/2 - parseInt(block.offsetHeight)/2 + "px";
      }
      function hide()
      {
          document.getElementById('layer1').style.display = 'none';
      }
    </script>
 
    <a href="javascript:show()">???????</a>
 
    <div id="layer1">
      <div id="capt1">
        <a href="javascript:hide()">???????</a>
      </div>
    </div> 
  </body> 
</html>

???????? ???????? ?? ?????? 7, 8, 18, 19. ??-??????, ??? ????, ????? ????????????? ?????????? ???????????? ?????? ?????????, ?????? ?????? body. ????? ????? ????? position ?? ????????? fixed. ??? ???????? ?????????? absolute, ?? ??????????? ????, ??? ????????? ???????? ?? ??????? ?? ????????? ???-????????. ?????? 18, 19 ?????????? ?????? ??????? ????????? ?????. Java-Script ??????? parseInt ? ????? ?????? ???????? ?? ???????? ?????? "px", ??????? ???? ???????? ????????????, ??????? ??? ? ????? ??? ?????????? ?????????????? ????????.

?????????? ???????????????? ???????? ?????? ?????????????

? ?????? "?????????? ???????????????? ????????? (HTML + CSS)" ?????????????? ??????????? ??????, ?? ??? ?????????? ? ???????????????? ???????????? ??????? ??????? ????????. ???????? ????? ?????? ????????? ? ?????? ????????????? ????????, ??? ?????? ????? ????????.

????????? ??????????? ????????? ??????????: ???? ?????????????? ???????, ?????? ???????? ?????????? ????, ???????? ? ??????? ????:

#parent
{
  position: relative;
  background: lime;
  width: 200px;
  height: 200px;
}
#block
{
  position: absolute;
  background: blue;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
}
<div id="parent">
  <div id="block">Hello, world</div>
</div>

????????????? ???????? ???????? CSS-????? position ?? ????????? relative, ??? ????????? ??????????????? ???????? ???????? ???????????? ?????????????. ?????? ???? ??????????? ? ??????? ???? ??? ?????? CSS-?????? left, right, bottom.

???? ? ??????? ????????? (HTML + CSS)

?????????? ??? CSS-?????: overflow, overflow-x ? overflow-y ??? ?????????? ???????????? ??????????? ???????? ????????. ??-????????? ???????? ? ???? ?????? ??????????? ? visible, ??????? ????????? ?????????? ????, ???? ??? ?????????? ?? ?????????? ? ???????? ???????. ???? ????? overflow ?????? ???????? auto, ?? ??? ????????????? ? ????? ???????? ?????????????? ? ???????????? ?????? ?????????:

.scrollblock {overflow: auto; width: 200px; height: 50px;}
<div class="scrollblock">?????????? ??? CSS-?????: <em>overflow</em>, <em>overflow-x</em> ? <em>overflow-y</em> ??? ?????????? ???????????? ??????????? ???????? ????????.</div>

????? overflow-x ? overflow-y ????????? ????????? ?????????????? ?????????????? ??? ???????????? ?????? ?????????.