HTML Help

rye_ryu · Joined: 24 Oct 2009 Posts: 2

I have a Mac that I use to create and code sites. This makes it difficult when the client is a PC. Here's the problem at hand: There's more background on the right side than the left side on PC's (you can see what I'm talking about better when you maximize the screen on a PC). How do I center the middle so that there is equal space on each side?

here is the site: http://donedhardyshirts.com

Any help is greatly appreciated!

Corrected link. Mod.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

Makes NO difference whether you are using a Mac or a PC as far as the browser parsing the HTML/CSS code. It's centered in Firefox, but your width is going to be way too wide for most people's browser window size.

Correcting CSS and HTML errors will help:

CSS Errors

HTML ERRORS

sticks464 · Joined: 31 Dec 2006 Posts: 2629

Give this a try.

Code: <!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">
html,body{
height:100%;
margin:0;
padding:0;
}
body {
background:#000 url("http://donedhardyshirts.com/EdHardyShirts/images/bk_tile.jpg") repeat-x top left;
}

#container{
width:100%;
height:50%;
margin-top:-350px;/* half vertical height*/
float:left;
}
#content {
position:relative;
width:1098px;
height:700px;
margin:auto;
background: url("http://donedhardyshirts.com/EdHardyShirts/images/workspace_bk.jpg") no-repeat;
overflow:auto; /* allow content to scroll inside element */
clear:both;
}
#logo {
position:absolute;
top:25px;
left:50px;
}
#menu {
position:absolute;
top:25px;
left:405px;
display:inline;
}
#content object {
position:relative;
display:block;
width:1000px;
height:500px;
margin:125px auto 0;
}

</style>
</head>

<body>
<div id="container"></div>
<div id="content">
<div id="logo">
<a href="http://donedhardyshirts.com/"><img src="http://donedhardyshirts.com/EdHardyShirts/images/logo.jpg" border="0"></a>
</div>
<div id="menu">
<a href="http://donedhardyshirts.com/shirts-index.html" target="_self"><img src="http://donedhardyshirts.com/EdHardyShirts/images/shirts_btn.jpg" border="0" onmouseover="this.src='http://donedhardyshirts.com/EdHardyShirts/images/shirts_btn_sel.jpg'"
onmouseout="this.src='http://donedhardyshirts.com/EdHardyShirts/images/shirts_btn.jpg'"></a>
<a href="http://donedhardyshirts.com/lifestyle.html" target="_self"><img src="http://donedhardyshirts.com/EdHardyShirts/images/lifestyle_btn.jpg" border="0"onmouseover="this.src='http://donedhardyshirts.com/EdHardyShirts/images/lifestyle_btn_sel.jpg'" onmouseout="this.src='http://donedhardyshirts.com/EdHardyShirts/images/lifestyle_btn.jpg'"></a>
<a href="http://donedhardyshirts.com/contact.htm" target="_self"><img src="http://donedhardyshirts.com/EdHardyShirts/images/contact_btn.jpg" border="0"onmouseover="this.src='http://donedhardyshirts.com/EdHardyShirts/images/contact_btn_sel.jpg'" onmouseout="this.src='http://donedhardyshirts.com/EdHardyShirts/images/contact_btn.jpg'"></a>
</div>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="500" width="1000">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://donedhardyshirts.com/EdHardyShirts/LogoSplash.swf" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://donedhardyshirts.com/EdHardyShirts/LogoSplash.swf" height="500" width="1000" wmode="transparent" />
</object>

</div>

</body>
</html>

You should remove the textured background from the center image and leave that part transparent so you still got the shadow effect and save as a png. That will eliminate the color difference in the textures. The same should be done with the menu images and logo. If you view with any other browser than IE you will see the difference.

rye_ryu · Joined: 24 Oct 2009 Posts: 2

Payneless - Thank you for those sites, they were helpful. But, there is a difference viewing them on different computers. I've treid from both Macs and PCs and the outcome is different on each.

Sticks464 - Thank you for the coding. I agree with the transparent backgrounds and would much rather have it that way. Only thing is that I didn't design the site, I'm only maintaining it. He didn't provide me with the PSD files... :?

Look at the site again, I've made used the codes provided.

http://donedhardyshirts.com

sticks464 · Joined: 31 Dec 2006 Posts: 2629

The centering on the homepage seemed to take care of the extra space on the left side, but the other pages are still off center.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4289 Location: MS

rye_ryu wrote: Payneless - Thank you for those sites, they were helpful. But, there is a difference viewing them on different computers. I've treid from both Macs and PCs and the outcome is different on each. Sorry, but it is still NOT the computers, but the browsers used and how they parse your pages. Test your pages with http://Browsershots.com/ tool. It is NOT the monitor size NOR the resolution that effects your pages DIRECTLY. It is the browser window size being used on those size screens. You can have the exact same computers, the same monitor resolution and sizes, then use a different browser and/or change the size of the browser window viewing the web page. Then you will notice how your page looks according to your coding.

If you don't have clean code, use a document type and code to it, your page will look vastly different on lots of computers only because of your coding.

There will ALWAYS be some differences between browsers displaying the same web page even at the same browser window size and an identical monitor and computer. It's the nature of browsers to be different as the developers have their own idea about how a browser will implement the standards.