28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous et merci de tous le travail que vous faite pour nous amateur, débutant qui vient apprendre le CSS/XHTML et tous les autres languages du web.

Je suis actuellement en modification d'un forum Invision Power Board http://www.info-tech-france.net/. J'ai suivi les explications du livre (CSS2) pour la mise en place du cadre élastique mais je me retrouve avec un soucis d'affichage. Le voici en image :

http://img45.imageshack.us/my.php?image=forum2be.png

Vous retrouvez le bug en ligne sur l'adresse ci-dessus.

A présent je vous met le code en détail:

<div class="hautgauche"></div><div class="hautdroit"></div>
<div class="borderwrap" style="display:{$data['div_fc']}" id="fc_{$data['id']}">
	<div class="maintitlecollapse">
		<p class="expand"><a href="javascript:togglecategory({$data['id']}, 0);"><{E_PLUS}></a></p>
		<p><{CAT_IMG}>&nbsp;<a href="{ipb.script_url}showforum={$data['id']}">{$data['name']}</a></p>
	</div>
</div>
<div class="borderwrap" style="display:{$data['div_fo']}" id="fo_{$data['id']}">
	<div class="maintitle">
		<p class="expand"><a href="javascript:togglecategory({$data['id']}, 1);"><{E_MINUS}></a></p>
		<p><{CAT_IMG}>&nbsp;<a href="{ipb.script_url}showforum={$data['id']}">{$data['name']}</a></p>
	</div>
	<table class='ipbtable' cellspacing="1">
		<tr> 
			<th colspan="2" width="66%">{ipb.lang['cat_name']}</th>
			<th align="center" width="7%">{ipb.lang['topics']}</th>
			<th align="center" width="7%">{ipb.lang['replies']}</th>
			<th width="35%">{ipb.lang['last_post_info']}</th>
		</tr>
<tr> 
			<td class="catend" colspan="5"><!-- no content --></td>
		</tr>
	</table>
</div>
<div class="basgauche"></div><div class="basdroit"></div>
<br />


Pour ce qui est du CSS pour eviter de remplir tous l'ensemble du post je vous donne le lien direct:

http://www.info-tech-france.net/style_images/css_4.css

Plus en détails le cadre

.hautgauche,
.hautdroit,
.basgauche,
.basdroit{
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	font-size: 1px;
}

.hautgauche{
	background-image: url(grey/hautgauche.png);
	float: left;
}

.hautdroit{
	background-image: url(grey/hautdroit.png);
	float: right;
}

.basgauche{
	background-image: url(grey/basgauche.png);
	float: left;
}

.basdroit{
	background-image: url(grey/basdroit.png);
	float: right;
}


Merci de toute votre Smiley smile
Modifié par Ertius (25 May 2006 - 13:31)
J'ai trouver mon erreur c'etait l'ordre des div qui n'etait pas correct. Et au niveau du CSS j'ai du enlever float: left;

Smiley smile