Discussion :

[zooffy]

Bonjour

Dans mon site j'ai un TableCell qui contient une image et un placeholder.
A l'affichage, y aun petit espace entre les deux, un ou deux pixel, pas plus. J'arrive pas à les coller l'un sur l'autre.

Voici le code côté HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<asp:TableCell ColumnSpan="3" VerticalAlign="Top" HorizontalAlign="Center" CssClass="cphEntete">
	<img alt="Bannière Générale" src="../App_Themes/Motocultor/banner_840.png" style="border:none 0px Black;" />
	<asp:ContentPlaceHolder ID="cphEnTete" runat="server"></asp:ContentPlaceHolder>
</asp:TableCell>

Pouvez vous m'aider à les coller comme il faut ?

[tomlev]

Je dirais qu'il y a un CellSpacing et/ou un CellPadding sur le tableau, il faut mettre ces propriétés à 0

[zooffy]

Merci pour ton aide.

J'ai déjà mis une classe CSS avec un margin et un padding à 0 pour la table.
J'ai rajouté le cellpadding et le cellspacing à 0, comem tu em l'indique.

Cela ne change rien.

Mais l'espace que je veux supprimer se trouve entre l'image et le placeholder, donc à l'intérieur de la cellule de la table.
C'est un peu comme s'il y avait un <br> automatique

Une autre idée ?

[tomlev]

bizarre... il est rendu comment le placeholder en HTML ? un DIV ?

[zooffy]

Oui, avec un Div sur le quel jai mis une classe CSS (au cas où).

Tu as une idée avec ça ?

[tomlev]

ben en appliquant les bonnes propriétés CSS sur le DIV ça doit pouvoir se faire... tu as mis quoi dans la classe CSS ?

[zooffy]

Je m'aperçois que j'ai fait une petite erreur. Je vais mettre tous les bouts de code en bas du message pour plus de facilité à lire.

Donc, j'ai une masterPage dans laquelle je mets une <asp:table pour gérer ma pésentation.
Dans certaines cellules je mets des ContentPlaceHolder de façon à plcer mes modules dynamiquement.
Dans la cellule qiu accueille l'entête de page (la partie haute du site qui ne bouge pas beaucoup, voir pas du tout) j'ai mis une image par le tag HTML <img et jsute en dessous mon ContentPalceHolder qui ne va acceuillir que le module de Navigation Horizontale (un module qui gère le menu de navigation avec des liens sur une seule ligne, la présentation se faisant par l'habillage des cellules d'une <asp:table et des classes CSS sur les Link).

Du coup, le PlaceHolder ne se traduit pas un DIV. Le DIV, c'est moi qui l'ai mis dans le module de navigation Horizontale. En fait, le ContentPlaceHolder ne se traduit par rien.

Et donc, je ne comrpends toujours pas pourquoi il y a cet espace entre l'image et le module de Navigation Horizontale. Je ne comrepnds pas non plus les <script qui se trouve dans l'interprétation, enfin surotut pourquoi ils sont là et pas plus haut.

Code HTML du module de navigation harizontale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="NAVIHORI_Div">
<asp:Table ID="tblGene" runat="server"></asp:Table> 
</div>

CodeBehind du module de Navigation Horizontale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
	Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
 
		Dim dt As DataTable = New DManager("Datadev").RetournerTable("EXEC GLOBAL_Navigation '" & GetApplicationGUID().ToString & "'," & Id_Menu)
		tblGene.CssClass = "NAVIHORI_tblGene"
		Dim r As New TableRow
		For Each dr As DataRow In dt.Rows
			Dim c As New TableCell
            Dim hl As New HyperLink
            With hl
                .Text = dr.Item("Page_Lien")
                .NavigateUrl = "~/Default.aspx?page=" & dr.Item("Id_Pages")
                .CssClass = "NAVIHORI_Link"
            End With
			c.CssClass = "NAVIHORI_cCentral"
			c.Controls.Add(hl)
			r.Cells.Add(c)
		Next
		tblGene.Rows.Add(r)
	End Sub

Classe CSS appelé par le module de navigation horizontale

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
/*Classe du composant NavigationHorizontale*/
.NAVIHORI_Div
{
    width:100%;
    background-image:url('/App_Themes/Motocultor/menu_background.png');
    border:none 0px Black;
    padding:0px;
    margin:0px;
}
.NAVIHORI_tblGene
{
    border:none 0px Black;
    padding:0px;
    margin:0px;
}
.NAVIHORI_cCentral 
{
    border-left:solid 1px Gray;
    border-right:solid 1px Black;
    padding-left:10px;
    padding-right:10px;
}
.NAVIHORI_Link
{
    color:White;
    text-decoration:none;
    width:100%;
}
.NAVIHORI_Link:hover
{
    background-color:Gray;
    width:100%;
}

Page interpétée, juste la partie de la cellule de table qui conteint l'entête

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<td class="cphEntete" align="center" valign="top" colspan="3">
					    <img alt="Bannière Générale" src="../App_Themes/Motocultor/banner_840.png" style="border:none 0px Black;" />
 
	<script type="text/javascript" src="/scripts/global.js"></script>
	<script type="text/javascript">
function OuvrirPopupParamD(page, boxWidth, boxHeight, toolbar, status, directories, menubar, location, scrollbars, resizable) {
if (document.body) {
	var screenWidth = (document.body.clientWidth);
	var screenHeight = (document.body.clientHeight);
}
else {
	var screenWidth = (window.innerWidth);
	var screenHeight = (window.innerHeight);
}
//var boxLeft = (screenWidth/2) - (boxWidth/2);
//var boxTop = (screenHeight/2) - (boxHeight/2);
var boxLeft = 50;
var boxTop = 50;
window.open(page, 'fenpopup', 'Width='+boxWidth+',Height='+boxHeight+',Left='+boxLeft+',Top='+boxTop+',toolbar='+toolbar+',status='+status+',directories='+directories+',menubar='+menubar+',location='+location+',scrollbars='+scrollbars+',resizable='+resizable);
}
	</script>
	<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$cphEnTete$smGlobal', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
		//]]>
</script>
 
 
<div class="NAVIHORI_Div">
<table id="ctl00_cphEnTete_Navigationhorizontale_tblGene" class="NAVIHORI_tblGene" border="0">
			<tr>
				<td class="NAVIHORI_cCentral"><a class="NAVIHORI_Link" href="Default.aspx?page=53">Accueil</a></td><td class="NAVIHORI_cCentral"><a class="NAVIHORI_Link" href="Default.aspx?page=55">Forum</a></td><td class="NAVIHORI_cCentral"><a class="NAVIHORI_Link" href="Default.aspx?page=56">Partenaires</a></td><td class="NAVIHORI_cCentral"><a class="NAVIHORI_Link" href="Default.aspx?page=57">Plan d'accés</a></td>
			</tr>
		</table> 
</div></td>

J'espère que c'est pas trop lourd en code pour bien comprendre.

[tomlev]

Je sais pas trop... essaie de mettre l'image et le ContentPlaceHolder dans 2 cellules distinctes. Normalement s'il n'y a pas de cellspacing et cellpadding ça devrait être bien collé

Sinon c'est bizarre ton javascript en plein milieu, il devrait être dans l'en-tête de la page...
Normalement, quand tu crées une MasterPage, il te crées un ContentPlaceHolder dans le <head>. Dans tes pages de contenu, si tu veux mettre du script, il faut le mettre dans un Content qui s'affiche dans ce ContentPlaceHolder

[zooffy]

J'ai suivi ton idée et j'ai bricolé un truc carrément pas propre, mais au moins, ça marche :
CodeHTML de la MasterPage, celluele de l'entête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<asp:TableCell ColumnSpan="3" VerticalAlign="Top" HorizontalAlign="Center" CssClass="cphEntete">
	<asp:Table ID="tblEntete" runat="server" Width="100%" CssClass="tblEntete">
		<asp:TableRow CssClass="tblEntete">
			<asp:TableCell CssClass="tblEntete"><img alt="Bannière Générale" src="../App_Themes/Motocultor/banner_840.png" style="border:none 0px Black;" /></asp:TableCell>
		</asp:TableRow>
	             <asp:TableRow CssClass="tblEntete">
			<asp:TableCell CssClass="tblEntete"><asp:ContentPlaceHolder ID="cphEnTete" runat="server"></asp:ContentPlaceHolder></asp:TableCell>
		</asp:TableRow>
	</asp:Table>
</asp:TableCell>

Et le code de la classe CSS tblEntete :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.tblEntete
{
    border-collapse:collapse;
    border:none 0px Black;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
}

Avec ça, blindé sur les espaces et mon image te mon menu sont collés.

Sinon, pour le contentPlaceHolder, je comprends pas trés bien.

Pour les scripts qui traine, je comprends ce que tu veux dire. Mais tout le script qu'on retrouve dans la versoin interprétée n'est pas de moi. Il y en a une partie du FrameWork.

Je vais suivre ton conseil de faire un Content spécial pour le script

Bon ben merci. La commuanuté métalleuse de la région de Vannes te sera reconnaissante. Grâce à toi le site du Motocultor Festial va voir le jour dans les prochains jours.

[tomlev]

Bon ben merci. La commuanuté métalleuse de la région de Vannes te sera reconnaissante. Grâce à toi le site du Motocultor Festial va voir le jour dans les prochains jours.

Cool ! Et vive la Bretagne