rookie needs positioning help

[danandirma]

I am having to imbed all my text into my .psd file, because I can't get my layers to position correctly. Why?? The page is centered in the browser. check it out here http://www.gnbarchitects.com/ I have tried all I know to fix it, and I just can't get it. I need to have text in the center area. The text moves when I check it on different computers. screen sizes... So, how do I get the text to say inside the center text area??

[danandirma]

please someone give me some ideas!!!

[Veronica]

Your page looks ok to me in differnet browsers, resolutions, etc that I tried. The text seems to stay in the white area. What specific browsers and resolutions are causing problems?

[alexjewell]

The problem is you're absolutely positioning the text without absolutely positioning the boxes around it.

Don't absolutely position the text and just put it INSIDE div's...bam, no more resolution/browser issues. :)

[And get rid of TABLES...]

[danandirma]

The problem is you're absolutely positioning the text without absolutely positioning the boxes around it.

Don't absolutely position the text and just put it INSIDE div's...bam, no more resolution/browser issues. :)

[And get rid of TABLES...]
what do I set the positioning to?? relative or statics??

[danandirma]

this is my code

<div id="Layer1" style="position:absolute; left:350px; top:170px; width:540px; height:461px; z-index:1">yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada y</div>

[Veronica]

Position:static is the default, so using that is like using no positioning at all. Try this. Go to the ViewSource mode, and replace this:



<IMG SRC="http://www.gnbarchitects.com/images/gnb1_04.jpg" WIDTH=747 HEIGHT=384 ALT="">


With this:



<div id="Layer1" style="position:relative; left:20px; top:10px; width:540px; height:461px; z-index:1">yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada y</div>


Using position:relative means the position will be indented relative to its container. So 10px should give you a nice margin, but you can adjust that as you want

[inkosi]

Relative and absolute position were poorly named, and so they can cause a lot of confusion.

Both position:absolute and position:relative allow you to take an element, visually, and make it appear some where else relative to another element(37 pixels from the top of the containing element and 37 pixels from the left side of the containing element for example).

The real difference between the two is that position:relative leaves behind the original 'structure', or 'space' that was taken up by whatever you're moving around. Like leaving it's body behind and just moving the visual around.

Position absolute is different in that it will cause an element to behave as if it were hovering above everything else. The structure of it's original placing is not maintained. Also position absolute needs to be in a container that's set to position:relative, or position:absolute in order to use that container as a reference to determine the positioning, otherwise it will position relative to the html element I think.

[danandirma]

the text is now in the right place, but the image it replaced still needs to be there.?? can the text be placed on top of the image?



Position:static is the default, so using that is like using no positioning at all. Try this. Go to the ViewSource mode, and replace this:



<IMG SRC="http://www.gnbarchitects.com/images/gnb1_04.jpg" WIDTH=747 HEIGHT=384 ALT="">


With this:



<div id="Layer1" style="position:relative; left:20px; top:10px; width:540px; height:461px; z-index:1">yada yada yada yada yada yada yada yada yada yada yada yada y</div>


Using position:relative means the position will be indented relative to its container. So 10px should give you a nice margin, but you can adjust that as you want

[Veronica]

Yes, you can add the image as a background to the div:

<div id="Layer1" style="background-image: url(http://www.gnbarchitects.com/images/gnb1_05.jpg); position:relative; left:20px; top:10px; width:540px; height:461px; z-index:1">yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada y</div>
If you need to have the image repeat (in case it's not large enough for the space) you use background-repeat, with repeat-x to repeat it horizontally and repeat-y to repeat it vertically. So to repeat it vertically, it would be:

<div id="Layer1" style="background-image: url(http://www.gnbarchitects.com/images/gnb1_05.jpg); background-repeat:repeat-y;position:relative; left:20px; top:10px; width:540px; height:461px; z-index:1">

[danandirma]

I did that and this is what happened. http://www.gnbarchitects.com/1.html I am sorry, but I just don't know what to do. I am afraid I might have to design the whole site. I oringinaly designed this site in adobe imageready. I am not sure if imageready can build with CSS. ??? What do you recommend??




Yes, you can add the image as a background to the div:

<div id="Layer1" style="background-image: url(http://www.gnbarchitects.com/images/gnb1_05.jpg); position:relative; left:20px; top:10px; width:540px; height:461px; z-index:1">yada yada yada yada yada yada yada yada yada yada y</div>
If you need to have the image repeat (in case it's not large enough for the space) you use background-repeat, with repeat-x to repeat it horizontally and repeat-y to repeat it vertically. So to repeat it vertically, it would be:

<div id="Layer1" style="background-image: url(http://www.gnbarchitects.com/images/gnb1_05.jpg); background-repeat:repeat-y;position:relative; left:20px; top:10px; width:540px; height:461px; z-index:1">