Add pictures next to the board

Started by bharat, January 29, 2018, 05:43:05 AM

Previous topic - Next topic

bharat

I can see it like in the attachment now but I would like this small picture appear just next to the main one.

bharat

Any suggestions how to make it the way I want them to be shown? Would be really grateful for any help.

Gwenwyfar

Sorry, forgot about this topic.

Just change #board_ID > .info > a::before to #board_ID > .icon:after

You should try using "inspect element" and see some guides on how css selectors work, it would make things much easier for you.
"It is impossible to communicate with one that does not wish to communicate"

bharat

Thanks a lot for your help, will try it out now. I would love to learn more but need to find the right resource for that.

bharat

I changed to this code but now I don't see any picture at all.

Gwenwyfar

That's because you changed it to #board_82 > .info > a::after, not #board_82 > .info:after
"It is impossible to communicate with one that does not wish to communicate"

bharat

You wrote earlier that I need to change to  #board_ID > .icon:after

Gwenwyfar

"It is impossible to communicate with one that does not wish to communicate"

bharat

I have this code at the moment but I don't see any picture at all

#board_82 > .icon:after
   content: "";
   height: 34px;
   width: 35px;
   display: inline-block;
   margin-right: 5px;
   background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat;
}

Gwenwyfar

You broke the brackets, that's invalid css.
"It is impossible to communicate with one that does not wish to communicate"

bharat

That's what you wrote me earlier, do you mean the brackets after icon:after?

Gwenwyfar

I never said to remove the brackets. Every css "block" always has brackets.
"It is impossible to communicate with one that does not wish to communicate"

bharat

You told me to change this one #board_ID > .icon:after

As I assume it should be

#board_ID > .icon:after }


bharat

I am sorry if I disturb you with my question but I just started to learn about codes

Gwenwyfar

The other way around :)

#board_ID > .icon:after {


Everything that goes between the { and } is what will "make stuff happen". The part at the beginning is what selects something.
"It is impossible to communicate with one that does not wish to communicate"

bharat

Thanks a lot for your help, I can see picture now but it is under the image, can it be next to it?

pepa

Quote from: bharat on February 07, 2018, 04:51:43 AM
Thanks a lot for your help, I can see picture now but it is under the image, can it be next to it?

Do you still have "display: inline-block;" in the css?

bharat

Yes I do have it like this:

#board_82 > .icon:after {
   content: "";
   height: 24px;
   width: 25px;
   display: inline-block;
   margin-right: 5px;
   background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat;
}

bharat

Quote from: pepa on February 07, 2018, 06:52:01 AM
Quote from: bharat on February 07, 2018, 04:51:43 AM
Thanks a lot for your help, I can see picture now but it is under the image, can it be next to it?

Do you still have "display: inline-block;" in the css?

Should it be removed?

bharat

I am really conficed as the image doesn't look right now, half of it is not even visible.

Advertisement: