Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Resize content to screen size

Posted on 2010-11-23
5
Medium Priority
?
518 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 1400 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 1400 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

Technology Partners: 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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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 …

660 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