The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Icon layout

View previous topic View next topic Go down

Solved Icon layout

Post by Wing6704 on December 10th 2012, 5:03 pm

Hi all,

I have linked in our social network icons in the header, but I'd like to have them orientated side by side. At the moment the three icons are on top of one another which isn't ideal for the design. What css code would I need to fix this issue? I have attached an image for reference.



Cheers,
Ash

Wing6704
Forumember

Male Posts : 55
Reputation : 1
Language : English

Back to top Go down

Solved Re: Icon layout

Post by Sir Chivas™ on December 10th 2012, 5:05 pm

Hi,

Do you want them all in one line? Can you please provide the code that you're using?



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Icon layout

Post by Wing6704 on December 10th 2012, 5:12 pm

Hi there!

Yes please, I'd like them in one line. The only code I'm using for these icons is through the AP/display/homepage/generalities and then in the homepage messages.

(won't let me post links in the code still as I'm not in the full 7 day period)

I haven't managed to put any css code in successfully for the layout, I'm very green with css. I've tried to arrange them but they always come out completely wrong in the layout. :/



Wing6704
Forumember

Male Posts : 55
Reputation : 1
Language : English

Back to top Go down

Solved Re: Icon layout

Post by Shek on December 10th 2012, 5:20 pm

Hello!

We need the address of your forum, or you put the code here without HTTP. Be sure to remove the HTTP. Very Happy

Regards,

Shek
Active Poster

Male Posts : 1092
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Icon layout

Post by Wing6704 on December 10th 2012, 5:22 pm

Sure here you go.

simplysmilesupport.forumotion.co.uk

Wing6704
Forumember

Male Posts : 55
Reputation : 1
Language : English

Back to top Go down

Solved Re: Icon layout

Post by Shek on December 10th 2012, 5:33 pm

I cannot see the main page with the code. scratch

EDIT: Could activate my user so I can help you?! ouou

Shek
Active Poster

Male Posts : 1092
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Icon layout

Post by Wing6704 on December 10th 2012, 5:43 pm

Hi this is the code in the AP/Display/Homepage/Generalities

Here's another screen grab, can't seem to post even with the http removed? Most likely my inexperience though.



Wing6704
Forumember

Male Posts : 55
Reputation : 1
Language : English

Back to top Go down

Solved Re: Icon layout

Post by Shek on December 10th 2012, 6:08 pm

Hello!

Add code in Homepage:
Code:
<style>#tipkice {position: absolute;
top: 0%;
right: 50%;}</style>

<ul id="tipkice">
<li><a title="Facebook" href="http://www.facebook.com/pages/Wired-Orthodontics/466575696698974?ref=hl"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/facebook.png"></a>
<a title="Twitter" href="https://twitter.com/WiredOrtho"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/twitter.png"></a>
<a title="YouTube" href="http://www.youtube.com/user/WiredOrthodontics?feature=mhee"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/youtube.png"></a></li>
</ul>

It would be more or less What the fuck ?!? ?

Regards,
Very Happy

Shek
Active Poster

Male Posts : 1092
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Icon layout

Post by Wing6704 on December 10th 2012, 8:20 pm

Shek - thanks for your help. The code doesn't appear to work, not in the way of making the icons landscape. Now they float and track with the scroll, still one on top another.

I just wanted them to be side by side and fixed to the header - kinda like where they are now, but side by side.

Wing6704
Forumember

Male Posts : 55
Reputation : 1
Language : English

Back to top Go down

Solved Re: Icon layout

Post by Shek on December 10th 2012, 10:06 pm

Hello! Very Happy

mwii Hum... Hey, it's because you have not changed the HTML. Try this with HTML:
Code:
<ul id="tipkice">
<li><a title="Facebook" href="http://www.facebook.com/pages/Wired-Orthodontics/466575696698974?ref=hl"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/facebook.png"></a>
<a title="Twitter" href="https://twitter.com/WiredOrtho"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/twitter.png"></a>
<a title="YouTube" href="http://www.youtube.com/user/WiredOrthodontics?feature=mhee"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/youtube.png"></a></li>
</ul>
The icons do not move around the page. They are sliding for you? :/

Regards,

Shek
Active Poster

Male Posts : 1092
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Icon layout

Post by Wing6704 on December 11th 2012, 9:54 am

That did it!

Thank you very much Shek, it's fine now. And thank you for being patient with me. Smile

Much appreciated!

Wing6704
Forumember

Male Posts : 55
Reputation : 1
Language : English

Back to top Go down

Solved Re: Icon layout

Post by Sanket on December 11th 2012, 10:54 am

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum