Solved

Resize content to screen size

Posted on 2010-11-23
5
492 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
  • 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

776 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