Adobe Community: Another question on css position, float, absolute, fixed

zhgart Calculating status...

Currently Being Moderated

Another question on css position, float, absolute, fixed

May 23, 2012 7:18 AM

Tags: #image #css #positioning #css_properties

Another question on css position, float, absolute, fixed

I set up #header as fixed. the pink color is its border, hight is 100px.

the #mainframe of green color contains #content and other part Id, which is yellow color.

#mainframe sets up as relative positioning, 0,auto setting.

#content is absolute positioning. 100,auto 20,auto.

all is ok in the design version. but when switch to live view. I got the abot pic. there is about 90px space gap occurs between header and content.

What's wrong?

2639 Views 26 Replies Latest reply: Griavram, Jun 7, 2012 11:33 AM

Replies

Currently Being Moderated

1. adninjastrator,

May 23, 2012 7:26 AM in reply to zhgart

Report

Please post a link to the actual page. Because you are using "positioning" you are removing elements from the natural flow of the page...so we need to see the rest of the page in determine how those elements are interacting.
Best wishes,
Adninjastrator

|
Mark as:
Currently Being Moderated

2. Rik Ramsay,

May 23, 2012 8:16 AM in reply to zhgart

Report

I set up #header as fixed. the pink color is its border, hight is 100px.
the #mainframe of green color contains #content and other part Id, which is yellow color.
#mainframe sets up as relative positioning, 0,auto setting.
#content is absolute positioning. 100,auto 20,auto.
all is ok in the design version. but when switch to live view. I got the abot pic. there is about 90px space gap occurs between header and content.

If what you have said is correct, that sounds about right.

You have #content inside #mainframe? #mainframe is relative, #content is absolute and you have a 100px margin at the top of #content. To reduce the gap, reduce the top margin.

|
Mark as:
Currently Being Moderated

3. zhgart,

May 23, 2012 8:40 AM in reply to Rik Ramsay

Report

Rik Ramsay wrote:

I set up #header as fixed. the pink color is its border, hight is 100px.
the #mainframe of green color contains #content and other part Id, which is yellow color.
#mainframe sets up as relative positioning, 0,auto setting.
#content is absolute positioning. 100,auto 20,auto.
all is ok in the design version. but when switch to live view. I got the abot pic. there is about 90px space gap occurs between header and content.

If what you have said is correct, that sounds about right.

You have #content inside #mainframe? #mainframe is relative, #content is absolute and you have a 100px margin at the top of #content. To reduce the gap, reduce the top margin.
yes, content was in the mainframe.content is absolute positioning, so that it can be referred to the coordination of #mainframe. if I set the top of placement as zero, the content frame will cover all the body in design view, but is ok at live view.
what's matter?

|
Mark as:
Currently Being Moderated

4. zhgart,

May 23, 2012 8:42 AM in reply to zhgart

Report

ie 8, xp. dw cs5.

|
Mark as:
Currently Being Moderated

5. zhgart,

May 24, 2012 2:53 AM in reply to zhgart

Report

css seems to exist many defects in practice. especially,float positioning. and it may lead much inconvenient when you intend to substitute another size of element. you have to operate it carefully.
It's not as good as declare

|
Mark as:
Currently Being Moderated

6. Rik Ramsay,

May 24, 2012 7:47 AM in reply to zhgart

Report

As Adninjastrator said in post #2, you need to show us the full picture. In your description above you haven't mentioned anything about floats being used so no idea why you are saying "css seems to exist many defects in practice. especially,float positioning."

Absolute position should rarely be used in layout, if at all. There is no real need to use any positioning with floats unless you plan on creating a "layered" web page. Please supply the page so we can understand exactly what the problem is.

See here for an explanation of float vs position: http://spyrestudios.com/css-in-depth-floats-positions/

|
Mark as:
Currently Being Moderated

7. zhgart,

May 24, 2012 10:15 AM in reply to Rik Ramsay

Report

thank you for your post link. skimed over it I find nothing helped. the picture I posted is a corner of the whole page, the rest is as same as the corner.
and
if float, it seems there is nothing to do with positioning of absolute or relative.
see http://www.w3school.com.cn/css/css_positioning_floating.asp
you will find it too bothers.

|
Mark as:
Currently Being Moderated

8. Nancy O.,

May 24, 2012 11:47 AM in reply to zhgart

Report

Without a link to your page, it's hard -- no impossible, to tell what you're trying to achieve & what is troubling you.
Screenshots don't tell us anything. Layout questions are all about your HTML & CSS code (all of it) working together. If you don't have a web space yet, sign-up for a free one to use for testing.
http://www.000webhost.com/

Nancy O.

|
Mark as:
Currently Being Moderated

9. zhgart,

May 25, 2012 5:08 AM in reply to Nancy O.

Report

thank you. I m bound to have a try.

|
Mark as:
Currently Being Moderated

10. zhgart,

May 27, 2012 3:52 AM in reply to zhgart

Report

another issue.
If there wuld have been more than two css files quoted in a web page, say a.css and b.css, how should we distinct the repeated name definition?
for example,
in a.css,
.same { color :#fff;
             width: 100px;
               height: 60px;
               }
. next{
       };
in b.css,
.same { color :#000;
             width: 300px;
               height: 160px;
               }
. next{
       };
.
in the puzzle.html
<body>
<div class ="same">
     <div class="next">
..
...
</body>
I wish to quote a.css content, how shall I get it?

|
Mark as:
Currently Being Moderated

11. John Waller,

May 27, 2012 4:13 AM in reply to zhgart

Report

zhgart wrote:.
If there wuld have been more than two css files quoted in a web page, say a.css and b.css, how should we distinct the repeated name definition?

If two or more style rules have the same importance, origin and specificity, The rule that is specified last wins.

See "Complete Cascade Calculations"
http://www.blooberry.com/indexdot/css/topics/cascade.htm

So if the links in the <head> are

<link rel="stylesheet" href="b.css" type="text/css" />
<link rel="stylesheet" href="a.css" type="text/css" />

then the .same rule in a.css wins

If the links in the <head> are

<link rel="stylesheet" href="a.css" type="text/css" />
<link rel="stylesheet" href="b.css" type="text/css" />

then the .same rule in b.css wins

|
Mark as:
Currently Being Moderated

12. zhgart,

May 27, 2012 5:49 AM in reply to John Waller

Report

Thanks,
well, continue, I have the page which include two rules of the same names. If I wish to ajpply the a.css to the first div area and b.css to the content div area, What's the best concise way to quote the relative rule? have I had to modify the relative css rule or add father name on the rule? say in b.css, write like this content.same and ....?

in the puzzle.html
<body>
<div class ="same">
      <div class="next">

      </div>
...
     </div>
...
<div class="content">
     <div class ="same">
      <div class="next">
          ...
         </div>
     ...
     </div>
</div>

</body>

|
Mark as:
Currently Being Moderated

13. MurraySummers,

May 27, 2012 6:27 AM in reply to zhgart

Report

You are still not understanding a fundamental concept:

A CSS file is a collection of rules which specify how elements on a page are to be 'styled'. Each rule is applied based on a selector associated with that rule's styles. If the selector matches the element, then the rule's styles are applied to that element. The only way to make a rule from CSS file "a" apply to one element, and an identical rule in CSS file "b" apply to a different element, both on the same page, would be to change the selector associated with that rule. There is no way to say "style this element using CSS file 'a', and style this element using CSS file 'b'".

Now, if the code is how you show in your post, you could make two rules like this -

.same { color:red; }
div.same + .content > .same { color:blue; }

But obviously, I have had to change the selector to make that work (in this case, the first instance of 'same' will have red text, and the second instance will have blue text).

|
Mark as:
Currently Being Moderated

14. zhgart,

May 27, 2012 7:20 AM in reply to MurraySummers

Report

yes, Im really puzzled by the rules when I have to write them with my hands myself instead of drag and click action for version mode.
one time I understand, another time I puzzle.
What I said above based on the fact, when I download or copy other style in my pages. I tend to use this a bit, and those a bit of their style when I enjoy their parts.
if I made like that, there will be more than one css quoted in a page and thus there will be conflicted for their rule of same names. How shall I modify them simpley to fit my page?
I tend to find a way just like "auto variable" in c language. which has a limited action area, beyond the area, it will lost itsproperty.

Can I get this? just like force convert to invoke relative css.

(certain element)<div id="first">
<h3>quote the a.css</h3>
<link rel="stylesheet" href="b.css" type="text/css" />
<div class="same">
...
</div>
</div>
(certain element)<div id="second">
<h3>quote the a.css</h3>
<link rel="stylesheet" href="a.css" type="text/css" />
<div class="same">
...
</div>
</div>

|
Mark as:
Currently Being Moderated

15. MurraySummers,

May 27, 2012 7:57 AM in reply to zhgart

Report

No, sorry - there is no such construction in CSS.

|
Mark as:
Currently Being Moderated

16. zhgart,

May 27, 2012 8:14 AM in reply to MurraySummers

Report

Can we set up an extra rule for it?
so that we can invoke other's achievement. accomplishment easily.

|
Mark as:
Currently Being Moderated

17. MurraySummers,

May 27, 2012 8:16 AM in reply to zhgart

Report

It's very hard for me to understand exactly what it is you want to do. Can you please try to explain again?

|
Mark as:
Currently Being Moderated

18. zhgart,

May 27, 2012 6:54 PM in reply to MurraySummers

Report

Can I get this? just like this,
main.css;   a.css;    b.css. ...
Source Code:

(certain element label) <div id="first"> /*use certain label in order to mark b.css will be adopted here*/
     <h3>quote the a.css</h3>
     <link rel="stylesheet" href="b.css" type="text/css" /> /*b.css embark on action in the section*/
       <div class="same">
          
...
          </div>
     </div> (/certain element label) /* put an end to the rule in the b.css and return to the original body rules*/

(certain element label ) <div id="second">
     <h3>quote the a.css</h3>
<link rel="stylesheet" href="a.css" type="text/css" />/*a.css embark on action in the section*/
<div class="same">

...
</div>
</div> (/certain element label) /* put an end to the rule in the a
.css and return to the original body rules*/

|
Mark as:
Currently Being Moderated

19. MurraySummers,

May 28, 2012 5:01 AM in reply to zhgart

Report

No.

|
Mark as:
Currently Being Moderated

20. adninjastrator,

May 28, 2012 6:31 AM in reply to zhgart

Report

Your use of linking to different css sheets is a little off. For example:
<h3>quote the a.css</h3>
<link rel="stylesheet" href="a.css" type="text/css" />/*a.css embark on action in the section*/
<div class="same">

The links should be in the <head> not in the body.
Becasue they are in the <head>, both .css files are active and in force at the same time. You can't turn them on/off as your code suggests.
It would be much better to just create a new class in one or the other of the existing .css files and then apply that class if and when you need it.
http://www.tizag.com/cssT/class.php
http://www.w3schools.com/css/css_id_class.asp
If you have 2 css files which use the same id or class but have different properties... that is a problem. Perhaps you should combine the two sheets and remove or rename any duplicate id or classes.
Or if it's just a few special instances, use inline styling:
http://www.w3schools.com/css/css_howto.asp
Best wishes,
Adninjastrator

|
Mark as:
Currently Being Moderated

21. zhgart,

May 28, 2012 6:53 AM in reply to MurraySummers

Report

Murray *ACP* wrote:

No.
How shall I get such goal? if I wish to use other style in my pages? if there will be mere 2 or 3 outside files, I can check them one by one fi there are repeated names, but if there are more than 3, how do you deal with that?
as say above, I invoke two or 3 special effects like slider etc. I have to face with many css and js files.
I can easily deal js file with different name. and css may be a problem to use them quickly.

|
Mark as:
Currently Being Moderated

22. zhgart,

May 28, 2012 7:07 AM in reply to adninjastrator

Report

adninjastrator wrote:

Your use of linking to different css sheets is a little off. For example:
<h3>quote the a.css</h3>
<link rel="stylesheet" href="a.css" type="text/css" />/*a.css embark on action in the section*/
<div class="same">

The links should be in the <head> not in the body.
Becasue they are in the <head>, both .css files are active and in force at the same time. You can't turn them on/off as your code suggests.
correct. it's good idea to add them in head section. However, I remember it can make do as well when it was inserted in body part.
the only different is the late will be slower than the front when they load.

remove the rename labels may be rather trouble. Why can't the css file define a namespace like in C#?
Do you think the css maker will improve that?

|
Mark as:
Currently Being Moderated

23. Nancy O.,

May 28, 2012 9:25 AM in reply to zhgart

Report

CSS doesn't work that way.

Use external style sheets for site wide styles (applied to all pages in the site):

     <link rel="stylesheet" href="sitewide.css" type="text/css" />

Use embedded CSS for page specific styles (one page only). This goes inside <style> tags between the <head> & </head> tags:

     <style type="text/css">
      p {color: black}
     </style>

Use inline CSS to over rule styles from other sources:

     <p style="color:red">This paragraph is red</p>

Do you think the css maker will improve that?
No. There's nothing to improve here. Use CSS correctly and it is very efficient for whatever needs doing.

Nancy O.

|
Mark as:
Currently Being Moderated

24. zhgart,

May 28, 2012 6:51 PM in reply to Nancy O.

Report

thanks, thanks to all.
I know the 3 rules to invoke css in ones page, other friends point it out above ,too.
I wish I can make it clear in my above description.
I have to accept the proposes above. abandon or modify the repeat name regulations in different css little by little.
keep me informed if there is any new rules changed.
thanks very much to you all , again.

|
Mark as:
Currently Being Moderated

25. adaanpremedia,

May 29, 2012 4:55 AM in reply to zhgart

Report

Understanding the fundamentals :

A CSS file is a collection of rules which specify how elements on a page are to be 'styled'. Each rule is applied based on a selector associated with that rule's styles. If the selector matches the element, then the rule's styles are applied to that element. The only way to make a rule from CSS file "a" apply to one element, and an identical rule in CSS file "b" apply to a different element, both on the same page, would be to change the selector associated with that rule. There is no way to say "style this element using CSS file 'a', and style this element using CSS file 'b'".

Now, if the code is how you show in your post, you could make two rules like this -

.same { color:red; }
div.same + .content > .same { color:blue; }

But obviously, I have had to change the selector to make that work (in this case, the first instance of 'same' will have red text, and the second instance will have blue text).

Regards
Adaan Pre-Media Services

|
Mark as:
Currently Being Moderated

26. Griavram,

Jun 7, 2012 11:33 AM in reply to adaanpremedia

Report

Thanks for the information and success.Forum Kabbanet

|
Mark as: