Help with Code

BrokenClock
BrokenClock
edited June 2010 in General Archive
Hi everyone!

I'm having some trouble with the code. What I want to do is put a picture to the right of a background image. Everytime I put it in, it seems to just go inside of the background image. Here, take a look at what I mean:
http://www.obsidianportal.com/campaign/govaga/wikis/minotaur
I want that second picture to be outside of that text block. What code do I need and where would I put it?

Thanks for your help!

Comments

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    That depends on where you want it vertically. Could you draw a box or something like that on the screen shot where you want it to end up? Also useful would be knowing what you want to see on the right hand side of the page in the end, next to the box text box (text, nothing, etc.).
  • BrokenClock
    BrokenClock
    Posts: 51 edited June 2010
    "Example":http://www.mediafire.com/imageview.php?quickkey=q4uxmtjnwyz

    Like that.
    Post edited by BrokenClock on
  • BrokenClock
    BrokenClock
    Posts: 51 edited June 2010
    Here is the code that I messed around with:





    !(media-item-align-center){width:700px;height:350px}http://cdn.obsidianportal.com/assets/13970/122023.jpg(122023)!

    Minotaurs embody the tension between civilization and savagery, discipline and madness, for they stand in two worlds. Tugged toward violence but bound by conscience, numerous minotaurs are driven to rise above their dark impulses. Such a minotaur seeks the balance between the monstrous and the refined. Innumerable minotaurs give in to the temptations staining their souls and find themselves thralls to Baphomet, the Horned King. Minotaurs must struggle to become more than the beasts they resemble or else succumb to the demonic brutality they despise. Oddly enough, many minotaurs expel their rage on their own body. !(media-item-align-right){width:200px;height:300px}http://cdn.obsidianportal.com/assets/13971/43512-minotaurs.jpg(43512 minotaurs)!

    The Minotaurs of the northern winterlands have abandoned the Horned King and have decided instead to worship the Lady of Pain. Their masochistic rage is perfect for the Lady of Pain, who hates being worshiped and kills or tortures all those that do. I have always felt that the reason the Minotaurs left their forest villages was to seek refuge away from the civilized world, because no race could accept the Minotaur as a civilized creature. Their isolation drove them to the brink of madness and in their madness their welcomed the painful embrace of the Lady.
    Post edited by BrokenClock on
  • BrokenClock
    BrokenClock
    Posts: 51
    Is it not possible? :(
  • gnunn
    gnunn
    Posts: 423
    It's definitely possible, it'll just be involved and will take some tinkering. I think using either absolute positions, and/or layers for the overlapping graphic will do the trick.

    I am pretty sure Chainsaw will be able to help you out, because he has the mad HTML skillz. If he doesn't get to it, I may have a go, but I'm at work at the moment and have to plan for my own game tonight.
  • BrokenClock
    BrokenClock
    Posts: 51
    Cool!
  • Morrinn
    Morrinn
    Posts: 166
    That actually looks pretty cool.
    I'm very interested in seeing if anyone finds a solution.
  • BrokenClock
    BrokenClock
    Posts: 51
    I'm sure it's possible.

    http://www.obsidianportal.com/campaign/sanction/wikis/templates

    The bottom tables are side by side. I'm sure the code isn't much different than whatever was used for that.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Sorry for the delay on getting back to you on this. Yes, this is entirely doable with some HTML, but I've got another question or two before I suggest a solution: Where do you want the second image to line up vertically (a certain distance from the top, or aligned with something in the text at the left), and if you include text on the right, how would you want it to flow around the other elements (down the page, keeping to the right half, or widening out to the page width if it gets below the left hand block)?

    Hate to be so specific, but it all effects the underlying structure.
  • BrokenClock
    BrokenClock
    Posts: 51
    I would like the second image to line up at the center of the text to the right. If that's not possible, than the second image's bottom should be lined up with the bottom of the text to the left.

    No text on the right is needed, really. But, if it's possible and easy, than right above or bellow the image on the right would be perfect.

    No, it's good to be specific. You don't want to help and then find me complaining that it's not what I want. But at this point, I'm happy with any bone you can throw.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited June 2010
    Centering things vertically in HTML has always been a bit of a hastle, but this is entirely possible with a little creative use of tables. Here's the framework of the code:

    bq.




    Minotaurs embody the tension...







    _Note: The forums fail at formatting code, but if you take the above and add the line breaks and tabs back in, it should make more sense. Sorry for the extra step._

    Basically, what that does is sets up a two column table (because table cells are the only element that supports centering vertically), and puts the text in the left hand column, and the image in the right. The top image is positioned absolutely, so it can flow over both columns, and a div is contains the text, so it can be pushed down under the top image (you'd just replace that with the side-bar code you're currently using, and adjust the padding of both columns to fit).
    Post edited by ChainsawXIV on
  • BrokenClock
    BrokenClock
    Posts: 51 edited June 2010
    Thanks for your help.

    I'm not one hundred percent sure on a lot of that stuff, but I'll try and fiddle with it. Mostly becuase I`m not sure where to add the line breaks and tabs
    Post edited by BrokenClock on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    The code should work even without the tabs and line breaks, it's just kinda hard to read that way. "Here's what it should look like, all formatted up.":http://omnichron.net/external/layout.txt If you run into any snags, or need anything explained, just say the word and I'll be happy to help.
  • BrokenClock
    BrokenClock
    Posts: 51
    This is what I have so far, it's a mess I know:
  • BrokenClock
    BrokenClock
    Posts: 51
    The paper thingy that you made works fine, but the images do not seem to appear to the right of it or even overtop of it.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Try "this one":http://omnichron.net/external/layout_fix_01.txt. It should look like "this":http://www.obsidianportal.com/campaign/chainsawxiv-test-campaign/wikis/test. There were several issues there - the main one being that the forum converted all the quotes to smart quotes, which totally broke the code when copy-and-pasted around, but also some formatting issues with the OP standard style sheets. This new code should resolve all of that for you. :)
  • BrokenClock
    BrokenClock
    Posts: 51
    Thanks, it works wonderfully!! The only trouble I have now is with different picture sizes at the top. The text seems to stay in the same spot even if it's a smaller top picture.
  • BrokenClock
    BrokenClock
    Posts: 51
    Nevermind, I figured it out. Everything looks just like I want it! Thanks!
  • gaaran
    gaaran
    Posts: 740
    Do you mind if I use this template for my main page? I have my wiki all set-up the way I want it, but my home page is dull and boring, and this layout would be perfect, as I have a trailer that would fill the stop section perfectly.
  • gaaran
    gaaran
    Posts: 740 edited June 2010
    And also, Chainsaw, is there a way to embed a video in that first div tag? :P

    I can get the text p(oembed). to appear right where I want the video to be, but for some reason, the embedding won't work. will it just not work inside the div tags or the table?
    Post edited by gaaran on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    I haven't worked with videos on here at all, but I can tell you that putting textile code inside regular HTML has proven a bit flaky in the past. To start, I'd suggest making sure there are blank lines above and below the textile code (which shouldn't effect the appearance, in theory), and no regular HTML on the same line as it. If that doesn't get the job done, we can explore some other options.
  • gaaran
    gaaran
    Posts: 740
    Just decided to go with a simpler layout so i wouldn't have to mess with combining textile and html. Here's what i "came up with":http://www.obsidianportal.com/campaigns/melekar
  • BrokenClock
    BrokenClock
    Posts: 51
    What software did you use to make the video?
  • gaaran
    gaaran
    Posts: 740
    I used adobe premiere (although I really didn't need such an advanced program) and just used images I found (with general acknowledgments on my miscellany page) with some stock music and I wrote the titles. All in all, I think it took maybe an hour.
  • BrokenClock
    BrokenClock
    Posts: 51
    Nice! It's time for some Player Character dream sequences!
  • gaaran
    gaaran
    Posts: 740
    Ooooh.... that's a great idea Clock! I might have to do just that!
Sign In or Register to comment.

March 2024
Wrath of the Highborn

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