Center whole Absolute layout

17 replies [Last post]

Wed, 2010-06-16 21:08

Giell

Offline

Last seen: 2 years 47 weeks ago

newbie

Belgium

Timezone: GMT+2

Joined: 2010-06-16

Posts: 6

Points: 7

Hellow there

I have a problem with centering my layout.
I have tried a lot things but it wont work.

Now, can someone help me to center my whole layout?
The images are absolute. And it's not easy to center them while the layout stays correct.

Here's the code:

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (index.psd) -->
<style type="text/css">
<!--
 
#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:1174px;
}
 
#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:27px;
}
 
#index-02 {
	position:absolute;
	left:0px;
	top:27px;
	width:152px;
	height:1147px;
}
 
#index-03 {
	position:absolute;
	left:152px;
	top:27px;
	width:720px;
	height:168px;
}
 
#index-04 {
	position:absolute;
	left:872px;
	top:27px;
	width:152px;
	height:1147px;
}
 
#index-05 {
	position:absolute;
	left:152px;
	top:195px;
	width:540px;
	height:1px;
}
 
#index-06 {
	position:absolute;
	left:692px;
	top:195px;
	width:120px;
	height:60px;
}
 
#index-07 {
	position:absolute;
	left:812px;
	top:195px;
	width:60px;
	height:1px;
}
 
#index-08 {
	position:absolute;
	left:152px;
	top:196px;
	width:360px;
	height:1px;
}
 
#index-09 {
	position:absolute;
	left:512px;
	top:196px;
	width:1px;
	height:1px;
}
 
#index-10 {
	position:absolute;
	left:513px;
	top:196px;
	width:179px;
	height:1px;
}
 
#index-11 {
	position:absolute;
	left:812px;
	top:196px;
	width:60px;
	height:978px;
}
 
#index-12 {
	position:absolute;
	left:152px;
	top:197px;
	width:57px;
	height:119px;
}
 
#index-13 {
	position:absolute;
	left:209px;
	top:197px;
	width:96px;
	height:60px;
}
 
#index-14 {
	position:absolute;
	left:305px;
	top:197px;
	width:38px;
	height:119px;
}
 
#index-15 {
	position:absolute;
	left:343px;
	top:197px;
	width:181px;
	height:60px;
}
 
#index-16 {
	position:absolute;
	left:524px;
	top:197px;
	width:36px;
	height:212px;
}
 
#index-17 {
	position:absolute;
	left:560px;
	top:197px;
	width:97px;
	height:60px;
}
 
#index-18 {
	position:absolute;
	left:657px;
	top:197px;
	width:35px;
	height:212px;
}
 
#index-19 {
	position:absolute;
	left:692px;
	top:255px;
	width:120px;
	height:154px;
}
 
#index-20 {
	position:absolute;
	left:209px;
	top:257px;
	width:96px;
	height:59px;
}
 
#index-21 {
	position:absolute;
	left:343px;
	top:257px;
	width:181px;
	height:59px;
}
 
#index-22 {
	position:absolute;
	left:560px;
	top:257px;
	width:97px;
	height:152px;
}
 
#index-23 {
	position:absolute;
	left:152px;
	top:316px;
	width:36px;
	height:858px;
}
 
#index-24 {
	position:absolute;
	left:188px;
	top:316px;
	width:336px;
	height:79px;
}
 
#index-25 {
	position:absolute;
	left:188px;
	top:395px;
	width:336px;
	height:14px;
}
 
#index-26 {
	position:absolute;
	left:188px;
	top:409px;
	width:21px;
	height:765px;
}
 
#index-27 {
	position:absolute;
	left:209px;
	top:409px;
	width:603px;
	height:582px;
	background-image: url(images/index_27.gif);
}
 
#index-28 {
	position:absolute;
	left:209px;
	top:991px;
	width:603px;
	height:123px;
}
 
#index-29 {
	position:absolute;
	left:209px;
	top:1114px;
	width:40px;
	height:60px;
}
 
#index-30 {
	position:absolute;
	left:249px;
	top:1114px;
	width:531px;
	height:34px;
}
 
#index-31 {
	position:absolute;
	left:780px;
	top:1114px;
	width:32px;
	height:60px;
}
 
#index-32 {
	position:absolute;
	left:249px;
	top:1148px;
	width:531px;
	height:26px;
}
 
-->
</style>
<!-- End Save for Web Styles -->
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="layout_text.css" rel="stylesheet" type="text/css">
</head>
<body background="images/background.gif" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; position: fixed;">
<div id="layout">
  <!-- Save for Web Slices (index.psd) -->
  <div id="Table_01"
    <div id="index-01" >
      <img src="images/index_01.gif" width="1024" height="27" alt="">
      </div>
    <div id="index-02">
      <img src="images/index_02.gif" width="152" height="1147" alt="">
  </div>
    <div id="index-03"> <a href="index.html"><img src="images/index_03.gif" width="720" height="168" alt="" border="0"></a>
  </div>
    <div id="index-04">
      <img src="images/index_04.gif" width="152" height="1147" alt="">
  </div>
    <div id="index-05">
      <img src="images/index_05.gif" width="540" height="1" alt="">
  </div>
    <div id="index-06">
      <img src="images/index_06.gif" width="120" height="60" alt="">
  </div>
    <div id="index-07">
      <img src="images/index_07.gif" width="60" height="1" alt="">
  </div>
    <div id="index-08">
      <img src="images/index_08.gif" width="360" height="1" alt="">
  </div>
    <div id="index-09">
      <img src="images/index_09.gif" width="1" height="1" alt="">
  </div>
    <div id="index-10">
      <img src="images/index_10.gif" width="179" height="1" alt="">
  </div>
    <div id="index-11">
      <img src="images/index_11.gif" width="60" height="978" alt="">
  </div>
    <div id="index-12">
      <img src="images/index_12.gif" width="57" height="119" alt="">
  </div>
    <div id="index-13"> <a href="index.html"><img src="images/index_13.gif" width="96" height="60" alt="" border="0"></a>
  </div>
    <div id="index-14">
      <img src="images/index_14.gif" width="38" height="119" alt="">
  </div>
    <div id="index-15">
      <img src="images/index_15.gif" width="181" height="60" alt="">
  </div>
    <div id="index-16">
      <img src="images/index_16.gif" width="36" height="212" alt="">
  </div>
    <div id="index-17">
      <img src="images/index_17.gif" width="97" height="60" alt="">
  </div>
    <div id="index-18">
      <img src="images/index_18.gif" width="35" height="212" alt="">
  </div>
    <div id="index-19">
      <img src="images/index_19.gif" width="120" height="154" alt="">
  </div>
    <div id="index-20">
      <img src="images/index_20.gif" width="96" height="59" alt="">
  </div>
    <div id="index-21">
      <img src="images/index_21.gif" width="181" height="59" alt="">
  </div>
    <div id="index-22">
      <img src="images/index_22.gif" width="97" height="152" alt="">
  </div>
    <div id="index-23">
      <img src="images/index_23.gif" width="36" height="858" alt="">
  </div>
    <div id="index-24">
      <img src="images/index_24.gif" width="336" height="79" alt="">
  </div>
    <div id="index-25">
      <img src="images/index_25.gif" width="336" height="14" alt="">
  </div>
    <div id="index-26">
      <img src="images/index_26.gif" width="21" height="765" alt="">
  </div>
    <div id="index-27">
      <div id="layout_text">
      				<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse   ligula nulla, adipiscing eget sollicitudin vel, pellentesque eu lacus.   Donec velit purus, faucibus eu scelerisque vulputate, pulvinar eu lorem.   Praesent nisi leo, euismod nec pretium luctus, vehicula ut nulla. Proin   ac erat ac diam pulvinar venenatis at tempus ante. Vivamus nec lacus   non sapien fringilla porttitor eu nec lectus. Morbi ut velit odio. Fusce   placerat, ligula interdum interdum mollis, magna nulla sollicitudin   erat, vitae sodales quam justo ac lacus. In sed ante lectus, non   ultrices nisi. Maecenas ac justo sit amet odio sagittis facilisis ut id   turpis. Morbi et sem ipsum. Cras dapibus varius condimentum. Suspendisse   sed quam mi, at ullamcorper mauris. Sed id aliquam lorem. In tellus   augue, molestie id commodo non, aliquet a lorem. Donec at convallis est.   Mauris sed nibh nec neque feugiat gravida eu eu odio. Proin laoreet   feugiat odio sed ullamcorper. </p>
        <p> Vivamus risus lorem, fermentum sed vestibulum ac, vehicula non tellus.   Quisque at dui at justo tristique adipiscing elementum non risus.   Phasellus ligula est, rutrum a porttitor sed, convallis nec nunc.   Maecenas non varius elit. Quisque eu eros magna, eu commodo nunc. Ut vel   mattis diam. Nulla mollis lacinia auctor. Vestibulum at lacus et diam   lacinia tempor. Sed massa purus, molestie vitae congue id, placerat quis   eros. In justo erat, molestie et rhoncus tincidunt, viverra ultricies   leo. Curabitur vitae placerat arcu. Aenean in diam iaculis magna iaculis   hendrerit. Fusce elementum nunc ligula. Ut congue, dolor vitae congue   luctus, justo quam facilisis neque, vitae vehicula dui lorem vitae   neque. Aenean sit amet purus erat, id suscipit diam. Sed vitae   pellentesque risus. Sed pretium luctus justo, in iaculis enim interdum   id. Maecenas laoreet fermentum turpis, nec sagittis nunc tincidunt vel.   Donec dignissim nibh vitae mi luctus posuere. Quisque leo diam,   consequat ut scelerisque in, gravida id sem.
 
        </p>
        <p>&nbsp;</p>
      </div>
    </div>
    <div id="index-28">
      <img src="images/index_28.gif" width="603" height="123" alt="">
    </div>
    <div id="index-29">
      <img src="images/index_29.gif" width="40" height="60" alt="">
  </div>
    <div id="index-30">
      <img src="images/index_30.gif" width="531" height="34" alt="">
  </div>
    <div id="index-31">
      <img src="images/index_31.gif" width="32" height="60" alt="">
  </div>
    <div id="index-32">
      <img src="images/index_32.gif" width="531" height="26" alt="">
  </div>
</div>
  <!-- End Save for Web Slices -->
</div>
</body>
</html>

Thanks allot!

Tags:

CSS Layouts

Wed, 2010-06-16 22:05

Verschwindende

Offline

Last seen: 1 year 15 weeks ago

Guru

Timezone: GMT-5

Joined: 2009-10-09

Posts: 2037

Points: 2256

First explain why you are

First explain why you are using absolute positioning. Then we'll work from there.

yet again.

Thu, 2010-06-17 03:48

krishnaid

Offline

Last seen: 2 years 44 weeks ago

newbie

Chennai

Timezone: GMT+5.5

Joined: 2010-06-17

Posts: 4

Points: 4

to know more about absolute position in css

Absolute Positioning
If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you’ll need to add into the image is

img {position: absolute; top: 46px; right: 80px; }

You just add in which method of positioning you’re using at the start, and then push the image out from the sides it’s going to be closest to. You can add the CSS directly into the tag using the style attribute (as shown in the introduction to stylesheets), or you can use classes and ids and put them into your stylesheet. It works the same way. The recommended method is to add classes for layout elements that will appear on every page, but put the code inline for once-off things.

The image would appear like so. As you can see, it is possible to have things overlapping with absolute positioning.

Positioning Layers

To create what we call layers with the div tag, use code like this:

layer stuff

First you specify the position of the layer, then its dimensions (which is optional, the layer will resize itself). If you want to give colour to the layer’s background, add the background-color: red; attribute in with the rest of your CSS code. As usual, you can use websafe colours, or named colours.

Anything that could go on a normal page can be positioned with divs. They load far faster than, say, a table layout. Tables do not display on-screen until they have been downloaded in their entirety. With layers, all the information a browser needs is contained in the style attributes you’ve added. Therefore, it will display as soon as any part of it is downloaded.

To get layers overlapping each other you need to use the z-index command. Add z-index: 1 in with the positioning code and this element will appear above everything without this command. If you want something else to go over this layer too, add z-index: 2 and so on. The higher the index, the closer the div will appear to the front of the page.

Put the layer that holds your page’s content at the top of your code. This is what readers want to see immediately. Your navigation and other presentational components can then load around this, allowing your reader to begin reading as soon as possible and making your navigation available when it is most likely to be used: after the page has been read.

To see some examples of designs laid out with both float and absolute positioning, have a look-see at my redesigns section.

So my friend please read the above content carefully.. mostly the absolute position not fixed in correct and exact position. if u want to make it clear use this w3schools.com ..

hope u got the answers... it will more help for you... thanks buddy...

Thu, 2010-06-17 06:49

Deuce

Offline

Last seen: 3 weeks 5 days ago

Guru

Las Vegas, NV

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4422

Points: 1841

Hi krishnaid, thanks for the

Hi krishnaid, thanks for the dictionary definition of "position: absolute" that absolutely no one requested. What was the point of your post again?

Giell: Why are you using absolute positioning for everything on your site?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Thu, 2010-06-17 07:49

jon19870

Offline

Last seen: 1 year 37 weeks ago

Enthusiast

Lancashire, England, UK

Timezone: GMT+1

Joined: 2007-01-05

Posts: 195

Points: 194

Some of the posts in these

Some of the posts in these forums really make me laugh

p.s - just thought I would add to the list of pointless posts

ASP.NET jQuery JavaScript CSS XHTML Tea

Thu, 2010-06-17 11:27

Giell

Offline

Last seen: 2 years 47 weeks ago

newbie

Belgium

Timezone: GMT+2

Joined: 2010-06-16

Posts: 6

Points: 7

So, I made a template in

So, I made a template in Photoshop, then I sliced it, saved is as web file,
and then opened it with Dreamweaver. When I opened it, all the images where automatically 'Absolute' positioned.

So the layout is fine, exept that I would like the whole layout to be centered. So it will appear in the middle of your browser.

Can anyone help me with this?

Thx..

Thu, 2010-06-17 16:29

Ed Seedhouse

Offline

Last seen: 3 weeks 6 days ago

Guru

Victoria British Columbia

Timezone: GMT-7

Joined: 2005-12-14

Posts: 3566

Points: 671

Giell wrote: So, I made a

Giell wrote:

So, I made a template in Photoshop, then I sliced it, saved is as web file, and then opened it with Dreamweaver. When I opened it, all the images where automatically 'Absolute' positioned.

So the layout is fine, exept that I would like the whole layout to be centered. So it will appear in the middle of your browser. Can anyone help me with this?

Well, the most helpful thing you could do is to throw away "Photoslop" and "Dreamliar" and start learning how to do web design the right way. You may think that advice is not helpful, but actually it is if you follow it. The way you do things now will lead to endless trouble and frustration, most of it unnecessary.

But, if you don't want to do that then I suggest perhaps you find a Photoslop forum, or a Dreamliar forum. We're neither.

Or you could have done a search on "centering" in the handy little search box on our site and found this article.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Thu, 2010-06-17 17:03

Giell

Offline

Last seen: 2 years 47 weeks ago

newbie

Belgium

Timezone: GMT+2

Joined: 2010-06-16

Posts: 6

Points: 7

First, your link is useless,

First, your link is useless, cause that's not for a whole lay out with Absolute positioned images.
And second, I love Photoshop, and I won't use another program to create a layout.

But anyway, thank you.

BTW: I'm sure that there is a solution for my problem.

Thu, 2010-06-17 17:35

Vade

Offline

Last seen: 2 years 24 weeks ago

Enthusiast

Ireland

Joined: 2007-08-13

Posts: 315

Points: 276

The link actually does give

The link actually does give you your solution, placing your content in a none absolutely positioned, centred div will do what you need.

As for using photoshop to create layouts it's just simply not a good idea, photoshop is a photo editing software not a web design tool, my microwave will cook a chicken but its probably gonna kill me if I eat it, just because a tool CAN perform the action you require doesn't make it the best one for the job.

A lot of people here will use photoshop to do a graphical layout for their site then move onto the HTML and then then CSS, there's not many other tools out there that will do this better (I don't want to start a fireworks vs photoshop debate) but that's where you need to draw the line. Look at the difficulty it's created for you in what's probably a very simple layout. The slightest change means altering the entire site, can you really say this is acceptable?

At the end of the day no one can force you to do things any other way then you desire but think about doing some tutorials on CSS layouts, once you do and get the hang of it you'll be joining us in our rants about using photoshop for layouts.

Thu, 2010-06-17 17:49

gary.turner

Online

Last seen: 3 min 10 sec ago

Moderator

Dallas

Timezone: GMT-5

Joined: 2004-06-25

Posts: 8761

Points: 2704

First, …

First, having an image as the child of body is invalid, so I'll assume (since you didn't post your code as required by the forum rules) there is a wrapper container that holds everything. That container needs to have a specified width, else it will take all available space. Make that container {margin: 0 auto;}. That will center the whole page. So you see, Ed's link did have the answer—you just didn't know how to apply it. Having done that, you must make that container the containing block so AP elements will reference their positioning from this container. You can do that by setting it to {position: relative;}.

Second, there are few methods that will produce worse markup and css than Photoshop and Dreamweaver. Photoshop is an image manipulation application, and for that purpose it is very good. Dreamweaver is a very expensive text editor and site management tool at best. Neither is worth a bucket of warm *bleep* when it comes to creating html and css.

Absolute positioning is good for positioning on a small scale, but is generally a poor method for page layout. Take a look at my photo gallery demo and tutorial for a different take on gallery layout.

//edit: Vade sneaked in there. Have more respect for your elders.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Thu, 2010-06-17 18:16

#10

Giell

Offline

Last seen: 2 years 47 weeks ago

newbie

Belgium

Timezone: GMT+2

Joined: 2010-06-16

Posts: 6

Points: 7

Yeah oke, but i've tried all

Yeah oke, but i've tried all those things, and it still wont center.
And i'm not that good at CSS or HTML so my only question is, if someone would just edit my code, so it's all centered.

Thx.

Thu, 2010-06-17 18:30

#11

Vade

Offline

Last seen: 2 years 24 weeks ago

Enthusiast

Ireland

Joined: 2007-08-13

Posts: 315

Points: 276

Show us where you've tried it

Thu, 2010-06-17 20:58

#12

Giell

Offline

Last seen: 2 years 47 weeks ago

newbie

Belgium

Timezone: GMT+2

Joined: 2010-06-16

Posts: 6

Points: 7

Why should i do that

Why should i do that again?
I've tried it, and fix the code back to how it was.

So could someone help me or not?

Thu, 2010-06-17 21:17

#13

Ed Seedhouse

Offline

Last seen: 3 weeks 6 days ago

Guru

Victoria British Columbia

Timezone: GMT-7

Joined: 2005-12-14

Posts: 3566

Points: 671

Well, you seem determined not

Well, you seem determined not to be helped.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Thu, 2010-06-17 21:17

#14

Vade

Offline

Last seen: 2 years 24 weeks ago

Enthusiast

Ireland

Joined: 2007-08-13

Posts: 315

Points: 276

Because if you put it in and

Because if you put it in and its still not working we can then see what the problem is, it just seems now you've gotten to the point where all you want is for someone else to do it for you.

We're trying to help but we need you to do your part

Thu, 2010-06-17 22:44

#15

Giell

Offline

Last seen: 2 years 47 weeks ago

newbie

Belgium

Timezone: GMT+2

Joined: 2010-06-16

Posts: 6

Points: 7

Nvm guys, a friend of mine

Nvm guys, a friend of mine already fixed it.

But thanks anyway!

Thu, 2010-06-17 23:11

#16

Vade

Offline

Last seen: 2 years 24 weeks ago

Enthusiast

Ireland

Joined: 2007-08-13

Posts: 315

Points: 276

You should show us how your

You should show us how your "friend" fixed it so we might learn, clearly he used a completely different method from the 100% correct one posted above because like you said that didn't work.

Fri, 2010-06-18 06:52

#17

jon19870

Offline

Last seen: 1 year 37 weeks ago

Enthusiast

Lancashire, England, UK

Timezone: GMT+1

Joined: 2007-01-05

Posts: 195

Points: 194

I wonder where the rising

[delete]

//mod edit: Unnecessarily rude comment deleted --gt

ASP.NET jQuery JavaScript CSS XHTML Tea

Center whole Absolute layout

First explain why you are

to know more about absolute position in css

Hi krishnaid, thanks for the

Some of the posts in these

So, I made a template in

Giell wrote: So, I made a

First, your link is useless,

The link actually does give

First, …

Yeah oke, but i've tried all

Show us where you've tried it

Why should i do that

Well, you seem determined not

Because if you put it in and

Nvm guys, a friend of mine

You should show us how your

I wonder where the rising

User login

Navigation