Power3D- My portfolio/business

[Last Known Hero]

Well I finally got it up.. don't mind the picture on the front page, it was a place holder for the class that I made the website in, that's why my artwork section doesn't have anything yet either, was just using random 3d images.

http://power3Dart.com

[SpiritWebb]

Hopefully the menu links are working now!!

[Jackolantern]

Looking good so far Can't wait to have some real portfolio pics uploaded!

[Last Known Hero]

I checked my site on my girlfriend's laptop and on her family's desktop and neither looked how they were supposed to! I reaaaally need help on this since it's been too long since I've used html and don't remember a damn thing from that class. Here is how it is supposed to look:
http://i161.photobucket.com/albums/t223 ... ro/web.jpg

But when I go on either of the other computers the whole thing is shifted to the left of the screen and the background's gray part looks stretched.. what could cause this? I included my .css info in the code below, and the second one is the home pages script.. hopefully someone has some ideas.

.CSS

Code: Select all

									/* header */
body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: #cccccc;
	background: #b43301 url(images/power3d_main_bg.jpg) repeat-x;
}
		
a:link, a:visited { color: #ffffff; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #FFFF66; text-decoration: underline; }

p { margin: 0px; padding: 0px; text-align: justify; }

img { margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }


.m_right { margin-right: 30px; }


h1 {
	margin: 0px;
	padding: 0px;;
	font-size: 30px;
	font-weight: bold;
	color: #ffffff;
}

h2 {
	margin: 0 0 20px 0;
	padding: 3px 0;
	font-size: 24px;
	font-weight: normal;
	color: #ffffff;
}

h3 {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: bold;
	font-weight: bold;
	color: #ffffff;
}

.image_wrapper {
	margin-top: 3px;
	margin-bottom: 5px;
}
									/* header */



									/* site title bar */

#power3d_container {
	width: 980px; 
	margin: 0 auto;
}

#power3d_site_title_bar {
	width: 980px;
	height: 130px;
	background: url(images/power3d_site_title_bar_bg.jpg) no-repeat;
}

#power3d_site_title_bar  #site_title {
	text-align: center;
	padding: 40px 150px 0 150px;
}

#site_title h1 a {
	margin: 0px;
	padding: 0px;
	font-size: 36px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
}

#site_title h1 a:hover {
	font-weight: normal;	
	text-decoration: none;
}

#site_title h1 a span {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	color: #1d1b1a;
}

								/* site title bar */






									/* menu */

#power3d_menu {
	clear: both;
	width: 980px;
	height: 90px;
	background: url(images/power3d_menu_bar_bg.jpg) no-repeat;
}

#power3d_menu ul {
	width: 600px;
	padding: 9px 0 0 0;
	margin: 0 auto;
	list-style: none;
}

#power3d_menu ul li {
	padding: 0;
	margin: 0px;
	display: inline;
}

#power3d_menu ul li a {
	float: left;
	display: block;
	width: 114px;
	height: 68px;
	padding: 13px 0 0 0;
	margin: 0 3px;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;	
	background: url(images/power3d_menu_button_bg.png) no-repeat;
	outline: none;
}

#power3d_menu li a:hover, #power3d_menu li .current {
	color: #FFCC66;
	background: url(images/power3d_menu_button_hover_bg.png)
}

									/* menu */





									/* content */

#power3d_content_wrapper {
	clear: both;
	width: 980px;
	background: url(images/power3d_content_wrapper_bg.jpg) center repeat-y;
}

#power3d_content {
	width: 820px;
	padding: 40px 80px;
	background: url(images/power3d_content_bg.jpg) top center no-repeat;
}

#side_column {
	float: left;
	width: 220px;
	padding: 0 30px 0 0; 
	border-right: 1px dashed #999;
}

#main_column {
	float: left;
	width: 500px;
}

#pictures_column {

	margin-left: 100px;
	width: 800px;
}

.side_column_box {
	clear: both;
	margin-bottom: 60px;
}

.news_section {
	clear: both;
	margin-bottom: 20px;
}

.side_column_box form {
	margin: 0px;
	padding: 0px;
}

.side_column_box .inputfield {
	height: 16px;
	width: 166px;
	padding: 2px 5px;
	margin: 0 0 10px 0;
	font-size: 12px;
	font-variant: normal;
	line-height: normal;
}

.side_column_box .submitbutton {
	float: right;
	margin: 0px;
	padding: 0 6px 3px 6px;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
}

.main_column_section {
	clear: both;
}

.section_w280 {
	width: 250px;
}

.main_column_section p {
	margin-bottom: 10px;
}
									/* content */





									/* footer */
#power3d_footer {
	clear: both;
	width: 840px;
	padding: 30px;
	margin: 0 40px;
	text-align: center;
	background: #342e2c url(images/power3d_footer_bg.jpg) top repeat-x;
	color: #615854;
}

#power3d_footer a {
	color: #7c7471;
}

#power3d_footer a:hover {
	color: #FFFFFF;
}

#power3d_footer .footer_menu {
	margin: 0 0 10px 0;
	padding: 0px;
	list-style: none;
}

.footer_menu li {
	margin: 0px;
	padding: 0 20px;
	display: inline;
	border-right: 1px solid #7c7471;
}

.footer_menu .last_menu {
	border: none;
}
									/* footer */

Home HTML

Code: Select all

<html><head>
		<title> Power3D Home </title>
<link href="power3dart_style.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
</script>
</head><body>
<div id="power3d_container">
<div id="power3d_site_title_bar">
<div id="site_title">
<h1><a href="home.html"> <img src="images/power3dart_banner.gif" alt="" /><span>The New Generation of Artists</span> </a></h1>
</div>
</div>
<div id="power3d_menu">
<ul>
<li><a class="current" href="home.html">Home</a></li>
<li><a href="power3dart_services.html">Services</a></li>
<li><a href="power3dart_artwork.html">Artwork</a></li>
<li><a href="power3dart_background.html">Background</a></li>
<li><a href="power3dart_contact.html">Contact Info</a></li>
</ul>
</div>
<div id="power3d_content_wrapper">
<div id="power3d_content">
<div id="side_column">
<div class="side_column_box">
<h2>Testimonials</h2>
<div class="news_section">
<h3>Gameartisans.org</h3>
<p>"Very nice anatomy on the character, has a nice pose to go with it.." -David-Halo</p>
</div>
<div class="news_section">
<h3>Unannounced Game Project<br /></h3>
<p>"You do really good work, better than alot of seasoned guys I've worked with in the past." -Donald Desmond</p>
</div>
</div>
</div>
<div id="main_column">
<div class="main_column_section">
<h2>Welcome To Power3D Art</h2>
<a href="power3dart_artwork.html"><img src="images/power3d_image_01.jpg" alt="" /> </a>
<p>Welcome to Power3D art. This small company is ran by a student who is currently interested in attending college for 3D art. Many products and services are available, simply click on the <a href="power3dart_services.html" target="_parent">"Services"</a> tab located at the top of the page to view what kind of work can be done. After you view what services we offer, you may then send us an e-mail, which you can view at our <a href="power3dart_contact.html" target="_parent">"Contact Info"</a> tab.</p>
</div>
</div>
</div>
<div id="power3d_footer">
<ul class="footer_menu">
<li><a class="current" href="home.html">Home</a></li>
<li><a href="power3dart_services.html">Services</a></li>
<li><a href="power3dart_artwork.html">Artwork</a></li>
<li><a href="power3dart_background.html">Background</a></li>
<li class="last_menu"><a href="power3dart_contact.html">Contact Info</a></li>
</ul>
Copyright © 2010 <a href="http://www.power3dart.com">Power3D</a> | Designed by : Tim Koch | "The New Generation of Artists"</div>
</div>
</div>
</body></html>

PS. This is the first time I've ever asked for scripting help I think. I better not be turning into a programmer D:

[PaxBritannia]

I've opened it in around 7 browsers, and there doesn't seem to be any of the problems you mentioned: it all looks fine.

It might look stretched because of pixel issues on the different screens. Otherwise it may be a caching issue with their browsers / isp etc.

pax.

[SpiritWebb]

It could also be monitor size maybe? One more widescreen then the other...just a thought.

[Last Known Hero]

They're screens are definitely more rectangle than mine. Both of mine are squares.. I just want it to look good on all monitor types, any way to make it the same for widescreen as it is for square screens?

[Last Known Hero]

Going to take a look into my .css later and see if i can figure anything out... for the mean time, I uploaded a few of my recent models to the art page.

What kind of features do you think I should have, if any?