My second post, trying to centre a site created with absolute position layers.

 

I have tried everything, yes I have read the sticky, but I am tearing my hair out!

I have been on this for days now and seem to be getting nowhere.

Please look at some simple html for me and tell me where I am going wrong, and by the way I can cut and paste but I am no expert so please make it simple to understand.

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

body {text-align:center}

#table { position:relative; margin: 0 auto; width:1024px;}

-->

</style>

</head>

<body bgcolor="#FFFFFF">

<div id="wrapper" style="position:absolute; width:1024; height:1200; z-index:1;

 

left: 9; top: 12px">

<div id="Layer1" style="position:absolute; width:971; height:30px; z-index:1;

 

left: 27px; top: 125px; background-color: #333333; layer-background-color:

 

#333333; border: 1px none #000000"></div>

</div>

<div id="Layer2" style="position:absolute; left:36; top:173; width:156;

 

height:905; z-index:2; background-color: #FFCC99; layer-background-color: #FFCC99;

 

border: 1px none #000000"></div>

</body>

</html>

 

Thanks in anticipation!

Hi Ivor

 

You seem to have a couple of problems with you code here..

 

Firstly you close the wrapper before the "Layer2" div - I'm assuming you want it in there!

 

Secondly not quite sure what this if for?

 

#table { position:relative; margin: 0 auto; width:1024px;}

 

You don't have anything named table or even have a table so can be removed!

 

 

You really don't need to position anything with absolute positioning - I've attached your code with a few ammendments:

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

body {text-align:center}

-->

</style>

</head>

<body bgcolor="#FFFFFF">

<div id="wrapper" style="width:1024; height:1200; z-index:1; margin:0 auto;">

<div id="Layer1" style="width:971; height:30px; z-index:1; background-color: #333333; layer-background-color: #333333; border: 1px none #000000"></div>

<div id="Layer2" style="width:156; height:905; z-index:2; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px none #000000"></div>

</div>

</body>

</html>

 

Not sure if you really need z-indexing either and heights and widths are always better with the measurement on them so you can tell what it really is - for example px for pixels

 

Lastly it's always better to keep your styles in separate css file so you don't duplicate lines and lines of code

 

Did you just let a wysiwyg editor create this code for you?

Thanks for your reply ysuran.

 

I do need to use absolute positioning as that is the way I always design my own websites, visually with layers rather than just code, and the results are always good. It is just that on the next site I would like it centered in any browser resolution as I feel this looks more professional.

 

I know this is possible as it says so in the sticky, it is just that I cannot seem to make it work.

 

You were right about the 'table' I copied it wrong. Code below as it is at present, which does not centre.

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

body {text-align:center}

#wrapper { position:relative; margin: 0 auto; width:1024px;}

-->

</style>

</head>

<body bgcolor="#FFFFFF">

<div id="wrapper" style="position:absolute; width:1024; height:1200; z-index:1;

left: 9; top: 12px">

<div id="Layer1" style="position:absolute; width:971; height:30px; z-index:1;

left: 27px; top: 125px; background-color: #333333; layer-background-color:

#333333; border: 1px none #000000"></div>

</div>

<div id="Layer2" style="position:absolute; left:36; top:173; width:156;

height:905; z-index:2; background-color: #FFCC99; layer-background-color: #FFCC99;

border: 1px none #000000"></div>

</body>

</html>

 

Any help much appreciated.

If you insist on using absolute positioning you will always run into problems like this!

 

That being said this is really the same issue as you had last time

 

You need to make sure both the "layer" divs are inside your wrapper (layer2 is now back outside) then remove the position:absolute from the wrapper div

 

That will fix this problem

 

Good luck with the site

 

Cheers

 

Ysuran

Thanks again ysuran, I said I am hopless at code (although I need to start learning straight away) I do not understand how to implement what you are saying. If it was possible to adjust my code as you said and give me the example I would be eternally grateful!

 

Thanks

Further to my last reply, I am starting to get the hang of this now

But with one issue.

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

body {text-align:center}

#wrapper { position:relative; margin: 0 auto; width:1024px;}

-->

</style>

</head>

<body bgcolor="#FFFFFF">

<div id="wrapper">

<div id="Layer3" style="position:absolute; left:30px; top:164px; width:142px; height:22px; z-index:3"><img src="images/menu_bar.jpg" width="157" height="23"></div>

<div id="Layer1" style="position:absolute; width:971; height:30px; z-index:1;

left: 27px; top: 125px; background-color: #333333; layer-background-color:

#333333; border: 1px none #000000"></div>

<div id="Layer2" style="position:absolute; left:30px; top:164px; width:156;

height:905; z-index:2; background-color: #FFCC99; layer-background-color: #FFCC99;

border: 1px none #000000"></div>

</div>

</body>

</html>

 

This now works and I think I understand when you say the divs are "outside the wrapper" well possibly! Because every time I add a new layer it appears above <div id="wrapper"> (presumeably outside the wrapper) when I move the layer code below <div id="wrapper"> it is fine. My question, eveyrtime I add a new layer how can I ensure that the layer is coded inside the wrapper as to move them in the code each time is a pain?

 

Thanks

This now works and I think I understand when you say the divs are "outside the wrapper" well possibly! Because every time I add a new layer it appears above <div id="wrapper"> (presumeably outside the wrapper) when I move the layer code below <div id="wrapper"> it is fine. My question, eveyrtime I add a new layer how can I ensure that the layer is coded inside the wrapper as to move them in the code each time is a pain?

 

Thanks

 

 

Hi ivor, it works because all your absolute divs get positioned relative to the wrapper rather than the body when they are coded inside the wrapper. so a position of left: 40px will be 40px from the left of the wrapper, rather than the whole browser window.

 

not sure what you're using to code but i'd recommend doing it maually in a text editor like notepad or notepad++ rather than using anything that churns your code out upside down

Hi ivor, it works because all your absolute divs get positioned relative to the wrapper rather than the body when they are coded inside the wrapper. so a position of left: 40px will be 40px from the left of the wrapper, rather than the whole browser window.

 

not sure what you're using to code but i'd recommend doing it maually in a text editor like notepad or notepad++ rather than using anything that churns your code out upside down

 

Thanks mr p, I am using DW and purely working graphically, in fact I rarely look at code, probably because I know little about it, but still manage to produce visually attractive sites.

So I am working WYSIWYG and adding layers where appropriate. What I would like to know is if I can add to my original code, so that evertime I insert a layer DW inserts the layer within rather than outside the wrapper. Hope this makes sense.

 

Thanks

The problem with that is that a website is made of code so graphically your sites might look ok, but they won't function correctly as you haven't taken time to think about web standards or accessibility laws and regulations that sites...which comes from creating a site that is coded correctly.

 

I have never understood peoples wants to do web design and yet they don't actually want to do web design...it really makes no sense. If you just want to make pretty pictures go into graphic design, if you want to make websites learn how to make a websites.

 

Then again if this is for a personal site then it doesn't matter too much as the only person you are hurting is yourself from the way you are coding yoursite is yourself.

 

*dizi rant over, sorry its just I have spent the whole of today fixing a site for a client, when all I was supposed to be doing is adding text, but couldn't because of the state another "web designer" had left the poor site it. So I'm just annoyed in general with the whole, I am a web designer, I can't code, but I will charge people for a design and totally rip them off, state that this industry is in at the moment. Not at you....unless you are taking peoples money when you can't actually make a site.

Thanks mr p, I am using DW and purely working graphically, in fact I rarely look at code, probably because I know little about it, but still manage to produce visually attractive sites.

So I am working WYSIWYG and adding layers where appropriate. What I would like to know is if I can add to my original code, so that evertime I insert a layer DW inserts the layer within rather than outside the wrapper. Hope this makes sense.

 

Thanks

 

 

sorry fella, never used DW so i can't help on that one.

The problem with that is that a website is made of code so graphically your sites might look ok, but they won't function correctly as you haven't taken time to think about web standards or accessibility laws and regulations that sites...which comes from creating a site that is coded correctly.

 

I have never understood peoples wants to do web design and yet they don't actually want to do web design...it really makes no sense. If you just want to make pretty pictures go into graphic design, if you want to make websites learn how to make a websites.

 

Then again if this is for a personal site then it doesn't matter too much as the only person you are hurting is yourself from the way you are coding yoursite is yourself.

 

*dizi rant over, sorry its just I have spent the whole of today fixing a site for a client, when all I was supposed to be doing is adding text, but couldn't because of the state another "web designer" had left the poor site it. So I'm just annoyed in general with the whole, I am a web designer, I can't code, but I will charge people for a design and totally rip them off, state that this industry is in at the moment. Not at you....unless you are taking peoples money when you can't actually make a site.

 

Look on the bright side Dizi, there will always be plenty of work around fixing sites made by people with no idea

 

I do know what you are saying though, I think a lot of people are under the impression that DW and the like will build them a website without any coding knowledge.

I would like to thank everyone for the positive help I have had on this forum in the short time I have been a member.

 

It is a pity then, that I should get such a negative reply from "Dizi". A web design 'professional' maybe, but someone who is obviously very immature and would do themselves a favour to study grammar judging by the post. But I suppose every forum has one.

Hi Ivor,

 

Personaly think you would really benefit from learning some coding, HTML and CSS are fairly easy to get to grips with, the problem with coding fully graphically is you cant be sure you will get a site displaying correctly in all browsers, Safari, Opera, Firefox, internet explorer and a lot of versions there of all display content differently.

 

And also when you run into a problem if you know how to code its easy to go into the code view and fix the problem. visual editors do tend to throw up some cooky code which is often not very standards friendly or accessible.

 

If you are interested getting into coding these places will help a lot:

 

W3 schools excellent tutorials

HTML dog another good source of code tutorials

 

I would also recommend running your sites through the W3C validators to check alls well, the benefits are 2 fold, when errors are found its good practice to go put them right this in turn improves your coding skills, also Google and the like look more favourably on well coded sites so the knock on effect is better ranking for your site and lets face it everybody wants as many people as poss to see their site.

 

I hope you stay on the site Ivor, it has been a great source of help and knowledge for me.

Look on the bright side Dizi, there will always be plenty of work around fixing sites made by people with no idea

 

yeah your right, we do get a lot of calls asking us if we can fix what other web designers have messed up. So it brings in business, I just think it is a shame that the client has to pay twice for a site and also that it gives web design as a whole a bad name. Then again any one who does this, either thinks they know what they are doing, or knows that they are ripping people off, so I guess I can't change much.

 

 

It is a pity then, that I should get such a negative reply from "Dizi". A web design 'professional' maybe, but someone who is obviously very immature and would do themselves a favour to study grammar judging by the post. But I suppose every forum has one.

 

I never claimed to be a professional, actually I think that word in relation to web designers isn't really true, as web design moves so fast you have to always be a student to web design. As for immature well maybe, but you shouldn't judge someone on their spelling and grammar, there are a lot of people on this forum from all around the world and for some English isn't a first language, and for others its just not a strong point. So to judge people on how well they type in English is quite narrow minded and also very immature as well, we can all be perfect at grammar and spelling as you must be.

 

 

What I said was probably a little too harsh and I shouldn't take my annoyance of people who think web design is as easy as using Dreamweaver in design mode out on you. So I am sorry I lost my temper, we can't all be as cool, collected and grammatically correct as you are all the time.

 

Just please listen to people who are telling you that WYSIWYG editors can only get you so far, and that there is so much more to web design, it is not easy and it isn't just about how a site looks on the outside but also how it functions on the inside for those that don't use browsers the same way you do. Also learning how to code in the long run actually does save you more time once you know what you are doing as it means you are able to fix bugs that occur, such as making sure the site look right in all major browsers (as not every browser will show your site the same) and also do things that in WYSIWYG editors either don't do or is hard to do...plus when it comes to editing it is a huge time saver. But I will leave the lecture there as it was all said to your both here and also in the other thread that you made about centering a page, and if you are going to learn from past problems then you will, if not I guess you will be back again soon asking this question yet again, and getting the same answer for a third time.

Thank you T break and Dizi for your replies.

 

As I said, I have little or no knowledge of coding, however, you have made me aware of the benefits of learning this. I must admit, since joining this forum just over a week ago and asking my questions, phrases that meant nothing to me like 'divs', 'css', 'wrappers' have led me into a new world. I have even got notepad out and started editing the code as suggested on replies to my questions!

 

I appreciate the links you have provided, I will certainly check these out, I have a lot to learn. But that is why I joined this forum in the first place, to gain knowledge from helpful people.