...

View Full Version : Web page layout moves when resolution is changed



Ozzy
06-13-2012, 01:59 PM
Hi Guys,

I'm having problems with my website layout. On my screen everything is aligned fine and looks perfect, but I was worried that if I viewed it on another screen resolution it might not look the same, and it doesn't! It looks completely messed up; the sidebar movies right into the middle and in most cases the navigation completely vanished from the screen. :(
Could someone please have a look at my code and tell me what I have done wrong?
Thank you very much.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Lincoln University | Maths | Information Science | Help Desk</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>


<ul id="menu">

<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->

<div class="home"><!-- Begin 2 columns container -->

<div class="col_2">
<h2>Welcome !</h2>
</div>

<div class="col_2">
<p>Hi and welcome here ! This is a helpdesk site and I am just playing around and doin stuff.</p>
<p>now I am just rambling on as I have no idea what to type any more so I shall symply stop...now.</p>
</div>

<div class="col_2">
<h2>Cross Browser Support</h2>
</div>

<div class="col_1">
<img src="images/browsers.png" width="125" height="48" alt="" />
</div>

<div class="col_1">
<p>T</p>
</div>

</div><!-- End 2 columns container -->

</li><!-- End Home Item -->
<li class="menu">
<a href="#" class="drop">About</a>
<div class="dropdown_1column align_right">

<div class="col_1">
<ul class="simple">
<li><a href="#">School Info</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</div>


</li>
<li class="menu">
<a href="#" class="drop">Services</a>
<div class="dropdown_1column align_right">

<div class="col_1">
<ul class="simple">
<li><a href="#">Laptops</a></li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Smart Phones</a></li>
<li><a href="#">Software</a></li>
</ul>
</div>

</div>


</li>
<li class="menu">
<a href="#" class="drop">Support</a>
<div class="dropdown_1column align_right">

<div class="col_1">
<ul class="simple">
<li><a href="#">Help Desk</a></li>
<li><a href="#">Knowledge Base</a></li>
</ul>
</div>

</div>


</li>

</ul>

</div><!--end header -->

<div id="content">
<h2>Help Desk</h2>
<h3>Welcome</h3>
<p>The goal of the University Help Desk is to make the information technologies you use as simple and predictable as possible,
so you can focus on your studies, research, teaching, and outreach. We are always available, as a first-point of contact while you
navigate the complex and wide-ranging computer infrastructure of the Help Desk and the University.
The University Help Desk is here to answer your questions and provide access to the resources you need. </p>
<p>We have recently upgraded the helpdesk with a new system that supports incidents! We, the IT support staff can now create and manage
trouble tickets through the new Support Incidents section of the Help Desk website. This pilot project is
currently open to technical support staff only. In the future, students, faculty, and staff will be able to
log in and manage their issues as well. </p>
</div><!--end content-->

<div id="news">
<h3>Latest Updates</h3>
<h4>New Helpdesk- Coming Soon!</h4>
<small>June 11, 2012</small>
<p>We have recently implemented a new helpdesk. With this helpdesk both students and parent will be able to log in with
their username and passwords and be able to create incidents regarding hardware problems. We will then be able to pick up
those incidents and deal with them and best of all you will be kept updated throughout the whole process!<a href="#"> Read More</a></p>
<h4>End of Support for McAfee VirusScan</h4>
<small>May 21, 2012</small>
<p>On July 1, 2012 end support for McAfee VirusScan and McAfee
Security for Mac. Make plans to switch to Microsoft Security Essentials, Microsoft Forefront,
or ClamXav.<a href="#"> Read More</a></p>
</div><!--end news-->


<div id="sidebar">
<div id="login">
<h3>Log In!</h3>
<section>
<form method="POST" action="#" enctype="application/x-www-form-urlencoded">
<p>Username: <input type="text" name="username" id="username" size="25" required/></p>
<p>Password: <input type="password" name="passwd" id="passwd" size="25" required/></p>
<p>
<input type="submit" name="submit" id="submit" value="Submit"/>
<input type="reset" name="reset" id="reset" value="Forgot Password"/>
</p>
</form>
</section>

</div>
<div id="uncollected">
<h3>Uncollected Laptops</h3>
<ol>
<li>Sherman Hoopti</li>
<li>Lee Cooper</li>
<li>Andrew Staples</li>
<li>Matthew Wills</li>
</ol>
</div>
</div><!--end sidebar-->
<div style="clear:both"></div>

</div><!--end main container-->
</div><!--end main-->

<div id="footer">
<div class="container">
<p>Copyright 2012 Lincoln University Help Desk <br />
All Rights Reserved </p>
</div><!--end footer container-->
</div><!--end footer-->



</body>
</html>


/*Basic Cleanup*/
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

body {
font-family: Arial, Helvetica, sans-serif;
background: #fff;
}

.container {
width: 800px;
margin: 0 auto;

}
/*Header*/
#main {
background: url(images/header_slice.jpg) repeat-x;
}

#main .container {
background: url(images/header_slice.jpg) no-repeat;
}

/*Logo Image Replacement*/

#logo {
background: url(images/logo.png) no-repeat;
height: 84px;
width: 235px;
position:absolute;
left:150px;
}

#logo:hover {
background-image: url(images/logo_hover.png);
}

#logo h1 {
text-indent: -9999px;
margin-top: 40px;
}

#header {
padding-right: 30px;
}

/*Floating The Tagline*/
#logo {
background: url(images/logo.png) no-repeat;
height: 74px;
width: 1000px;
float: left;
}


/*Navigation Bar*/
#menu {
list-style:none;
width:940px;
margin:0px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
position: absolute;
bottom: 905px;

/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}

#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}

#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:1px;
background:url("images/drop.png") no-repeat rightright 8px;
}
#menu li:hover .drop {
background:url("images/drop.png") no-repeat rightright 7px;
}

/* Drop Down */

.dropdown_1column,
.home
{
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;

/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.home {width: 280px;}

#menu li:hover .dropdown_1column,
#menu li:hover .home
{
left:-1px;
top:auto;
}

/* Columns */

.col_1,
.col_2
{
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}


/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}

#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}

#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}


/*Content*/
#content {
width: 500px;
float: left;
}

#content h2 {
font-size: 36px;
color: #015878;
padding-top: 100px;
}

#content h3 {
font-size: 24px;
color: #444444;
padding-top: 20px;
padding-bottom: 20px;
}

#content h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}

#content p {
font-size: 14px;
color: #595858;
padding-top: 20px;
}

#content small {
font-size: 12px;
color: #373737;
}

#content a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}

/*News*/
#news {
width: 500px;
padding-top: 80px;
float: left;
}

#news h3 {
padding-bottom: 10px;
}

#news p {
padding-top: 10px;
padding-bottom: 14px;
}

/*Floating the sidebar*/
#sidebar {
float: right;
position:absolute;
top: 100px;
right: 600px;
width: 190px;
background: url(images/sidebar.png) repeat-x;

}

#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
padding-bottom: 20px;
padding-left: 15px;
}

#sidebar ul li a {
font-size: 14px;
color: #393838;
}

#login {
padding-bottom: 30px;
}
#sidebar ul {
list-style: none;
padding-bottom: 25px;
}

#sidebar {
float: right;
margin-left: 55px;
margin-top: 35px;
border: 1px solid #BEBDBD;
padding: 15px;
}

li#rss {
background: url(images/rss_icon.png) no-repeat;
}

li#email {
background: url(images/email_icon.png) no-repeat;
}

li#twitter {
background: url(images/twitter_icon.png) no-repeat;
}

/*Footer*/
#footer {
background: url(images/footer_slice1.jpg) repeat-x;
padding-top: 20px;
padding-bottom:60px;
margin-top: 40px;
color: #000;
}

/*#footer{
border-top:1px solid #fff;
background:url(images/footer_pattern.png) repeat-x;
box-shadow:inset 0 7px 22px -10px rgba(0,0,0,0.3),inset 0 -30px 50px 0 #fff,inset 0 1px 0 #c4c4c4;
position:relative;
}

.lte_ie8 #footer
{
box-shadow:0 -1px 0 #fff,0 -17px 17px -17px #dadada;
border-top:1px solid #b3b3b3;
background:#fff url(images/footer_slice.jpg) repeat-x top;}

#footer:before
{
box-shadow:inset 0 -8px 9px -1px #F3F3F3;
content:" ";
height:25px;
width:100%;
position:absolute;
top:-26px;}*/

tomazs
06-13-2012, 07:22 PM
Hi!

First of all you have rule #sidebar defined twice in style.css. Try putting them together in one.

Change: #sidebar {margin-left: 550px;} This will force sidebar div to the right. content div is 500px wide so sidebar will be 50px to the right of content.

Delete #sidebar {right: 600px;} If you don't remove this it will force sidebar div 600px to the left from right edge.

Ozzy
06-13-2012, 09:16 PM
Awesome thanks for that! :)
I am still having problems with the menu and logo. I've changed the rule for the menu so that it stays on the webpage, but what is happening now is that it stays on top of the logo. I'm not sure how to overcome this problem..any ideas?

Menu is changed to:


#menu {
list-style:none;
width:940px;
position: absolute;
height:43px;
padding:25px 20px 0px 20px;

Flames
06-13-2012, 11:09 PM
Try setting the position of your logo and menu to fixed instead of absolute.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum