Menu
I have been working on a site, found here, and it looks fine on my monitor (1440 x 900) however it looks very plain when displayed on an oversized monitor. I give the outer box an absolute height and width and this is obviously the reasoning for my issue but what could I do to fix this problem when the images are all a fixed height and width?
I read somewhere that I could do a check to see what dimensions the monitor is on page load - would anyone recommend this?
On a larger monitor there is a lot of blank space to the left and right, and also below the outer box.
thank you for any help!
-Evan
You can do it using two ways:
Since you said you will be supporting IE too, CSS 3 Media queries won't be working below IE 9, so lets use fluid layout. For this, you can do a few stuffs:
#full-height-template-container {width: 1225px;}
#navigation-menu-container {width: 149px;}
#static-frontpage-padding {width: 855px;}
Replace it to:
#full-height-template-container {width: 90%;}
#navigation-menu-container {width: 20%;}
#static-frontpage-padding {width: 80%;}
A few adjustments might be necessary.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices – without changing the content.
HTML Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Media query Resolution Dependent Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheets/master.css" />
</head>
<body>
<div id="container">
<h1>
Site name
</h1>
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="content">
<h2>
Main heading here
</h2>
<p>
<img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="extras">
<h3>
Related info
</h3>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
CSS code
/* ----------------------------
simple reset
---------------------------- */
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table
{
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}
body
{
margin: 20px;
color: #000;
background: #fff;
font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}
#container
{
float: left;
width: 1000px;
background: #bbb;
}
#nav
{
float: left;
width: 200px;
background: lime;
}
#content
{
float: left;
width: 550px;
margin: 0 0 0 25px;
background: yellow;
}
#extras
{
float: right;
width: 200px;
background: gray;
}
.feature-image
{
float: right;
margin: 0 0 10px 10px;
}
@media screen and (max-width:999px)
{
#container { width: 800px; }
#extras
{
clear: left;
float: none;
margin: 0 0 0 225px;
width: 550px;
}
}
@media screen and (max-width:480px)
{
#container { width: 400px; }
#nav
{
float: none;
width: auto;
}
#content
{
float: none;
width: auto;
margin: 0;
}
#extras
{
float: none;
width: auto;
margin: 0;
}
.feature-image { display: none; }
}
Demo
You can find a working demo at CSS3 Media query layout example. Enjoy!
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
