How do I align an image with text?

sandman
sandman
edited February 2010 in Campaign Portal Building
Hi, I'm new to the site (and a REAL newb when it comes to Textile) but I've already figured out a couple of things. However, I'm trying to do something and I don't know how.

First take a look at this page:
"Obsidian Portal Wiki - Deidades":http://www.obsidianportal.com/campaign/14925/wikis/deidades

As you can see it looks kind of funny. It doesn't look bad, but what I want to do is this (I've made a picture of what I would like to do):

"Custom Picture":http://www.uploadgeek.com/share-360D_4B7AA533.html

So, here's the problem:
# How do I align all the pictures to the left? (btw: all the icons are 50 x 50 , so they are squares)
# How do I align the text the way I did in the picture (centered and to the right, with a couple of blank spaces between the image and the name)
# As you can see in the picture, I've put an arrow to a dot. If you look at the "wiki page as it is now":http://www.obsidianportal.com/campaign/14925/wikis/deidades, I had to place that dot so that the second heading would be placed where it belongs. I've intentionally left the 3rd heading without the previous dot so you can see what happens if I don't place it. Could anybody tell me how to place the heading without having to use that dot?


Thanks.

Comments

  • gnunn
    gnunn
    Posts: 423
    I may be able to help you out with this, but you're going to have to adjust the privacy settings on your page first. Right now I'm getting a "403: Not authorized to view this page" error when I follow your link. You probably either have the page set to GM only or your campaign set to private.

    Also, it might be helpful if you posted the code you are currently using to this thread... just make sure you format your comment as "text" instead of "textile" when you do.
  • sandman
    sandman
    Posts: 155
    mmm... weird.. it's not setted as Entire Page GM Only.... are you sure you can't see it? 'cause I tried logging in with my other account (I have one "as a player" for my own campaign just to see the same pages but through the "player's view") and I can see it just fine. Anyway, here's what the wiki shows:

    http://www.uploadgeek.com/share-DE02_4B7ABD88.html

    And here's the code I'm using:

    h3. *Dioses Buenos y Legal Buenos*

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! [[Avandra]] - Bueno

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6826/Icon-Bahamut.jpg(Icon-Bahamut)! [[Bahamut]] - Legal Bueno

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6827/Icon-Moradin.jpg(Icon-Moradin)! [[Moradin]] - Legal Bueno

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6828/Icon-Pelor.jpg(Icon-Pelor)! [[Pelor]] - Bueno

    .

    h3. *Dioses No Alineados*

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! [[Corellon]]

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! [[Erathis]]

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! [[Ioun]]

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! [[Kord]]

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! [[Melora]]

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! [[The Raven Queen]]

    !(media-item-align-left)http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! [[Sehanine]]



    h3. *Dioses Malignos y Ca
  • Dethstryke
    Dethstryke
    Posts: 50 edited February 2010
    Your campaign is private, so people who are not your friends and/or players (depending on what option you selected for private) cannot see the page you linked.

    Using Textile, the best way to achieve those results is most likely to use a table. Example here:

    h3. *Dioses Buenos y Legal Buenos*

    table{width:300px}.
    |=. !http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! |-. Avandra - Bueno |
    |=. !http://cdn.obsidianportal.com/assets/6826/Icon-Bahamut.jpg(Icon-Bahamut)! |-. [[Bahamut]]- Legal Bueno |
    |=. !http://cdn.obsidianportal.com/assets/6827/Icon-Moradin.jpg(Icon-Moradin)! |-. [[Moradin]]- Legal Bueno |
    |=. !http://cdn.obsidianportal.com/assets/6828/Icon-Pelor.jpg(Icon-Pelor)! | [[Pelor]]- Bueno |


    Here's the breakdown:
    Make sure you have a line space between the h3 tag and your table... otherwise the entire table will get caught up in the header tag.

    table{width:300px}.
    This provides you a way to format the table using style CSS tag. In this case, I'm using "Width" and setting it to be 300px. This constraints the entire table to only 300 pixels wide, rather than 730 pixels (which is the maximum for the OP page). Change the 300 value if you find the table to have too much space or if lines are wrapping that you don't want.
    Some more table-related options here: http://www.w3schools.com/css/css_table.asp

    |=. !http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! |-. Avandra - Bueno |
    Pipes ("|") make cells. Think of them like the seperator lines between cells. Each line is a new row. Make sure you have equal number of cells in each row. The example here has two cells per row.

    Note that the (media-item-align-left) has been removed from this image link. The reason for that is you don't need it when you're formatting it in the cell in this table (see centering below).


    =.
    after the pipe aligns the cell contents as centered horizontally. Note the space between the . and the ! for the image tag.

    -.
    aligns the cell contents vertically. We don't use this on the image because it is already the largest thing in the way, so everything is being resized to fit the height of the image. If you had a larger image next to it and you wanted it to be in the middle, then you'd use this for the image as well.

    A good reference for Textile can be found here: http://thresholdstate.com/articles/4312/the-textile-reference-manual#toc_0

    Edit: Updated original to show your actual code.
    Post edited by Dethstryke on
  • gnunn
    gnunn
    Posts: 423
    Okay, I think this should be a fairly simple fix. I would recommend enclosing each row of the lists in a textile table. Textile tables are formatted by putting " | " as dividers between each cell like so:

    | cell1 | cell2 |
    | cell3 | cell4 |

    In the example below, I also added a cell width attribute "{width:75px}." to the first cell in the images column of each table, otherwise the table will space the cells evenly and will spread out to fill the whole width of the page. If you try this and there is too much or too little space in the first column, simply adjust the number in the width attribute.

    I also left the header rows outside of tables, because textile does not like to format header text inside a table cell, so really your page will be a series of several simple tables for each list of deities. I have done the code for the first table and the first couple rows of the second below.

    Note: In textile tables, spaces are very important! make sure there are no extra line-breaks between table rows on a given table, and make sure there are no extra spaces after the last "I" in a table row.

    Let me know if this works!

    h3. *Dioses Buenos y Legal Buenos*

    |{width:75px}. !(media-item-align-left)http://cdn.obsidianportal.com/assets/6825/Icon-Avandra.jpg(Icon-Avandra)! | [[Avandra]] - Bueno |
    | !(media-item-align-left)http://cdn.obsidianportal.com/assets/6826/Icon-Bahamut.jpg(Icon-Bahamut)! | [[Bahamut]] - Legal Bueno |
    | !(media-item-align-left)http://cdn.obsidianportal.com/assets/6827/Icon-Moradin.jpg(Icon-Moradin)! | [[Moradin]] - Legal Bueno |
    | !(media-item-align-left)http://cdn.obsidianportal.com/assets/6828/Icon-Pelor.jpg(Icon-Pelor)! | [[Pelor]] - Bueno |

    h3. *Dioses No Alineados*

    |{width:75px}. !(media-item-align-left)http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! | [[Corellon]] |
    | !(media-item-align-left)http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! | [[Erathis]] |
  • gnunn
    gnunn
    Posts: 423
    ...or what Dethstryke said... which is pretty much the same thing. Bah! long posts!
  • Dethstryke
    Dethstryke
    Posts: 50 edited February 2010
    @Gnunn - hehehehe I have that problem too.

    You bring up a nice differences though, which I think are a tad more elegant than my example:

    First, using the width tag in the first cell and letting the rest fill the space rather than modifying the entire table.
    Second, setting the first cell does it for the row, so you only need it once.
    Third, by utilizing the media-item tag, you reduce hand-coding and make the entire media library insertion unchanged.


    Probably reflects that I don't use the library - I prefer my own website host for images. Old habits are hard to change, I suppose.
    Post edited by Dethstryke on
  • sandman
    sandman
    Posts: 155 edited February 2010
    Thanks guys! both of you.

    Dethstryke: you where right, I forgot to set it to "Public"

    Here's how it turned out: "Deidades":http://www.obsidianportal.com/campaign/14925/wikis/deidades

    I left the first category with both methods (first one from Dethstryke, second from Grunn). I am wondering why is the second table placed more "to the left", or is it just the image? (because the 2nd column seems to be aligned with the 2nd column from the first table)


    Thanks again guys, this is exactly what I wanted to do! And thanks for explaining what each part of the textile code means, that helped A LOT.
    Post edited by sandman on
  • Dethstryke
    Dethstryke
    Posts: 50 edited February 2010
    It's just the image. My table code centers the image, Gnunn's code uses the media library tag (media-item-align-left) to align the image to the left, hence more space to the right of the image.

    To get Gnunn's code to look exactly alike, change all four "media-item-align-left" to "media-item-alighn-center". :) That is what choosing "center" in the Library prompt will do for you when inserting the image.

    Looks good. I'm not fluent in anything but English, so I can only tell you it looks pretty. ;)
    Post edited by Dethstryke on
  • sandman
    sandman
    Posts: 155
    ohhhh, ok, i see. Then it's just the "left" alignment from the library itself.

    Haha, thanks again Dethstryke.
  • sandman
    sandman
    Posts: 155 edited February 2010
    Sorry to bother with this again, but I realized that the first and second columns of the 2nd table are a little "to the right" compared to the first and third table. Did I do something wrong?

    Here's how I did the code for the 2nd table:

    h3. *Dioses No Alineados*

    table{width:300px}.
    |=. !http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! |-. [[Corellon]] |
    |=. !http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! |-. [[Erathis]] |
    |=. !http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! |-. [[Ioun]] |
    |=. !http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! | [[Kord]] |
    |=. !http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! | [[Melora]] |
    |=. !http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! | [[The Raven Queen]] |
    |=. !http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! | [[Sehanine]] |
    Post edited by sandman on
  • Dethstryke
    Dethstryke
    Posts: 50
    Tables auto balance the cells size unless you specify the width of a particular column. In this case, it's given the image column more room because there is less text on the right than the other tables (since you haven't included alignment here).

    Here's an alternative. I haven't been able to get the width tag and the =. tag to work nice at the first cell together, so I get around it by adding text-align:center on the first image. *shrug*.

    I did remove the extra formatting to try to streamline it. It seems the tables default to vertical center, so I took that from all the right side cells. Here's the code:

    h3. *Dioses No Alineados*

    table{width:300px}.
    |{width:60px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! | [[Corellon]] |
    |=. !http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! | [[Erathis]] |
    |=. !http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! | [[Ioun]] |
    |=. !http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! | [[Kord]] |
    |=. !http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! | [[Melora]] |
    |=. !http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! | [[The Raven Queen]] |
    |=. !http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! | [[Sehanine]] |
  • gnunn
    gnunn
    Posts: 423
    |={width:60px}. "Cell content"|

    should work as well if you want to set the cell alignment the same way for each cell, as opposed to setting it with css attributes using Dethstryke's work-around.

    I have found that Textile table formatting can be really picky when it comes to the order in which your code is presented. This is especially the case when combining css attributes, text alignment and/or row or column spans into a single bit of formatting. Sometimes, if they are not presented in the correct order, it can totally break a table's formatting. when using html/css, on the other hand, order of operations seems to be a little more flexible.
  • Dethstryke
    Dethstryke
    Posts: 50
    @Gnunn: Yea, I do everything on my site in HTML/CSS being an old-school web designer for all the reasons you point out about Textile. ;)

    Trying to learn Textile more though. It feels like once I get past the learning curve, it could be a lot nice sandbox to play in, but it's hard when you can lay down a table in notepad without reference. :/
  • sandman
    sandman
    Posts: 155 edited February 2010
    Thanks guys. I ended up playing with the width so that I would be exactly aligned with the other tables:

    table{width:300px}.
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6829/Icon-Corellon.jpg(Icon-Corellon)! |-. [[Corellon]] |
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6830/Icon-Erathis.jpg(Icon-Erathis)! |-. [[Erathis]] |
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6831/Icon-Ioun.jpg(Icon-Ioun)! |-. [[Ioun]] |
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6832/Icon-Kord.jpg(Icon-Kord)! | [[Kord]] |
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6833/Icon-Melora.jpg(Icon-Melora)! | [[Melora]] |
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6834/Icon-Raven_Queen.jpg(Icon-Raven Queen)! | [[The Raven Queen]] |
    |{width:75px;text-align:center;}. !http://cdn.obsidianportal.com/assets/6835/Icon-Sehanine.jpg(Icon-Sehanine)! | [[Sehanine]] |

    Grunn's method worked too (with {width:75px}. ), but since it wasn't centered I would have to give an even bigger width than 75px so it the end it was a little easier with Dethstryke's method.

    Sorry for being such a pain in the butt guys.

    Btw: where did you get this codes? Or do you just know how to program and that's where my problem is? and also... what is CSS and what is it used for??? xD (told ya I was new) :P
    Post edited by sandman on
  • gnunn
    gnunn
    Posts: 423
    CSS stands for Cascading Style Sheets... It's largely a way to pre-program settings for a web page so you don't need to type in all the code every time you want to make your headings 72px, blue and underlined. You just establish a style in the header section of your web page saying, "I want all headings to look like this" Then when you create your page, you basically program in, "Okay, this part is a heading" and it will automatically format it to match your established style. Unfortunately, because OP does not allow users to edit the Head portion of their pages, CSS in the context of Obsidian Portal is really mostly useful as a shorter, easier to read version of HTML.

    I honestly had very little knowledge of html and no knowledge of textile when I really got rolling on my OP site back in November. It's really all about experimentation and trial and error.

    "This":http://redcloth.org/hobix.com/textile/ is the most comprehensive resource I've found for Textile formatting and I use it extensively.

    I actually tend to use a sort of mixed html/css/Textile when I code my wiki. I like that Textile code often visually corresponds with the resulting layout, but it is definitely fickle and so sometimes using html & css are easier/simpler.
  • gnunn
    gnunn
    Posts: 423
    Also, I recommend you check out the "Unofficial Help and Tips":http://forums.obsidianportal.com/comments.php?DiscussionID=1114&page=1#Item_20 thread that ChainsawXIV put together. I've contributed a couple things to it and there are lots of other great code samples and how-tos in there.
  • Dethstryke
    Dethstryke
    Posts: 50 edited February 2010
    @Gnunn: did you check out that link I posted above for Textile refrence? It's WAY more complete than the Hobix link. ;)
    "Check it out here":http://thresholdstate.com/articles/4312/the-textile-reference-manual#toc_0

    I second ChainsawXIV's link. He is a wealth of information in general!
    Post edited by Dethstryke on
  • sandman
    sandman
    Posts: 155 edited February 2010
    Ok, then my "frustration" should be normal I guess, I realize that I'm probably still in the middle of the learning curve so not being able to achieve exactly what I want is to be excepted I suppose.

    I did check out the hobix textile link, but as you can see what I needed help with was learning that what I wanted to do had to be done with a table, which I hadn't even considered in the first place.

    I didn't know the other textile reference manual Dethstryke mencioned, so I'll give it a try.

    As for the unofficial FAQ, I see that there's A LOT of info there, so I'll just have to be patient I guess, haha.


    Thanks for explaining CSS 101 and for all the help guys xD
    Post edited by sandman on
Sign In or Register to comment.

May 2024
The World of Elurah

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions

Categories