Реагировать CSS (мою позицию topmenu некорректно в некоторых ширине экрана)?
Я начинаю с CSS и адаптивного дизайна.
У меня есть индексная страница,которая имеет заголовок,topmenu, maintext и нижний колонтитул.но topmenu до 300px-это нормально, и его размер уменьшается, но ниже 300px не меняется, и только дополнительные ссылки на меню перемещаются вниз.
Для каждого медиа-запроса я временно устанавливаю цвет для основного текста и верхнего меню, чтобы увидеть, как они меняются при изменении ширины страницы.
Где же моя ошибка?
Или вставка медиа-запросов требует определенного расположения для применения изменений к экрану шириной менее 300 пикселей?
Моя индексная страница такова:
<!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">Information:<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;"> </font><br />
<font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </font><br />
<font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </font><br />
<font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </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" >Our channel:</font><br />
<font color="#00CC66" id="down" ><a href="http://#" target="_blank"
style="text-decoration: none;color:#09C;" >####</a> </font><br />
</td>
<td>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px
solid;"> </font><br />
<font color="#00CC66" style="height:50px;width:2px;border-right:1px
solid;"> </font><br />
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br
/>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font>
</td>
<td>
<font color="#00CC66" id="down" >Address:</font><br /><br />
<font color="#00CC66" id="down" >Tel:</font><br />
</td>
<td>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px
solid;"> </font><br />
<font color="#00CC66" style="height:50px;width:2px;border-right:1px
solid;"> </font><br />
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br
/>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font>
</td>
<td>
<font color="#00CC66" id="down" >Wrb design department</font><br />
<font color="#00CC66" id="down" >History:</font><br />
<font color="#00CC66" id="down" >.................</font><br />
</td>
<td>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br
/>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br
/>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br
/>
<font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </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" >Wrb design department</font><br />
<img src="img/telegram.png" width="50px" height="50px" style=" clear:left;
float:right;margin-left:20px; " /><font color="#00CC66" id="down" >Our channel:</font><br />
<font color="#00CC66" id="down" ><a href="http://#" target="_blank"
style="text-decoration: none;color:#09C;" >###</a> </font><br />
</td></tr>
<tr>
<td>
<hr color="#00CC66" >
</td>
</tr>
<tr>
<td>
<font color="#00CC66" id="down" >Address:</font><br /><br />
<font color="#00CC66" id="down" >Tel:</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%;
}
}
Пожалуйста, помогите мне решить эту проблему.
Спасибо
Что я уже пробовал:
Я не знаю, что здесь пишут.....