Solved

Resize content to screen size

Posted on 2010-11-23
5
503 Views
Last Modified: 2012-05-10
Hi,

I'm finishing up a site and I need to adjust the screen size, it has to scale to fit different screen sizes, without changing background image file.

The site loads a bit slow as well so any suggestions to fix that would be great too.

I've attached the code and here's a link to the site: danielleduganyoga.com
CSS:body { 
background-repeat:no-repeat;
background-position:center;
background-size: auto;

}

#wrapper{
margin-top:20px;
background-repeat:no-repeat;
width:1000px;
height:940px; 
}

#indexlogo { 
padding-left:300px;
}

#indexnav{ padding-top:130px;
} 

#logo{ 
padding-left:175px; 
padding-top:25px;
}

#nav {
padding-top:0px;
}

#box1{
padding-top:5px;
}

#box2sch{
padding-top:10px;
padding-left:150px;
width:380px;
margin-left:5px;
float:left;
}

#box2text{
padding-top:75px;
width:700px;
}
#footer{
position:relative;
top:15px;
}
#indexfooter{
padding-top:790px;
}/* CSS Document */

Open in new window

<body>
<center>
<div id="wrapper" style= "background-image:url(images/backgrounds/home.gif)" onload="MM_preloadImages('images/links/link_schedule.gif','images/links/link_privatelessons.gif','images/links/link_bio.gif','images/links/link_events.gif')" align="center"  >

<div id="indexlogo">
  <img src="images/links/dd_logo_homepg.gif" alt="home logo" longdesc="images/links/dd_logo_homepg.gif" align="left" style="padding-top:85px;"/></div>

<div id="indexnav">
<table border="0" cellpadding="0" cellspacing="10">
    <tr>
      <td><a href="schedule.html" target="_top" onclick="MM_nbGroup('down','group1','schedule','images/links/nav_schedule.gif',1)" onmouseover="MM_nbGroup('over','schedule','images/links/nav_schedule.gif','images/links/nav_schedule.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/links/nav_schedule.gif" alt="schedule" name="schedule" width="64" height="21" border="0" id="schedule" onload="" /></a></td>
      <td><a href="privatelessons.html" target="_top" onclick="MM_nbGroup('down','group1','privatelessons','images/links/nav_privatelessons.gif',1)" onmouseover="MM_nbGroup('over','privatelessons','images/links/nav_privatelessons.gif','images/links/nav_privatelessons.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/links/nav_privatelessons.gif" alt="privatelessons" name="privatelessons" width="109" height="21" border="0" id="privatelessons" onload="" /></a></td>
      <td><a href="bio.html" target="_top" onclick="MM_nbGroup('down','group1','bio','images/links/nav_bio.gif',1)" onmouseover="MM_nbGroup('over','bio','images/links/nav_bio.gif','images/links/nav_bio.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/links/nav_bio.gif" alt="bio" name="bio" width="23" height="21" border="0" id="bio" onload="" /></a></td>
      <td><a href="events.html" target="_top" onclick="MM_nbGroup('down','group1','events','images/links/nav_events.gif',1)" onmouseover="MM_nbGroup('over','events','images/links/nav_events.gif','images/links/nav_events.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/links/nav_events.gif" alt="events" name="events" width="50" height="21" border="0" id="events" onload="" /></a></td>
    </tr>
  </table>
  </div>
</div>
<div align="center" class="style3" id="footer">
danielle@danielledugan.com</div>
</center>
</body>

Open in new window

0
Comment
Question by:Nicole1307
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 8

Accepted Solution

by:
Zado earned 350 total points
ID: 34200274
 You can scale the site in flash, but not in html, you should design your website for some minimum width, then it will be displayed properly for bigger width too, 1024px is recommended as minimum, this width is also compatible with iPad.
  There is possible to prepare site for different resolutions using JavaScript and/or different Css stylesheets, but nobody do this, doesn't make sense really.
  Don't use <center> tag, is very old way to center the content, you should use 'margin:0 auto;' in your css to do this.
  To make the website loading faster, try compress the images.
0
 

Author Comment

by:Nicole1307
ID: 34200400
Hi Zado,

Thanks for the info. The width is fine actually, its matter of the height really, which makes me think there isn't a way to change it without adjust the background images.

What do you mean by compressing the images?
0
 
LVL 8

Assisted Solution

by:Zado
Zado earned 350 total points
ID: 34200662
The only way to adjust the height is change your background images (if you want do this, but I would stay with current design instead changing everything because the height), then you can nicely center whole content horizontally and vertically, check this:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
check source code to see how it works.

By compressing the images I meant use your graphic program to reduce colours in your gifs or save backgrounds as jpg and then reduce quality, just try few different ways to see what's the best result for quality/size
0
 

Author Comment

by:Nicole1307
ID: 34200969
OK, Thanks for for your help.
0
 
LVL 8

Expert Comment

by:Zado
ID: 34201054
No problem, glad to help you :-)
Thanks for points.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question