Forums

Icons won't align properly

Permalink
I've set up a stack of three icons which I want to look like the first attachment. But, when I update the page, I get the weirdness of the second attachment.

I have tried align-top & align-middle with these. Anyone know of something else I might try? Thanks.

2 Attachments

jfuqua
 
bryanlewis replied on at Permalink Reply
bryanlewis
You will need to over-ride the css file to accomplish this.
jfuqua replied on at Permalink Reply
jfuqua
I'll search here for some info on how to do that. Thanks.
jfuqua replied on at Permalink Reply
jfuqua
No luck so far. Is there any way to temporarily remove the css styling with html code?
mhawke replied on at Permalink Reply
mhawke
How are you adding the images to the stack/block? The images need 'float:left ' on them but how you accomplish this will differ depending on how the images were added.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Yeah... it automatically looks like the result of a missing "float:left" rule to me too...
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
There's a crude way you could do it if you're pushed for time...

Just add a content block, with the advanced menu on, you could add a 3 column table and insert each image in the 3 cells of the table.

Not ideal, but it should work.
mhawke replied on at Permalink Reply
mhawke
I just tried adding 3 icons in a regular Content Block and they line up side-by-side without the table stuff. To add a link to each icon, just click the icon and then the 'chain' icon on the TimyMCE toolbar. Works for me.
RBeddie replied on at Permalink Reply
RBeddie
If you're looking to set this up to specifically over-ride the CSS that's there use an ID on the ul item, as a side note this is a list of links so can go inside an HTML list for semantics:

HTML
<ul id="socialLinks">
    <li>
        <a href="#"><img src="..." /></a>
    </li>
    <li>
        <a href="#"><img src="..." /></a>
    </li>
    <li>
        <a href="#"><img src="..." /></a>
    </li>
</ul>


CSS
#socialLinks{
    overflow:hidden;
    margin:0;
    padding:0;
}
#socialLinks li{
    float:left;
    list-style:none;
    padding:0;
    margin:0 0 0 10px;
}
#socialLinks li a{
    display:inline-block;
}


You may need to tweak this slightly to get exactly what you're after, but the basics are there.