Адаптивный CSS (моя позиция в верхнем меню неверна на некоторой ширине экрана)? - PullRequest
Новая
       17

Адаптивный CSS (моя позиция в верхнем меню неверна на некоторой ширине экрана)?

0 голосов
/ 11 мая 2018

Я новичок в CSS и адаптивном проектировании.

У меня есть индексная страница с заголовком, верхним меню, основным текстом и нижним колонтитулом. Верхнее меню до 300px - это нормально, но когда оно выходит за 300px, оно не изменяется, и только дополнительные ссылки на меню перемещаются вниз.

Для каждого медиазапроса я временно устанавливаю цвет для основного текста и верхнего меню, чтобы увидеть, как они меняются при изменении ширины страницы.

Где моя ошибка?

Или для вставки медиазапросов требуется специальное расположение, чтобы применить изменения к экрану шириной менее 300 пикселей?

Можете ли вы проверить верхнее меню в стиле index и css в медиазапросах?

Моя индексная страница выглядит так: 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4">
<title>registering system</title>
<link href="style-en.css" rel="stylesheet" type="text/css" />
<!--<link href="refer/bootstrap.css" rel="stylesheet" type="text/css" />-->

<script src="ref/jquery-1.9.0.js"></script>

</head>

<body onload="" >


<div id="top">
              <div class="topmenu" id="topmenu" >
                            <ul>
                                <li><a href="index.php">Main Page</a></li>
                              <?php if(!(isset($_SESSION["username"]))) { ?>
                               <li><a href="index.php?click=ln">Sign in</a></li>
                               <?php } ?>

                                <li><a href="index.php?click=contact">contact us</a></li>
                                <li><a href="index.php?click=req">request</a></li><br>
                                <li><a href="index.php?click=regp">register person</a></li>
                                <li><a href="index.php?click=regc">register in classes</a></li>
                                <li><a href="index.php?click=lp">List of persons</a></li>
                                <li><a href="index.php?click=lc"></a>List of classes</li>
                                <?php if(isset($_SESSION["username"])) { ?><li><a id="logout"  href="index.php?click=logout">logout</a></li> <?php } //logout can be this : index.php?click=logout?>

                            </ul>
              </div>

    <div  id="header" style=" background-color:#003;opacity:0.6;text-align: center" >
        <font>
            Registering System Of Education Center
        </font>
    </div>
<div class="logo" id="logo1"  align="center" >



 </div>


</div>

<div id="wrap" >
<div id="spacer"></div>
<div style="height:100px;"></div>
    <div id="main" align="right">
   <?php if(isset($_SESSION["username"])) { ?>

    <?php 
          }

   $connect=$link=db_conncet2();
    $click=mysqli_real_escape_string($connect,$_GET["click"]);


    ?>
        <a name="bl1"></a>
    <?php
    if(!($click=="ln") ) {

        if (!($click=="recov")) {
            $dv="1";
         ?>

    <?php
        }

    } 
    if(!($click=="recov") ) {

        if (!($click=="ln")) {
            if(!($dv=="1")){
         ?>

    <?php
            }
        }

    } ?>
    <div id="spacer"></div>
    <div id="maintext">
<?php   


        if($click=="ln")
            {



                require_once("login.php");

            }

        elseif($click=="logout")
        {
            require_once("logout.php");

        }



            else
            { ?>
    <p style="width:700px"><strong style="font-size:24px">Information:</strong><br />This is main page...</p>



            <?php } ?>
      </div>


</div>
</div>
<div id="footer">
 <div id="footerbg" style=" background-color:#003;opacity:0.6;" >



       </div> 

          <div id="info">

            <table id="tblfooternormal" style="bottom:0px;right:0;min-width:700px;" >
                  <tr>
                      <td width="25px"></td>

                      <td>

                          <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />

                          <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                          <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                          <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>

                      </td>
                      <td>        <img src="img/telegram.png" width="50px" height="50px" style=" clear:left;

float:right;margin-left:20px; " /><font color="#00CC66" id="down" ><b>Our channel:</b></font><br />
                          <font color="#00CC66" id="down" ><b><a href="http://#" target="_blank"

                                                                 style="text-decoration: none;color:#09C;" >####</a>&nbsp;&nbsp;&nbsp;</b></font><br />
                      </td>

                      <td>
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px

solid;">&nbsp;&nbsp;</font><br />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px

solid;">&nbsp;&nbsp;</font><br />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br

                          />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                      </td>
                      <td>
                          <font color="#00CC66" id="down" ><b>Address:</b></font><br /><br />

                          <font color="#00CC66" id="down" ><b>Tel:</b></font><br />
                      </td>
                      <td>
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px

solid;">&nbsp;&nbsp;</font><br />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px

solid;">&nbsp;&nbsp;</font><br />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br

                          />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                      </td>

                      <td>
                          <font color="#00CC66" id="down" ><b>Wrb design department</b></font><br />
                          <font color="#00CC66" id="down" ><b>History:</b></font><br />
                          <font color="#00CC66" id="down" ><b>.................</b></font><br />
                      </td>
                      <td>
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br

                          />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br

                          />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br

                          />
                          <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                      </td>

                  </tr>

              </table>
              <!-- /////////////////////////////////////////responsive table//////////////////////////////////////////////////////-->
              <!-- /////////////////////////////////////////responsive table//////////////////////////////////////////////////////-->
              <!-- /////////////////////////////////////////responsive table//////////////////////////////////////////////////////-->

              <table id="tblfooterrespons"  style="bottom:0px;right:10px;width: 70%;" >
                  <tr style="width: 50%">


                      <td>
                          <font color="#00CC66" id="down" ><b>Wrb design department</b></font><br />


                          <img src="img/telegram.png" width="50px" height="50px" style=" clear:left;

float:right;margin-left:20px; " /><font color="#00CC66" id="down" ><b>Our channel:</b></font><br />
                          <font color="#00CC66" id="down" ><b><a href="http://#" target="_blank"

                                                                 style="text-decoration: none;color:#09C;" >###</a>&nbsp;&nbsp;&nbsp;</b></font><br />
                      </td></tr>
                  <tr>
                      <td>

                          <hr color="#00CC66" >

                      </td>
                  </tr>
                  <tr>

                      <td>
                          <font color="#00CC66" id="down" ><b>Address:</b></font><br /><br />

                          <font color="#00CC66" id="down" ><b>Tel:</b></font><br />
                      </td>
                  </tr>
                  <tr>
                      <td>

                          <hr color="#00CC66" >

                      </td>
                  </tr>

              </table>
        </div>

</div>


</body>
</html>

И мой стиль CSS таков: 

@font-face {
    font-family: 'headfont';
    src: url('fonts/headfontBd.eot');src: url('fonts/headfontBd.eot?#') format('eot');
    src: local('☺'), url('fonts/headfontBd.woff') format('woff'), url('fonts/headfontBd.ttf') format('truetype'), url('fonts/headfontBd.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'containfont';
    src: url('fonts/containfont.eot');
    src: local('☺'), url('fonts/containfont.woff') format('woff'), url('fonts/containfont.ttf') format('truetype'), url('fonts/containfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {margin:0;padding:0;}




html, body {

    height: 100%;
    /*max-width: inherit;*/

    direction:rtl;
    font-family:"containfont",Tahoma, Arial;
    background-image:url(bg/bg7-2.jpg);
    background-position: right;
    background-size: auto;
    background-repeat:no-repeat;
    /*background-position-x: -210px;*/
    /*background-position-y: -415px;*/
    background-size: 150%,150%;
    }

#wrap {
     min-height: 100%;

     }

#main {

    padding-bottom: 210px;
    padding-right:20px;
    min-height:150px;
    min-width:550px;


    }  /* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    min-width:100%;
    min-height:100px;
    } 
    #top 
    {
    position: relative;
    margin-bottom: -100px; /* negative value of top height */
    height: 100px;
    clear:both;
    /*min-width:80em;*/


    }
#tblfooterrespons
{
    display: none;
}



 #topmenu ul {

    list-style-type: none;
    margin: 0;
    padding-right:0;
    overflow: hidden;
    background-color: transparent;
    text-align:center;

}


#topmenu li {
    margin-right:1em;
    float: right;
    outline-width:medium;  
    text-decoration: none;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    -o-border-radius: 150px;
    border-radius: 150px;
    background-color:#069;
    margin-bottom: 10px;
    min-width: 122px;

}
#topmenu {

    padding-top:5em;
    max-height:25px;
    min-height:25px;
    /*width:70em;*/
    opacity:1;
    margin-right:0em;
    z-index: 1000;

    position:absolute;

}

#topmenu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 26px;

    text-decoration: none;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;

    transition: all 0.5s ease 0s;


}


li a:hover {
    background-color: #18E9F3;
    color:#000 !important;
}


a:visited
{
    text-decoration:none;
    border:none;
}
a:link { text-decoration:none; border:none }




#header,#logo1
{
    top:0em;
    left:0em;



}

#header
{
    top:0px;
    right:0px;
    min-width:100%;
    min-height: 100px;
    /*font-size: larger;*/
    font-family: headfont;
    font-weight: bold;
}
#header font
{
    font-size: 36px;
    color: #00ffff;
    text-align: center;
}
#header,#logo1,#footerbg,#info
{
    width: 100%;
    /*min-width:100%;*/
     /*or 100%*/

    z-index: 14;
    padding: 0px 0px;
    margin:0px 0px;
    position:absolute;
    }
#footerbg,#info
{
    bottom:0px;
    right:0px;
    /*min-height:115px;*/

    }
    #footerbg
    {

        min-width: 100%;
        min-height:115px;

    }
#info   
{

margin-right: 0px;  /* jadid 97/02 */
}

#down
{
    font-size:14px;

}

#userinfo
 {
     margin-right:52em;
     min-width:200px;
    width:300px;
     height: 150px;
     position:absolute;
    background: #5EFF5E;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    transition: all 1s ease 0s;

}

#bgcontainer
 {
     margin-right:13.5em;
     margin-top:-2em;
     padding-bottom:1.25em;
     padding-top:4.25em;
    height:8.25em;
    width:25em;
    background-color:#7DA8FF    ;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;

z-idex:2;
    position:absolute;


}
#bgcontainer2
 {
     margin-right:13.5em;
     margin-top:-2em;
     padding-bottom:1.25em;
     padding-top:2.25em;
    height:12em;
    width:25em;
    background-color:#7DA8FF    ;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
     z-idex:2;
    position:absolute;


}
#bgcontainer3
 {

    padding-top:1.5em;
    margin-top:2em;
    margin-right:13.5em;
    text-align:center;
    width:25em;
    background-color:#FFD5D5    ;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 2em;
    vertical-align:top;
    color:#FF0D13;
    position:relative;

}
#maintext
 {

     padding-right:0%;
     max-width:600px;
     /*width:820px;*/
    /* width:auto;*/
    margin-top: 60px;
     padding-bottom:50px;
    background: #8CE8F2;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
}
#p1
{
    transition: all 1s ease 0s;
}

#spacer
{
    height:10px !important; 
}
#spacer2
{
    height:40px !important; 
}
input
{

    margin-right:0%;    
}
label
{
margin-right:5%;    
}
p
{
    overflow-x: hidden;
    padding-top:3%;
    min-height:50px;
    padding-right:5%;
    max-width:500px; /*jadid 97*/
    clear:both;
    color:#000000;
    background-color:#8CE8F2;
    margin-left:10%;
    padding-bottom:4%;
    -moz-border-radius:  50px 0px;
    -webkit-border-radius:  50px 0px;
    -o-border-radius:  50px 0px;
    border-radius: 50px 0px;



    }
table,tr
{

    border-spacing: 5px;    
    -moz-border-radius:  20px;
    -webkit-border-radius:  20px;
    -o-border-radius:  20px;
    border-radius: 20px;



    }
td
{

    -moz-border-radius:  10px;
    -webkit-border-radius:  10px;
    -o-border-radius:  10px;
    border-radius: 10px;

}
th
{

    -moz-border-radius:  10px;
    -webkit-border-radius:  10px;
    -o-border-radius:  10px;
    border-radius: 10px;

}


input[dpieagent_iecontroltype="2"]
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color:#000;
}
input[type="text"]
{
     text-indent: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color:#000;
}
input[type="password"]
{
    text-indent: 8px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color:#000;
}
input[type="submit"]
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color:#000;
    font-family: containfont, Tahoma, Arial ;
    transition: all 0.5s ease 0s;
}
input[type="reset"]
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    font-family: containfont, Tahoma, Arial ;
    border-color:#000;
    transition: all 0.5s ease 0s;
}
input[type="button"]
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color:#000;
}
select
{

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color:#000;
    font-family:"containfont",Tahoma, Arial;
}
#exit
{
background-color:#FF4040;
        transition: all 0.5s ease 0s;
}
#exit:hover {
    background-color: #FF8040;
    color:#000 !important;
}






@media only screen and (max-device-width : 740px){
    /*#logo {margin: 0 auto;}*/
}
@media only screen and (max-width : 740px) {
    #header {


        font-family: headfont;
        font-weight: bold;
    }

    #header font {
        /*size: 26px;*/
        font-size: 26px;
        color: #00ffff;

        font-weight: bold;
    }
}
@media only screen and (max-device-width : 700px){
    /*#logo {margin: 0 auto;}*/
}
@media only screen and (max-width : 700px){

    #footerbg
    {
    margin-top: 10px;
    height: 200px;

    }
    #footer
    {
        margin-top: -250px;
        height: 250px;
        min-height:250px;
    }
    #tblfooternormal
    {
        display: none;
    }
    #tblfooterrespons
    {
        margin-right: 35px;
        display: inherit;
    }

}

/*
!*responsive css*!
////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////
*/

@media only screen and (max-device-width : 570px){
}
@media only screen and (max-width : 570px) {
    #header {


        font-family: headfont;
        font-weight: bold;
    }

    #header font {
        /*size: 26px;*/
        font-size: 19px;
        color: #ec4b3f;

        font-weight: bold;
    }
}

@media only screen and (max-device-width : 100px){
}
@media only screen and (max-width : 100px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%;


    }

}

@media only screen and (max-device-width : 200px){
}
@media only screen and (max-width : 200px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 


    }
}

@media only screen and (max-device-width : 300px){
}
@media only screen and (max-width : 300px){

    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 


    }
    #header {


        font-family: headfont;
        font-weight: bold;
    }

    #header font {

        font-size: 16px;
        color: #00ffff;
        font-weight: bold;
    }

    #topmenu {

        padding-top:5em;
        max-height:9px;
        min-height:9px;

        opacity:1;
        margin-right:0em;
        z-index: 1000;

        position:absolute;

    }
    #topmenu li {

        margin-bottom: 10px;
        max-width: 70px;

    }
    #topmenu li a {
        padding: 2px 5px;
        background-color: #ec4b3f;
        font-size: 5px;
    }
}

@media only screen and (max-device-width : 400px){
}
@media only screen and (max-width : 400px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 
        background-color: #ec4b3f;

    }

    #topmenu {

        padding-top:8em;
        max-height:11px;
        min-height:11px;

        opacity:1;
        margin-right:0em;
        z-index: 1000;

        position:absolute;

    }
    #topmenu li {

        margin-bottom: 10px;
        max-width: 90px;

    }
    #topmenu li a {
        padding: 3px 3px;
        background-color: #72F96A;
        font-size: 7px;
    }
}

@media only screen and (max-device-width : 500px){
}
@media only screen and (max-width : 500px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 
        background-color: #FF8080;

    }
    #topmenu {

        padding-top:5em;
        max-height:15px;
        min-height:15px;

        opacity:1;
        margin-right:0em;
        z-index: 1000;

        position:absolute;

    }
    #topmenu li {

        margin-bottom: 10px;
        max-width: 125px;

    }

    #topmenu li a {
        padding: 7px 18px;
        background-color: #990099;
        font-size: 10px;
    }
}

@media only screen and (max-device-width : 600px){
}
@media only screen and (max-width : 600px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%;


    }



    #topmenu li {

        margin-bottom: 10px;
        min-width: 60px;

    }
    #topmenu {



    }

    #topmenu li a {

        font-size: 80%;
    }

}

@media only screen and (max-device-width : 700px){
}
@media only screen and (max-width : 700px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 


    }
}

@media only screen and (max-device-width : 800px){
}
@media only screen and (max-width : 800px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 


    }
}

@media only screen and (max-device-width : 900px){
}
@media only screen and (max-width : 900px){
    #main {

        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
    }


    #maintext
    {

        padding-right:0%;
        max-width:90%;
    }
    p
    {
        max-width:80%; 


    }
}

Пожалуйста, помогите мне решить проблему.

Спасибо

1 Ответ

0 голосов
/ 11 мая 2018

Вот мое исправление и предложение - единственная ошибка, которую вы допустили, заключается в заказе этих медиа-запросов. Я переупорядочил их от максимальной до минимальной ширины (скажем, от 900 до 100), и все работает. откройте приведенный ниже фрагмент на полном экране, и он будет делать, как вы говорите.

Надеюсь, это поможет !! 

@font-face {
    font-family: 'headfont';
    src: url('fonts/headfontBd.eot');
    src: url('fonts/headfontBd.eot?#') format('eot');
    src: local('☺'), url('fonts/headfontBd.woff') format('woff'), url('fonts/headfontBd.ttf') format('truetype'), url('fonts/headfontBd.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'containfont';
    src: url('fonts/containfont.eot');
    src: local('☺'), url('fonts/containfont.woff') format('woff'), url('fonts/containfont.ttf') format('truetype'), url('fonts/containfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
   /*max-width: inherit;
   */
    direction: rtl;
    font-family: "containfont", Tahoma, Arial;
    background-image: url(bg/bg7-2.jpg);
    background-position: right;
    background-size: auto;
    background-repeat: no-repeat;
   /*background-position-x: -210px;
   */
   /*background-position-y: -415px;
   */
    background-size: 150%, 150%;
}
#wrap {
    min-height: 100%;
}
#main {
    padding-bottom: 210px;
    padding-right: 20px;
    min-height: 150px;
    min-width: 550px;
}
/* must be same height as the footer */
#footer {
    position: relative;
    margin-top: -100px;
   /* negative value of footer height */
    height: 100px;
    min-width: 100%;
    min-height: 100px;
}
#top {
    position: relative;
    margin-bottom: -100px;
   /* negative value of top height */
    height: 100px;
    clear: both;
   /*min-width:80em;
   */
}
#tblfooterrespons {
    display: none;
}
#topmenu ul {
    list-style-type: none;
    margin: 0;
    padding-right: 0;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
}
#topmenu li {
    margin-right: 1em;
    float: right;
    outline-width: medium;
    text-decoration: none;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    -o-border-radius: 150px;
    border-radius: 150px;
    background-color: #069;
    margin-bottom: 10px;
    min-width: 122px;
}
#topmenu {
    padding-top: 5em;
    max-height: 25px;
    min-height: 25px;
   /*width:70em;
   */
    opacity: 1;
    margin-right: 0em;
    z-index: 1000;
    position: absolute;
}
#topmenu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 26px;
    text-decoration: none;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    transition: all 0.5s ease 0s;
}
li a:hover {
    background-color: #18E9F3;
    color: #000 !important;
}
a:visited {
    text-decoration: none;
    border: none;
}
a:link {
    text-decoration: none;
    border: none 
}
#header, #logo1 {
    top: 0em;
    left: 0em;
}
#header {
    top: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100px;
   /*font-size: larger;
   */
    font-family: headfont;
    font-weight: bold;
}
#header font {
    font-size: 36px;
    color: #00ffff;
    text-align: center;
}
#header, #logo1, #footerbg, #info {
    width: 100%;
   /*min-width:100%;
   */
   /*or 100%*/
    z-index: 14;
    padding: 0px 0px;
    margin: 0px 0px;
    position: absolute;
}
#footerbg, #info {
    bottom: 0px;
    right: 0px;
   /*min-height:115px;
   */
}
#footerbg {
    min-width: 100%;
    min-height: 115px;
}
#info {
    margin-right: 0px;
   /* jadid 97/02 */
}
#down {
    font-size: 14px;
}
#userinfo {
    margin-right: 52em;
    min-width: 200px;
    width: 300px;
    height: 150px;
    position: absolute;
    background: #5EFF5E;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    transition: all 1s ease 0s;
}
#bgcontainer {
    margin-right: 13.5em;
    margin-top: -2em;
    padding-bottom: 1.25em;
    padding-top: 4.25em;
    height: 8.25em;
    width: 25em;
    background-color: #7DA8FF;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    z-idex: 2;
    position: absolute;
}
#bgcontainer2 {
    margin-right: 13.5em;
    margin-top: -2em;
    padding-bottom: 1.25em;
    padding-top: 2.25em;
    height: 12em;
    width: 25em;
    background-color: #7DA8FF;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    z-idex: 2;
    position: absolute;
}
#bgcontainer3 {
    padding-top: 1.5em;
    margin-top: 2em;
    margin-right: 13.5em;
    text-align: center;
    width: 25em;
    background-color: #FFD5D5;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 2em;
    vertical-align: top;
    color: #FF0D13;
    position: relative;
}
#maintext {
    padding-right: 0%;
    max-width: 600px;
   /*width:820px;
   */
   /* width:auto;
   */
    margin-top: 60px;
    padding-bottom: 50px;
    background: #8CE8F2;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
}
#p1 {
    transition: all 1s ease 0s;
}
#spacer {
    height: 10px !important;
}
#spacer2 {
    height: 40px !important;
}
input {
    margin-right: 0%;
}
label {
    margin-right: 5%;
}
p {
    overflow-x: hidden;
    padding-top: 3%;
    min-height: 50px;
    padding-right: 5%;
    max-width: 500px;
   /*jadid 97*/
    clear: both;
    color: #000000;
    background-color: #8CE8F2;
    margin-left: 10%;
    padding-bottom: 4%;
    -moz-border-radius: 50px 0px;
    -webkit-border-radius: 50px 0px;
    -o-border-radius: 50px 0px;
    border-radius: 50px 0px;
}
table, tr {
    border-spacing: 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
td {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
th {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
input[dpieagent_iecontroltype="2"] {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color: #000;
}
input[type="text"] {
    text-indent: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color: #000;
}
input[type="password"] {
    text-indent: 8px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color: #000;
}
input[type="submit"] {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color: #000;
    font-family: containfont, Tahoma, Arial;
    transition: all 0.5s ease 0s;
}
input[type="reset"] {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    font-family: containfont, Tahoma, Arial;
    border-color: #000;
    transition: all 0.5s ease 0s;
}
input[type="button"] {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color: #000;
}
select {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    height: 25px;
    border-color: #000;
    font-family: "containfont", Tahoma, Arial;
}
#exit {
    background-color: #FF4040;
    transition: all 0.5s ease 0s;
}
#exit:hover {
    background-color: #FF8040;
    color: #000 !important;
}
@media only screen and (max-device-width: 740px) {
   /*#logo {
       margin: 0 auto;
   }
   */
}
@media only screen and (max-width: 740px) {
    #header {
        font-family: headfont;
        font-weight: bold;
   }
    #header font {
       /*size: 26px;
       */
        font-size: 26px;
        color: #00ffff;
        font-weight: bold;
   }
}
@media only screen and (max-device-width: 700px) {
   /*#logo {
       margin: 0 auto;
   }
   */
}
@media only screen and (max-width: 700px) {
    #footerbg {
        margin-top: 10px;
        height: 200px;
   }
    #footer {
        margin-top: -250px;
        height: 250px;
        min-height: 250px;
   }
    #tblfooternormal {
        display: none;
   }
    #tblfooterrespons {
        margin-right: 35px;
        display: inherit;
   }
}
/* !*responsive css*! //////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////// */
@media only screen and (max-device-width: 570px) {
}

@media only screen and (max-width: 570px) {
    #header {
        font-family: headfont;
        font-weight: bold;
   }
    #header font {
       /*size: 26px;
       */
        font-size: 19px;
        color: #ec4b3f;
        font-weight: bold;
   }
}

@media only screen and (max-device-width: 900px) {
}

@media only screen and (max-width: 900px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
}


@media only screen and (max-device-width: 800px) {
}

@media only screen and (max-width: 800px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
}


@media only screen and (max-device-width: 700px) {
}

@media only screen and (max-width: 700px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
}

@media only screen and (max-device-width: 500px) {
}

@media only screen and (max-width: 500px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
        background-color: #FF8080;
   }
    #topmenu {
        padding-top: 5em;
        max-height: 15px;
        min-height: 15px;
        opacity: 1;
        margin-right: 0em;
        z-index: 1000;
        position: absolute;
   }
    #topmenu li {
        margin-bottom: 10px;
        max-width: 125px;
   }
    #topmenu li a {
        padding: 7px 18px;
        background-color: #990099;
        font-size: 10px;
   }
}

@media only screen and (max-device-width: 600px) {
}

@media only screen and (max-width: 600px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
    #topmenu li {
        margin-bottom: 10px;
        min-width: 60px;
   }
    #topmenu li a {
        font-size: 80%;
   }
}

@media only screen and (max-device-width: 400px) {
}

@media only screen and (max-width: 400px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
        background-color: #ec4b3f;
   }
    #topmenu {
        padding-top: 8em;
        max-height: 11px;
        min-height: 11px;
        opacity: 1;
        margin-right: 0em;
        z-index: 1000;
        position: absolute;
   }
    #topmenu li {
        margin-bottom: 10px;
        max-width: 90px;
   }
    #topmenu li a {
        padding: 3px 3px;
        background-color: #72F96A;
        font-size: 7px;
   }
}

@media only screen and (max-device-width: 300px) {
}

@media only screen and (max-width: 300px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
    #header {
        font-family: headfont;
        font-weight: bold;
   }
    #header font {
        font-size: 16px;
        color: #00ffff;
        font-weight: bold;
   }
    #topmenu {
        padding-top: 5em;
        max-height: 9px;
        min-height: 9px;
        opacity: 1;
        margin-right: 0em;
        z-index: 1000;
        position: absolute;
   }
    #topmenu li {
        margin-bottom: 10px;
        max-width: 70px;
   }
    #topmenu li a {
        padding: 2px 5px;
        background-color: #ec4b3f;
        font-size: 5px;
   }
}

@media only screen and (max-device-width: 200px) {
}

@media only screen and (max-width: 200px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
}
@media only screen and (max-device-width: 100px) {
}

@media only screen and (max-width: 100px) {
    #main {
        padding-bottom: 210px;
        padding-right: 10px;
        min-height: 150px;
        min-width: 90%;
   }
    #maintext {
        padding-right: 0%;
        max-width: 90%;
   }
    p {
        max-width: 80%;
   }
}
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4">
      <title>registering system</title>
      <link href="style-en.css" rel="stylesheet" type="text/css" />
      <script src="ref/jquery-1.9.0.js"></script>
   </head>
   <body onload="">
      <div id="top">
         <div class="topmenu" id="topmenu">
            <ul>
               <li><a href="index.php" class='lia'>Main Page</a></li>
               <li><a href="index.php?click=ln">Sign in</a></li>
               <li><a href="index.php?click=contact">contact us</a></li>
               <li><a href="index.php?click=req">request</a></li>
               <br>
               <li><a href="index.php?click=regp">register person</a></li>
               <li><a href="index.php?click=regc">register in classes</a></li>
               <li><a href="index.php?click=lp">List of persons</a></li>
               <li><a href="index.php?click=lc"></a>List of classes</li>
               <li><a id="logout" href="index.php?click=logout">logout</a></li>
            </ul>
         </div>
         <div id="header" style=" background-color:#003;opacity:0.6;text-align: center">
            <font>
            Registering System Of Education Center
            </font>
         </div>
         <div class="logo" id="logo1" align="center">
         </div>
      </div>
      <div id="wrap">
         <div id="spacer"></div>
         <div style="height:100px;"></div>
         <div id="main" align="right">
            <a name="bl1"></a>
            <div id="spacer"></div>
            <div id="maintext">
               <p style="width:700px"><strong style="font-size:24px">Information:</strong><br />This is main page...</p>
            </div>
         </div>
      </div>
      <div id="footer">
         <div id="footerbg" style=" background-color:#003;opacity:0.6;">
         </div>
         <div id="info">
            <table id="tblfooternormal" style="bottom:0px;right:0;min-width:700px;">
               <tr>
                  <td width="25px"></td>
                  <td>
                     <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                  </td>
                  <td> <img src="img/telegram.png" width="50px" height="50px" style=" clear:left;
                     float:right;margin-left:20px; " />
                     <font color="#00CC66" id="down"><b>Our channel:</b></font><br />
                     <font color="#00CC66" id="down"><b><a href="http://#" target="_blank"
                        style="text-decoration: none;color:#09C;" >####</a>&nbsp;&nbsp;&nbsp;</b></font><br />
                  </td>
                  <td>
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px
                        solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px
                        solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                  </td>
                  <td>
                     <font color="#00CC66" id="down"><b>Address:</b></font><br /><br />
                     <font color="#00CC66" id="down"><b>Tel:</b></font><br />
                  </td>
                  <td>
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px
                        solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px
                        solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                  </td>
                  <td>
                     <font color="#00CC66" id="down"><b>Wrb design department</b></font><br />
                     <font color="#00CC66" id="down"><b>History:</b></font><br />
                     <font color="#00CC66" id="down"><b>.................</b></font><br />
                  </td>
                  <td>
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font><br />
                     <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;">&nbsp;&nbsp;</font>
                  </td>
               </tr>
            </table>
            <!-- /////////////////////////////////////////responsive table//////////////////////////////////////////////////////-->
            <table id="tblfooterrespons" style="bottom:0px;right:10px;width: 70%;">
               <tr style="width: 50%">
                  <td>
                     <font color="#00CC66" id="down"><b>Wrb design department</b></font><br />
                     <img src="img/telegram.png" width="50px" height="50px" style=" clear:left;
                        float:right;margin-left:20px; " />
                     <font color="#00CC66" id="down"><b>Our channel:</b></font><br />
                     <font color="#00CC66" id="down"><b><a href="http://#" target="_blank"
                        style="text-decoration: none;color:#09C;" >###</a>&nbsp;&nbsp;&nbsp;</b></font><br />
                  </td>
               </tr>
               <tr>
                  <td>
                     <hr color="#00CC66">
                  </td>
               </tr>
               <tr>
                  <td>
                     <font color="#00CC66" id="down"><b>Address:</b></font><br /><br />
                     <font color="#00CC66" id="down"><b>Tel:</b></font><br />
                  </td>
               </tr>
               <tr>
                  <td>
                     <hr color="#00CC66">
                  </td>
               </tr>
            </table>
         </div>
      </div>
   </body>
</html>
...