February 26th, 2014, 08:51 PM
Icon disappears behind another module
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!
February 26th, 2014, 09:10 PM
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...
February 26th, 2014, 10:21 PM
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.
February 27th, 2014, 12:32 AM
Well, I just removed the paragraph tags altogether and that fixed it. Still learning about this stuff all the time...
February 27th, 2014, 07:16 PM
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.