Positioning a layer (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Starhugger -> 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



Starhugger -> RE: Positioning a layer (7/8/2005 19:56:20)

Okay, thanks for moving this, Mod. I wasn't quite sure where to put it. [:)]

Starhugger



c1sissy -> 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.



dpf -> 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



c1sissy -> RE: Positioning a layer (7/8/2005 22:26:24)

if you search alist apart, they have several really great css articles that you can read.



Starhugger -> 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 -> 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 -> 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.




caz -> 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>



c1sissy -> 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.



caz -> RE: Positioning a layer (7/9/2005 10:39:07)

You're so right Deb; I spent ages trying to do CSS stuff without validating the page.[:@]



c1sissy -> 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.



Starhugger -> RE: Positioning a layer (7/9/2005 14:02:37)

Thanks c1sissy, I'll have a look at your site!


Starhugger



c1sissy -> 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.



Starhugger -> RE: Positioning a layer (7/10/2005 2:01:38)

Thanks again. I actually just ordered two CSS books from Sitepoint that I think will be good to learn this stuff. I don't think I have time for a course right now. Too much else on my plate. This is something that's been on my wishlist to learn how to do, but I can't dedicate a lot of time to it right now. I'll check out that article though. [:)]

Starhugger



c1sissy -> 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.



Starhugger -> RE: Positioning a layer (7/10/2005 11:07:30)

Thanks for the book suggestions, Deb. I'll keep them in mind. I had a chance to look through one of the CSS books from Sitepoint, and I know people who have the other one (how to use CSS instead of tables) and friends thought both were worth getting. We'll see if that holds true once I start using them! [;)] I'll keep your suggestions in mind, in case they don't.

Btw, I did a quickie test of your idea of surrounding the paragraph text in a relative box that extended across all columns, and then put an absolute ad box inside that, and it seemed to work, with a bit of tinkering. Seems rather cumbersome, but at least it gets the job done. I'm not sure it isn't just as cumbersome as just splitting the table row at the paragraph to accomplish the same thing though. More tinkering is required, as well as more learning. [:)]

Starhugger



Starhugger -> RE: Positioning a layer (7/10/2005 11:18:30)

Caz, I wanted to get back to you too and say thanks for your reply. I know it's not always possible to generate entirely clean code with FP, since much of the theme code is out of reach, but I'll check out HTML Tidy.

And I don't just use Design mode, I use Split mode mostly, and yes, I do look very much at the code. I thought I had done all the self-closing tags that needed to be done, but I didn't realise img needed to be self-closing. Sigh... Blast FP for not including this and others in its XML! [:@]

Thanks for your help!

Edit: Wait! I did have the self-closing tag for img! So I'm not sure what errors in the code you're referring to.

Starhugger



caz -> RE: Positioning a layer (7/10/2005 15:32:17)

Your lucky that I haven't yet deleted all that stuff[;)]
This was what I got from the Web Developer extension - when I finally thought to check the html.

line 19 column 1 - Warning: <meta> element not empty or not closed
line 20 column 1 - Warning: <meta> element not empty or not closed
line 11 column 1 - Warning: <style> inserting "type" attribute
line 17 column 1 - Warning: <style> proprietary attribute "fprolloverstyle"
line 17 column 1 - Warning: <style> inserting "type" attribute
line 26 column 1 - Warning: <table> lacks "summary" attribute
line 56 column 4 - Warning: <table> lacks "summary" attribute
line 68 column 4 - Warning: <table> proprietary attribute "height"
line 68 column 4 - Warning: <table> lacks "summary" attribute
line 93 column 35 - Warning: trimming empty <font>
line 129 column 6 - Warning: trimming empty <p>
line 135 column 1 - Warning: trimming empty <p>
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Transitional//EN"
Info: Document content looks like HTML Proprietary
12 warnings, 0 errors were found!

The style sheet controlling that page is edstyles.css.

All you need to do is copy the code above and repace your existing page with that in code view. Then change the positioning as I indicated for a quick fix.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375