| Author |
absolute and relative positions
|
|
| posting 2007-07-29, 10:17 pm |
| have been trying for hours to do this and still failing :(
i want to position an image and a body of text on a page and have the
positions remain the same relative to each other regardless of how
wide the browseser window is. sounds easy but it isnt. imagine an 800
pixel wide table centered on the page. i can have a div within that
table left aligned that will keep my text close to the left side of
that table no matter how wide the browser is. and i can have an image
aligned to the _right_ of that table that will stay in its place
relative to its text and not overlap it. if the browser width is 1900
they just see a centered section with text on the left and image on
the right and if their window is only 640x480 they woud have a
scrollbar and still the text and image in the right place relative to
each other. so what i want to do is have a centered div of 800 and
position my elements relative to _that_ rather than relative to the
browser edges. is it possible?
tia
| |
|
|
"posting" <no@mail.thanks> wrote in message
news:uovoa3h7jomm1pbemi3djd8vfu6a5qj81d@4ax.com...
> have been trying for hours to do this and still failing :(
> i want to position an image and a body of text on a page and have the
> positions remain the same relative to each other regardless of how
> wide the browseser window is. sounds easy but it isnt. imagine an 800
Imagine a URL where we can see what you have so far.
--
Richard.
| |
| posting 2007-07-29, 10:18 pm |
| On Sun, 29 Jul 2007 12:59:49 GMT, "rf" <rf@invalid.com> wrote:
>
>"posting" <no@mail.thanks> wrote in message
>news:uovoa3h7jomm1pbemi3djd8vfu6a5qj81d@4ax.com...
>
>Imagine a URL where we can see what you have so far.
dont have one :o(
http://img2.freeimagehosting.net/im...?4ea7acda23.gif look here
and you see what i mean. that is a table and if it becomes resized
because the browser is smaller then the image and the text stay apart
and if the browser is larger then the whole thing just stays in the
middle. im not surprised people still build pages with tables for
layout when that is so easy but divs in css is not
| |
| Beauregard T. Shagnasty 2007-07-29, 10:18 pm |
| posting wrote:
> ... im not surprised people still build pages with tables for layout
> when that is so easy but divs in css is not
I'll need to differ with that opinion.
Perhaps you think as you do because you use some sort of pseudo-WYSIWYG
web development software that isn't smart enough to do it by itself.
From your image, you appear to want a two-column layout with the main
content on the left side.
http://benmeadowcroft.com/webdev/cs...ght-column.html
Look at the source. How is that less easy than tables?
--
-bts
-Motorcycles defy gravity; cars just suck
| |
| posting 2007-07-29, 10:18 pm |
| On Sun, 29 Jul 2007 13:53:00 GMT, "Beauregard T. Shagnasty"
<a.nony.mous@example.invalid> wrote:
>posting wrote:
>
>
>I'll need to differ with that opinion.
>
>Perhaps you think as you do because you use some sort of pseudo-WYSIWYG
>web development software that isn't smart enough to do it by itself.
>
>From your image, you appear to want a two-column layout with the main
>content on the left side.
>http://benmeadowcroft.com/webdev/cs...ght-column.html
>
>Look at the source. How is that less easy than tables?
but that doesnt do what i want. on a wide browser window the content
area is left aligned and always will be and it will resize to fit the
available space. im looking for something like whats in that template
but with the whole thing _including the right menu section_ wrapped in
an invisible centered div which has a fixed width
| |
| Beauregard T. Shagnasty 2007-07-29, 10:18 pm |
| posting wrote:
> "Beauregard T. Shagnasty" wrote:
>
> but that doesnt do what i want. on a wide browser window the content
> area is left aligned and always will be and it will resize to fit the
> available space. im looking for something like whats in that template
> but with the whole thing _including the right menu section_ wrapped
> in an invisible centered div which has a fixed width
So, copy Ben's template and modify it. What you describe would be so
simple as to enclose everything in the body inside a div with a fixed
width.
<body>
<div id="fixed">
(...all body content here)
</div>
</body>
CSS:
#fixed { width: 800px; margin: 0 auto; }
(though I disagree with fixed widths...)
--
-bts
-Motorcycles defy gravity; cars just suck
| |
| Jerry Stuckle 2007-07-29, 10:18 pm |
| Beauregard T. Shagnasty wrote:
> posting wrote:
>
>
> So, copy Ben's template and modify it. What you describe would be so
> simple as to enclose everything in the body inside a div with a fixed
> width.
>
> <body>
> <div id="fixed">
> (...all body content here)
> </div>
> </body>
>
> CSS:
> #fixed { width: 800px; margin: 0 auto; }
>
> (though I disagree with fixed widths...)
>
Yep, fixed widths are so passe. I want a site which adjusts to the size
window I pick - not what someone calling himself/herself a webmaster
thinks I should have.
--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================
| |
| posting 2007-07-29, 10:18 pm |
| On Sun, 29 Jul 2007 14:27:43 GMT, "Beauregard T. Shagnasty"
<a.nony.mous@example.invalid> wrote:
>posting wrote:
>
>
>So, copy Ben's template and modify it. What you describe would be so
>simple as to enclose everything in the body inside a div with a fixed
>width.
>
><body>
><div id="fixed">
>(...all body content here)
></div>
></body>
>
>CSS:
>#fixed { width: 800px; margin: 0 auto; }
>
>(though I disagree with fixed widths...)
if you would actually read the problem you should see straitaway that
wont work. bens template has got absolute positions for those two
columns. one from the left margin and one from the right. so if i put
a containder div around it will do nothing and the two content divs
will still place exactly where they are told via the absolutes. which
is why i asked at the begining for something that would give positions
relative to the container they were in rather than to the page itself.
so as i said tables is easier as i managed to get what i wanted in
seconds and so far both you and me have failed with css :)
| |
| Ben C 2007-07-29, 10:18 pm |
| On 2007-07-29, posting <no@mail.thanks> wrote:
> On Sun, 29 Jul 2007 14:27:43 GMT, "Beauregard T. Shagnasty"
><a.nony.mous@example.invalid> wrote:
>
[...][color=darkred]
>
> if you would actually read the problem you should see straitaway that
> wont work.
> bens template has got absolute positions for those two columns. one
> from the left margin and one from the right. so if i put a containder
> div around it will do nothing and the two content divs will still
> place exactly where they are told via the absolutes.
All you need to do is add to position: relative to the selector for
#fixed. That keeps it in the normal flow itself but makes it the
containing block for its absolutely positioned children.
> which is why i asked at the begining for something that would give
> positions relative to the container they were in rather than to the
> page itself.
Absolute positions are relative to the containing block, which is the
nearest _positioned_ (i.e. relative, absolute, or fixed) ancestor. If
there aren't any positioned ancestors then the containing block is the
viewport.
Absolutely positioned elements _are_ positioned relative to their
containers, but an absolutely positioned element's _parent_ is not
necessarily its container. If you want to make its parent its container,
without affecting it any other way, make its parent position: relative.
> so as i said tables is easier as i managed to get what i wanted in
> seconds and so far both you and me have failed with css :)
You give up far too easily.
| |
| Beauregard T. Shagnasty 2007-07-29, 10:18 pm |
| posting wrote:
> "Beauregard T. Shagnasty" wrote:
>
> if you would actually read the problem you should see straitaway that
> wont work. bens template has got absolute positions for those two
> columns. one from the left margin and one from the right. so if i put
> a containder div around it will do nothing and the two content divs
> will still place exactly where they are told via the absolutes.
If you would not be so quick to condemn a technique you don't know much
about without a little experimentation...
Yes, you are right Ben's template would require a bit of further work,
but don't just stop there.
> which is why i asked at the begining for something that would give
> positions relative to the container they were in rather than to the
> page itself.
Ok, so what other experiments have you tried?
> so as i said tables is easier as i managed to get what i wanted in
> seconds and so far both you and me have failed with css :)
Here is a layout I threw together with about 10 minutes work, using
another template I found elsewhere:
http://k75s.home.att.net/test/fixedwidth.html
using:
http://k75s.home.att.net/test/fixedwidth.css
Notice in the CSS the commented lines for placing navigation on the
left. The whole site could be changed from one to the other by simply
flipping the comment markers in the CSS. When you decide you don't
really want fixed width, you just remove the width line in the CSS.
Let's say you have a hundred pages in your <table>'d site. How long will
it take you to swap the positions of the content and the navigation?
--
-bts
-Motorcycles defy gravity; cars just suck
| |
| Ben C 2007-07-29, 10:18 pm |
| On 2007-07-29, Beauregard T. Shagnasty <a.nony.mous@example.invalid> wrote:
[...]
> Here is a layout I threw together with about 10 minutes work, using
> another template I found elsewhere:
> http://k75s.home.att.net/test/fixedwidth.html
> using:
> http://k75s.home.att.net/test/fixedwidth.css
If the font's a little bit larger than normal, you get the text in the
navigation area overlapping the right hand border of the content area. I
think that's basically because you've got a mixture of pixel widths and
em widths. The whole thing has a width of 750px, #content has a
margin-right of 200px, but #navigation has a width of 13em. If 13em >
200px (or so, there's a bit of padding around as well) you get the
problem.
| |
|
|
| posting 2007-07-29, 10:18 pm |
| On Sun, 29 Jul 2007 11:46:16 -0500, Ben C <spamspam@spam.eggs> wrote:
im sorry i think what you said is what i tryed to do but i cant
understand how to do what you said
| |
| Ben C 2007-07-29, 10:19 pm |
| On 2007-07-29, posting <no@mail.thanks> wrote:
> On Sun, 29 Jul 2007 11:46:16 -0500, Ben C <spamspam@spam.eggs> wrote:
>
> im sorry i think what you said is what i tryed to do but i cant
> understand how to do what you said
Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#container
{
width: 600px;
margin: 0 auto; /* centre it */
position: relative; /* make it containing block for
#car */
background-color: black;
color: white;
}
#content
{
margin-right: 200px; /* Normal flow so it establishes
height of #container */
border-right: 2px solid white;
}
#car
{
position: absolute;
right: 0;
top: 0;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
Lorem ipsum ...
</div>
<div id="car">
Picture of car etc. goes here
</div>
</div>
</body>
</html>
| |
| Beauregard T. Shagnasty 2007-07-29, 10:19 pm |
| Ben C wrote:
> On 2007-07-29, Beauregard T. Shagnasty <a.nony.mous@example.invalid> wrote:
> [...]
>
> If the font's a little bit larger than normal, you get the text in the
> navigation area overlapping the right hand border of the content
> area. I think that's basically because you've got a mixture of pixel
> widths and em widths. The whole thing has a width of 750px, #content
> has a margin-right of 200px, but #navigation has a width of 13em. If
> 13em > 200px (or so, there's a bit of padding around as well) you get
> the problem.
That's true, but it was just a ten-minute knockup. <g>
I believe that should be ok now, changing the content margin to:
margin-right: 14em;
--
-bts
-Motorcycles defy gravity; cars just suck
| |
| posting 2007-07-29, 10:19 pm |
| On Sun, 29 Jul 2007 12:39:29 -0500, Ben C <spamspam@spam.eggs> wrote:
>On 2007-07-29, posting <no@mail.thanks> wrote:
>
>Something like this:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/REC-html40/strict.dtd">
><html>
> <head>
> <title>Test Page</title>
> <style type="text/css">
> #container
> {
> width: 600px;
> margin: 0 auto; /* centre it */
> position: relative; /* make it containing block for
> #car */
> background-color: black;
> color: white;
> }
> #content
> {
> margin-right: 200px; /* Normal flow so it establishes
> height of #container */
> border-right: 2px solid white;
> }
> #car
> {
> position: absolute;
> right: 0;
> top: 0;
> width: 200px;
> }
> </style>
> </head>
> <body>
> <div id="container">
> <div id="content">
> Lorem ipsum ...
> </div>
> <div id="car">
> Picture of car etc. goes here
> </div>
> </div>
> </body>
></html>
thankyou that works like i wanted it to
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |