Discussion :

[gérard68]

bjr.
voilà, je me créé une page web, et je place une zone de texte..
la zone est comme ceci..

Code :

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

<td width="304" height="624" colspan="3" rowspan="2" valign="top" align="left" xpos="368" content valign="top" csheight="513">

comment je pourrais placer un contour de couleur autour de cette zone..
j'ai essayé
bgcolor
border color,
mais ça ne fonctionnes pas..

merci si vous avez le petit bout de code..

[Nesmontou]

Salut, dans la balise td, tu peux rajouter

Code :

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

style="border: 1px solid #ff1234;"

Tu auras toutes les infos ici : http://www.w3.org/TR/CSS21/box.html#border-properties

Bon développement ;-)

[gérard68]

excellent, merci bien

[Nesmontou]

N'oublie pas de cliquer sur en bas à gauche de la page ;-)

[gérard68]

oui, mais encore une dernière question au sujet de cette zone de texte..

comment je peut la nommer dans le css?

pour l'appeller à chaque page?
merci

[balu]

Tu peux créer un id ou une classe dans la feuille de styles.

Un id doit être unique dans une page et une classe peut être utilisé plusieurs fois dans la même page.

ID

Dans la feuille de styles :

Code :

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

1
2
3
#bordure {
    border: 1px solid #000;
}

Dans la page :

Code :

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

<td id="bordure">contenu de la cellule</td>

CLASSE

Dans la feuille de styles :

Code :

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

1
2
3
.bordure {
    border: 1px solid #000;
}

Dans la page :

Code :

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

<td class="bordure">contenu de la cellule</td>

[gérard68]

oui,

ma zone de texte avec lien est ceci..

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
 
					<td style="border: 1px solid #0000ff;" width="134" height="734" rowspan="2" align="left" xpos="16" content valign="top" csheight="592">
						<div align="center">
															<p><a onmouseover="return overlib('Accueil du site', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="index.html"><b>Accueil</b></a></p>
								<p><a onmouseover="return overlib('Quest ce le petit format.Son histoire', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="petitformat/petit_format.html" a &gt;html><b>Le petit format.</b></a></p>
								<p><a onmouseover="return overlib('Le dictionnaire sur le petit format', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="mon_dictionnaire/mon_dictionnaire.html" a &gt;html><b>Mon dictionnaire.</b></a></p>
								<p><a onmouseover="return overlib('Toute mes ventes. Pour l\' instant il n\' y a que des albums de disponible.', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="mes_ventes/mes_ventes.html" a &gt;html><b>Mes ventes en tout genre.</b></a></p>
								<p><a onmouseover="return overlib('Personnages celèbres qui nous ont fait et qui nous font encore rever:<UL><LI>Walt Disney, son histoire<LI>Burroughs - Tarzan<LI>Marco Nadal - Kalar<LI>Spirou par Rob Vel<LI>Disks - Pim Pam Poum<LI>Le Fantôme</UL>', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="personnages/personnage.html" a &gt;html><b>Personnages c&eacute;l&egrave;bres.</b></a></p>
								<p><a onmouseover="return overlib('Ma deuxième passion, la photo.', CAPTION, 'La ce sont mes photos');" onmouseout="return nd();" href="mesphotos/mesphotos.html" a &gt;html><b>Mes Photos.</b></a></p>
								<p><a onmouseover="return overlib('Quelques uns de mes sites préférés', CAPTION, 'Quelques liens à visiter');" onmouseout="return nd();" href="mes_liens/mesliens.html" a &gt;html><b>Mes liens favoris.</b></a></p>
								<p><a onmouseover="return overlib('Mes recherches en tout genre', CAPTION, 'Toute mes recherches');" onmouseout="return nd();" href="mesrecherches/listerecherche.htm" a &gt;html><b>Mes recherches.</b></a></p>
								<p><a onmouseover="return overlib('Le forum des petites annonces? Passez vos annonces gratuitement. Il suffit de s\'inscrire.', CAPTION, 'Toute la BD en annonces');" onmouseout="return nd();" href="forum/forum.html" a &gt;html><b>Recherches et ventes de particulier.</b></a></p>
								<p><a onmouseover="return overlib('Des couvertures de petits formats', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="couverturepf/couverturepf.html" a &gt;html><b>Couvertures de petits formats.</b></a></p>
								<p><a onmouseover="return overlib('Des couvertures de livres d\'études, de raretés, d\'albums sur la bd', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="couverturesautre/couvertureautre.html" a &gt;target="_blank"><b>Couvertures de livres d'etudes, de raret&eacute; et autres</b></a></p>
								<p><a onmouseover="return overlib('Queslques couvertures de récits complets', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="couverture/couverture.html" a &gt;html><b>Couvertures de r&eacute;cits complets.</b></a></p>
								<p><a onmouseover="return overlib('Alors là!', CAPTION, 'qui suis je, je vous laisse le découvrir');" onmouseout="return nd();" href="quisuisje/quisuisje.html" a &gt;html><b>Qui suis je?</b></a></p>
								<p><a onmouseover="return overlib('Quelques unes de mes trouvailles', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="trouvailles/trouvailles.html" a &gt;html><b>Mes trouvailles</b></a></p>
								<p><a onmouseover="return overlib('Si ce site vous a plu, n\hésitez pas à laisser un petit mot dans mon livre d\'or', CAPTION, 'Mon livre d\'or');" onmouseout="return nd();" href="livredor/livredor.html?site=a227042" a &gt;html><b>Mon livre d\'or.</b></a></p>
								<p><a onmouseover="return overlib('Mise à jour du site', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="misesajour/miseajour.html"><b>Mise &agrave; jour du site.</b></a></p>
								<p><a onmouseover="return overlib('Adresses utiles', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="adresses/adresses_utiles.html"><b>Adresses utiles.</b></a></p>
							</div>
											</td>

si je comprend bien..

dans ma feuille de style je place cela;

Code :

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

1
2
3
#lien { 
   style="border: 1px solid #0000ff;" width="134" height="734" rowspan="2" align="left" xpos="16" content valign="top" csheight="592"
}

et dans ma page je place ceci..

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
<td id="lien" >
						<div align="center">
															<p><a onmouseover="return overlib('Accueil du site', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="index.html"><b>Accueil</b></a></p>
								<p><a onmouseover="return overlib('Quest ce le petit format.Son histoire', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="petitformat/petit_format.html" a &gt;html><b>Le petit format.</b></a></p>
								<p><a onmouseover="return overlib('Le dictionnaire sur le petit format', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="mon_dictionnaire/mon_dictionnaire.html" a &gt;html><b>Mon dictionnaire.</b></a></p>
								<p><a onmouseover="return overlib('Toute mes ventes. Pour l\' instant il n\' y a que des albums de disponible.', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="mes_ventes/mes_ventes.html" a &gt;html><b>Mes ventes en tout genre.</b></a></p>
								<p><a onmouseover="return overlib('Personnages celèbres qui nous ont fait et qui nous font encore rever:<UL><LI>Walt Disney, son histoire<LI>Burroughs - Tarzan<LI>Marco Nadal - Kalar<LI>Spirou par Rob Vel<LI>Disks - Pim Pam Poum<LI>Le Fantôme</UL>', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="personnages/personnage.html" a &gt;html><b>Personnages c&eacute;l&egrave;bres.</b></a></p>
								<p><a onmouseover="return overlib('Ma deuxième passion, la photo.', CAPTION, 'La ce sont mes photos');" onmouseout="return nd();" href="mesphotos/mesphotos.html" a &gt;html><b>Mes Photos.</b></a></p>
								<p><a onmouseover="return overlib('Quelques uns de mes sites préférés', CAPTION, 'Quelques liens à visiter');" onmouseout="return nd();" href="mes_liens/mesliens.html" a &gt;html><b>Mes liens favoris.</b></a></p>
								<p><a onmouseover="return overlib('Mes recherches en tout genre', CAPTION, 'Toute mes recherches');" onmouseout="return nd();" href="mesrecherches/listerecherche.htm" a &gt;html><b>Mes recherches.</b></a></p>
								<p><a onmouseover="return overlib('Le forum des petites annonces? Passez vos annonces gratuitement. Il suffit de s\'inscrire.', CAPTION, 'Toute la BD en annonces');" onmouseout="return nd();" href="forum/forum.html" a &gt;html><b>Recherches et ventes de particulier.</b></a></p>
								<p><a onmouseover="return overlib('Des couvertures de petits formats', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="couverturepf/couverturepf.html" a &gt;html><b>Couvertures de petits formats.</b></a></p>
								<p><a onmouseover="return overlib('Des couvertures de livres d\'études, de raretés, d\'albums sur la bd', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="couverturesautre/couvertureautre.html" a &gt;target="_blank"><b>Couvertures de livres d'etudes, de raret&eacute; et autres</b></a></p>
								<p><a onmouseover="return overlib('Queslques couvertures de récits complets', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="couverture/couverture.html" a &gt;html><b>Couvertures de r&eacute;cits complets.</b></a></p>
								<p><a onmouseover="return overlib('Alors là!', CAPTION, 'qui suis je, je vous laisse le découvrir');" onmouseout="return nd();" href="quisuisje/quisuisje.html" a &gt;html><b>Qui suis je?</b></a></p>
								<p><a onmouseover="return overlib('Quelques unes de mes trouvailles', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="trouvailles/trouvailles.html" a &gt;html><b>Mes trouvailles</b></a></p>
								<p><a onmouseover="return overlib('Si ce site vous a plu, n\hésitez pas à laisser un petit mot dans mon livre d\'or', CAPTION, 'Mon livre d\'or');" onmouseout="return nd();" href="livredor/livredor.html?site=a227042" a &gt;html><b>Mon livre d\'or.</b></a></p>
								<p><a onmouseover="return overlib('Mise à jour du site', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="misesajour/miseajour.html"><b>Mise &agrave; jour du site.</b></a></p>
								<p><a onmouseover="return overlib('Adresses utiles', CAPTION, 'Toute la BD, rien que de la bd');" onmouseout="return nd();" href="adresses/adresses_utiles.html"><b>Adresses utiles.</b></a></p>
							</div>
 
					</td>

[glloq8]

Dan sla feuille de styles :

Code :

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

1
2
3
4
5
6
#lien { 
   border: 1px solid #0000ff;
   width:134px;
   height:734px;
   text-align:left;
}

[gérard68]

ben, ça ne fonctionnes pas..

je donne un autre exemple..

ça c'est juste une page avec avec la grille et la zone de texte

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 5">
<title>ma page</title>
</head>

<body bgcolor="#ffffff">
<table cool width="606" height="450" usegridx usegridy showgridx showgridy gridx="16" gridy="16" border="0" cellpadding="0" cellspacing="0">
<tr height="144">
<td width="605" height="144" colspan="3"></td>
<td width="1" height="144"><spacer type="block" width="1" height="144"></td>
</tr>
<tr height="305">
<td width="32" height="305"></td>
<td style="border: 1px solid #0000ff;"width="64" height="305" align="left" xpos="32" content valign="top" csheight="305">
<div align="center">
mm
<p>ll</p>
<p>kk</p>
<p>ii</p>
<p>oo</p>
<p>rr</p>
<p>ee</p>
<p>dd</p>
<p></p>
</div>
<p></p>
</td> <td width="509" height="305"></td>
<td width="1" height="305"><spacer type="block" width="1" height="305"></td>
</tr>
<tr height="1" cntrlrow>
<td width="32" height="1"><spacer type="block" width="32" height="1"></td>
<td width="64" height="1"><spacer type="block" width="64" height="1"></td>
<td width="509" height="1"><spacer type="block" width="509" height="1"></td>
<td width="1" height="1"></td>
</tr>
</table>
<p></p>
</body>

</html>

ce qui est en rouge, est la zone quie je veut faire revenir à chaque page

comment je pourrais faire appel au css en sachant qu'à chaque page j'ai une grille de mise en page

[Nesmontou]

Salut, pour ton <td> en rouge tu peux mettre

Code :

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

1
2
3
<td class="monTd" width="64" height="305" align="left" xpos="32" content valign="top" csheight="305">
...
</td>

Et dans ton fichier css

Code :

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

1
2
3
4
.monTd
{
  border: 1px solid #0000ff;
}

Petite remarque, les autres attributs comme width, height... peuvent aussi être spécifiés dans ta feuille de style

Code :

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

1
2
3
width: 64px;
height: 305px;
...

A toi de voir si tu veux les mettre dans ton css ou non

Bon développement ;-)

[gérard68]

merci, je commence à comprendre..

mais dans la page html, qd on veut faire appel au css, la feuille de style que l'on a créé
et que dans la page on ne veut pas avoir les lignes du css qui apparaissent, qu'elle est la fonction qui permet en haut de page de faire appel au css..

<type style css ??

là je cale..

[Nesmontou]

Salut, si tu crées une feuille de style externe, tu la nomme nomfichier.css et dans ta page html, tu mets <link rel="StyleSheet" type="text/css" href="nomfichier.css" /> entre les balises <head>

Bon développement ;-)

[gérard68]

alors voilà ce que j'ai réussi à faire avec un fichier css, et vos conseils m'ont été très utile..
(les liens ne donnent sur rien, c'est juste pour vous montrer le problème)

http://bandesdessinees.info/adresses/adresses_utiles.html

mais j'ai juste un soucis..


qd on ouvre la page avec ie, le scrollbar horizontal on ne le voit pas

avec mozilla, on voit le scrollbar, mais pourtant il n'y a rien à droite


et avec mozilla, la page descend plus vers le bas et pourtant il n'y a rien en bas..

là, je ne voit pas..