Centering an Image with HTML or CSS code on the Wiki Page

GuyKilmore
GuyKilmore
edited March 2014 in Campaign Portal Building
Ok. I am new to HTML, CSS, and Textile and what I have learned is from help individuals from Obsidian Portal and reading lots and lots of the forums. My google-fu has failed me and I am struggling with an issue on my site. I was able to successfully create a mouse over for my Top-Secret button at the bottom of my Wiki-page; however I am unable to get it to center. I am wondering if people have any suggestions.

"Link to the Wiki Page in Question":https://campaign-75666.obsidianportal.com/

Here is the particular bit of code on the page:




Here is the CSS code

/*Top Secret Button*/
.topSecret{background:url('https://db4sgowjqfwig.cloudfront.net/assets/296905/Home_Button_Transparent.png?1392577826') bottom;
display:block;
width:340px;
height:340px;
background-size:340px 340px;}
.topSecret:hover{background:url('https://db4sgowjqfwig.cloudfront.net/assets/303655/Home_Button_Lighter_Transparent.png?1394163352');
background-size:340px 340px;}

Any suggestions would be much appreciated!

Comments

  • Basileus
    Basileus
    Posts: 585 edited March 2014
    If you are going to apply that across many pages, the easiest thing should be to add these two properties to the CSS for the ".topSecret" class:

    @{margin-left: auto; margin-right: auto;}@

    EDIT: If you are going to want it not centered on other pages, I would just use Textile and drop a "p=." in front of it on the wiki editing page, rather than messing with the CSS.
    Post edited by Basileus on
  • GuyKilmore
    GuyKilmore
    Posts: 36
    Thanks for the suggestion.

    True story, I was trying to do that for like four hours (off and on other things) last night when finally I came and made this post. I saw you post the margin-left and margin right thing and I was like, in my head saying, "I was trying that and it wasn't work, but ok, you know what, I will do it this morning, go SEE, and post it right here to learn further insight into my problem." So I go and change the code to your recommendations and, well, you can click the link to see the results.

    "I think Basileus knows Magic or has Psychic Powers":https://campaign-75666.obsidianportal.com/
  • Basileus
    Basileus
    Posts: 585
    LOL, well I've done that before to. Seems like that's always how it is with technical stuff - once I finally ask for help, the solution is always something I could have sworn I tried repeatedly in exactly the same way.
  • WolfLord
    WolfLord
    Posts: 278
    I can confirm the Basileus magic thing... like 100%... Also great page looking sharp!

    "Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
    "Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
    "COTM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order
  • GamingMegaverse
    GamingMegaverse
    Posts: 3,001
    If you are looking for the less involved, non-css way, you can just use @ Text or pic to be centered @
    Basileus is a talented mage, however....
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • GuyKilmore
    GuyKilmore
    Posts: 36
    Huh, I will have to try the Centering one too! Thanks for the suggestion.
  • Basileus
    Basileus
    Posts: 585 edited April 2014
    That's absolutely much easier if you need to center an element here or there on the fly.

    In this case, though, since there are already existing elements with a designated class on almost every wiki page, applying campaign-wide CSS is the more efficient option, I believe (adding two properties to pre-existing CSS, versus adding HTML to every wiki page in your campaign).

    Depends on the use case...
    Post edited by Basileus on
  • GuyKilmore
    GuyKilmore
    Posts: 36
    Yep, something repeated a ton I am finding it better to have it in the CSS code. I do have the occasional heading that I need centered with some text and that makes my life easier.

    Everyone is so helpful! Thanks again!
  • Basileus
    Basileus
    Posts: 585
    Your ISP is being billed $39.99/hour for support services while browsing this forum.

    Thank you for your patronage.
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