Difficulties Transferring code into OP

Bortas
Bortas

Good morning!

I'm trying to input a bit of my own code into OP. I plug in my CSS, create a new page, click the 'source' button for the editor, paste in my html, click the 'source' button again, and it looks just like I want it to. I save the edits, and the page looks nothing at all like I've planned. I have a feeling it has to do with CSS specificity, which I really struggle with.

Any experts care to lend a hand? FYI: it is webkit based code, which means Chrome/Safari but not firefox.

Code in action in real world: http://bortas.net/test.html

Code in action on OP: https://bortstester.obsidianportal.com/

HTML:


<ul id="posters">
<li>
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/634547/Poster_-_Amalia.jpg"; alt="Amalia" width="275"/>
<div class="poster_info">
<h3>Amalia Siannodel</h3>
<p align="justify">Mystic elven archer from the village of Ornthalas, deep in the Eldur Mountains.</p>
<a href="http://morwindl.obsidianportal.com/characters/amalia"; title="Amalia">More info</a>
</div>
</li>
</ul>

CSS:


/* BEGIN Posters */
/* Basic list things. */
#posters
{ list-style:none; margin:100px 0; height:550px; }

/* List items. Take note of the -perspective property. We assign the transform-style to make the info element tranform correctly with the parent. transition is used for animation. */
#posters li
{ display:inline; float:left;
-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }

/* When hovering, we change the perspective. Since this property is defined in the transition, it'll animate accordingly. */
#posters li:hover
{ -webkit-perspective: 5000; }

/* We use the tranform property to enhance the 3d effect, making it rotated. We also add some shadows here, just to add even more depth. Also, for the image, we capture the rotateY event to be animated (transition) */
#posters li img
{ border:5px solid #fcfafa; -webkit-transform: rotateY(30deg); z-index:999;
-moz-box-shadow:0 3px 10px rgba(0,0,0,0.5); -webkit-box-shadow:0 3px 10px rgba(0,0,0,0.5);
-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }

/* Rotate back when hovering the parent element */
#posters li:hover img
{ -webkit-transform: rotateY(0deg); }

/* Poster info box specifications */
.poster_info {
margin:-195px 0 0 55px;
padding:20px;
width:200px;
height:180px;
position:absolute;
background: #fffaaa;
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/424298/parch3.jpg');
background-size: 100% 100%;
box-shadow:0 20px 40px 2px rgba(0,0,0,0.5);
-webkit-transform: translateZ(30px) rotateY(30deg);
-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s;
z-index: 100;}

/* Animate everything to their 2d state when hovering the parent. */
#posters li:hover .poster_info {
-webkit-transform: rotateY(0deg); box-shadow:0 10px 20px 1px rgba(0,0,0,0.5);
margin:-175px 0 0 30px;
}

/* Some basic CSS for the poster info */
.poster_info h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }
.poster_info p { padding-bottom:15px; }
.poster_info a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; text-align:center; margin:0 auto;
-moz-border-radius:5px; -webkit-border-radius:5px; }
.poster_info a:hover, .poster_info a:focus { background-color:#6a191f; color:#fff; }

/* END Posters */

Thanks for any help you can provide,

-bort

Comments

  • Bortas
    Bortas
    Posts: 645

    The HTML above looks jacked: trying again:

     


    <ul id="posters">
    <li>
    <img src="https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/634547/Poster_-_Amalia.jpg"; alt="Amalia" width="275"/>
    <div class="poster_info">
    <h3>Amalia Siannodel</h3>
    <p align="justify">Mystic elven archer from the village of Ornthalas, deep in the Eldur Mountains.</p>
    <a href="http://morwindl.obsidianportal.com/characters/amalia"; title="Amalia">More info</a>
    </div>
    </li>
    </ul>

     

  • Bortas
    Bortas
    Posts: 645

    <ul id="posters">

       <li>

          <img src="https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/634547/Poster_-_Amalia.jpg"; alt="Amalia" width="275"/>

          <div class="poster_info">

             <h3>Amalia Siannodel</h3>

             <p align="justify">Mystic elven archer from the village of Ornthalas, deep in the Eldur Mountains.</p>

             <a href="http://morwindl.obsidianportal.com/characters/amalia"; title="Amalia">More info</a>

          </div>

       </li>

    </ul>

     

  • ChainsawXIV
    ChainsawXIV
    Posts: 529

    The "id" property isn't allowed in wiki page contents (ids must be unique on the page, and allowing it could create conflicts with ids used on the rest of the page), and therefore gets removed automatically when your page is served up to you.

    If you inspect the elements on the page on OP, you can see that your ul is losing its id, which is causing all of your #posters based CSS to stop working.

    Switch to using classes instead of ids, and you should have more luck.

  • cgregory
    cgregory
    Posts: 777

    Only have a couple seconds to look, but you didn't give your ul a class name.

     

    <ul id="posters">

     

    You gave it one in your bortas.net page but not in the OP site. Try changing that and see if it works

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    cgregory: it is in my code, but as Chainsaw noted, OP is removing that, and I hadn't noticed.

    I tried <ul class="posters"> and didn't get it, I've also tried an outside div doing the same, but still not there.

    The unfortunate part is I'm rather dumb with CSS, but I'm decent at editing...

    -bort

  • cgregory
    cgregory
    Posts: 777

    That would likely be because you didn't change the css code to target classes rather than IDs.

    you likely didnt change #posters to .posters in your css

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    Hahah, of course. Like I said, dumb with CSS, but decent at editing :P  THANKS!

    -bort

  • cgregory
    cgregory
    Posts: 777

    Also since you said you are running out of space in your css you may wish to test if you even need webkit prefixes anymore. I tend not to use them anymore as the updated versions of most browsers seem to run fine without prefixes.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

Sign In or Register to comment.

January 2022
Lakes of Blood and Ash

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