Skip navigation
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

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?

 
Replies
  • Currently Being Moderated
    May 23, 2012 7:26 AM   in reply to zhgart

    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
    May 23, 2012 8:16 AM   in reply to zhgart

    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
    May 24, 2012 7:47 AM   in reply to zhgart

    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
    May 24, 2012 11:47 AM   in reply to zhgart

    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
    May 27, 2012 4:13 AM   in reply to zhgart
    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
    May 27, 2012 6:27 AM   in reply to zhgart

    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
    May 27, 2012 7:57 AM   in reply to zhgart

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2012 8:16 AM   in reply to zhgart

    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
    May 28, 2012 5:01 AM   in reply to zhgart

    No.

     
    |
    Mark as:
  • Currently Being Moderated
    May 28, 2012 6:31 AM   in reply to zhgart

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 28, 2012 9:25 AM   in reply to zhgart

    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
    May 29, 2012 4:55 AM   in reply to zhgart

    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
    Jun 7, 2012 11:33 AM   in reply to adaanpremedia

    Thanks for the information and success.Forum Kabbanet

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points