[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Center an image w/text below

Posted on 2008-11-10
24
Medium Priority
?
540 Views
Last Modified: 2012-05-05
Im looking to see how I can center an image with text below it on a web page... Doesnt matter what screen resolution the user has, Id still like for it to be auto centered on their screen.  

Right now I have the image centered on my screen at a resolution of 1280x1024. However a user with a 800x600 needs to scroll down a little to see it all. It just needs to be bumped up alittle for it to be centered on their screen but when I do that it is way to high on my screen which doesnt looked centered.

Thanks!
0
Comment
Question by:janzalon
  • 13
  • 9
23 Comments
 
LVL 3

Expert Comment

by:raminhos
ID: 22926424
Try this:
<table width="100%" height="100%">
<tr>
<td align="center" valign="center">
image code here
</td>
</tr>
</table>

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22927329
another approach, if you want to use CSS, is to use position:absolute to locate the top left corner of your DIV at the center of the screen, and then use negative margins to move the DIV up and left.  Sample code below.  This only really works if you have a fixed layout, so that you can calculate the correct negative margins.  If you are trying to do it with an single image, then this approach may work for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Center Horizontally and Vertically with CSS</title>
<style type="text/css">
#center_both_ways {
width:600px;
height:160px;
background-color:yellow;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-80px;
text-align:center;
}
</style>
</head>
 
<body>
 
<div id="center_both_ways"></div>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:janzalon
ID: 22929997
Thanks!  Your first post works, it centers it all but it keeps everything at the top of the screen... is there a way I can put it in the center of the screen?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:janzalon
ID: 22930006
Is it good practice to design sites at a resolution of 800x600??  If so, do you know of a way to design it to 800x600 when using a screen resolution of 1280x1024?
0
 

Author Comment

by:janzalon
ID: 22930022
yessirnosir:
Im going to try your suggestion with CSS.
Thanks!
0
 

Author Comment

by:janzalon
ID: 22930124
the CSS format pushes it to the bottom of the screen now.  I just wanted to have the image automatically centered on any type of screen resolution.
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22930689
re:  "the CSS format pushes it to the bottom of the screen now"
maybe you could post the rest of your code so we could figure out what is different; am posting screenshots below of what I see in both FF and IE6; do you see something different?

ceter-everything-ff.jpg
ceter-everything-ie.jpg
0
 

Author Comment

by:janzalon
ID: 22931372
OK, I didnt think text would matter below the image but it may be causing the problem for me.
0
 

Author Comment

by:janzalon
ID: 22931390
Here is the code with your CSS info in it.

Thanks for the help, much appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
 
#center_both_ways {
				width:600px;
				height:450px;
				position:absolute;
				left:50%;
				top:50%;
				margin-left:-300px;
				margin-top:-250px;
				text-align:center;
}
 
</style>
 
<style type="text/css">
<!--
body {
	background-image: url(_themes/water/background_water.gif);
}
-->
</style>
 
<link href="css/admin.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style49 {color: #B6F1BC}
.style50 {font-size: 11px}
-->
</style>
</head>
 
 
<body>
 
<div id="center_both_ways">
 
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0"></a></div>
    </td>
  </tr>
</table>
 
<!----------------------------------------------------------------- DONT DELETE ANYTHING ABOVE THIS LINE ------------------------------------------------------------>
 
<BR />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
 
</div>
 
</body>
 
</html>>>>>

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22931974
could you post a screenshot of what you are seeing?  On my machine, everything looks centered, but maybe I'm not understanding what you are trying to do.  Have attached screenshot (I dummied up a graphic to match your 330 x 88 "LaBella_Intranet" graphic.)

The issue may be related to your attached CSS file, admin.css, so you may want to post that too.
labella.jpg
0
 

Author Comment

by:janzalon
ID: 22932878
I forgot to mention that I changed the following lines:

margin-left:-300px;
margin-top:-80px;

to

margin-left:-300px;
margin-top:-250px;

to get what you see now.  My question now is when someone has a resolution of 800x600, will they need to scroll to see everything or will it be centered on their screen??
0
 

Author Comment

by:janzalon
ID: 22932961
With this code in

margin-left:-300px;
margin-top:-80px;

I get the following look...

I also dont know why I always get the extra  >>>>>   everytime I save this file.
LaBella.JPG
0
 

Author Comment

by:janzalon
ID: 22932986
before I used your CSS suggestion I used a bunch of <br> to make it centered on my screen. However when I went to someone elses computer with a smaller screen, they needed to scroll to see everything. This is why Im here now!

Thanks!
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22933007
the >>>>> are extra characters after your closing </html> tag... that's actually the first thing I fixed with your file but forgot to mention it.

there clearly is still something wrong with the code; the space above "LaBella" should be the same as the space below the last line of text.   If you nuke the link to your CSS file, does the layout suddenly work?  If so, post your CSS and we'll find out what's broken...

I'm tied up the rest of this afternoon, but will check back this evening.
0
 

Author Comment

by:janzalon
ID: 22933414
I always get rid of the >>>>>> too, I just forgot to do it last time... Why do I keep on getting those?

I took all references to styles out of the HTML file along with the reference to my CSS file. I then put the code that you put up here for the CSS and this is what I get now.

Attached is an image of what I see now.

Below is all the code from the HTML file for your reference.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
#center_both_ways {
width:600px;
height:160px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-80px;
text-align:center;
}
</style>
 
 
</head>
<body>
 
<div id="center_both_ways">
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0" /></a></div>
    </td>
  </tr>
</table>
 
<!----------------------------------------------------------------- DONT DELETE ANYTHING ABOVE THIS LINE ------------------------------------------------------------>
 
<br />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
</div>
 
 
</body>
 
</html>

Open in new window

LaBella.JPG
0
 

Author Comment

by:janzalon
ID: 22933477
This is totally off topic of my current issue BUT I noticed that when I comment things out with the following code:

See code snippet.

It displays totally different in IE than it does in FireFox.  What I have commented out doesnt show in IE but does in FireFox.  
<body>
 
<!-------------------------------------------------------------------------------->
 
<!---
 
<br><br>
<br><br>
<br><br>
<table width="761" border="0" align="center">
  <tr>
    <td colspan="4"><div align="center" class="style45">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome Wes Pettee To LaBella Associates!</div></td>
  </tr>
  <tr>
    <td width="147" rowspan="2"><img src="Employees By Division/Photos/Pettee.jpg" alt="Wes Pettee" width="147" height="220"></td>
    <td colspan="2"><div align="center" class="style41">Here are some interesting facts:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
  </tr>
  <tr>
    <td width="263" valign="top"><div align="right" class="style46">Music he is listening to in his car:&nbsp;&nbsp;<br>
    	Favorite Food:&nbsp;&nbsp;<br>
		First Job:&nbsp;&nbsp;<br>
        Hobbies:&nbsp;&nbsp;<br>
    Favorite Sports Team:&nbsp;&nbsp;</div></td>
    <td width="337" valign="top"><div align="left" class="style46">U2 <br>
    	Vegetable Stew, Baby Arugula Salad <br>
		Bus Boy at Sherwood Manor in Honeoye Falls <br>
        Bike Riding, Music, Guitar, Hiking, Ice Skating <br>
        Buffalo Sabres
    </div></td>
  </tr>
</table>
 
<!-------------------------------------------------------------------------------->
 
</body>

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22934295
the height of the #center_both_ways style needs to include the height of the image and all the text in the table below it; I calculate roughly 480 px.  So try height 480px and margin-top:-240px and see what that looks like.  Have pasted my mod to your latest code below:

re: the strange behavior of the comments, apparently you need to have a space somewhere in the middle between the opening and closing comment markers.  i.e. doesn't like the solid line you used in lines 3 and 33.   I usually use Dreamweaver to apply comments markup; just select the text in code view that you want to comment, then right-click, choose Selection, and choose Apply HTML Comment.  Later you can reverse the comment in the same manner, but choosing "Remove Comment"

One of the downsides of the negative margin approach is that if someone makes their screen really short, part of your page will disappear above their viewing window, where it can't even be reached with scrolling.  (try it by squeezing your window vertically).

Also, if you change your styles or add/remove lines of text, the overall text block will change height, so you'll have to fine tune the center_both_ways style to compensate.

Some people use a Javascript approach to check the user's screen dimensions, and adjust the layout accordingly.  If you're interested I can post an example of how that works, but personally I prefer to stick to CSS for layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
#center_both_ways {
width:600px;
height:480px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-240px;
text-align:center;
}
</style>
 
 
</head>
<body>
 
<div id="center_both_ways">
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0" /></a>
      </div>
    </td>
  </tr>
</table>
 
 
 
<br />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
 
</div>
 
 
</body>
 
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22934437
on a bit of a tangent:  a really great tool for working on these kind of issues is the "Web Developer Toolbar" available as a plugin for Firefox.  It has all sorts of tools to help analyze exactly how a page is being rendered.  But the specific reason I thought about it in your case is it includes a button "Resize" that lets you instantly resize your window to exactly 800x600 (or any other resolution to want to test).  It only runs in Firefox, but, um..., that's the best browser anyway!

https://addons.mozilla.org/en-US/firefox/addon/60 
0
 

Author Comment

by:janzalon
ID: 22934633
I think I understand what you are doing here now!  Thanks.  

However I do have some more questions. if you dont mind.
1. What does the following lines of code do, what do they mean?

position:absolute;
left:50%;
top:50%;

2. What is the point of left and right if you have margin-left and margin-top?

3. I assume that the width and height is the actual box that all the information that Im trying to center fits into.

4. If I put the following code in my CSS, text-align:center;, then I dont need to <div align="center" all my text and images correct?

---------------------------------------------------------------------------------------------------------------------------

I see what you mean about the vertical issue. I guess I will have to deal with that issue if I want it centered on all screen resolutions.

If you can paste the Javascript code that would be cool to look at too!  Thanks!

--------------------------------------------------------------------------------------------------------------------------
re: the strange behavior of the comments. I will have to try out the comment thing in Dreamweaver. Thanks for letting me know that.

re: Is it good practice to design sites at a resolution of 800x600??  If so, do you know of a way to design it to 800x600 when using a screen resolution of 1280x1024?

re: I always get rid of the >>>>>>... Would you know why I keep on getting those back?

Thanks for all your help!

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22935732
1.  this says the top left corner of the DIV is 50% of the way down from the top and 50% of the way over from the left of the containing element, which is the <body>.  So said another way, it says to put the top left corner of the DIV exactly in the middle of the browser window.
I have a printout of this in a reference binder I keep handy to remind me of exactly what those position options mean:  www.quirksmode.org/css/position.html

2.  the margin-left and margin-top are negative.  This is is a strange concept!  But it allows you to move the effective top-left corner of the box further to the left and further up the page.  So the DIV position is still considered to be exactly in the middle of the window, but the negative margins allow you to make it appear to be centered.  

3. yes.

4.  in general yes, text-align:center will do what div align="center" does.

5.  I don't think I have any particular wisdom to contribute to your design resolution question.  In some cases, a fixed layout serves the purpose, and in that case designing wider than 800 (779 really) can cause some users to need horizontal scrolling, so many websites use a 779px width for a container div or table.  In some cases, a liquid layout that fills the screen is better for a particular site.  Or if you are designing for a controlled group, you can take more liberties, like my family photo album is designed for 1280x1024.  I've worked with lots of different setups and the only layout I absolutely won't use is anything to do with frames!
 
I have no idea why the >>>>> are coming back.  

below is a page that sets the height of a "spacer" div based on a javascript function that checks the user's browser height.   I don't really like it because it doesn't respond as smoothly as CSS, especially when you resize your browser, and the spacer doesn't recalculate unless you reload the page.   But it avoids ever having anything become hidden. (although I'll bet there is a CSS solution for that too, I just haven't given it much thought)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
*{margin:0px;padding:0px;}
 
#container {
	margin:0 auto;
	height:600px;
	width:800px;
	text-align: center;
	background-color:green;
}
</style>
 
<script type="text/javascript">
// this code adapted from here:  http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/  //
function setHeight() {
 var viewportwidth;
 var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
// older versions of IE
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
var spacer = (viewportheight - 600)/2;
document.getElementById("spacer").style.height = spacer + "px";
}
</script>
 
</head>
 
<body onload="setHeight()">
 
<div id="spacer"></div>
 
<div id="container">
        Center This
</div>
 
</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22942588
Hey janzalon, your post got me googling around and I stumbled across another solution to this problem; I tested it in FF and IE6 and it seems to be pretty robust.  Got it from here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

have pasted a modified version of his code below.  the actual CSS is pretty complicated, can't say I totally understand it myself since it relies on differences standards-compliance between browsers.  but you may want to have a look...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 
<html>
<head>
<title>Centered Both Ways</title>
<!--adapted from 	http://www.jakpsatweb.cz/css/css-vertical-center-solution.html-->
<style type="text/css">
* {margin:0;padding:0;}
body, html {height: 100%;}
#outer {height: 100%; width:100%;overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
#inner {width: 300px; margin-left: auto; margin-right: auto;} /* for all browsers*/
		/* optional: #inner[id] {position: static;} */
		/* just format */
div.greenBorder {border: 1px solid green; background-color: ivory;}
</style>
</head>
<body>
<div id="outer" >
	<div id="middle">
		<div id="inner" class="greenBorder">
			any text<br>
			<b>any height</b><br>
			any content, for example generated from DB<br>
			everything is vertically centered<br>
		</div>
	</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 14

Accepted Solution

by:
yessirnosir earned 500 total points
ID: 22942829
Hi again, I'm sure you're getting sick of hearing from me, but I just figured out a way to fix the problem with the top of the text disappearing when the window height is too small, at least in newer browsers.  You can put everything inside a DIV with a min-height property equal to the size of the block you are centering.  Have attached code example below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
body, html {margin:0;padding:0;height:100%;}
#container {position:relative;height:100%;min-height:480px;}
#center_both_ways {
width:600px;
height:480px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-240px;
text-align:center;
 
}
</style>
 
 
</head>
<body>
<div id="container"> 
<div id="center_both_ways">
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0" /></a>
      </div>
    </td>
  </tr>
</table>
 
 
 
<br />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
 
</div>
 
</div> 
</body>
 
</html>

Open in new window

0
 

Author Comment

by:janzalon
ID: 22944558
hello:

thanks for looking into it further.   I never get sick of people posting things that may help the situation. I appreciate all feedback.

I will look over what you posted and get back to you!

Thanks again.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

872 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