Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Web page layout moves when resolution is changed

    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.

    PHP Code:
    <!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 studiesresearchteaching, 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 incidentsWethe IT support staff can now create and manage 
                trouble tickets through the 
    new Support Incidents section of the Help Desk websiteThis pilot project is 
                currently open to technical support staff only
    In the futurestudentsfaculty, 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 HelpdeskComing Soon!</h4>
            <
    small>June 112012</small>
            <
    p>We have recently implemented a new helpdeskWith 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 problemsWe 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 212012</small>
           <
    p>On July 12012 end support for McAfee VirusScan and McAfee 
        Security 
    for MacMake plans to switch to Microsoft Security EssentialsMicrosoft 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
    PHP Code:
     /*Basic Cleanup*/
    bodydivh1h2h3h4h5h6pulimg {margin:0pxpadding:0px; }

    body {
        
    font-familyArialHelveticasans-serif;
        
    background#fff;
    }

    .
    container {
        
    width800px;
        
    margin0 auto;
        
    }
     
    /*Header*/
    #main {
        
    backgroundurl(images/header_slice.jpgrepeat-x;
    }

    #main .container {
        
    backgroundurl(images/header_slice.jpgno-repeat;
    }

     
    /*Logo Image Replacement*/
     
    #logo {
        
    backgroundurl(images/logo.pngno-repeat;
        
    height84px;
        
    width235px;
        
    position:absolute;
        
    left:150px;
    }

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

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

    #header {
        
    padding-right30px;
    }

     
    /*Floating The Tagline*/
    #logo {
        
    backgroundurl(images/logo.pngno-repeat;
        
    height74px;
        
    width1000px;
        
    floatleft;
    }


     
    /*Navigation Bar*/
    #menu {  
        
    list-style:none;  
        
    width:940px;  
        
    margin:0px auto 0px auto;  
        
    height:43px;  
        
    padding:0px 20px 0px 20px
        
    positionabsolute
        
    bottom905px
      
        
    /* Rounded Corners */  
      
        
    -moz-border-radius10px;  
        -
    webkit-border-radius10px;  
        
    border-radius10px;  
      
    }  
      
    #menu li {  
        
    float:left;  
        
    text-align:center;  
        
    position:relative;  
        
    padding4px 10px 4px 10px;  
        
    margin-right:30px;  
        
    margin-top:7px;  
        
    border:none;  
    }  
      
    #menu li:hover {  
        
    border1px solid #777777;  
        
    padding4px 9px 4px 9px;  
      
        
    /* Background color and gradients */  
      
        
    background#F4F4F4;  
        
    background: -moz-linear-gradient(top#F4F4F4, #EEEEEE);  
        
    background: -webkit-gradient(linear00%, 0100%, from(#F4F4F4), to(#EEEEEE));  
      
        /* Rounded corners */  
      
        
    -moz-border-radius5px 5px 0px 0px;  
        -
    webkit-border-radius5px 5px 0px 0px;  
        
    border-radius5px 5px 0px 0px;  
    }  
      
    #menu li a {  
        
    font-family:ArialHelveticasans-serif;  
        
    font-size:20px;  
        
    color#EEEEEE;  
        
    display:block;  
        
    outline:0;  
        
    text-decoration:none;  
        
    text-shadow1px 1px 1px #000;  
    }  
      
    #menu li:hover a {  
        
    color:#161616;  
        
    text-shadow1px 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(linear00%, 0100%, from(#EEEEEE), to(#BBBBBB));  
      
        /* Rounded Corners */  
        
    -moz-border-radius0px 5px 5px 5px;  
        -
    webkit-border-radius0px 5px 5px 5px;  
        
    border-radius0px 5px 5px 5px;  
    }  
      
    .
    dropdown_1column {width140px;}  
    .
    home {width280px;}  
      
    #menu li:hover .dropdown_1column,  
    #menu li:hover .home  
    {  
        
    left:-1px;  
        
    top:auto;  
    }  
      
    /* Columns */  
      
    .col_1,  
    .
    col_2  
    {  
        
    display:inline;  
        
    floatleft;  
        
    positionrelative;  
        
    margin-left5px;  
        
    margin-right5px;  
    }  
    .
    col_1 {width:130px;}  
    .
    col_2 {width:270px;}  
     
      
    /* Drop Down Content Stylings */  
      
    #menu p, #menu h2, #menu h3, #menu ul li {  
        
    font-family:ArialHelveticasans-serif;  
        
    line-height:21px;  
        
    font-size:12px;  
        
    text-align:left;  
        
    text-shadow1px 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-shadow1px 1px 1px #000;  
        
    padding:4px 6px 4px 6px;  
      
        
    /* Rounded Corners */  
        
    -moz-border-radius5px;  
        -
    webkit-border-radius5px;  
        
    border-radius5px;  
      
        
    /* 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-shadow1px 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-radius5px;  
        -
    webkit-border-radius5px;  
        
    border-radius5px;  
    }  
    #menu li .greybox li:hover {  
        
    background:#ffffff;  
        
    border:1px solid #aaaaaa;  
        
    padding:4px 6px 4px 6px;  
        
    margin:0px 0px 4px 0px;  
    }  


     
    /*Content*/
     #content {
        
    width500px;
        
    floatleft;
    }

    #content h2 {
        
    font-size36px;
        
    color#015878;
        
    padding-top100px;
    }

    #content h3 {
        
    font-size24px;
        
    color#444444;
        
    padding-top20px;
        
    padding-bottom20px;
    }

    #content h4 {
        
    font-size18px;
        
    color#373737;
        
    font-weightnormal;
    }

    #content p {
        
    font-size14px;
        
    color#595858;
        
    padding-top20px;
    }

    #content small {
        
    font-size12px;
        
    color#373737;
    }

    #content a {
        
    color#0f6c8d;
        
    font-weightbold;
        
    text-decorationnone;
    }

    /*News*/
    #news {
        
    width500px;
        
    padding-top80px;
        
    floatleft;
    }

    #news h3 {
        
    padding-bottom10px;
    }

    #news p {
        
    padding-top10px;
        
    padding-bottom14px;
    }

    /*Floating the sidebar*/
    #sidebar {
        
    floatright;
        
    position:absolute;
        
    top100px;
        
    right600px;
        
    width190px;
        
    backgroundurl(images/sidebar.pngrepeat-x;
        
    }

    #sidebar h3 {
        
    font-size24px;
        
    color#044055;
        
    font-weightnormal;
        
    padding-bottom20px;  
        
    padding-left15px
    }

    #sidebar ul li a {
        
    font-size14px;
        
    color#393838;
    }

    #login {
        
    padding-bottom30px;
    }
    #sidebar ul {
        
    list-stylenone;
        
    padding-bottom25px;
    }

    #sidebar {
        
    floatright;
        
    margin-left55px;
        
    margin-top35px;
        
    border1px solid #BEBDBD; 
        
    padding15px;  
    }

    li#rss {
        
    backgroundurl(images/rss_icon.pngno-repeat;
    }

    li#email {
        
    backgroundurl(images/email_icon.pngno-repeat;
    }

    li#twitter {
        
    backgroundurl(images/twitter_icon.pngno-repeat;
    }

    /*Footer*/
    #footer {
        
    backgroundurl(images/footer_slice1.jpgrepeat-x;
        
    padding-top20px;  
        
    padding-bottom:60px;  
        
    margin-top40px;  
        
    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;}*/ 

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:
    PHP Code:
    #menu {  
        
    list-style:none;  
        
    width:940px;  
        
    positionabsolute
        
    height:43px;  
        
    padding:25px 20px 0px 20px

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Try setting the position of your logo and menu to fixed instead of absolute.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •