up vote 2 down vote favorite
1

I try desperately to add this little png ribbon on the top right of my page. Exactly like this one: http://www.thebestdesigns.com/

I have checked their code, but it gets messed up when I use it in mine. Take a look:

<style>

 html,body {
   background-color: #edecd8;

   margin:0;
   padding:0;
    height:100%;

 }

   #container {min-height:100%; position:relative;}



  #body {
    padding-bottom:20px;
  }


  a {text-decoration: none; color: black;}
  a:hover {color: #555555; border-bottom: 1px dotted black; }


#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:20px;/* Height of the footer */
  background: #edecd8;
  background-image:url(pattern.png);
  text-align:center;
  font-family: Century Gothic, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  }


.intro {
font-family: Century Gothic, sans-serif;
font-size: 15px;
font-variant: small-caps;
}

span.bottom {
    text-align: center;
    width:100%;
    position:absolute;
    bottom:0;   }

#mytable {
padding-top:30px;
}


</style>


</head>

<body>


 <div id="container">


 <div id="body">

<center>
<table div id="mytable" width="650" border="0" cellspacing="0" cellpadding="5" >
    <tbody>
    <tr>
      <td align="center" height="40"><img src="logo.jpg" alt="XXXX" width="100" height="30"></td>
    </tr>
    <tr>
      <td height="20" align="center" class="intro"> <a href="">online store</a> | <a href="">main website</a></td>
    </tr>
    <tr>
      <td height="352" align="center"><img src="ku.jpg" width="500" height="500"></td>
    </tr>
  </tbody>
  </table>
 </center>


  </div>



  <!-- Ola sto span class mporoun na xwresoun? -->
 <div id="footer"><span style class="bottom">  [email protected] | the athens store | Mitropoleos 37 | t: 2xx00    </div>
 </div>


</body>

</html>

I tried something like that, but it gets up when I put it inside the two divs I have. What can I do? Any suggestions?

#ribbon {
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}
share|improve this question
have you tried to add a position:relative to the container div? – whiteb0x Oct 28 '11 at 21:17
But my container is relative! – Andreas Litis Oct 28 '11 at 23:15

1 Answer

up vote 5 down vote

This is all the code you need for the ribbon:

HTML

<div id="new-themes">
    <a href="/design/themes/">Wordpress Themes</a>
</div>

CSS

#new-themes {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}

#new-themes a {
  background: url("/deck/wp-content/themes/tbd/images/ribbon-themes-red.png") no-repeat;
  display: block;
  height: 140px;
  width: 140px;
  text-indent: -9000px;
}

Be sure to place the div right in our body.

share|improve this answer
did you just copy-paste that? I tried the code from the website, but it doesnt work in my code above – Andreas Litis Oct 28 '11 at 23:14
Could you show us your code on a page? Or make a sample on cssdesk.com or jsfiddle.net - this would simplify our task to help you. The HTML you pasted is a bit too less, to see what you like to achieve. – topek Oct 29 '11 at 6:16
Yeap w8 a sec...though I think it works now – Andreas Litis Oct 29 '11 at 8:50
take a look...Does it work on your browser? I think the prob was with an unneccesary center tag. mysecretathens.gr/kulte_test/kulte_tabled.html – Andreas Litis Oct 29 '11 at 9:54
looks great for me – topek Oct 29 '11 at 12:41

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.