Precise Placement on a Page

[GiddyupGilbert]

I've used a graphic Web Design program, and I'm not unhappy with the way it's turned out. However, I'm adding Live Chat code to the page and I've not learned enough code to put the imbedded object where I want it.

If someone could share a sample code snippet I'd greatly appreciate it. I need precise X, Y and layer position. I want it up front, the top layer. I keep missing the mark and the copy winds up behind everything. Any suggestions will be appreciated.

Thanks, Giddyup

[AtomicPages]

Can you provide a link? It's hard to give feedback for something we cannot see.

[GiddyupGilbert]

www.eclecticarbor.com

And thank you, Giddyup

[drjohn]

Hiding your menu in a tiny little line at the absolute bottom of the page is a bad idea. It's so bad that you've had to add a note to tell people where it is - put it near the top, make it bigger, and change your a:hover and a:visited code! Going to gray text on a gray background is a BAD idea - make it stand out on hover, not disappear.

ALSO do not use a gif image for a photograph, use a jpg. Using a jpg will give a more accurate rendition of the objects, and all your images will be about 40% smaller (the one I played with went from 63.3kB down to 36.3kB) thus giving faster page loading. Go back to your original images to make the jpg, using the gif will lead to any quality loss in the gif being transferred to the jpg made from it.

gif images are designed for line drawings, cartoons, areas with large blocks of the same colour. jpg are specifically for photographs. Use these image types the wrong way round and you have problems - make a large red square and save as a gif and then a jpg, to see what happens to image quality and file size.

[GiddyupGilbert]

Boy howdy! I will make changes per your critique; never really thought about that a great deal, but will in the future; and I will make changes this weekend when I'm off. Thank you again.
Giddyup

[Cool&Awesome]

I've used a graphic Web Design program, and I'm not unhappy with the way it's turned out. However, I'm adding Live Chat code to the page and I've not learned enough code to put the imbedded object where I want it.

If someone could share a sample code snippet I'd greatly appreciate it. I need precise X, Y and layer position. I want it up front, the top layer. I keep missing the mark and the copy winds up behind everything. Any suggestions will be appreciated.

Thanks, Giddyup

Hi Gilbert,

To position an element the way you described, you can apply the following css to it:

position:absolute;
top:134px;
left:224px;
z-index:1000;

this example will position your element on coordinates X:134 Y:224 and keep it
fixed there no matter what, even if user scrolls the scren (it's dictated by position:absolute)

and high z-index assures it will stay in front of all other elements
(unless you have 1000 elements on page, or an element with z-index 1132
...see where this is going?)

you can also use position:relative instead - that will position an element relatively
to it's natural position

here's a super playground to learn about both positioning and z-index hands-on:

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

(boxes on the left side are draggable by mouse)

[GiddyupGilbert]

Hi Gilbert,

To position an element the way you described, you can apply the following css to it:

position:absolute;
top:134px;
left:224px;
z-index:1000;

this example will position your element on coordinates X:134 Y:224 and keep it
fixed there no matter what, even if user scrolls the scren (it's dictated by position:absolute)

and high z-index assures it will stay in front of all other elements
(unless you have 1000 elements on page, or an element with z-index 1132
...see where this is going?)

you can also use position:relative instead - that will position an element relatively
to it's natural position

here's a super playground to learn about both positioning and z-index hands-on:

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

(boxes on the left side are draggable by mouse)

I'm with you on this, but I'm not 100% understanding. My problem seems to be most of the precise placements I see are put into the Head area, then the graphic button, etc. is put in the body of the page. I can't figure how to relate what's in the Head with what's in the body. And what I need to put in here is copy that links to the Live Chat area. I'm playing with this but am moving the whole page over instead of just the button.
Giddyup

[teedoff]

Please be careful using an absolute position element. Sometimes this can have an adverse effect on your document flow. If you want something postitioned, divs and floats are a better way in most cases.

[Cool&Awesome]

I absolutely agree with teedoff on this one.

Can you be a bit more specific what exactly would you like to achieve?

About your question - i wouldn't put any elements in the head area, it's meant for other things. Put all your content in body area.

And if you need, you can divide your body area using divs, so it can have header, content, footer...

[GiddyupGilbert]

Please be careful using an absolute position element. Sometimes this can have an adverse effect on your document flow. If you want something postitioned, divs and floats are a better way in most cases.

I'm with you on Div, but not familiar with Float. I'm new at this and trying to learn as quickly as possible.
Thanks, BuddyB

[teedoff]

Visit w3schools and read up on divs and CSS floats.

[GiddyupGilbert]

I absolutely agree with teedoff on this one.

Can you be a bit more specific what exactly would you like to achieve?

About your question - i wouldn't put any elements in the head area, it's meant for other things. Put all your content in body area.

And if you need, you can divide your body area using divs, so it can have header, content, footer...

www.eclecticarbor.com is the site. at the top of the page there is the logo, then a space, then introductory copy.

I have copy that needs to be pasted in somewhere that is an ahref to a site where the graphic button and Live Chat is located. I want to paste the copy so that the button will show up between the logo and paragraph, on top of course.

Giddyup