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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Screen resolution advice?

    Hi

    I'm currently completing a website for a local enterprise charity. I have the code ready to go, except it doesn't work on screen resolutions below 1280x600... does anyone think it would be a mistake to leave it like that? How many people use a screen resolution of 1024 or 800 these days? I think the charity iself has old systems so I'm not sure it will even work for them, but I can't find a way to make the website work short of a full redesign! Help!

    The test site can be viewed here: www.youthenterprise.co.uk/newhullready/coded

    The nav bar is the issue, it covers the text on smaller screen resolutions.

    Any opinions/advice will be greatly appreciated

    Thanks
    Nic

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,233
    Thanks
    10
    Thanked 270 Times in 269 Posts
    People use small resolutions all the time. Anyone on a mobile client will of course have a screen smaller than 1280px, and on a laptop/desktop keep in mind it is not *screen* resolution that you have, it's *browser window* resolution. For example, even though I have a 1920px wide screen, I often have two browsers open next to each other. So each has around 950px.

    Also on your code, I notice your included navigation file is a complete html document, with doctype, head, etc. It should not be. It should just be the portion of the html that you want to be included in the main file (i.e. probably your <div id="nav"> stuff).

    Dave

  • Users who have thanked tracknut for this post:

    NicolaHWS (08-27-2012)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Hi Nic,

    First off, nice design choices. I really dig the color scheme.

    Secondly, when I design sites I usually try to ensure that they run well on as little as 1024 x 768 resolution (assuming I don't care about mobile functionality).

    One thing you might look into is if the client you're designing for has any data to show what screen resolution users are using when viewing your site. Some web hosting companies will store that information for you to guide you in your design choices. It can help justify your decision (if the data supports it) in the event you need to back up your design choice.

    I don't think you'd need a full re-design to make your site work on smaller resolution screens. Your problem is the left navigation, right? It seems to me that you have a lot of "dead space" in those links. While it's great for contrast's sake, you're wasting a lot of browser space.

    I'd decrease the width of your nav.gif and active-nav.gif to the same size as your nav div (280px) and take your font size down from 24px to something more appropriate. Don't be afraid to make the text in the Nav smaller. Bigger is easier to read, but smaller font might be necessary to get the job done (and you can still do it without sacrificing readability).

    Just my two cents. Hope it helps. Keep up the great work!

  • Users who have thanked superwookie for this post:

    NicolaHWS (09-04-2012)

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for your kind words

    I'll have a go at making the text and image smaller. Hopefully that won't take too long

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    No worries! Please let me know how it goes or if you need any additional help.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by superwookie View Post
    No worries! Please let me know how it goes or if you need any additional help.
    Uh... yeah... Not sure what I've done, but the nav doesn't seem to work in IE7 at all now! It's visible, but isn't working as links, no rollover, not even able just to click and take to the link, yet in the developer tools it shows the a href link, so it is reading the nav include... Been trying to fix it for days, no luck at all! Any chance you could take a quick look?

    Thanks,
    Nic

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Hey Nicola,

    A couple of things I see about your code...

    at line 61 you have a whole new <head>, <body>, etc. Go ahead and remove that fluff. It looks like you were referencing another sytle sheet. You can move that line to the top of your page with your other style sheet references.

    You also have a stray </body> tag.

    In short, your code should look more like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hull Ready - the future is ours...</title>
    
    <link href="style/style.css" rel="stylesheet" type="text/css">
      <!--[if IE 7.0]>
    <link rel="stylesheet" href="style/ie7.css" type="text/css" />
    <link rel="stylesheet" href="../style/style.css" type="text/css"/>
    
    <![endif]-->
    </head>
    
    <body>
    
    <div id="header">
        <div class="logo"></div>
    <div class="tabs">
    		<ul>
            	<li><a href="students.php" class="tab_student"></a></li>
                <li><a href="teachers.php" class="tab_teacher"></a></li>
                <li><a href="employers.php" class="tab_employer"></a></li>
            </ul>    
    	
      </div><!--tabs close-->
    </div><!--header close-->
        <div class="clear"></div>
    <div id="wrapper">
    	<div class="content">
      <h1>Welcome to Hull Ready    </h1>
      <h2>&nbsp;</h2>
      <h2>This internationally acknowledged education programme is transforming the aspirations of young people in Hull thanks to Rotherham Ready, Young People's Enterprise Forum, Hull City Council and Yorkshire Forward.
        
        By embedding enterprise skills into the primary curriculum, pupils, teachers and business professionals have come together to form ground-breaking partnerships.
        Children as young as four have been introduced to the concepts behind running a business, primary schools in the City are striving to achieve the 'Excellence in Enterprise Education Award' and Hull's future economy is set to thrive.
        
        On 8th July 2010 we celebrated the achievements of the schools and children involved in the 'Make £5 Blossom' scheme, a twist to the day saw these enterprising children set the adults a task of their own! Claire Young, runner-up in the popular TV series 'The Apprentice' spoke at the event, making this celebration day a great experience for all in attendance.
        
        Please note that a number of the downloadable documents on this website are PDF format, you may require Adobe Reader to view these. </h2>
      <h2>&nbsp;</h2>
      <h2>&nbsp;</h2>
    </div>
    </div><!--wrapper close--> 
    <div id="nav">
    		<ul>
            	<li><a href="http://www.youthenterprise.co.uk/newhullready/coded"  title="Home">Home</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/about.php"  title="About">About</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/news.php"  title="News">News</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/resources.php"  title="Resources">Resources</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/newsletters.php"  title="Newsletters">Newsletters</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/5blossom.php"  title="Make £5 Blossom">Make £5 Blossom</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/big13.php"  title="The Big 13">The Big 13</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/warwick.php"  title="The Warwick Award">The Warwick Award</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/young.php"  title="Young Entrepreneurs">Young Entrepreneurs</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/game.php"  title="Interactive Game">Interactive game</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/links.php"  title="Links">Links</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/partners.php"  title="Partners">Partners</a></li>
                <li><a href="http://www.youthenterprise.co.uk/newhullready/coded/contact.php"  title="Contact us">Contact us</a></li>
            </ul>
    </div><!--nav close-->
    <div class="clear"></div>
            	
    <div class="clear"></div>
    
    <div id="footer">
    	<div class="logos"></div>
    </div> 
    
    
    </body>
    </html>
    That should fix you, but let me know if you have any other problems.

    Also, might I recommend using the W3C HTML/CSS validator? It's a nifty tool for helping you find where you might have errors in you code. http://validator.w3.org/.
    Last edited by superwookie; 09-04-2012 at 09:44 PM. Reason: Cleaned up the stylesheet references in the header a bit.

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your response, that code from the bottom is from an include - which are in another folder on the site, will it still read that stylesheet if I take out all that code?

  • #9
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Yes, it should still display that code without a problem.

  • #10
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for all your help. I've ran this page through the validator and it's coming up clean but the nav is still not working and for some reason the jquery download I'm using (which claims it is ie7 compatible) isn't loading the images either I've been working on it for a week, small tweaks to the code and I'm coming up empty.

    This is the url for the completely broken in ie7 page: http://www.youthenterprise.co.uk/new...ed/gallery.php

    Hopefully you'll have time to have a quick look for me


  •  

    Posting Permissions

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