28172 sujets

CSS et mise en forme, CSS3

Aide sur comprehension d'un bout de code css

Bonjour,

Suite de mon sujet commencé dans le forum ajax.

Je cherchais à intégrer un script de Tabs dans une facebox (lightbox façon facebook).

J'ai enfin trouvé un code source en fouillant sur le net http://bloog.co.uk/3rd/facebox/tabs_test.html, seulement j'aimerai apporter quelques modifications pour l'adapter graphiquement à mon site.

Je me suis donc plongé dans le css qui, dans sa presque totalité, est incompréhensible pour moi...

Quelqu'un pourrait-il m'éclairer sur ce code, ce qui est utile à son fonctionnement et ce qui ne l'est pas, etc ... ?

le css : 
@import "flora.css";/* Caution! Ensure accessibility in print and other media types... */

@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */

.ui-tabs-hide {display: none !important;    }}/* Hide useless elements in print layouts... */

@media print {    .ui-tabs-nav {        display: none;    }}/* Skin */

.ui-tabs-nav, .ui-tabs-panel {font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;    font-size: 12px;

}.ui-tabs-nav {list-style: none;    margin: 0;    padding: 0 0 0 3px;}

.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */    display: block;    clear: both;    content: " ";}

.ui-tabs-nav li {    float: left;    margin: 0 0 0 2px;    font-weight: bold;}

.ui-tabs-nav a, .ui-tabs-nav a span {    float: left; /* fixes dir=ltr problem and other quirks IE */    padding: 0 12px;    background: url(tabs.png) no-repeat;}

.ui-tabs-nav a {    margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */    padding-left: 0;    background-position: 100% 0;    text-decoration: none;    white-space: nowrap; /* @ IE 6 */    outline: 0; /* @ Firefox, prevent dotted border after click */    }

.ui-tabs-nav a:link, .ui-tabs-nav a:visited {    color: #fff;}

.ui-tabs-nav .ui-tabs-selected a {    position: relative;    top: 1px;    z-index: 2;    margin-top: 0;    background-position: 100% -23px;}

.ui-tabs-nav a span {    padding-top: 1px;    padding-right: 0;    height: 20px;    background-position: 0 0;    line-height: 20px;}

.ui-tabs-nav .ui-tabs-selected a span {    padding-top: 0;    height: 27px;    background-position: 0 -23px;    line-height: 27px;}

.ui-tabs-nav .ui-tabs-selected a:link,

.ui-tabs-nav .ui-tabs-selected a:visited,.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */    cursor: text;}

.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */    cursor: pointer;}

.ui-tabs-disabled {    opacity: .4;    filter: alpha(opacity=40);}

.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {    color: #000;}

.ui-tabs-panel {    border: 1px solid #519e2d;    padding: 10px;    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */}/*.ui-tabs-loading em {    padding: 0 0 0 20px;    background: url(loading.gif) no-repeat 0 50%;}*//* Additional IE specific bug fixes... */* html

.ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */    display: inline-block;}*:first-child+html

.ui-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */    display: inline-block;}


le html auquel il réfère :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> 



	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Facebox Tabs &amp; Alert Test</title>	

<!--  jQuery -->  
<script type="text/javascript" src="tabs_test_fichiers/jquery-126.js"></script>

<!-- jQuery UI -->
<script type="text/javascript" src="tabs_test_fichiers/ui_002.js"></script> 

<!-- jQuery Tabs -->
<link rel="stylesheet" href="tabs_test_fichiers/tabs.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="tabs_test_fichiers/ui.js"></script>

<!--  Facebox -->
<link rel="stylesheet" type="text/css" href="tabs_test_fichiers/facebox.css">

<script type="text/javascript" src="tabs_test_fichiers/facebox.js"></script>   

<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox()
    })

</script>
<script type="text/javascript">
	$(document).bind('reveal.facebox', function() {$("#example > ul").tabs(); })
</script>
</head><body>

<a href="#hid" rel="facebox"><h1 style="width: 100%; text-align: center;">Show Tabs &amp; alert in Facebox</h1></a>

<div id="hid" style="display: none;">

        <div id="example" class="flora">
            <ul class="ui-tabs-nav">
                <li class=""><a href="#menu1"><span>One</span></a></li>
                <li class="ui-tabs-selected"><a href="#menu2"><span>Two</span></a></li>
                <li class=""><a href="#menu3"><span>Three</span></a></li>
            </ul>
            <div style="" class="ui-tabs-panel ui-tabs-hide" id="menu1">
                <p>First tab is active by default:</p>
                <pre><code>$('#example &gt; ul').tabs();</code></pre>
            </div>
            <div style="" class="ui-tabs-panel" id="menu2">
Lorem ipsum dolor sit amet </div>
            <div style="" class="ui-tabs-panel ui-tabs-hide" id="menu3">
Lorem ipsum </div>
        </div>
</div>
    <div id="facebox" style="top: 60.8px; left: 426.5px; display: none;">       <div class="popup">         <table>           <tbody>             <tr>               <td class="tl"></td><td class="b"></td><td class="tr"></td>             </tr>             <tr>               <td class="b"></td>               <td class="body">                 <div style="display: block;" class="content"></div>                 <div style="display: block;" class="footer">                   <a href="#" class="close">                     <img src="tabs_test_fichiers/closelabel.gif" title="close" class="close_image">                   </a>                 </div>               </td>               <td class="b"></td>             </tr>             <tr>               <td class="bl"></td><td class="b"></td><td class="br"></td>             </tr>           </tbody>         </table>       </div>     </div></body></html>


Je suis un peu perdu dans tout ça et ce n'est pas faute d'essayer de bidouiller (bien que je comprenne quelques bouts du css ) Smiley confused

Merci beaucoup.

Bonne journée,

Emmanuel
Modifié par emmanuel (18 Nov 2009 - 11:53)
Sujet clos
Aller à