#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0

    CSS Class equal to another


    Hi everyone,

    I'm looking for some direction on this and hope that some of you will be able to help me out.

    I have a web page that is built using a template that I don't have access to. The only thing I can manipulate is the CSS.

    What I have is a class called "main" that houses the body of the page and then a "footer" class.

    In the Main area, it's not possible for me to use basic HTML tags, but in the footer I can.

    So what I did was hid the "main" class, but that doesn't move the footer to where I need it.

    Can anyone think of a way around this? Basically what I need to do is fool a browser into thinking the "footer" class is the "main" class while hiding the original "main"....If that makes sense.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    Well now I'm curious: why are you trying to fool the user in this way?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0
    Because I AM the user!
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    as far as css (not the contents that are in it)
    copy the style of main and assign them to footer and vice versa.
    This will probably not have the desired effect since .main has different contents than .footer
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    Originally Posted by tradeweb
    Because I AM the user!
    So you want to fool yourself because you are you?

    I was just interested in what the conditions/goals were that led you to this solution, seems like it may have been interesting for us to read...

    aeternus' suggestion will give the footer the same styles as the main class, but will not hide the div as you desire.

    To do that:
    css Code:
    .main { display: none; }


    The reason for this is that visibility: hidden;, as I believe you're using now, hides the element but still loads it in the document: ergo it still takes up space. On the other hand, display: none; does not load the element in the document, so not only is it hidden but any space it may have occupied is also negated.

    - Null
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0
    Thank-you both for the feedback.

    This may be the wrong way of doing things, but what I pieced together and given me the results I was looking for was this:

    .footer { display:inline;}
    .main {display:none;}

    Even when "main" was hidden, it still seemed to be occupying the space and leaving a large blank area. The display:inline; seemed to moved the footer section to where the "main" section was formerly located.

    Thank-you both.

IMN logo majestic logo threadwatch logo seochat tools logo