响应式CSS（我的topmenu位置在某个宽度屏幕中不正确）？ [英] Responsive CSS (my topmenu position is incorrect in some width screen)?
本文介绍了响应式CSS（我的topmenu位置在某个宽度屏幕中不正确）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我很喜欢CSS和响应式设计。
我有一个索引页面，包含页眉，topmenu，maintext和footer.but topmenu高达300px很好，它的大小缩小但300px以下不会改变，只有菜单的附加链接向下移动。
对于每个媒体查询，我设置颜色对于maintext和topmenu暂时看看它们在页面宽度变化时如何变化。
我的错误在哪里？
或媒体查询的插入是否需要特定的安排才能将更改应用于宽度小于300像素的屏幕？
我的索引页面是这样的：
I'm begginer to CSS and responsive designing.
I have an index page that has header,topmenu,maintext and footer.but The topmenu up to 300px is fine and its size shrinks but under 300px does not change, and only the additional links to the menus are moved down.
For each media query, I set the color for the maintext and the topmenu temporarily to see how they change when the page width changes.
Where is my mistake?
Or Does the insertion of media queries require a specific arrangement to apply changes to screen with a width less than 300 pixels?
My Index page is this:
<!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>
And my CSS style is this:
And my CSS style is this:
@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%;
}
}
Please help me to resolve the problem.
Thanks
What I have tried:
I dont know what write here.....
Please help me to resolve the problem.
Thanks
What I have tried:
I dont know what write here.....
推荐答案
_SESSION[\"username\"]))) { ?>
<li><a href=\"index.php?click=ln\">Sign in<< span class=\"code-leadattribute\">/a></li>
\t\t\t\t\t\t\t <?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 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"])) { ?><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[\"us ername\"])) { ?>
<?php
\t\t }
_SESSION["username"])) { ?> <?php }
这篇关于响应式CSS（我的topmenu位置在某个宽度屏幕中不正确）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
