API tools faq
paste
Caiir

Incastrato CSS for TEFc

Caiir
Dec 13th, 2016
411
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.85 KB | None | 0 0
raw download clone embed print report
  1. <center><div style="width:400px;background-image:url('http://orig09.deviantart.net/5b3e/f/2015/134/7/8/soft_wallpaper_download_desktop_by_animegirl037-d8tbi5u.jpg');background-attachment: fixed;background-position: center;background-repeat: no-repeat;padding:20px;border:8px solid #000;color:#000;background-size: contain;"><h1>Header</h1>
  2.  
  3. <div style="width:350px;background:#000;padding:15px;height:100%;background-color:rgba(0, 0, 0, 0.55);border:5px solid #000;border-bottom:none;text-align:left;"><div style="width:350px;height:100px;overflow:hidden;"><div style="width:360px;height:100px;padding:5px;overflow:auto;"><i>Div 1</i>
  4.  
  5. <center><a class="info">Hover<span> Info here! </a> <a class="info">Hover<span> Info here!</a> <a class="info">Hover<span> Info here! </a></center>
  6.  
  7. Scrolling div.
  8.  
  9. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  10.  
  11. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  12. </div></div></div><div style="width:350px;background:#000;padding:15px;height:100%;background-color:rgba(0, 0, 0, 0.55);border:5px solid #000;"><div style="width:300px;text-align:left;"><div style="width:300px;overflow:hidden;">Main div. Changes height to the amount of content in it!
  13.  
  14. </div></div></div><div style="width:390px;text-align:center;background:#000;">[size=15]<a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('one').style.display='block';">1</a> &#183; <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('two').style.display='block';">2</a> &#183; <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('three').style.display='block';">3</a> &#183; <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('four').style.display='block';">4</a> &#183; <a href="javascript:;" onmousedown="for(var ii=0;ii<5;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('five').style.display='block';">5</a>[/size]</div><div style="width:350px;background:#000;padding:15px;height:100%;background-color:rgba(0, 0, 0, 0.55);border:5px solid #000;text-align:left"><div id="one" class="tab" style="display:block;"> One
  15.  
  16. Keep info inside of the < / div > tags and do not separate them, otherwise these will malfunction!
  17. They do not scroll like the first div, however, so be mindful of the length of some.
  18.  
  19. </div><div id="two" class="tab" style="display:none;"> Two
  20.  
  21. </div><div id="three"class="tab" style="display:none;"> Three
  22.  
  23.  
  24. </div><div id="four"class="tab" style="display:none;"> Four
  25.  
  26. </div><div id="five"class="tab" style="display:none;">Five
  27.  
  28. </div></div><div style="width:395px;height:100%;text-align:left;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="wmode" value="transparent"> <param name="FlashVars" value="mp3=URLHERE?dl=0" /></object>
  29. </div></div></center>
  30.  
  31. <style>BODY {font-size:10px} a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info { position:relative; z-index:24; text-decoration:none } a.info:hover { z-index:25;} a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:2em; left:-12em; width:250px; background:#000; text-align: center; padding: 2px; } a.info { position:relative; z-index:24; text-decoration:none; border-bottom: 0px solid #000000; }</style>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!