Jump to content

Aligning relative divs with an absolute div


owosso
 Share

Recommended Posts

I'm not sure how to explain this: you'll have to check my site to see what I mean. Here goes...I have one div (#lines) that is positioned absolutely in the vertical alignment but not the horizontal. I did this because I want the lines to cover the width 100%. The rest of the divs are all included in the horizontal alignment and are positioned statically. I want them to flow according to the viewer's enlargement of the screen.If, however, the viewer does no adjustments to size, I'd like the menu (#nav) to sit just above the bottom orange line, which is the bottom border of #lines. Everything else (#contact, #copyright) should be below the line.I have these positioned correctly in Dreamweaver, but then in Safari, Firefox, and Netscape, they're way off. How can I correct this?Here's my site:http://www.adunate.com/index.new.htmlHere's my CSShttp://www.adunate.com/adunate.new.css

Link to comment
Share on other sites

I'm not sure how to explain this: you'll have to check my site to see what I mean. Here goes...I have one div (#lines) that is positioned absolutely in the vertical alignment but not the horizontal. I did this because I want the lines to cover the width 100%. The rest of the divs are all included in the horizontal alignment and are positioned statically. I want them to flow according to the viewer's enlargement of the screen.If, however, the viewer does no adjustments to size, I'd like the menu (#nav) to sit just above the bottom orange line, which is the bottom border of #lines. Everything else (#contact, #copyright) should be below the line.I have these positioned correctly in Dreamweaver, but then in Safari, Firefox, and Netscape, they're way off. How can I correct this?Here's my site:http://www.adunate.com/index.new.htmlHere's my CSShttp://www.adunate.com/adunate.new.css
I had to correct two element end tags to use your html:
<div id="vertical"><!--#lines is within vertical, but not horizontal, because they are 100% across screen --><div id="lines">  <div align="center">   <img src="images.new/blocks.gif" alt="letterblocks" />  </div></div>		   </div>	   <!-- **** ADDED MISSING DIV END TAG (position inferred from comment above)--><div id="horizontal">

and

  <div align="center">	<p>Writing. Graphic design.  Check us out and see what we can do for you! <a href="contact.html"><br />	  Contact Us</a>		</p>	<!--/p-->	<!-- **** REMOVED EXTRA P END TAG -->  </div>

To solve your positioning problem I am guessing you would be better off creating a separate footer div which includes everything you want at the bottom, such as the orange line and the links that go with it.

Link to comment
Share on other sites

You need to kill the re-direct on that page.just about the time I get to understand what I am looking at, the page changes.that sux.
Oh, don't I know it! How do I do that? I've tried changing my site management settings, putting the Testing Server to None. I also clicked Preview Using Temp File in Preferences/Preview in Browser. Still no luck. I need help in more ways than one!
Link to comment
Share on other sites

<div id="vertical"><!--#lines is within vertical, but not horizontal, because they are 100% across screen --><div id="lines">  <div align="center">   <img src="images.new/blocks.gif" alt="letterblocks" />  </div></div>Thanks for your help! A question on the missing vertical </div>. Because I ran the div from Body to Body, including everything in between, the closing </div> is at the end, just before </body>. Is this correct?
Link to comment
Share on other sites

To solve your positioning problem I am guessing you would be better off creating a separate footer div which includes everything you want at the bottom, such as the orange line and the links that go with it.
Good idea! That will also keep the bottom orange line flowing with the rest of the content should someone increase the size. I'm such a duh! I should have thought of that...Thanks!
Link to comment
Share on other sites

Thanks for your help! A question on the missing vertical </div>. Because I ran the div from Body to Body, including everything in between, the closing </div> is at the end, just before </body>. Is this correct?
I actually had to guess that myself, and I guessed it went in the place I showed, on the basis of your html comment:
<!--#lines is within vertical, but not horizontal, because they are 100% across screen -->
If that comment is accurate, then the end tag would have to appear where I put it, before the "horizontal" div. But ultimately you are the one who knows which other elements are included in that div (and which must therefore appear before its end tag).
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...