No replies
clark54
Offline
newbie
Last seen: 13 years 32 weeks ago
Joined: 2009-07-01
Posts: 1
Points: 0

Hi guys, I'm new to the forum, hoping you guys could help me out.

I'm not a very experienced html/css user, photoshop is more of my thing. I have a project I'm working on for my parent's company. I have a sliced up 768x393 image. I positioned everything in CSS by using pixels and absolute positioning. It was thirty slices and I finally have it all put together.

My problem is I want to center all these images. The slices are all different shapes and sizes, so how can I maintain their positioning and still center it all as one big block? If I were to put all the
images in a 'div' how would the images stay positioned? I'm complete newbie, any help would be greatly appreciated. Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Indiana Rug Company | Custom Area Rugs &amp; Reupholstery </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("indexsheet2.css");
body {
	background-color: #8c96a2;
 
}
body,td,th {
	font-family: Times New Roman, Times, serif;
	font-size: 16px;
	color: #333333;
}
 
 
 
.style3 {
	font-family: Times New Roman, Times, serif;
	color: #FFFFFF;
	font-size: 16px;
}
.style5 {
	font-size: 18px;
	font-weight: bold;
	font-family: Times New Roman, Times, serif;
	color: #333333;
}
 
.style6 {color: #ffffff;
font-size: 18px;
	font-weight: bold;
	font-family: Times New Roman, Times, serif;}
 
.style7 {color: #000000;
font-size: 14px;
	font-weight: bold;
	font-family: Times New Roman, Times, serif;}
a:link {
	color:#CC6600;
}
a:visited {
	color: #FF6600;
}
a:hover {
	color: #FF6600;
}
a:active {
	color: #FF6600;
}
 
</style>
<meta name="keywords" content="area rug, area rugs, custom rugs, custom rug, custom carpet, rug decor, custom made rugs, home made rugs, midwest, online shopping, carpet, floor, custom made, Home and Garden, gallery, unique gift, interior decorator, handmade, home furnishings, floor covering, art, Indiana, shop, interior design supplier, new home, residential, commercial, fiber art, binding, inlay, sculpture, floorcloth, hooked, remodel, unique, one of a kind, freeform, circle, 8 X 10, decorating, designer, color, rug, shopping, value, Mishawaka Avenue, South Bend, dining room, living room, kitchen, bedroom, entryway, wholesale, rugs to market, design tips, artist, sculptor, fiber, border, nylon, wool, kids, texture, contemporary, traditional, modern, funky, retro, mural">
<meta name="description" content="Indiana Rug Company is your custom inlay area rug specialist. We offer handmade custom area rugs, along with other carpet services. Our consultants can help you or we can work with your interior designer, etc. Looking for a rug just for you? Have an idea for the perfect rug but don't have the tools to put it togethe? Let us know, we can do anything with carpet. We are virtusos of custom carpet.">
<META NAME="robots" CONTENT="index, follow">
<META NAME="GOOGLEBOT" CONTENT="INDEX, FOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Language" content="EN-us"> 
<META NAME="abstract" CONTENT="See Custom Area Rugs and other fiber related art at our Specialty Store">
<META name="Distribution" content="Global">
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon1.gif" type="image/gif">
</head>
 
<body>
 
<div id="center">     
           <img src="resize/images/irc_01.jpg" alt="Top" id="Top">   
           <img src="resize/images/irc_02.jpg" alt="Top2" id="Top2">
           <img src="resize/images/irc_03.jpg" alt="Top3" id="Top3">
           <img src="resize/images/irc_04.jpg" alt="Top4" id="Top4">
		   <img src="resize/images/irc_05.jpg" alt="Top5" id="Top5">
		   <img src="resize/images/irc_06.jpg" alt="Top6" id="Top6">
		   <img src="resize/images/irc_07.jpg" alt="Top7" id="Top7">
		   <img src="resize/images/irc_08.jpg" alt="Top8" id="Top8">
		   <img src="resize/images/irc_09.jpg" alt="Top9" id="Top9">
		   <img src="resize/images/irc_10.jpg" alt="Top10" id="Top10">
		   </div>
 
<img src="resize/images/irc_11.jpg" alt="Window_left" id="Window_left">
<img src="resize/images/irc_23.jpg" alt="Below_Window_left" id="Below_Window_left">
<img src="resize/images/irc_31.jpg" alt="ground_1" id="ground1">
<img src="resize/images/irc_13.jpg" alt="middle" id="m">
<img src="resize/images/irc_24.jpg" alt="middle" id="below_m">
<img src="resize/images/irc_14.jpg" alt="door" id="door">
<img src="resize/images/irc_15.jpg" alt="door" id="rightofdoor">
<img src="resize/images/irc_25.jpg" alt="door" id="below_rightofdoor">
<img src="resize/images/irc_16.jpg" alt="Indiana Rug Co window" id="Window_right">
<img src="resize/images/irc_17.jpg" alt="endright" id="endright">
<img src="resize/images/irc_28.jpg" alt="Our best viewed in Mozilla Firefox" id="Firefox">
<img src="resize/images/rightbar.jpg" alt="Our best be viewed in Mozilla Firefox" id="rightbar">
 
<div id="nav_bar">     
           <img src="resize/images/irc_12.jpg" alt="home" id="home">   
           <img src="resize/images/irc_18.jpg" alt="gallery" id="gallery">
           <img src="resize/images/irc_19.jpg" alt="store" id="store">
           <img src="resize/images/irc_20.jpg" alt="blog" id="blog">
		   <img src="resize/images/irc_21.jpg" alt="links" id="links">
		   <img src="resize/images/irc_22.jpg" alt="faq" id="faq">
		   <img src="resize/images/irc_26.jpg" alt="services" id="services">
		   <img src="resize/images/irc_27.jpg" alt="space" id="space">
		   <img src="resize/images/irc_29.jpg" alt="aboutus" id="aboutus">
		   <img src="resize/images/irc_30.jpg" alt="endofnav" id="endofnav">
		   </div>
 
<div id="ground">     
           <img src="resize/images/irc_32.jpg" alt="ground" id="g32">   
           <img src="resize/images/irc_33.jpg" alt="ground" id="g33">
           <img src="resize/images/irc_34.jpg" alt="ground" id="g34">
           <img src="resize/images/irc_35.jpg" alt="ground" id="g35">
		 </div>		   
 
</body>
</html>

here is the CSS

/* CSS Document */
 
 
#center {
    position: absolute;
	top: 0px;
	left: 0px;
    display: block}
 
#Window_left{
    position: absolute;
	top: 130px;
	left: 0px;
    display: block}
 
#Below_Window_left{
    position: absolute;
	top: 207px;
	left: 0px;
    display: block}
 
#m{
    position: absolute;
	top: 130px;
	left: 178px;
    display: block}
 
#below_m{
    position: absolute;
	top: 211px;
	left: 178px;
    display: block}
#door{
    position: absolute;
	top: 130px;
	left: 263px;
    display: block}
 
#rightofdoor{
    position: absolute;
	top: 130px;
	left:329px;
    display: block}
#below_rightofdoor{
    position: absolute;
	top: 211px;
	left:329px;
    display: block}
#Window_right{
    position: absolute;
	top: 130px;
	left:457px;
    display: block}
#endright{
    position: absolute;
	top: 130px;
	left:697px;
    display: block}
#Firefox{
    position: absolute;
	top: 225px;
	left:457px;
    display: block}
 
#rightbar{
    position: fixed;
	top: 0px;
	left:740px;
    z-index: 250;
	display: block}
 
#ground1{
    position: absolute;
	top: 283px;
	left: 0px;
    display: block}
 
#ground{
    position: absolute;
	top: 297px;
	left: 0px;
    display: block}
 
 
/*NAV BAR*/
#home{
    position: absolute;
	top: 130px;
	left: 87px;
    display: block}
 
#gallery{
    position: absolute;
	top: 144px;
	left: 87px;
    display: block}
 
#store{
    position: absolute;
	top: 158px;
	left: 87px;
    display: block}
 
#blog{
    position: absolute;
	top: 170px;
	left: 87px;
    display: block}
 
#links{
    position: absolute;
	top: 182px;
	left: 87px;
    display: block}
 
#faq{
    position: absolute;
	top: 196px;
	left: 87px;
    display: block}
 
#services{
    position: absolute;
	top: 213px;
	left: 87px;
    display: block}
 
#space{
    position: absolute;
	top: 228px;
	left: 87px;
    display: block}
#aboutus{
    position: absolute;
	top: 240px;
	left: 87px;
    display: block}
 
#endofnav{
    position: absolute;
	top: 255px;
	left: 87px;
    display: block}