?
Solved

Image display w/ multiple resolutions

Posted on 2012-09-17
7
Medium Priority
?
511 Views
Last Modified: 2012-09-17
Working on a site for a client, http://wbra.pronet-systems.com (this is  a temp holder for the site).

I have my screen resolution at 1680x1050 and the site it looking fine.  However as I decrease the resolution the images start to overlap each other and part of background is cut-off.  How can I get it to resize automatically?  I read about going into the css and changing the width or height to 100% or auto but that did not seem to work.  Attached is the index.html file and the style.css.  I can post the entire sites' code and content into a zip file if needed.

The image background i'm talking about starts at: <div id="slider">
The image behind the menu options also are messed up when its a different resolution
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>West Branch Regional Authority</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

<!-- Cufon -->
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/myradpro.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4');
</script>
<!-- flash script -->
<script type="text/javascript" src="js/flash_detect.v1.7.js"></script>

 <!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	
	<!-- End WOWSlider.com HEAD section -->
    <div id="fb-root"></div>
<script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>
</head>
<body>
<div class="bg_color">
  <div class="left_color"></div>
  <div class="right_color"></div>
</div>
<div class="main">
  <div class="header">
	 
	   <div class="header_resize">
	  <div class="logo"><a href="#"><img src="images/wbralogo2.png" alt="logo" 
              height="126" border="0" style="width: 257px; margin-left: 0px" /></a></div>
   		<div id="menu" style="z-index: 1000">
		<ul class="menu" style="z-index: 1000">
			<li><a href="index.html" class="parent"><span>Home</span></a>
				
			</li>
			<li><a href="#"><span>Contactors</span></a>
				<div><ul>
					<li><a href="#" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Sub Item 2</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
					<li><a href="#"><span>Sub Item 5</span></a></li>
					<li><a href="#"><span>Sub Item 6</span></a></li>
					<li><a href="#"><span>Sub Item 7</span></a></li>
				</ul></div>
			</li>

            <li><a href="#"><span>Customer Service</span></a>
				<div><ul>
					<li><a href="#" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Sub Item 2</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
				</ul></div>
			</li>

                        <li><a href="#"><span>Developers</span></a>
				<div><ul>
					<li><a href="" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Sub Item 2</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
				</ul></div>
			</li>
			
                    <li><a href="#"><span>Resources</span></a>
				<div><ul>
                    <li><a href="documents.html" class="parent"><span>Board Of Directors</span></a>
					</li>
                    <li><a href="documents.html" class="parent"><span>Office Hours</span></a>
					</li>
					<li><a href="documents.html" class="parent"><span>Forms & Documents</span></a>
					</li>
					<li><a href="Contact.aspx" class="parent"><span>Contact Us</span></a>
					</li>
					<li><a href="faq.aspx"><span>FAQ</span></a></li>
                    <li><a href="employment.aspx"><span>Employment</span></a></li>
				</ul></div>
			</li>



		</ul>
	</div> 

		<div class="clr"></div>

	  <div class="clr"></div>
	</div>
  </div>
    <div class="clr"></div>
  <div id="slider">
	    <!-- start slideshow -->
    <div class="flash_slider">
    <div class="clr"></div>
    <br />
    <br />
    <br />
    <br />
<!-- Start WOWSlider.com BODY section -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
  <li><img src="data1/images/imgslide_1.png" alt="simple_img_1" title="simple_img_1" id="wows0"/></li>
<li><img src="data1/images/imgslide_2.png" alt="simple_img_2" title="simple_img_2" id="wows1"/></li>
</ul></div>
<a class="wsl" href="http://wowslider.com">Free Javascript Photo Gallery by WOWSlider.com v2.1.3</a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<script type="text/javascript" src="engine1/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
    </div>
    <!-- end #slideshow -->
	<div class="clr"></div>
  </div>
  <div class="body">
	<div class="body_resize">
	  <div class="left">
		<h2>Welcome to West Branch Regional Authority <span>Sentences will go here. Sentences will go here. Sentences will go here.</span></h2>
		<p>Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here.</p>
		<p>Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here. <a href="#">read more... &gt;&gt;</a></p>
		<div class="port">
		  <h2>What We Do <span>Sentences will go here. Sentences will go here..</span></h2>
		  <img src="images/img_1.jpg" alt="picture" width="264" height="101"  />
		  <p>Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here. </p>
		  <a href="#">&raquo; read more </a></div>
		<div class="port last">
		  <h2>How We Can Help You</span><span>Sentences will go here. Sentences will go here..</span></h2>
		  <img src="images/img_2.jpg" alt="picture" width="264" height="101" />
		  <p>Sentences will go here. Sentences will go here. Sentences will go here.Sentences will go here. Sentences will go here. Sentences will go here.</p>
		  <a href="#">&raquo; read more </a> </div>
	  </div>
	  <div class="right">
		<h2>Get To Know Us!</h2>
		<div class="list_work">
		  <p><strong>Visit Us On Facebook!</strong></p>
		  <div class="fb-activity" data-site="wbra.pronet-systems.com" data-width="300" data-height="300" data-header="true" data-border-color="green" data-font="verdana" data-recommendations="false"></div>
		</div>
		<div class="list_work">
		  <p><img src="images/icon_bg_2.png" width="50" height="50" alt="icon" class="float_left" /></p>
		  <p><strong>Web &amp; Interactive Media</strong></p>
		  <p>View our images and videos to see what we can do for you.</p>
		  <p><a href="#">read more... &gt;&gt;</a></p>
		</div>
		<div class="list_work last">
		  <p><img src="images/icon_bg_3.png" width="50" height="50" alt="icon" class="float_left" /> </p>
		  <p><strong>Recent News &amp; Sewer Alerts</strong></p>
		  <p>For the most recent news and alerts, please click here.</p>
		  <p><a href="#">read more... &gt;&gt;</a></p>
		</div>
	  </div>
	  <div class="clr"></div>
	</div>
  </div>
  <div class="clr"></div>
</div>
<div class="FBG">
  <div class="FBG_resize">
	<div class="blog last">
	  <h2>Contact</h2>
	  <p>West Branch Regional Authority<br />
		117 Old Glade Run Rd.<br />
		Muncy, PA 17756<br />
        (570) 935-0087</p>
        <a href="mailto:contact@westbranch-ra.org">contact@westbranch-ra.org</a><br />
	  <p><img src="images/icon_1.png" width="19" height="19" alt="icon" /><img src="images/icon_2.png" width="19" height="19" alt="icon" /> <img src="images/icon_3.png" width="19" height="19" alt="icon" /></p>
      <br />
      <p style="text-align: left"><a href="Login.aspx">Web Admin</a></p>
      <p class="left">© Copyright <a href="http://www.pronet-systems.com">ProNet Systems</a>. All Rights Reserved </p>
	</div>
	
  </div>
  <div class="footer">
	
	<div class="clr"></div>
  </div>
  
</div>
</body>
</html>

Open in new window


style.css

/*
Author: TemplateAccess.com (DT/TS)
*/
@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#faf9f9;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0; position:relative; z-index:2;}
/********** header **********/
.header {  padding:0; margin:0; background:#232323;}
.header_resize {  padding:0; margin:0 auto; width:962px; position: relative;}
/* logo */
.logo {padding:0; margin:0; width:300px; float:left;}
/* rss */
.rss { text-align:right; width:215px; margin:0; padding:10px 10px 10px 0; float:left; font: normal 11px Arial, Helvetica, sans-serif; color:#7e7e7e; line-height:1.8em;}
.rss_img { float:left; margin:0; padding:20px 0 0 0;}
.rss_img img { margin:5px; padding:0;}
/*jmenu*/
/*.jmenu { padding:0; margin:0;  position:absolute; z-index:800;}*/

/*menu*/
.jmenu { padding:0; margin:0; float:left; z-index:800; position:relative;}

/* body */
.body { background:#f4f7ef;}
.body_resize { width:960px; padding:10px 0; margin:0 auto;}
.body h2 { font:bold 18px Arial, Helvetica, sans-serif; color:#232323; padding:10px 0; margin:0;}
.body h2 span { display:block; font: normal 11px Arial, Helvetica, sans-serif; color:#b1b1b1; padding:0; margin:0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#848484; line-height:1.8em; padding:5px 0; margin:0;}
.body p span { font-size:18px; font-weight:bold; color:#888;}
.body a { color:#89c631; text-decoration:none;}
.body img { margin:5px auto; padding:5px; background:#f8f8f8; border:1px solid #d4d4d4;}
.body img.float_left { margin:10px 10px 5px 0; padding:0; padding:5px; background:#f8f8f8; border:1px solid #d4d4d4; float:left;}
.body img.none { float:left; margin:5px 5px 5px 0; padding:0; border:none; background:none;}
.right {  width:280px; margin:0; padding:0; float:right;}
.left { width:620px; margin:0; padding:0 60px 0 0; float:left;}
.port  {width:280px; margin:0 29px 15px 0; padding:0 30px 0 0; float:left; border-right:1px solid #d4d4d4;}
.list_work { border-bottom:1px solid #d4d4d4;}
.last { padding:0; margin-right:0; border:0;}
/********** contact form **********/
#contactform { margin:0; padding:5px 0; }
#contactform * { color:#F00; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 100px; clear:both; }
#contactform label { margin:0; width:100px; display:block; padding:5px 0; color:#737373; font: bold 12px Arial, Helvetica, sans-serif; float:left; }
#contactform label span { color:#d66423; font-weight:bold; }
#contactform input.text { width:450px; border:1px solid #d4d4d4; margin:5px 0; padding:5px 2px; height:16px; background:#fff; float:left; }
#contactform textarea { width:450px; border:1px solid #d4d4d4; margin:5px 0; padding:2px; background:#fff; float:left; }
#contactform li.buttons input { padding:3px 0 3px 0; margin:10px 0 0 0; border:0; color:#FFF; float:left; }
/* FBG */
.FBG { padding:0; margin:0; background:#232323;}
.FBG_resize { width:962px; margin:0 auto; padding:0;}
.FBG_resize img { float:left; margin:0; padding:0;}
.FBG_resize a { color:#89c631; text-decoration:none; font-weight:bold; }
.FBG_resize h2 { font:normal 18px Arial, Helvetica, sans-serif; color:#f0f0f0; padding:10px 0; margin:0;}
.FBG_resize p {font: normal 11px Arial, Helvetica, sans-serif; color:#919191; padding:5px 0; margin:0; line-height:1.8em;}
.FBG_resize ul { padding:0; margin:0; list-style:none;}
.FBG_resize li { padding:5px 0; margin:0; }
.FBG_resize li a { font:normal 11px Arial, Helvetica, sans-serif; color:#757575; padding:5px 0 5px 0; margin:0;text-decoration:none;}
.FBG_resize li a:hover { color:#89c631; text-decoration:none;}
.FBG_resize .blog { width:210px; float:left; margin:0; padding:15px 40px 15px 0;}
.FBG_resize .blog.last { padding:15px 0;}
/*************footer**********/
.footer { width:962px; padding:20px 0; margin:0 auto; border-top:1px solid #313131;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#707070;}
.footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#707070; text-decoration:none; }
.footer p.right { text-align:right; width:350px; margin:0; padding:10px 0; float:right;} 
.footer p.leftt { text-align:left; width:550px; margin:0; padding:10px 0; float:left;}

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
.bg { clear:both; padding:5px 0; margin:0; border-bottom:1px solid #ededed;}

/* Slider */
.bg_color { height:150px; width:100%; position:absolute;}
#slider { padding:0; margin:0; border-top:15px solid #61a203; border-bottom:15px solid #61a203; background:url(images/slider_bg.jpg) no-repeat center; }
#slider .flash_slider { width:960px; height:305px; 
margin:0 auto; overflow:hidden;
}

/* header_text */
.header_text { border-top:15px solid #61a203; border-bottom:15px solid #61a203; background:url(images/slider_bg_l.jpg);}
.header_text_left_bg { background:url(images/slider_bg.jpg) no-repeat top right}
.header_text_resize { padding:30px 0; margin:0 auto; width:960px;}
.header_text h1 { padding:0; margin:0; font:bold 40px Arial, Helvetica, sans-serif; color:#FFF;}

/* search */
.search { padding:0 0 15px 0; margin:0;}
.search form { display:block; padding:0;}
.search span { display:block; float:left; background:#393735; width:278px; padding:0; height:25px; border:1px solid #ededed; background:#FFF;}
.search form .keywords { width:232px; float:left; background:none; border:0; padding:5px 10px; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#706e6d; line-height:15px;}
.search form .button { float:left; margin:0; padding:0;}

Open in new window

0
Comment
Question by:K-9
  • 4
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38405282
Get rid of the loose doctype - thats like saying to the browser do whatever you like with my site.
Use <!DOCTYPE HTML>

Why are using such a wide image when your site content is designed around (about) 1000px.
That image should be no more than 1000px wide and the blue background a seperate entity that stretches when the width is increased.

I don't know what is supposed to be happening with wbralogo2.png
0
 

Author Comment

by:K-9
ID: 38405463
wbralogo2.png is the oval logo in the upper left of the corner.  The template I used had the background  image that large.  Their CSS wasn't built with resizability in mind I guess.

Thanks for the advice so far.  if you would like to view the code of my site here is the zip file.

http://wbra.pronet-systems.com/wbra.zip
0
 
LVL 58

Expert Comment

by:Gary
ID: 38405485
What do you want me to do? first thing you should do is create a new slide at 1000px, maybe put the text on 2/3 lines
wbralogo2.png is under your top menu...I would say reduce the width of the top menu so the logo has its own place
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:K-9
ID: 38405839
I tried making the background image 1000 px, but when I do that the background does not look correct on my 1680 resolution, though it looks good on a machine w/ 1024x768.  I was able to fix the menu issue with messing around w/ the menu.css file

Any advice on how to get this background fixed?
site.jpg
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38405877
Use css to fill the container with your color
0
 

Author Closing Comment

by:K-9
ID: 38406046
Thanks.. I seem to have gotten it working as best I can, I guess.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38407479
Need to redo that slide, you've chopped the right edge of it off (if that link is pointing to the new version.)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

840 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