Solved

Resize content to screen size

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

617 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