Need help to solve some resolution issues on a project i’m currently working on.
Have a look here http://viewlike.us/?url=tinyurl.com%2Fsoreso&button.x=75&button.y=17&button=Submit
The css/layout was done as a liquid layout but as you can notice the columnns and the search box on the right start overlapping from 800*600 onwards.
At higher resolutions say 1920*1200 it starts looking a bit ugly particularly the search box on the right looks a bit stretched.
The site looks ok only when viewed at 1200*800 or at the next resolution.
What can i do to both
1)Make it work for 800*600 and above
2)Prevent it from looking ugly at higher resolutions
I’m also thinking about adding a media queries specific style sheet to make this work for smartphones, tablets etc.
Here’s both the page and the css for it
index.php
<html>
<body>
<div id="wrap">
<div id="header">
<?php include("header.inc.php"); ?>
<div id="menu" align="left">
<div class="top_menu_left">
<li><a href="index.php?cityid=0"><?php echo $lang['HOME_LINK']; ?></a></li><li>|</li>
<li><a href="<?php echo $postlink; ?>">Subscribe</a></li>
</div>
<?php if($auth->id) { ?>
<div class="top_menu_right">
<li><a href="index.php?view=myaccount" title="">My Account</a></li><li>|</li>
<li><a href="index.php?view=bookmarks" title="">Watch List</a></li><li>|</li>
<li><a href="index.php?view=login&logout" title="">Logout</a></li>
<?php }else{ ?>
<li><a href="index.php?view=login" title="">Login</a></li><li>|</li>
<li><a href="index.php?view=register" title="">Sign up</a></li>
</div>
<?php } ?>
</div>
</div>
<!--END OF MENU DIV CONTENT-->
<div align="center"><div id="bar"></div></div><br />
</div>
<div id="content">
<div id="left_content"> <?php include('left_sidebar.php'); ?> </div>
<div id="main_content">
<?php include("path.inc.php"); ?>
<div style="display:none;"><?php echo "<!--#&88;#&90;#&101;#&114;#&111;".
"#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?></div>
<?php echo $content;unset($content);?>
</div>
<div id="right_content">
<?php
if($xview != "post" && $xview != "postimg")
{
?>
<div class="right_top" align="center"><?php echo $lang['SEARCH']; ?> <?php include("search.inc.php"); ?> </div>
<?php
}
?>
</div>
</div>
<div style="clear:both" ></div>
<div style="clear:both" ></div>
<div id="footer" align="center">
<div class="footer_menu">
<li><a href="about.php">About us</a></li> <li>|</li>
<li><a href="terms.php"><?php echo $lang['TERMS_OF_USE']; ?></a></li><li>|</li>
<li><a href="privacy.php"><?php echo $lang['PRIVACY_POLICY']; ?></a> </li><li>|</li>
<li><a href="contact.php">Contact us</a></li> <li>|</li>
</div>
<div class="footer_menu2">
<strong>Copyright © 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> <?php echo $site_name; ?>. All Rights Reserved </strong>
</div>
</div>
</div>
</body>
</html>
Style.css
html { -webkit-text-size-adjust: 70%; }
body { margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
b { font-size:14px;}
#wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}
#header {
padding: 10px;
height:251px;
}
#menu { width:100%; height:2.2em; margin-top:1%; background:#80b2e4; border- radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}
.top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
.top_menu_left li a { color:#fff !important; }
.top_menu_left li a:hover { color:#336699 !important; }
.top_menu_right {float:right; width:17%;;height:1.2em;}
li{list-style:none; float:left; color:#74677E;font-size:70%;font- weight:bold;font- family:Arial, Helvetica, sans-serif; text-align:left; padding:0 5px; -top:9px; color:#fff;}
.top_menu_left li {padding-right:1%; color:#fff;}
.top_menu_right li {padding-right:5%; color:#fff;}
#searchbar { width:100%; height:auto;margin-top:8%;}
#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
.sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}
.box_1 { width:20%; height:auto; float:left;font-size:85%;}
box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}
.box_2 {width:2%; height:auto; float:left;}
#content { width:87%; height:auto; margin-left:11%; margin-top:0; }
#left_content { width:7%; height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding- left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#main_content { width:59%; height:auto;float:left; }
.main_content_header {margin-left:2%;color:black;font-size:100%;font- family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}
.content_header {width:70%; height:auto; margin-left:3%;}
/*.left_1 {margin-left:2%;width:.05em; height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px; }*/
.left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background- repeat:repeat-y;float:left;padding-left:2px; }
/*.left_6 { width:.05em;height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat- y;float:left; }
.left_content_middle {width:95%;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; background:white; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}
.content_title {padding:2%; text-align:center; color:black; <!--#336699;-->font-weight:bold;font-size:100%;font-family:Arial, Helvetica, sans-serif; }
.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
.left_2 { margin-left:3%; width:21.5%; height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}
#right_content { width:20%;height:auto;background-color:white;float:left;margin- left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border- radius:10px; -moz-border-radius:10px}
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
.right_portion { width:45%; height:auto; float:left;}
.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
.gap {width:35%;}
#footer {height:40px;width:100%;margin:auto;text-align:center;text- align:center;margin-top:2%;background:url('images/footer_bg.png') repeat-x; line-height:40px; color:white;}
.footer_menu {
color: white;
float: right;
height: 1.2em;
-left: 3%;
width: 70%;
}
.footer_menu li {
color: white;
padding-right: 1%;
}
.footer_menu li a { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu2 {
background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
color: grey;
float: left;
font-size: 13px;
margin-top: 21px;
width: 100%;
}
.footer_menu strong { font-weight:lighter; color:#666}
Give max-width and min-width a try.
I’m guessing by liquid layouts you’re using some form of percentages for it. In which case after a certain size the columns etc will be getting too large.
You will also most likely want to try min-width to stop the columns overlapping each other. You can prevent the text from going into the other columns by using overflow:hidden, however you would probably be better off just making the column have a minimum width and making the font-size smaller.
http://reference.sitepoint.com/css/max-width
http://reference.sitepoint.com/css/min-width