26 Replies Latest reply: Jun 7, 2012 11:33 AM by Griavram RSS

    Another question on css position, float, absolute, fixed

    zhgart Community Member

      Another question on css position, float, absolute, fixed

      postionprob.JPGI 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?

        • 1. Re: Another question on css position, float, absolute, fixed
          adninjastrator Community Member

          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

          • 2. Re: Another question on css position, float, absolute, fixed
            Rik Ramsay Community Member

            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.

            • 3. Re: Another question on css position, float, absolute, fixed
              zhgart Community Member

              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?

              • 4. Re: Another question on css position, float, absolute, fixed
                zhgart Community Member

                ie 8, xp. dw cs5.

                • 5. Re: Another question on css position, float, absolute, fixed
                  zhgart Community Member

                  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

                  • 6. Re: Another question on css position, float, absolute, fixed
                    Rik Ramsay Community Member

                    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/

                    • 7. Re: Another question on css position, float, absolute, fixed
                      zhgart Community Member

                      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.

                      • 8. Re: Another question on css position, float, absolute, fixed
                        Nancy O. CommunityMVP

                        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.

                        • 9. Re: Another question on css position, float, absolute, fixed
                          zhgart Community Member

                          thank you. I m bound to have a try.

                          • 10. Re: Another question on css position, float, absolute, fixed
                            zhgart Community Member

                            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?

                            • 11. Re: Another question on css position, float, absolute, fixed
                              John Waller CommunityMVP
                              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

                              • 12. Re: Another question on css position, float, absolute, fixed
                                zhgart Community Member

                                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>

                                • 13. Re: Another question on css position, float, absolute, fixed
                                  MurraySummers CommunityMVP

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

                                  • 14. Re: Another question on css position, float, absolute, fixed
                                    zhgart Community Member

                                    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>

                                    • 15. Re: Another question on css position, float, absolute, fixed
                                      MurraySummers CommunityMVP

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

                                      • 16. Re: Another question on css position, float, absolute, fixed
                                        zhgart Community Member

                                        Can we set up an extra rule for it?

                                        so that we can invoke other's achievement. accomplishment easily.

                                        • 17. Re: Another question on css position, float, absolute, fixed
                                          MurraySummers CommunityMVP

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

                                          • 18. Re: Another question on css position, float, absolute, fixed
                                            zhgart Community Member

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

                                                      <!-- same class adopts rules in the b.css-->

                                            ...

                                                      </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">

                                            <!-- same class adopts rules in the a.css-->

                                            ...

                                            </div>

                                            </div> (/certain element label) /* put an end to the rule in the a

                                            .css and return to the original body rules*/

                                            • 20. Re: Another question on css position, float, absolute, fixed
                                              adninjastrator Community Member

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

                                              <!-- same class adopts rules in the a.css-->

                                              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

                                              • 21. Re: Another question on css position, float, absolute, fixed
                                                zhgart Community Member

                                                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.

                                                • 22. Re: Another question on css position, float, absolute, fixed
                                                  zhgart Community Member

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

                                                  <!-- same class adopts rules in the a.css-->

                                                  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?

                                                  • 23. Re: Another question on css position, float, absolute, fixed
                                                    Nancy O. CommunityMVP

                                                    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.

                                                    • 24. Re: Another question on css position, float, absolute, fixed
                                                      zhgart Community Member

                                                      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.

                                                      • 25. Re: Another question on css position, float, absolute, fixed
                                                        adaanpremedia Community Member

                                                        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

                                                        • 26. Re: Another question on css position, float, absolute, fixed
                                                          Griavram Community Member

                                                          Thanks for the information and success.Forum Kabbanet