Pane positions

  • C-TEKIT

    #8978

    Hi all,

    Does anyone know if the pane positions can be better organised. Basically I want to list the services we offer on the homepage, so where we have Test, Test2 and a large gap is there anyway I can fill the gap with another two panes?

    Also how do I get the text so that it is contained within each of the panes rather than spilling like the bottom pane?

    Each of the panes are a post by the way and I’ve set the homepage to display x number amount, not sure if this the best way to list icons/pictures for services.

    Cheers

    Mod

    Kenneth John Odle

    #42509
    Quote:
    Each of the panes are a post by the way and I’ve set the homepage to display x number amount, not sure if this the best way to list icons/pictures for services.

    Probably not. Your best would probably be to just add icons to a static home page and then link them to the pages in question.

    C-TEKIT

    #42510

    Hi Kenneth,

    Do you mean add icons by using the add media tool? When I do it like this I have very little control over the positioning of icons (left, centre, right alignment). I’m trying to add the icons in a row/table style format so there are three or four icons on each row.

    I’d show you what I mean but I don’t think I can attach an image on here and my site isn’t actually live as I’m playing around with instant wordpress so it’s all offline.

    Mod

    Kenneth John Odle

    #42511
    Quote:
    When I do it like this I have very little control over the positioning of icons (left, centre, right alignment). I’m trying to add the icons in a row/table style format so there are three or four icons on each row.

    You’ll probably need to use the text editor so you can edit the html directly, and then add some custom css classes to get them to line up correctly.

    C-TEKIT

    #42512

    Thanks Kenneth, I found this link http://onecoolsitebloggingtips.com/2010/03/24/align-images-html-tables-for-wordpress-blogs/ with some html code for a table so I’m going to give it a try tomorrow and see how it goes.

    Cheers

    Mod

    Kenneth John Odle

    #42513

    Yeah, you really want to avoid using tables like that. Tables are for tabular data, not for page layout.

    You can do something like this…

    HTML:

    <a href=""><img src="" class="ctekit-left" /></a>
    <a href=""><img src="" class="ctekit-left" /></a>
    <a href=""><img src="" class="ctekit-left" /></a>
    <div class="clear;"></div>
    <a href=""><img src="" class="ctekit-left" /></a>
    <a href=""><img src="" class="ctekit-left" /></a>
    <a href=""><img src="" class="ctekit-left" /></a>

    CSS:

    .ctekit-left {float: left;}
    div.clear {clear: both;}

    That will create two rows of three images each.

    I’ve left out actual addresses just to save space. The way I’ve done it here is completely compatible with HTML5 and CSS3.

Viewing 6 posts - 1 through 6 (of 6 total)

  • You must be logged in to reply to this topic.