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

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0

    Icon disappears behind another module


    Hello!

    I am working on a website which was developed by someone else, and I am learning as I go along. Right now I am struggling with some weird layout behavior.

    On my development website (forum rules don't allow me to post the site - pm me if it would help you to look at it!) I have a social module which used to have 3 items: a facebook icon, a twitter icon, and an envelope icon for messages. These 3 items all appeared above another module when viewing the site. I then added a tumblr icon. Doing this pushed the facebook and twitter icons down, and the message icon went into a second line, so it is effectively hidden. I've played around with changing margins/widths/heights of various boxes, but I can't seem to keep the tumblr icon and at the same time have the message icon stay visible.

    Right now the 3 social media icons are in a separate <p>, I'm wondering if I can put the messaging icon into that paragraph, too?

    I hope I'm being clear enough! Any help would be greatly appreciated! Thanks in advance!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0
    Hmm, I just realized that my question is pretty stupid - it's not really the css, it's also the html generated by the joomla site that's having an effect. Now i'm not even sure how to ask the question...
  4. #3
  5. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Probably your paragraph tag is set to float (left or right); in your CSS. Or... maybe it is set to display as a "inline-block" or "table-cell". Without looking at your CSS..., I really couldn't tell; right now..., I am just guessing. Although, if any of the above is the case; just add the tumblr icon within a paragraph tag and see what the outcome is; because sometimes CSS becomes "trial and error", when testing; sometimes it's just part of the process of web design.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0
    Well, I just removed the paragraph tags altogether and that fixed it. Still learning about this stuff all the time...
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    That's cool, glad it worked out well. Yeah, the paragraph tag is by default a block level element (if CSS is not applied to it) and block level elements create element breaks (above and below) other hierarchical elements; so that may have been pushing your icons down. Yeah, Web Development is an on going adventure in new knowledge, technology & application..., you never seem to run out of new things to learn.

IMN logo majestic logo threadwatch logo seochat tools logo