Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Old 08-15-2009, 10:07 AM   #1 (permalink)
Junior Member
 
Join Date: 08-15-09
Posts: 1
iTrader: 0 / 0%
Latest Blog:
None

SofreeWeb is liked by many
Layout Centering with CSS

Hello, im new to the forum and i am having some issues with centering my layout in a <div class="container"></div> tag. Below is the CSS from my main page.

I have tried everything that i have learned about CSS to get my page to center in any browser. As you will notice in the code, i have a (position:absolute) in each div class. I even tried taking that out but it just centered everything without keeping the layout. By the way this code is generated from Adobe Image Ready. If someone can help me with this i will greatly appreciate it and refer this site to all my friends.

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


div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:900px;
height:1840px;
}

div.index-01 {
position:absolute;
left:0px;
top:0px;
width:49px;
height:1800px;
background-image: url(images/index_01.gif);
}

div.index-02 {
position:absolute;
left:49px;
top:0px;
width:633px;
height:30px;
background-image: url(images/index_02.gif);
}

div.index-03 {
position:absolute;
left:682px;
top:0px;
width:168px;
height:30px;
background-image: url(images/index_03.gif);
}

div.index-04 {
position:absolute;
left:850px;
top:0px;
width:50px;
height:1800px;
background-image: url(images/index_04.gif);
}

div.index-05 {
position:absolute;
left:49px;
top:30px;
width:633px;
height:195px;
background-image: url(images/index_05.gif);
}

div.index-06 {
position:absolute;
left:682px;
top:30px;
width:168px;
height:30px;
}

div.index-07 {
position:absolute;
left:682px;
top:60px;
width:168px;
height:30px;
}

div.index-08 {
position:absolute;
left:682px;
top:90px;
width:168px;
height:30px;
}

div.index-09 {
position:absolute;
left:682px;
top:120px;
width:168px;
height:30px;
}

div.index-10 {
position:absolute;
left:682px;
top:150px;
width:168px;
height:30px;
}

div.index-11 {
position:absolute;
left:682px;
top:180px;
width:168px;
height:30px;
}

div.index-12 {
position:absolute;
left:682px;
top:210px;
width:168px;
height:15px;
}

div.index-13 {
position:absolute;
left:49px;
top:225px;
width:616px;
height:35px;
background-image: url(images/index_13.gif);
}

div.index-14 {
position:absolute;
left:665px;
top:225px;
width:185px;
height:35px;
background-image: url(images/index_14.gif);
}

div.index-15 {
position:absolute;
left:49px;
top:260px;
width:11px;
height:1539px;
background-image: url(images/index_15.gif);
}

div.index-16 {
position:absolute;
left:60px;
top:260px;
width:141px;
height:31px;
}

div.index-17 {
position:absolute;
left:201px;
top:260px;
width:9px;
height:1539px;
background-image: url(images/index_17.gif);
}

div.index-18 {
position:absolute;
left:210px;
top:260px;
width:446px;
height:1539px;
background-image: url(images/index_18.gif);
}

div.index-19 {
position:absolute;
left:656px;
top:260px;
width:9px;
height:1539px;
background-image: url(images/index_19.gif);
}

div.index-20 {
position:absolute;
left:665px;
top:260px;
width:175px;
height:230px;
background-image: url(images/index_20.gif);
}

div.index-21 {
position:absolute;
left:840px;
top:260px;
width:10px;
height:1539px;
background-image: url(images/index_21.gif);
}

div.index-22 {
position:absolute;
left:60px;
top:291px;
width:141px;
height:29px;
}

div.index-23 {
position:absolute;
left:60px;
top:320px;
width:141px;
height:25px;
}

div.index-24 {
position:absolute;
left:60px;
top:345px;
width:141px;
height:25px;
}

div.index-25 {
position:absolute;
left:60px;
top:370px;
width:141px;
height:22px;
}

div.index-26 {
position:absolute;
left:60px;
top:392px;
width:141px;
height:23px;
}

div.index-27 {
position:absolute;
left:60px;
top:415px;
width:141px;
height:25px;
}

div.index-28 {
position:absolute;
left:60px;
top:440px;
width:141px;
height:25px;
}

div.index-29 {
position:absolute;
left:60px;
top:465px;
width:141px;
height:25px;
}

div.index-30 {
position:absolute;
left:60px;
top:490px;
width:141px;
height:1309px;
background-image: url(images/index_30.gif);
}

div.index-31 {
position:absolute;
left:665px;
top:490px;
width:175px;
height:1309px;
background-image: url(images/index_31.gif);
}

div.index-32 {
position:absolute;
left:0px;
top:1800px;
width:900px;
height:40px;
background-image: url(images/index_32.gif);
}

div.index-33 {
position:absolute;
left:899px;
top:960px;
width:1px;
height:40px;
}

body {
text-align:center;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
}

div.container {
margin: 0 auto;
width: 900px;
text-align: left;
}

.style1 {color: #1D7595}
.style11 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #616056; }
.style15 { color: #1D7595;
font-weight: bold;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.style16 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #616056; font-weight: bold; }
.style3 {color: #1D7595; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style17 {color: #FFFFFF}
.style18 {font-family: Arial, Helvetica, sans-serif}
.style19 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style20 {color: #616056}

-->
</style>
--------------------------------------------------------------------------

Thanks in Advance for any help and/or suggestion

Sean
SofreeWeb is offline  
Add Post to del.icio.us
Reply With Quote
Old 08-15-2009, 09:56 PM   #2 (permalink)
Super Moderator
 
htmlbasictutor's Avatar
 
Join Date: 10-29-07
Location: British Columbia, Canada
Posts: 3,301
iTrader: 0 / 0%
Latest Blog:
Website Testing

htmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web prohtmlbasictutor is a highly respected web pro
I'm guessing you are having problems centering your design because you have used absolute positioning for containers I assume are inside the container.
  1. Rename all those numbered styles with meaningful names. You aren't going to remember in a day or two what they are all for
  2. Take out all that absolute positioning and enter the containers in your coding in the order you want them to appear on the screen to start with.
  3. Once you have them all linerized, then start changing widths, floats, etc to get the internal containers to land where you want them.
  4. Absolute positioning is really hard to manage if you aren't well experienced in CSS. It appears that the program you used let you do this when there was a better way to do it.
__________________
HTML Basic Tutor - Learn to code your web pages/blogs
Basic Computer Information - Computer Basics for website owners

Trouble getting indexed? Maybe it's something techincal - Pm me.
htmlbasictutor is online now  
Add Post to del.icio.us
Reply With Quote
Old 08-18-2009, 06:52 AM   #3 (permalink)
Contributing Member
 
EnhanceSEO's Avatar
 
Join Date: 06-03-09
Location: UK
Posts: 55
iTrader: 0 / 0%
Latest Blog:
None

EnhanceSEO is liked by many
Try -

margin: 0px auto;

This is what I use to centre align everything!
EnhanceSEO is offline  
Add Post to del.icio.us
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply

Tags
css


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering Images mack77 Web Design Lobby 6 12-18-2008 07:32 AM
CSS Menu centering mat4020 Coding Forum 8 03-26-2008 06:38 PM
Quick quesiton - Help with centering Tania Coding Forum 7 03-10-2008 11:36 AM
Centering Horizontal CSS Menu thecoolkid Coding Forum 13 08-30-2007 10:59 PM
Centering works in Firefox but not IE ? Spydey Coding Forum 1 04-17-2006 08:00 AM


Sponsor Links
Get exposure! Contextual Links V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 09:07 PM.
© Copyright 2008 V7 Inc
Powered by vBulletin
Copyright © 2000-2009 Jelsoft Enterprises Limited.


Search Engine Optimization by vBSEO 3.3.0 ©2009, Crawlability, Inc.