Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Aligning entire site to be centered horizontally 1

Status
Not open for further replies.
EmJayDesign

EmJayDesign

Technical User
Jun 3, 2008
3
US
Hi,
I am not really an experience web designer, and I kind of put together a site based on a collection of tutorials that I found online. I am having trouble centering the entire page to be centered horizontally (and preferably vertical too but I'll settle for just horizontal!) I understand that I have made all the slices, etc to be position:absolute and I know this is affecting it, but I played around with it and I cannot figure out how to do this. Here is the beginning of my code where most likely the problem is. I know it is probably messy and wrong but help me fix it up so i can center it!! Thank you!!

<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:850px;
height:600px;
}

#Slice {
position:absolute;
left:0px;
top:0px;
width:850px;
height:7px;
}

#Slice002 {
position:absolute;
left:0px;
top:7px;
width:7px;
height:593px;
}

#scrols {
position:absolute;
left:7px;
top:7px;
width:836px;
height:137px;
}

#Slice004 {
position:absolute;
left:843px;
top:7px;
width:7px;
height:593px;
}

#Slice005 {
position:absolute;
left:7px;
top:144px;
width:836px;
height:413px;
}

#Slice006 {
position:absolute;
left:7px;
top:557px;
width:232px;
height:30px;
}

#home-btn {
position:absolute;
left:239px;
top:557px;
width:67px;
height:30px;
}

#gallery-btn {
position:absolute;
left:306px;
top:557px;
width:74px;
height:30px;
}

#services-btn {
position:absolute;
left:380px;
top:557px;
width:81px;
height:30px;
}

#about-btn {
position:absolute;
left:461px;
top:557px;
width:69px;
height:30px;
}

#contact-btn {
position:absolute;
left:530px;
top:557px;
width:72px;
height:30px;
}

#Slice012 {
position:absolute;
left:602px;
top:557px;
width:241px;
height:30px;
}

#Slice013 {
position:absolute;
left:7px;
top:587px;
width:836px;
height:13px;
}
#apDiv1 {
position:absolute;
left:306px;
top:16px;
width:225px;
height:119px;
z-index:1;
}
body {
background-color: #3A2B14;
background-image: url(images/blue_background.gif);
background-repeat: repeat;
}
#apDiv2 {
position:absolute;
left:7px;
top:180px;
width:836px;
height:321px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:7px;
top:251px;
width:512px;
height:201px;
z-index:3;
}

-->
</style>
 
Sort by date Sort by votes
Hi,
I tried to put it in, nothing changed, Maybe I am putting in the wrong place?
Here is my entire code for the page. I apologize in advance for the messiness!
Thank you for your help


<html>
<head>
<title> Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:850px;
height:600px;
}

#Slice {
position:absolute;
left:0px;
top:0px;
width:850px;
height:7px;
}

#Slice002 {
position:absolute;
left:0px;
top:7px;
width:7px;
height:593px;
}

#scrols {
position:absolute;
left:7px;
top:7px;
width:836px;
height:137px;
}

#Slice004 {
position:absolute;
left:843px;
top:7px;
width:7px;
height:593px;
}

#Slice005 {
position:absolute;
left:7px;
top:144px;
width:836px;
height:413px;
}

#Slice006 {
position:absolute;
left:7px;
top:557px;
width:232px;
height:30px;
}

#home-btn {
position:absolute;
left:239px;
top:557px;
width:67px;
height:30px;
}

#gallery-btn {
position:absolute;
left:306px;
top:557px;
width:74px;
height:30px;
}

#services-btn {
position:absolute;
left:380px;
top:557px;
width:81px;
height:30px;
}

#about-btn {
position:absolute;
left:461px;
top:557px;
width:69px;
height:30px;
}

#contact-btn {
position:absolute;
left:530px;
top:557px;
width:72px;
height:30px;
}

#Slice012 {
position:absolute;
left:602px;
top:557px;
width:241px;
height:30px;
}

#Slice013 {
position:absolute;
left:7px;
top:587px;
width:836px;
height:13px;
}
#apDiv1 {
position:absolute;
left:306px;
top:16px;
width:225px;
height:119px;
z-index:1;
}
body {
background-color: #3A2B14;
background-image: url(images/blue_background.gif);
background-repeat: repeat;
}
#apDiv2 {
position:absolute;
left:7px;
top:180px;
width:836px;
height:321px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:7px;
top:251px;
width:512px;
height:201px;
z-index:3;
}

-->
</style>
<!-- End Save for Web Styles -->
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#3A2B14" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onLoad="MM_preloadImages('images/home_btn_over.gif','images/gallery_btn_over.gif','images/services_btn_over.gif','images/about_btn_over.gif','images/contact_btn_over.gif')">
<!-- Save for Web Slices (home3.psd) -->
<div id="Table_01">
<div id="Slice">
<img src="images/Slice.gif" width="850" height="7" alt="">
</div>
<div id="Slice002">
<img src="images/Slice-02.gif" width="7" height="593" alt="">
</div>
<div id="scrols">
<img src="images/scrols.gif" width="836" height="137" alt="">
</div>
<div id="Slice004">
<img src="images/Slice-04.gif" width="7" height="593" alt="">
</div>
<div id="Slice005">
<img src="images/Slice-05.gif" width="836" height="413" alt="">
</div>
<div id="Slice006">
<img src="images/Slice-06.gif" width="232" height="30" alt="">
</div>
<div id="home-btn"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_btn','','images/home_btn_over.gif',1)"><img src="images/home_btn.gif" name="home_btn" width="67" height="30" border="0"></a></div>
<div id="gallery-btn"><a href="bathrooms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_btn','','images/gallery_btn_over.gif',1)"><img src="images/gallery_btn.gif" name="gallery_btn" width="74" height="30" border="0"></a></div>
<div id="services-btn"><a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services_btn','','images/services_btn_over.gif',1)"><img src="images/services_btn.gif" name="services_btn" width="81" height="30" border="0"></a></div>
<div id="about-btn"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about_btn','','images/about_btn_over.gif',1)"><img src="images/about_btn.gif" name="about_btn" width="69" height="30" border="0"></a></div>
<div id="contact-btn"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_btn','','images/contact_btn_over.gif',1)"><img src="images/contact_btn.gif" name="contact_btn" width="72" height="30" border="0"></a></div>
<div id="Slice012">
<img src="images/Slice.jpg" width="241" height="30" alt="">
</div>
<div id="Slice013">
<img src="images/Slice-13.gif" width="836" height="13" alt="">
</div>
</div>
<!-- End Save for Web Slices -->
<div id="apDiv1"><img src="images/logo.gif" width="242" height="124"></div>
<div id="apDiv2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="836" height="350" id="FlashID" title="slideshow">
<param name="movie" value="introslide.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="introslide.swf" width="836" height="350">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href=" src=" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="apDiv3"><img src="assets/home_words.png" width="507" height="193"></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
 
Upvote 0 Downvote
body {
background-color: #3A2B14;
background-image: url(images/blue_background.gif);
background-repeat: repeat;
text-align: center;
}

----

In all honesty though you are not down the path to learning how to make a standards compliant site (or any site for that matter).

first of all your use of absolute positioning (along with the left/top/bottom/right designations) will not allow you to do what you want - get rid of them all.

Secondly get rid of all the preload and mouseover and flash crap you have right now. work on a basic site that doesnt involve the use of so much clutter. You can always add these other elements later once the site is built to your specs. In the part where you want to have the flash movie play just program an empty DIV container for the flash but dont insert the flash. Once the page is ready and you are happy then insert the movie.

Thirdly exporting slices to a webpage from photoshop is not recommended. You should use photoshop to design the site but then you should slice each individual element as needed and export just the elements. Then program the site using the elements. But exporting from PS to a Webpage is IMO disastrous.

Fourthly when naming elements its a good idea to give them a name that has meaning to YOU. Another part where PS fails.

You can barely sit up and you are trying to sprint here.

the most important thing I can tell a beginner with regards to programming websites is think of any DIV you put on as a block that will take up the whole width of the screen and anything that comes before or after it will either be above or below it. Once you get a grasp of that concept then move along to floats as floats will break the flow of the elements and will allow you to place 2 block containers (DIVs) right next to each other.

read up on block, in-line, and floats. until you get the grasp of this dont try positioning your site with absolute.

In the beginning I tried it your way (some 10 years ago) took my weeks sometimes to get one page right. Take smaller steps and you will learn much faster.

1. Build the page wireframe (usually something like)

Code: 
<div id="container">
<div id="header">Logo and menu</div>
<div id="content">Page content</div>
<div id="footer">Site footer</div>
</div>

Very basic site structure and one that I employ on almost all my sites.

2. Once the wireframe is built start adding text and images.
3. Refine styling.
4. Add scripts, flash, movies, audio, rotating gifs, pretty much anything that will make most peoples eyes bleed.

then check for compatibility on IE (Yeah I didnt mention that first build the site in FF as it is much more standards compliant that IE) and make fixes to make sure that both look as close to 100% identical.

5. Validate your code at the w3c validator.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
Thank you so much for taking the time out to write such a detailed response.
The text align thing didn't work but that's probably because my code is all screwed up and I won't pursue that further right now.
I will take your advice and maybe start over a bit to have it set up properly. I know the absolute positioning thing was a problem , I just wasn't sure how to fix it but I'll search around a bit.
Thanks so much for your advice!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
289
Mike Lewis
Mike Lewis
RosieGp
  • Locked
  • Question
How to read string of 0s and 1s 1
Replies
3
Views
306
LyndonOHRC
LyndonOHRC
lollieleaver
  • Locked
  • Question
Dreamweaver CS4 - how can I make an Access database downloadable from my site?
Replies
2
Views
101
lollieleaver
lollieleaver
Guthro
  • Locked
  • Question
Save site data DW8 and Win7
Replies
2
Views
85
Guthro
Guthro
raist3001
  • Locked
  • Question
Update multiple files in a site
Replies
2
Views
101
KozarTech
KozarTech

Part and Inventory Search

Sponsor

Back
Top