Nicole1307
asked on
Resize content to screen size
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
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 */
<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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
OK, Thanks for for your help.
No problem, glad to help you :-)
Thanks for points.
Thanks for points.
ASKER
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?