|
| |
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
 |
Positioning a layer - 7/8/2005 18:53:29
I have a page that uses a regular table for layout (ya, I know...) that has 3 columns and is centered on the screen:
1. LEFT - 450px - for text content
2. MIDDLE - 10px - just a spacer column
3. RIGHT - 300px - for shortcuts and ads (Adsense and Amazon)
At the moment, I have ads spaced down the right-hand column more or less randomly. (Don't ask; the coding would probably make you cringe. LOL) What I want to do is to position a specific ad directly to the right of a specific paragraph, so that it will always appear next to that paragraph. Sort of absolute positioning, but relative to a specific place within the content.
I'm currently trying to play with layers to do this. I've managed to set up a layer, anchored at the start of the paragraph, using Absolute positioning to hover over the right-hand column. Then I dropped an adbox into it. So far so good.
But it keeps shifting around. At first, in Design mode, it looked fine (where it was supposed to be), but when I looked in Preview and in IE6, it had shifted to the left and partly overlapped the text. And sometimes it shifts up a bit too. Then when I went back into Design mode at one point, it had shifted its position there too, but not always. It's very weird and definitely inconsistent. What you see is not always what you get.
Here's the code that FP 2003 generated"
<div style="position: absolute; width: 300px; height: 301px; z-index: 1; left: 546px; top: 6233px" id="layer1">
It seems that Absolute positioning is what I need, but what I'm looking for is for it to always be relative to the start of a specific paragraph, if that makes sense. And Absolute seems to position it relative to the upper-left corner of the page, so it's bound to be different in different browsers and at different resolutions.
Can anyone help me figure out how to make this work? I couldn't find anything helpful to this specific problem in a search of the forums here. Many thanks in advance!
Starhugger
|
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Positioning a layer - 7/8/2005 21:25:19
Hi, you need to post a link or more code,
Also, just a word of advice, a layer most likly is a div, the correct term with css is a div.
So place a link or some realtive code if you don't have a link yet to place here to view.
btw, tables aren't my strong point, so someone more adept in tables will have to help you most likely with this one.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Positioning a layer - 7/8/2005 22:01:15
quote:
And Absolute seems to position it relative to the upper-left corner of the page, so it's bound to be different in different browsers and at different resolutions. that is what absolute does - perhaps you should further divide your table and place the paragraph and the graphic in adjacent cells
_____________________________
Dan
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Positioning a layer - 7/8/2005 22:29:17
Okay, I've put together a sample page here:
http://www.evolvingdoor.ca/test.htm
When I look at the box at the right, it should be with the top in line with the top of the second paragraph text, but it appears aligned with the top of the 4th line down in that paragraph.
Thanks for taking a look!
Starhugger
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Positioning a layer - 7/8/2005 22:34:11
quote:
ORIGINAL: dpf
that is what absolute does - perhaps you should further divide your table and place the paragraph and the graphic in adjacent cells
Hi Dan,
I have tried sometimes to do that, but it often creates as many problems as it solves. And I was hoping for a solution that was based on CSS. Is there no way to tell it to go 450 clicks to the right of wherever it is, and then display its contents from there? That's what I was hoping for. I know you can do it if you keep the graphic within the same text area and then just have the text flow around it. Is there no way to have the graphic extended beyond the text, I wonder?
Starhugger
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Positioning a layer - 7/9/2005 6:49:39
I think the top photo looks fine where it is?
If you wish to move it, just go, left 450px; if you want it down from the top, just go top 40px; etc..
same with your title, left 200px top 100px, You can relative postion all, Relative positioning ofsetts from where it is and leaves a space from where it was, it doesn't remove it from the flow. Absolute positioning will remove it from the flow, like its not there.
What you can do is put a container around everything, a ( You can relative position the wrapper and then absolute position what is in the wrapper, this is usually the recomended way to go)wrapper div is what some call it and others a container div. Position that say top 50 px, margin left: auto, margin right auto, this will center it if you wish. or give it the pixels.
Check out my homework thread, I just posted a few new pages on there. In fact, http://workingpages.debsplace.org.
The first about 5 or so links are working out of a book. Look at the code that is embeded within the header of the pages and look at the lyouts. Play with the code, one of them will work for you here. Its better to try to work out the code so that you learn it instead of someone doing it for you. This way you will understand it better. Then if you are still having problems, come back, someone will be more then happy to help you through it.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
caz
Posts: 3510
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Positioning a layer - 7/9/2005 9:59:17
If you want a quick fix then get the Firefox browser with the Web Developer extension and run your page through HTML Tidy to tidy the buggy code. If you are using design view in FP there will be a lot of proprietry code in there and it needs taming to DTD html 1.0 Transitional which is your doctype.
This is the resuting code: you'll notice that I have adjusted your positioning like this:
<div style="position: absolute; width: 299px; height: 301px; z-index: 1;
left: 546px; top: 350px" id="layer1">
to get it to display where you want it to. You can copy and paste the code below to get the cleaned and adjusted version.
Because of the errors in your existing code, such as unclosed tags any CSS I added just didn't work out (add the fact that I have almost forgotten how to do a tables layout  and I was going cross eyed.)
You really have to get into the habit of looking at the code as well as design view, in fact stay in code view and test in preview in browser. If you do that FP will do as you want. (You could also begin c1sissy's course above and learn CSS, you won't regret it).
HTH
Carol
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>TEST PAGE</title>
<link rel="stylesheet" type="text/css" href="edstyles.css" />
<style>
<!--
h3 { margin-top: 0; margin-bottom: 4 }
-->
</style>
<style fprolloverstyle="">A:hover {color: #FF0000; text-decoration: underline}
</style>
<meta name="Microsoft Theme" content="edwhite 1011, default">
<meta name="Microsoft Border" content="tb, default">
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" style="border-collapse: collapse" width="760">
<tbody>
<tr>
<td style="text-align: left" width="450">
<p style="margin-bottom: 0"></p>
<h1 style="margin-bottom: 20px; margin-top:20px">Title<br />Title</h1>
<p class="ldtransitname"><a name="july15"></a>Paragraph Heading 1</p>
<p class="ldtransitdescr">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Ut feugiat libero vitae sapien. Donec ultrices nunc quis
turpis. Aenean sed felis a nisl eleifend ornare. Sed iaculis rhoncus libero.
Aenean sollicitudin nibh ut erat. Quisque imperdiet urna non tellus. Nulla
auctor neque a lacus. Quisque rutrum leo a ipsum. Aliquam in nulla nec nulla
cursus malesuada. Morbi mollis accumsan risus. In nonummy. Phasellus ornare,
metus in rutrum luctus, diam quam egestas urna, ac sagittis eros velit at
ligula. Vivamus ullamcorper orci id diam. Vivamus pharetra tellus quis
sapien. Nulla facilisi. Suspendisse sollicitudin tellus non mi. Nunc
bibendum ipsum ac justo. Mauris ac enim sit amet eros nonummy scelerisque.
Fusce eu enim. Nunc risus leo, blandit ac, fringilla a, auctor sed, ante.
<a href="#top">
<img border="0" src="topdkgreen.gif"
width="24" height="14" alt="Top of Page" /></a></p>
<p class="ldtransitname">Paragraph Heading 2</p>
<div style="position: absolute; width: 299px; height: 301px; z-index: 1;
left: 546px; top: 350px" id="layer1">
<div align="center">
<table style="border-collapse: collapse" width="220" cellpadding="4" class="edtablebooks">
<tr>
<td colspan="2">
<p class="ed08bookboxtext">Title<br />Title</p>
<p class="ed08booktitle">Title </p>
<p class="ed08bookauthor">test</p>
</td>
</tr>
<tr>
<td style="text-align: center" colspan="2">
<div align="center">
<table border="1" style="border-collapse: collapse" width="89"
cellpadding="0" bgcolor="#C0C0C0" height="140">
<tr>
<td> </td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="50%">
Click to jump <br />to this book on <br />Amazon.com
</td>
<td style="text-align: center" class="ed08bookbox" width="50%">
In Canada jump <br />to this book on <br />Amazon.ca
</td>
</tr>
</table>
</div>
</div>
<p class="ldtransitdescr"><font color="#0000FF">The box should be in line
with the top of this line.</font><font color="#FF0000"> </font>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Ut feugiat libero vitae sapien. Donec ultrices nunc quis
turpis. Aenean sed felis a nisl eleifend ornare. Sed iaculis rhoncus libero.
Aenean sollicitudin nibh ut erat. Quisque imperdiet urna non tellus. Nulla
auctor neque a lacus. Quisque rutrum leo a ipsum. Aliquam in nulla nec nulla
cursus malesuada. Morbi mollis accumsan risus. In nonummy. Phasellus ornare,
metus in rutrum luctus, diam quam egestas urna, ac sagittis eros velit at
ligula. Vivamus ullamcorper orci id diam. Vivamus pharetra tellus quis
sapien. Nulla facilisi. Suspendisse sollicitudin tellus non mi. Nunc
bibendum ipsum ac justo. Mauris ac enim sit amet eros nonummy scelerisque.
Fusce eu enim. Nunc risus leo, blandit ac, fringilla a, auctor sed, ante. <a href="#top">
<img border="0" src="topdkgreen.gif" width="24" height="14"
alt="Top of Page" /></a></p>
<p class="ldtransitname">Paragraph Heading 3</p>
<p class="ldtransitdescr">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Ut feugiat libero vitae sapien. Donec ultrices nunc quis
turpis. Aenean sed felis a nisl eleifend ornare. Sed iaculis rhoncus libero.
Aenean sollicitudin nibh ut erat. Quisque imperdiet urna non tellus. Nulla
auctor neque a lacus. Quisque rutrum leo a ipsum. Aliquam in nulla nec nulla
cursus malesuada. Morbi mollis accumsan risus. In nonummy. Phasellus ornare,
metus in rutrum luctus, diam quam egestas urna, ac sagittis eros velit at
ligula. Vivamus ullamcorper orci id diam. Vivamus pharetra tellus quis
sapien. Nulla facilisi. Suspendisse sollicitudin tellus non mi. Nunc
bibendum ipsum ac justo. Mauris ac enim sit amet eros nonummy scelerisque.
Fusce eu enim. Nunc risus leo, blandit ac, fringilla a, auctor sed, ante.
<a href="#top">
<img border="0" src="topdkgreen.gif"
width="24" height="14" alt="Top of Page" /></a></p>
<p> </p>
</td>
<td width="10" align="center" valign="top">
</td>
<td width="300" align="center" valign="top" height="100%">
<p></p>
</td>
</tr>
</tbody>
</table>
<p></p>
<script type="text/javascript"><!--
google_ad_client = "pub-5341371460269190";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "999900";
google_color_bg = "FFFFDB";
google_color_link = "CC0000";
google_color_url = "0000CC";
google_color_text = "006600";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
</html>
< Message edited by caz -- 7/9/2005 10:34:18 >
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Positioning a layer - 7/9/2005 10:26:31
quote:
Because of the errors in your existing code, such as unclosed tags
OOOPs! One thing I totally forgot to mention is that you need to validate your xhtml/html code, as well as your css. Very Very important that you do this even before you ask for help.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Positioning a layer - 7/9/2005 10:47:31
I should have known better, and did not think about it until what you posted!
I try to tell everyone to validate first, then come back if you still need help, though with this one, help is needed for positioning. But you also have to read up on it. Its not something that you can just say I want this here and have it work, would be great if it did! lol
Oh, and also don't forget to NOT use IE for testing, go to IE last. use firefox etc.. then go to IE.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Starhugger
Posts: 512
Joined: 4/12/2005
Status: offline
|
RE: Positioning a layer - 7/9/2005 14:02:37
Thanks c1sissy, I'll have a look at your site!
Starhugger
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Positioning a layer - 7/9/2005 18:51:23
quote:
ORIGINAL: Starhugger
Thanks c1sissy, I'll have a look at your site!
Starhugger
Also, if you look under my sig, there is the positioniseverything site, there are a good amount of things within that which are good.
A list apart, I suggest you go there and look up articles, there is one called making the absolute relative?, I think. Its an excellent article.
also, If you are in the position to purchase a book, let me know and I will send you a list of books that are great, and if you areintersted in online courses, let me know. I have one place that would be great for you to use, and its not expensive. Just send me an email or a pm if you need anything. I'll try to get to it as quick as possible.
I'm all for helping, one thing though, you need to be able to wish tohelp yourself. anyone can give you code, but if you wish to do things with css, you need to learn as well with the help that you recieve from here.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Positioning a layer - 7/10/2005 5:28:57
quote:
I actually just ordered two CSS books from Sitepoint
I hope you are ok with them. I oreded one from amazon.com, and well, lets just say their books lack a bit. If you want a really great one, get this one,
Stylin' CSS a designers guide by Charles Wyke-Smith.
Integrated Html and css, by virginia Debolt,
They are about the best out of my library of css books. I have another one, but that isn't hand right now to give the name to you.
btw, the course is only a 6 week one, and doesn't take much time out of the day. About what it would take you to read a book and do the exercises.LVS online learning has some upcoming in September. Vikki is an excellent instructor.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
