How to make interface compatible on different screen resolution
Question
I have made few pages where all the files where tested on screen resolution 1366x768. But when i tested it on 1024x768 the menu & images overlap. Is there some solution to this ? Please Help!
This is my homepage.php
<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
#heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
a:hover{ color:#BEBEBC; }
a{ color:black;}
#img{margin:10px 10px;}
.box {margin-left: auto;margin-right: auto;}
.wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
#rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#copyright{text-align:center;color:black;}
ul{
padding: 0;
list-style: none;
}
ul li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
}
li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
//background: #1E90FF;
color:black;
}
ul li a{
display: block;
//padding: 5px 10px;
color: black;
//background: #B0D8FF;
text-decoration: none;
}
ul li a:hover{
color: white;
//background: #939393;
}
ul li ul{
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<a href="homepage.php"><img id="img" src="LOGO.jpg" width="150px" height="100px"></a>
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
<div id="heading"><ul>
<li><a href="homepage.php">Home</a></li>
<li><?php echo ucwords($_SESSION['usr_name']); ?> ▾
<ul>
<li><a href="changepswd.php">Change Password</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</li>
<li><a href="UserManual.pdf" target="_blank">Help</a></li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;">3-Seater</a></td><td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></a></td>
<td style="border-radius: 5px;border-style: solid;" align="center"><a href="#" style="text-decoration:none;">5-Seater</a></td><td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></td></a>
<td style="border-radius: 5px;border-style: solid;" align="center" align="center"><a href="#" style="text-decoration:none;">8-Seater</a></td>
<td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></td></a>
<td style="border-radius: 5px;border-style: solid;" align="center"><a href="#" style="text-decoration:none;">16-Seater</a></td>
<td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></td></a> </tr>
</table>
<div class="wrapper">
<table class="box">
<tr>
<td align="center"> <a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</a></h2><p align="center">This is a 3-Seater room.</font></p></td>
<td align="center"> <a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</a></h2><p align="center">This is a 5-Seater room.</font></p></td>
<td align="center"> <a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</a></h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center"> <a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</a></h2><p align="center">This is a 16-Seater room.</font></p></td>
</tr>
</table>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2015-06-02 11:25:16
With the code provided above you will find that the rendering of the site will differ dependent on the screen size. For example when using an iPad or iPhone you will have issues having to scroll round the page. The only way to counter this is to use responsive design which effectively uses percetages to calculate the desired width.
For example we have two elements on a page side by side, rather than say each element is 500px wide (as this would require scrolling on a screen smaller than 1000px, we can say that each element has a width of 50%, this way regardless of the screen size, the elements sizes according to the device.
Responsive design is really the way forward and you will not be able to solve your issue without following this path. Responsive design is becoming the standard more and more and you may as well learn sooner rather than later or risk being left in the dust.
I would suggest reading the following and should you still struggle, create a new question targeted towards responsive design.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
You may also find that integrating a pre-existing responsive template may be the quickest solution, see the following:
http://www.responsivegridsystem.com/
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.