It lives! HTML help [Archive] - Gamestepper Forums

dabu

02-18-2009, 04:04 PM

Hey guys,

I got the splashpage up for cognitocomics.com, at last!

however, my HTML skills are rusty. Im trying to get the image to stay centered, no matter how big I drag the window. I created a table with 3 collumns, and set the ouside cells to 100 percent width. When you stretch the window, the image doesn't stay centered.

Anyone know how to fix the code?

www.cognitocomics.com

cheers

dabu

Daisuke

02-19-2009, 05:24 PM

<!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>Cognito Comics</title>

<style type="text/css">

</style>
</head>

<body>
<div id="main">
<table width="100%" border="0" align="center">
<tr>
<td height="25"> </td>
<td width="820" rowspan="2" align="center" valign="middle"><div align="center"><img src="images/Splashpage2.gif" width="820" height="500" /></div></td>
<td> </td>
</tr>
<tr align="center" valign="middle">
<td> </td>
<td> </td>
</tr>
</table>

</div>
</body>

</html>

Daisuke

02-19-2009, 05:25 PM

You mean... you also want to apply center on height....right?
At that time, you can use CSS style script on <head>~</head> or read from .css

just Copy and paste all of them.

one thing, when you finish your website, you might need to change the number in <style>~~~</style>,

height:500px; <--- your table height total. now you only have one image, so I put 500px, 820px
width:820px;

and

margin-top:-250px; <--- put number, half of the height
margin-left:-410px; <--- half of the width

dabu

02-19-2009, 08:37 PM

yeah, Id like it to stay proportionally centered top to bottom.

Perhaps you can show me in class, Ill bring in the index.html file...

jedhunsaker

02-20-2009, 02:33 AM

Yeah, that's a hard thing to do in HTML, but if you want something to be completely centered, set the style to margin:auto;

There's issues with vertical center though. I haven't done web development for over a year, so I'm a bit rusty too.

Systous

03-05-2009, 01:27 PM

Vertical center AFAIK requires java to do a detection of the current browser dimensions. You would then also need to disable resizing as the image centers on load, and if they resize the window it stays where it was. Of course java disabled and alternate browser poses an issue with cross platform stability.

Perhaps if you did a java detect, then set it to a floating DivLayer which adjust it's position based on that.

I know it can be done, it my "darker" programming days I developed a window which would detect browser size and then open to 120% of that so they couldn't "X" out our touch the toolbar, scroll bar, or see the status bar. Then just disabling right click and redirecting Ctrl to null and you've got yourself a pain in the arse pop up window.

But let Jed says... vertical center is a pain. Settle on a standard browser size and then push it down based on that. People with retardedly high resolutions are used to seeing broken graphics. I know I am. And frankly their smugness is all they need.

2 cents.

Justin

jedhunsaker

04-09-2009, 03:07 AM

Vertical center AFAIK requires java to do a detection of the current browser dimensions.

I think he means JavaScript (huge difference). It's always best to stay away from scripting if at all possible though.

I had to help a brother out here. I found a cross-browser compatible version (link (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html)) and the trick is that you have to simulate an HTML table and tell it exactly how high you want the cell to be before you can center something inside of it. Additionally, you have to employ the use of Internet Explorer CSS hacks to make it work across all browsers.

Here's a working example...

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>

Let me know if you need help creating reusable CSS classes so you don't have to type the same hoopla into the divs each time you need a vertical center.

dabu

04-09-2009, 10:03 AM

Super appreciate the help, all. I will be building out the site later this year, and will need your help then, for sure.

Its been a while since Ive done any web development myself...

jedhunsaker

04-10-2009, 01:17 AM

Feel free to IM or email me any time. I've been doing web dev for 15 years. I'll probably be doing a web dev contract in the Summer like I always do too. Always glad to help.