HTML - Centering Variable Size Images

Hi.

This is something I have pondered on for a very long time and wish to know how to resolve. I have no idea if it is possible but I think I have seen it done before.

I need a piece of code for a frame that will automatically readjust itself to the page that is targeted in the frame, but will only go so far as the parameters I set it to. To me, it sounds like a rather complicated code and I'm really not sure whether it is possible, but if it is, it would be extremely useful for forum pages that are set to be inside a webpage.

What I want to achieve with this, is to have the frame to be able to extend itself inside the page, without putting a scrollbar on the actual frame. The page I have isn't actually structured with frames, so I would like to keep it that way. I have no idea if this IS possible but I would like to know.

Thanks,

KGB.

Hi all,

I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read.

I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read.

With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself?

Many thanks

Joe

Ok I'd really like to design a darker them with a lot of textures like this one:

http://www.grafpedia.com/tutorials/c...o-pixel-layout

But thats just a photoshop walk-thru.

So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image?

I'm worried about download times as I have my background image as a 1px image set on repeat.

But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I?

Basically I'm lost as to how to get my site to look like the design in the link.

Here it is now:

http://acidtripmediaproductions.com/lmi/index.html

I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it

Whats the easiest way to do that?

Would I want to keep the side bar nav where its at if I do this?

i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame
now this 1.htm is quite a long frame and has a scrollbar
and 2.htm is a short one
i dont the scroll bar beside my frame 1 but want it to be for my entire parent window
ie i wont to scroll both my left and right frames together
how do i do that

Hi!

I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window.

How can I make it do that?

I did it once but just can't seem to remember how I did it.

Thanks

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

so what is the easiest and best way to center a div within a div? or a div within anything else for that matter.

How do you center vertically?

and

How do you venter horizontally?

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated.
/* CSS Document */


#wrapper {margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 0;;}


body {
margin : 0px 0px 0px 0px;
background-color: #E1AE5A;
background-repeat: repeat;
}
#top {
position: absolute;
height: 48px;
width: 900px;
left: 250px;
top:3px;
border:0px none;
z-index:1;
color: #000033;
}

#main {
position: absolute;
top: 542px;
left: 328px;
z-index:5;
width: 745px;
color: #FFFFFF;
height: 28px;
}

#flash {
position: absolute;
top: 130px;
left: 299px;
z-index:4;
width: 803px;
color: #FFFFFF;
height: 419px;
}

.style1 {

font-family: Eurostile;
color: #FFFFFF;
}

.style2 {
font-family: Helvetica;
}
#Layer1 {
position:absolute;
left:300px;
top:121px;
width:804px;
height:540px;
z-index:3;
background-color: #000033;
border: medium solid #FFFFFF;
}

.style3 {
font-family: Eurostile;
}

#Layer2 {
position:absolute;
left:111px;
top:170px;
width:71px;
height:124px;
z-index:4;
}

.style4 {color: #000000}

#Layer3 {
position:absolute;
left:482px;
top:72px;
width:37px;
height:56px;
z-index:2;
}
#Layer4 {
position:absolute;
left:652px;
top:72px;
width:24px;
height:31px;
z-index:2;
}
#Layer5 {
position:absolute;
left:822px;
top:72px;
width:84px;
height:58px;
z-index:2;
}
#Layer6 {
position:absolute;
left:992px;
top:72px;
width:95px;
height:50px;
z-index:2;
}

#Layer7 {
position:absolute;
left:331px;
top:139px;
width:750px;
height:446px;
z-index:9;
}

#Layer11 {
position:absolute;
left:319px;
top:72px;
width:12px;
height:10px;
z-index: 2;
}

#Layer8 {
position:absolute;
left:302px;
top:98px;
width:791px;
height:48px;
z-index:10;
}
#Layer9 {
position:absolute;
left:299px;
top:40px;
width:32px;
height:20px;
z-index:0;
}
#Layer10 {
position:absolute;
left:1016px;
top:595px;
width:24px;
height:26px;
z-index:10;
}


and the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" land="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="top">
<h1 align="center" class="style3 style4">on The side, Inc. </h1>
<p align="center" class="style3">&nbsp;</p>
</div>

<div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div>
<div id="Layer1"></div>
<div id="flash" align="center">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400">
<param name="movie" value="main.swf">
<param name="quality" value="high">
<embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed>
</object>
</div>
<div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div>

<div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div>
</body>
</html>

Hey,

I was working on a template and I was learning some new things so I might have messed up some where. But, the template won't center and it has a empty space next to it which I don't know how to get rid of. Can anyone help me?

http://teamafterglow.com/templates/template7.html

Hi,

Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to.

In some versions of IE its sits to the far left.

Here is the page:

http://www.ironworksstudio.co.uk/

And here is the CSS:

Code:

*{	
	margin: 0;
	padding: 0;
}
		
body{
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 15px;
	color: #000000;
	background-color:#000000;
}
		
#container {
				margin-right: auto;
				margin-left: auto;
				margin-top: 15px;
				width: 700px;
				background-color:#000000;
				}
				
p{
	padding-top: 10px;
	font-size: 13px;
	line-height: 18px;
}
		
	#header {
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 0;
			height: 100px;
			width:700px;
			background-color:#000000;
			padding: 0 0 10px 0;
			
			}
			
		#menu ul{
		margin-left:0;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		background-color:#FFFFFF;
		
	}
	
	#menu li{
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		background-color: #000000;
		list-style-type: none;
		width: 84px;
		height: 20px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom; 3px;
		margin-right: 2px;
		margin-left: 2px;
		float: left;
		border: 1px solid;
		}
		
	#menu li:hover {
			color: #ffffff;
			background-color: #333333;
			}
			
	
			
	#menu li a {
			text-decoration: none;
			color: #ffffff;
		}
	
	#menu li a:hover {
			color: #ffffff;
			}
	
	
	
	#footer {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	background-color:#000;
	color: #FFF;			
		}
	
	
		
	#top_image {
				margin-bottom:20px;
				clear: left;
				background-color:#000000;
				}
		
	#menu {
			
			float: left;
			width: 700px;
			margin-bottom:10px;
			background-color:#000000;
			
		}
		
	#two_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;	
				line-height:1.4;
				margin-top: 10px;
				margin-bottom: 50px;
				float: left;
				width: 700px;
				text-align: left;
				background-color:#000;
				
				}
			
		
	#l_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;	
				color:#FFF;
				line-height:1.4;
				margin-top: 10px;
				margin-right: 30px;
				margin-bottom: 50px;
				float: left;
				width: 335px;
				text-align: left;
				background-color:#000;
				
				
			}
			
	#l_column a{color:999999;}		

					
			
	#r_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;
				color:#fff;
				line-height:1.4;
				margin-top: 23px;
				float: right;
				width: 335px;
				background-color:#000;
				padding: 0 0 10px 0;
				
			}
			
	
	
	.left {
			font-size:12px;
			font-family: Helvetica, Arial, sans-serif;
			width: 335px;
			float: left;
			text-align: left;
			border: 2px solid #000000;
			border-collapse: collapse;
			background-color:#000000;
			}
			
	.right {
			font-size:12px;
			font-family: Helvetica, Arial, sans-serif;
			width: 335px;
			float: right;
			text-align: left;
			border: 2px solid #000000;
			border-collapse: collapse;
			margin-top:12px;
			background-color:#000000;
			}
			
			
	th { 
		font-weight: bold;
		font-size:13px;
		color: #000000;
		background-color:#FFFFFF;
		padding: 5px;
		}
		
	td {
		padding:5px;
		}
		
	tr {
		color:#FFFFFF;
		}
		
	.rowstyle1 {
				border-bottom:1px dotted;
				}
	


			

		
	#gallery {
		background-color:#000;
		width: 680px;
		padding-left: 0;
	}
	#gallery ul { list-style: none;
					margin-left: 0;
					
					}
					
	#gallery li { 
				 padding-left:1.2px;
				 }
				 

	
	#gallery ul li { display: inline;
					padding-right: 0;
					}
	#gallery ul img {
		border: 0;
		border-width: 0;
	}
	#gallery ul a:hover img {
		border: 0 solid;
		
	}
	
	#gallery ul a:hover { color: #cccccc; }
	
	hr {color:#333333;
		border-style:normal;
		padding: 0 0 0 0;
		margin: 0 0 10 0;
		}
	
	h2 {color:#ffffff;}
	
	</style>

I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated.

Site: http://blog.camhabib.com

Hi,
I'm trying to develop a fluid layout for a webpage - and I have two 50% <divs> that have images in them, and the width of these <divs> add to 100% of course. So from my resolution and slightly smaller ones it looks like they are centered.
However, when I scale the browser down to a smaller size, they get squished together because they float left.
How can I make it so one falls below the other and they become centered on the page at the same time?

Cheers...

I tried every code I could find, but warning, I'm still new to HTML. This is my table code for now. I need the first row image to be centered. When i view it in a browser it is aligned to the left

<table style="width: 635px; height: 900px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 600px; height: 600px;" colspan="6"><img alt="" src="breakfast1.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb1.JPG" /></td>
<td><img alt="" src="bthumb2.JPG" /></td>
<td><img alt="" src="bthumb3.JPG" /></td>
<td><img alt="" src="bthumb4.JPG" /></td>
<td><img alt="" src="bthumb5.JPG" /></td>
<td><img alt="" src="bthumb6.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb7.JPG" /></td>
<td><img alt="" src="bthumb8.JPG" /></td>
<td><img alt="" src="bthumb9.JPG" /></td>
<td><img alt="" src="bthumb10.JPG" /></td>
<td><img alt="" src="bthumb11.JPG" /></td>
<td><img alt="" src="bthumb12.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb13.JPG" /></td>
</tr>
</tbody>
</table>

http://insomnia.eternal-glory.org/2.0/index.php
I'm trying to imitate a Mac computer, Tiger.
Looks great in FF/Safari, but in IE7, the dock refuses to center.

I have:
Code:

body {
text-align:center;}

in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not?
Help, please?

Doctype is Strict, and I have margin-left/-right set to auto.

Thanks in advance,
Michele