28173 sujets

CSS et mise en forme, CSS3

Modérateur
Bonsoir,
Je me suis intéressé à Plume en début de mois et ai enfin abouti à quelque chose de correct (du moins c'est mon opinion, je suis ouvert à toute critique Smiley ravi !)
Je passe à présent à la phase "affichage correct sur IE". Voici les quelques petites choses que je n'arrive pas à régler :

¤ la position absolute de mes boutons "lire" est bien prise en compte par IE mais d'une façon bizarre (en hauteur c'est bon mais en largeur ce n'est pas ça Smiley rolleyes ). Voyez plutôt : http://127.0.0.1/site-jojaba/?/Programmes-traduits/
CSS
Conteneur :
.resource{
	position: relative;
	margin: 0;
	padding: 5px;
	width: auto;
	background: transparent url(img/fond-ressource.png) repeat-y;
	border-bottom: dotted #ABABAB 3px;
	border-right: solid #ABABAB 3px;
}
[code].lecture{
	position: absolute;
	top: 5px;
	right: 5px;
	margin: 0;
	padding: 0;
}

Bouton
.lecture a{
	border: 0;
}

.lecture a:hover{
	border:0;
}

HTML
<div class="resource">
	<h2 class="resource-title">
	<?php pxResTitle('%s'); ?>
	</h2>
	<p class="resource-info">Le <?php pxResDateModification('%d/%m/%y à %HH%M'); ?>
          , par <a href="mailto:<?php pxResAuthorEmail( '%s', 'link'); ?>"><?php pxResAuthor(); ?></a> <?php pxResCategories('<br />dans %s'); ?>.</p>
	  <div class="resource-content">
	  <?php  pxResDescription('%s', 500); ?>
	  </div>
 <p class="lecture"><a href="<?php pxResPath(); ?>"><img alt="Lire..." src="<?php pxInfo('filesurl'); ?>theme/jojaba/img/lire.png" title="Lire..." /></a></p>       
</div>


¤ Les boîtes de sommaire des articles ne s'affichent pas, j'ai l'impression qu'ils se retrouvent sous l'image de fond. Exemple : http://jojaba.free.fr/?/Programmes-traduits/jEdit
CSS
Conteneur :
#article, #news {
	margin-bottom: 10px;
	padding: 5px;
	background: transparent url(img/fond-ressource.png) repeat-y;
	border-bottom: solid #ABABAB 3px;
	border-right: solid #ABABAB 3px;
	color: #000;
	font-size: 1em;
	text-align: justify;
	line-height:15px; 
}

Boîte sommaire :
#art-sommaire{
	float: right;
	margin: 0;
	padding: 40px 5px 10px 10px;
	width: 180px;
}
#art-sommaire .boite{
	background: #F4F4F4;
	border-left: solid #8C8C8C 1px;
	border-top: solid #8C8C8C 1px;
	border-right: solid #8C8C8C 3px;
	border-bottom: solid #8C8C8C 3px;
}

#art-sommaire h2{
	margin: 5px;
	padding: 5px;
	background:  transparent url(img/h2-sidebar.png) repeat-y;
	color: #666;
	border-right: solid #8C8C8C 3px;
	border-bottom: solid #8C8C8C 3px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-variant: normal;
	font-size: 0.8em;
	line-height: 20px;
}

#art-sommaire ol{
	margin:0;
	padding: 0;
	background: transparent;
	list-style-type: none;
	text-align: center;
	font-size: 0.7em;
}

#art-sommaire ol li {
	margin: 2px 10px 2px 10px;
	padding: 0;
	background: #FFF;
	line-height: 1.2em;
}

#art-sommaire ol li a{
	margin: 0;
	padding: 0;
	display: block;
	background: #FFF;
	text-decoration: none;
	color: #000;
	border-bottom: 1px solid #8C8C8C;
	border-right: 1px solid #8C8C8C;
}

#art-sommaire ol li a:hover{
	margin: 0;
	padding: 0;
	background: #FFF;
	border-bottom: 0;
	border-right: 0;
	border-top: 1px solid #8C8C8C;
	border-left: 1px solid #8C8C8C;
	color: #000;
}

#art-sommaire ol li.current a{
	margin: 0;
	padding: 0;
	color: #000;
	background: #FFF;
	border-right: solid #8C8C8C 2px;
	border-bottom: solid #8C8C8C 2px;
	font-weight: bold;
	text-decoration: none;
}

#art-sommaire ol li.current a:hover{
	margin: 0;
	padding: 0;
	background: #FFF;
	color: #000;
	border-right: solid #8C8C8C 2px;
	border-bottom: solid #8C8C8C 2px;
	border-top: 0;
	border-left: 0;
	font-weight: bold;
	text-decoration: none;
}

HTML
<div id="article">
	<?php pxArtListPages('<div id="art-sommaire"><div class="boite"><h2>Sommaire</h2>%s</div></div>'); ?>
  	<h2 class="art-page-title">
        <?php pxArtPageTitle(); ?>
        </h2>
	<?php pxArtPageContent(); ?>
</div>


Merci d'avance pour votre aide.
Modifié par jojaba (01 Sep 2006 - 19:34)
Modérateur
J'ai fait une recherche sur le forum et n'ai rien trouvé qui correspondait à mes problèmes.
Pour les images "Lire..." positionnées en absolute, j'ai bien positionné le parent en relative... cela devrait donc fonctionner sur IE... Smiley decu