Css sous Golive 6.0
Résolu/Fermé
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
-
18 déc. 2007 à 16:58
Utilisateur anonyme - 11 oct. 2008 à 19:05
Utilisateur anonyme - 11 oct. 2008 à 19:05
A voir également:
- Css sous Golive 6.0
- Enlever couleur lien css ✓ - Forum CSS
- Abbyy finereader 6.0 sprint ✓ - Forum Logiciels
- Télécharger adobe acrobat 6.0 professional gratuit - Forum Logiciels
- Microsoft date and time picker control 6.0 (sp6) - Forum Excel
- Visual basic 6.0 download - Télécharger - Divers Utilitaires
20 réponses
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
18 déc. 2007 à 20:36
18 déc. 2007 à 20:36
Bonjour,
S'il s'agit de ne faire fonctionner ça que sur IE, c'est une question sans intérêt.
Si le problème est que ça fonctionne sur IE mais pas sur Ff, alors ça devient intéressant.
Le mieux serait que tu nous montres comme c'est fait.
On pourrait t'indiquer comment intégrer, à la main, des styles adaptés à ton contexte.
++
http://fr.selfhtml.org/css/index.htm
--
S'il s'agit de ne faire fonctionner ça que sur IE, c'est une question sans intérêt.
Si le problème est que ça fonctionne sur IE mais pas sur Ff, alors ça devient intéressant.
Le mieux serait que tu nous montres comme c'est fait.
On pourrait t'indiquer comment intégrer, à la main, des styles adaptés à ton contexte.
++
http://fr.selfhtml.org/css/index.htm
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
19 déc. 2007 à 17:18
19 déc. 2007 à 17:18
Bonjour et merci déjà d'avoir réagi à mon problème.
Pour ce qui est de l'aperçu je voudrais bien mais ce nest pas encore en ligne; y a t- il une méthode?
Vous m'en excuserez mais s' il fallait décrire je dirai que ça ressemble à la section Thèmes du Forum d'Assistance
( sans les icônes bien entendu ) de CCM et se sont des Br dans une cellule.
Compte tenu du fait que seules les styles Classes sont visibles dans la palette Css de Golive je n' ose pas créer d' autres Styles.
Voici ce que le code me donne
.soulign { text-decoration: none }
.colordos { color: #00c7c7 }
Vous remarquerez aisément qu'il n' y a pas de Rollover sur les textes ( je sais pas
encore le faire ).
Aidez moi Svp
Pour ce qui est de l'aperçu je voudrais bien mais ce nest pas encore en ligne; y a t- il une méthode?
Vous m'en excuserez mais s' il fallait décrire je dirai que ça ressemble à la section Thèmes du Forum d'Assistance
( sans les icônes bien entendu ) de CCM et se sont des Br dans une cellule.
Compte tenu du fait que seules les styles Classes sont visibles dans la palette Css de Golive je n' ose pas créer d' autres Styles.
Voici ce que le code me donne
.soulign { text-decoration: none }
.colordos { color: #00c7c7 }
Vous remarquerez aisément qu'il n' y a pas de Rollover sur les textes ( je sais pas
encore le faire ).
Aidez moi Svp
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
19 déc. 2007 à 18:23
19 déc. 2007 à 18:23
Tu peux la publier temporairement sur des sites d'hébergement divers.
Par exemple, https://www.cjoint.com/ où tu peux choisir le fichier à télécharger chez eux et Créer le lien pour ensuite venir nous en donner l'adresse (Copier/Coller).
Sinon, on peut te donner des pistes.
Déjà, “.soulign { text-decoration: none; }” est un peu contradictoire parce que ça choisit de ne pas souligner le texte.
Ensuite, les liens se retrouvent sous la forme “<a href="---">un texte</a>”.
Il suffit alors d'indiquer dans la feuille de style ce qu'on voir se passer dessus.
Par exemple, chez cjoint, une page avec un menu contenant des liens qui agissent différemment que le petit lien de droite.
Tu peux aussi coller le code de ta page ici.
Le code del'exemple
++
Vois Pseudo-formats.
--
Par exemple, https://www.cjoint.com/ où tu peux choisir le fichier à télécharger chez eux et Créer le lien pour ensuite venir nous en donner l'adresse (Copier/Coller).
Sinon, on peut te donner des pistes.
Déjà, “.soulign { text-decoration: none; }” est un peu contradictoire parce que ça choisit de ne pas souligner le texte.
Ensuite, les liens se retrouvent sous la forme “<a href="---">un texte</a>”.
Il suffit alors d'indiquer dans la feuille de style ce qu'on voir se passer dessus.
Par exemple, chez cjoint, une page avec un menu contenant des liens qui agissent différemment que le petit lien de droite.
Tu peux aussi coller le code de ta page ici.
Le code del'exemple
<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Puces cliquables</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" />
<link rel="shortcut icon" href="../favicon.ico" ></link>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #600;
}
#conteneur {
position: relative;
margin: 1em auto;
width: 760px;
text-align: left;
border : 1px solid #f0ffff;
background-color: #8b0000;
color : #eee;
}
#gauche {
float : left;
width : 205px
}
#droite {
float : left;
width : 470px;
padding : 12px 40px;
}
a {
color : #ddd;
}
a:hover {
color : #f00;
}
.menug {
width : 200px;
height : 225px;
padding-top : 10px;
font-size : 1.2em;
font-weight : bold;
background-color : #9e0000;
}
.menug ul {
list-style : none;
}
.menug li {
margin-top : 10px;
}
.menug li a {
display : block; /* pour pouvoir donner des dimensions aux liens */
width : 100%;
height : 30px; /* hauteur des liens */
line-height : 30px; /* centre le texte verticalement */
font-family: Georgia, Verdana, serif;
color : #fcc842;
text-decoration : none;
}
.menug li a:hover { /* au survol par la souris */
color : #ff6347;
}
.menug li a:active { /* au clic sur le lien */
color : #ff0;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="gauche">
<div class="menug">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouvelles</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Accès</a></li>
</ul>
</div>
</div>
<div id="droite">
</div>
<p style="font-size:.9em; position:absolute; right:22px; bottom:10px; ">
En réponse à :
<a href="http://www.commentcamarche.net/forum/affich 4351446 css sous golive 6 0">
css sous Golive 6.0</a>
</p>
<div style="clear:left;">
</div>
</div>
</body>
</html>
++
Vois Pseudo-formats.
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
21 déc. 2007 à 16:18
21 déc. 2007 à 16:18
Merci pour toute l' aide qui m' est offerte jusqu' ici, mais j' aimerai simplement qu'à chaque fois que
je transforme un texte en lien hypertexte, qu'il gardeles mêmes attributs dans les deux navigateurs (IE et Ff ).
En ouvrant ton code dans Golive j' ai remarquer qu' il n'y avait pas que des Styles Classes et
c' est exactement ce que je souhaiterais obtenir comme résultat ( en espérant ne pas avoir raconté des énormités )
Merci encore infiniment pour l'aide.
je transforme un texte en lien hypertexte, qu'il gardeles mêmes attributs dans les deux navigateurs (IE et Ff ).
En ouvrant ton code dans Golive j' ai remarquer qu' il n'y avait pas que des Styles Classes et
c' est exactement ce que je souhaiterais obtenir comme résultat ( en espérant ne pas avoir raconté des énormités )
Merci encore infiniment pour l'aide.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
22 déc. 2007 à 11:48
22 déc. 2007 à 11:48
Les différents navigateurs doivent interprêter les indications CSS de la même manière.
Ce genre de truc simple ne pose pas de problème.
Les class** ont été utilisées pour limiter l'effet désiré à un endroit précis de la page, sur un élément particulier.
Dans l'exemple, il s'agit du menu sur la gauche.
Si tu veux que tous tes liens se comportent de la même façon, il te suffit d'appliquer tes styles à la balise qui sert à créer des liens “<a>” : pseudo-formats pour les liens.
C'est ce qu'on trouve dans le code donné en exemple et qui s'applique donc au petit lien (et à tous les liens qui seraient ajoutés sur la page) qui renvoit à cette discussion, sur la droite
**
Le code que je te donnais en exemple est repris d'une réponse faite à une autre question.
Comme, ici, le menu gauche est unique, je peux utiliser des id et donc écrire
--
Ce genre de truc simple ne pose pas de problème.
Les class** ont été utilisées pour limiter l'effet désiré à un endroit précis de la page, sur un élément particulier.
Dans l'exemple, il s'agit du menu sur la gauche.
Si tu veux que tous tes liens se comportent de la même façon, il te suffit d'appliquer tes styles à la balise qui sert à créer des liens “<a>” : pseudo-formats pour les liens.
C'est ce qu'on trouve dans le code donné en exemple et qui s'applique donc au petit lien (et à tous les liens qui seraient ajoutés sur la page) qui renvoit à cette discussion, sur la droite
a {
color : #ddd;
}
a:hover {
color : #f00;
}En ajoutant du texte, des liens, teste ça<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Des liens personnalisés</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" />
<link rel="shortcut icon" href="../favicon.ico" ></link>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #600;
}
#conteneur {
position: relative;
margin: 1em auto;
width: 760px;
text-align: left;
border : 1px solid #f0ffff;
background-color: #8b0000;
color : #ddd;
}
#gauche {
float : left;
width : 205px
}
#droite {
float : left;
width : 470px;
padding : 12px 40px;
font-family : Verdana, sans-serif;
font-size : 90%;
}
a {
color : #ff69b4;
font-weight : bold;
}
a:hover {
color : #f00;
text-decoration : none;
}
a:active {
color : #000;
text-decoration : none;
}
#menug {
width : 200px;
height : 225px;
padding-top : 10px;
font-size : 1.2em;
font-weight : bold;
background-color : #9e0000;
}
#menug ul {
list-style : none;
}
#menug li {
margin-top : 10px;
}
#menug li a {
display : block; /* pour pouvoir donner des dimensions aux liens */
width : 100%;
height : 30px; /* hauteur des liens */
line-height : 30px; /* centre le texte verticalement */
font-family: Georgia, Verdana, serif;
color : #fcc842;
text-decoration : none;
}
#menug li a:hover { /* au survol par la souris */
color : #ff6347;
}
#menug li a:active { /* au clic sur le lien */
color : #ff0;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="gauche">
<div id="menug">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouvelles</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Accès</a></li>
</ul>
</div>
</div>
<div id="droite">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quam nisi, porttitor vel, mattis nec, auctor id, nulla. In hac habitasse platea dictumst. Nunc porttitor consectetuer diam. Proin facilisis tortor nec ipsum. Suspendisse velit. Maecenas nisi. Cras nibh pede, <a href="#">elementum ut</a>, fringilla eget, volutpat nec, ante. Nunc condimentum consequat neque. Donec imperdiet urna nec erat. Praesent fermentum faucibus nulla.
</p>
<p>
Nam sodales risus ac nisi. <a href="#">Quisque sagittis</a>. Etiam et est. Integer sagittis, sapien ut cursus gravida, mi odio hendrerit nunc, eu imperdiet justo odio in nisi. Donec mauris dolor, porttitor vitae, iaculis sit amet, hendrerit sit amet, lacus. Etiam eros mi, iaculis elementum, tristique vitae, semper sit amet, lacus. Vestibulum vel enim ut <a href="#">dui accumsan gravida. Donec in</a> enim. Nunc tincidunt urna. Nulla eget mi id est scelerisque pulvinar. Curabitur faucibus vestibulum magna. Praesent lorem. Nunc accumsan.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Aenean nunc leo, porta eu, feugiat ut, condimentum eu, mi. Cras tempor ornare urna. Phasellus erat nisi, sollicitudin eu, interdum vel, ornare vel, purus. Suspendisse potenti. Morbi molestie arcu non pede consequat lacinia. Vivamus nec velit id dui ultrices mattis. Proin et <a href="#">enim et neque</a> laoreet fermentum. Sed sodales consectetuer justo. Suspendisse porta nibh sit amet lectus. Nam quam magna, scelerisque venenatis, ullamcorper dignissim, tempus tincidunt, tellus. Phasellus iaculis ornare urna. Nullam risus nibh, dapibus et, vestibulum at, mattis vitae, <a href="#">felis. Nam gravida</a>.
</p>
<p style="font-size:80%; text-align:right; margin-right:1em;" id="generated"><br />Generated 3 paragraphs, 235 words, 1624 bytes of <a href="https://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a><br /><br /><br /><br /></p>
</div>
<p style="font-size:.9em; text-align:right; margin-right:1em;">
En réponse à :
<a href="http://www.commentcamarche.net/forum/affich 4351446 css sous golive 6 0">
css sous Golive 6.0</a>
</p>
<div style="clear:left;">
</div>
</div>
</body>
</html>
**
Le code que je te donnais en exemple est repris d'une réponse faite à une autre question.
Comme, ici, le menu gauche est unique, je peux utiliser des id et donc écrire
#menug {
#menug ul {
…
et
<div id="menug">
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
24 déc. 2007 à 14:05
24 déc. 2007 à 14:05
Splendide.
Merci pour tout tu m' as ouvert un peu l' esprit en ce qui est du code car je suis vraiment à zéro.
J' ai bricolé et obtenu un resultat par les pseudo-formats, seulement il n'est plus possible d'utiliser un
autre type de style ( a; a:hover ) comme dans l'exemple.Peut-on insérer du css de manière à ce qu'il ne
réagisse que dans un tableau (ou une cellule ) en particulier, pas dans toute la page?
Regardes un peu ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>mon resultat</title>
<style type="text/css" media="screen"><!--
a { color: black; text-decoration: none }
a:visited { color: black; text-decoration: none }
a:hover { color: #ff6347; text-decoration: underline }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="273" border="0" cellspacing="0" cellpadding="0" height="350">
<tr height="350">
<td align="left" valign="top" bgcolor="silver" width="108" height="350">
<p><font color="black"><a href="(EmptyReference!)">Lien1</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien2</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien3</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien4</a></font></p>
</td>
<td width="32" height="350"></td>
<td bgcolor="white" width="133" height="350"></td>
</tr>
</table>
<p></p>
</body>
</html>
Merci pour tout tu m' as ouvert un peu l' esprit en ce qui est du code car je suis vraiment à zéro.
J' ai bricolé et obtenu un resultat par les pseudo-formats, seulement il n'est plus possible d'utiliser un
autre type de style ( a; a:hover ) comme dans l'exemple.Peut-on insérer du css de manière à ce qu'il ne
réagisse que dans un tableau (ou une cellule ) en particulier, pas dans toute la page?
Regardes un peu ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>mon resultat</title>
<style type="text/css" media="screen"><!--
a { color: black; text-decoration: none }
a:visited { color: black; text-decoration: none }
a:hover { color: #ff6347; text-decoration: underline }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="273" border="0" cellspacing="0" cellpadding="0" height="350">
<tr height="350">
<td align="left" valign="top" bgcolor="silver" width="108" height="350">
<p><font color="black"><a href="(EmptyReference!)">Lien1</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien2</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien3</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien4</a></font></p>
</td>
<td width="32" height="350"></td>
<td bgcolor="white" width="133" height="350"></td>
</tr>
</table>
<p></p>
</body>
</html>
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
24 déc. 2007 à 16:39
24 déc. 2007 à 16:39
La réponse se trouve déjà dans notre échange.
Sois plus précis.
Dans le code que tu donnes, les 4 liens sont identiques.
Avec quoi fabriques-tu ce code démodé ?
++
Les différentes façons d'insérer des styles :
http://fr.selfhtml.org/css/formats/index.htm
http://fr.selfhtml.org/css/formats/direct.htm
Merci d'utiliser le bouton Code pour présenter le vôtre.
--
Sois plus précis.
Dans le code que tu donnes, les 4 liens sont identiques.
Avec quoi fabriques-tu ce code démodé ?
++
Les différentes façons d'insérer des styles :
http://fr.selfhtml.org/css/formats/index.htm
http://fr.selfhtml.org/css/formats/direct.htm
Merci d'utiliser le bouton Code pour présenter le vôtre.
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
27 déc. 2007 à 11:35
27 déc. 2007 à 11:35
Bonjour,
Désolé pour mon code tout pourri, ce n' est pas moi qui l 'ai ecrit c' est le logiciel (Adobe Golive ), un wysiwyg.
Dans mon annonce je précisais bien n'avoir aucune notion en ce qui est du code.
Désolé pour mon code tout pourri, ce n' est pas moi qui l 'ai ecrit c' est le logiciel (Adobe Golive ), un wysiwyg.
Dans mon annonce je précisais bien n'avoir aucune notion en ce qui est du code.
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
27 déc. 2007 à 12:13
27 déc. 2007 à 12:13
C' est encore moi.Je reviens sur ma préocupation précédente sans vouloir devenir ennuyeux.
Voici le code, et j' aimerai attribuer à la partie orangée un style different de la partie grise
Vraiment désolé pour la qualité de mon code et encore merci pour tout.
Voici le code, et j' aimerai attribuer à la partie orangée un style different de la partie grise
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>mon resultat</title>
<style type="text/css" media="screen"><!--
a { color: black; text-decoration: none }
a:visited { color: black; text-decoration: none }
a:hover { color: #ff6347; text-decoration: underline }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="273" border="0" cellspacing="0" cellpadding="0" height="350">
<tr height="350">
<td align="left" valign="top" bgcolor="silver" width="108" height="350">
<p><font color="black"><a href="(EmptyReference!)">Lien1</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien2</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien3</a></font><br>
<br>
<font color="black"><a href="(EmptyReference!)">Lien4</a></font></p>
</td>
<td width="32" height="350"></td>
<td align="left" valign="top" bgcolor="#ffc397" width="133" height="350"><a href="(EmptyReference!)">Change1</a><br>
<br>
<a href="(EmptyReference!)">
Change2</a><br>
<br>
<a href="(EmptyReference!)">
Change3</a><br>
<br>
<a href="(EmptyReference!)">
Change4</a></td>
</tr>
</table>
<p></p>
</body>
</html>
Vraiment désolé pour la qualité de mon code et encore merci pour tout.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
27 déc. 2007 à 14:54
27 déc. 2007 à 14:54
“Ton” code est correct.
Seulement, il date un peu, il est chargé, il manque de souplesse.
Profite de cet échange pour te confronter au code HTML et CSS.
Dans #5, je précise “Les class** ont été utilisées pour limiter l'effet désiré à un endroit précis de la page, sur un élément particulier.
Dans l'exemple, il s'agit du menu sur la gauche.”
On peut donc constater qu'en créant un id et en s'en servant comme base pour préciser les éléments qui y sont contenus, les styles ne s'appliquent qu'à ces éléments.
Ça marche aussi dans les tableaux.
On peut voir que j'ai utilisé “#menug {” pour créer une “zone”.
Ensuite, j'y fait référence “#menug li a {” pour que les liens de cette zone (placés dans une liste) aient un comportement particulier, limité à cette zone.
On retrouve ça dans le bloc lui-même
Comment ferais-tu dans ton exemple ?
Je te donne une piste, en dessous, dans le code que j'ai adapté à partir du tien.
++
Puisque tu commences à utiliser les CSS, ne peux-tu pas demander à Golive de ne pas te créer de formatage en HTML (<font color="black"> qui ne servent à rien parce que, de toute façon, les liens sont en noir) mais de plutôt le faire par CSS ?
Sinon, tu risques de voir tes efforts contrariés par ce code.
Ma proposition
--
Seulement, il date un peu, il est chargé, il manque de souplesse.
Profite de cet échange pour te confronter au code HTML et CSS.
Dans #5, je précise “Les class** ont été utilisées pour limiter l'effet désiré à un endroit précis de la page, sur un élément particulier.
Dans l'exemple, il s'agit du menu sur la gauche.”
On peut donc constater qu'en créant un id et en s'en servant comme base pour préciser les éléments qui y sont contenus, les styles ne s'appliquent qu'à ces éléments.
Ça marche aussi dans les tableaux.
On peut voir que j'ai utilisé “#menug {” pour créer une “zone”.
Ensuite, j'y fait référence “#menug li a {” pour que les liens de cette zone (placés dans une liste) aient un comportement particulier, limité à cette zone.
On retrouve ça dans le bloc lui-même
<div id="menug">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouvelles</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Accès</a></li>
</ul>
</div>
Les autres liens de la page sont différents parce qu'ils ne peuvent pas être concernés par ces spécifications limitées au “menug”. Ils sont en dehors.
Comment ferais-tu dans ton exemple ?
Je te donne une piste, en dessous, dans le code que j'ai adapté à partir du tien.
++
Puisque tu commences à utiliser les CSS, ne peux-tu pas demander à Golive de ne pas te créer de formatage en HTML (<font color="black"> qui ne servent à rien parce que, de toute façon, les liens sont en noir) mais de plutôt le faire par CSS ?
Sinon, tu risques de voir tes efforts contrariés par ce code.
Ma proposition
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Une proposition</title>
<style type="text/css" media="screen"><!--
body {
background-color : #fff;
}
#table1 {
width : 273px;
background-color : #e2c2aa;
}
#table1 td {
height : 350px;
text-align : left;
vertical-align : top;
}
a {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #ff6347;
text-decoration: underline;
}
--></style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td width="108" style="background-color:#c0c0c0;">
<p>
<a href="#">Lien1</a><br><br>
<a href="#">Lien2</a><br><br>
<a href="#">Lien3</a><br><br>
<a href="#">Lien4</a>
</p>
</td>
<td width="32"></td>
<td width="133" style="background-color:#ffc397;" id="liens_particuliers">
<a href="#">Change1</a><br><br>
<a href="#">Change2</a><br><br>
<a href="#">Change3</a><br><br>
<a href="#">Change4</a>
</td>
</tr>
</table>
<p> </p>
</body>
</html>
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
27 déc. 2007 à 18:53
27 déc. 2007 à 18:53
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Une proposition</title>
<style type="text/css" media="screen"><!--
body {
background-color : #fff;
}
#table1 {
width : 273px;
background-color : #e2c2aa;
}
#table1 td {
height : 350px;
text-align : left;
vertical-align : top;
}
a {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #ff6347;
text-decoration: underline;
}
#menud { color: #20b2aa; font-weight: bold; text-decoration: overline }
--></style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td width="108" style="background-color:#c0c0c0;">
<p>
<a href="#">Lien1</a><br><br>
<a href="#">Lien2</a><br><br>
<a href="#">Lien3</a><br><br>
<a href="#">Lien4</a>
</p>
</td>
<td width="32"></td>
<td width="133" style="background-color:#ffc397;" id="menud">
<a href="#">Change1</a><br><br>
<a href="#">Change2</a><br><br>
<a href="#">Change3</a><br><br>
<a href="#">Change4</a>
</td>
</tr>
</table>
<p> </p>
</body>
</html>
J' ai essayé de comprendre tes explications et à partir du code fourni j' ai fais ceci.
Dans la mesure où tout cà a un sens, je souhaiterais que le id agisse
plutôt au passage de la souris comme un a:hover
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
27 déc. 2007 à 20:03
27 déc. 2007 à 20:03
Bon (-:
Tu commences à comprendre.
Pour faire un test, ajoute du texte
Maintenant, comme tu ne veux personnalier que les liens, mais pas tout le texte de la cellule <td id="menud">, définis plutôt
Que se passe-t-il ?
Pour l'effet au survol des liens par la souris.
Tu utilises déjà un
Il te suffit donc de créer un
**
Je ne sais pas si tu l'as fait à le main, mais prends l'habitude de mettre tout de suite le “;” à la fin de chaque déclaration, même la dernière. Ça t'évitera de chercher d'où vient l'erreur si tu ajoutes une déclaration.
++
Comme on dispose maintenant d'un identifiant propre au <td> de droite, on peut se permettre
Lorsqu'on voudra modifier l'apparence du contenu de ce <td>, c'est dans les styles que ça se fera, pas dans le code HTML. Ça sera beaucoup plus facile à faire.
--
Tu commences à comprendre.
Pour faire un test, ajoute du texte
<td width="133" style="background-color:#ffc397;" id="menud">
<a href="#">Change1</a><br><br>
<a href="#">Change2</a><br><br>
<a href="#">Change3</a><br><br>
<a href="#">Change4</a><br><br>
Comment se comporte ce texte ?
</td>
Que se passe-t-il ?
Maintenant, comme tu ne veux personnalier que les liens, mais pas tout le texte de la cellule <td id="menud">, définis plutôt
#menud a { color: #20b2aa; font-weight: bold; text-decoration: overline;** }Refais le test.
Que se passe-t-il ?
Pour l'effet au survol des liens par la souris.
Tu utilises déjà un
a:hover {
color: #ff6347;
text-decoration: underline;
}pour les autres liens de la page.
Il te suffit donc de créer un
#menud a:hover { … }Tu peux aussi créer des#menud a:active { … }
et
#menud a:visited { … }en prenant soin de les intégrer dans l'ordre pour qu'ils fonctionnent : LoVe HAte (visited - hover - active).
**
Je ne sais pas si tu l'as fait à le main, mais prends l'habitude de mettre tout de suite le “;” à la fin de chaque déclaration, même la dernière. Ça t'évitera de chercher d'où vient l'erreur si tu ajoutes une déclaration.
++
Comme on dispose maintenant d'un identifiant propre au <td> de droite, on peut se permettre
#menud {
width : 133px;
background-color : #ffc397;
}
et
<td id="menud">
<a href="#">Change1</a><br><br>
<a href="#">Change2</a><br><br>
<a href="#">Change3</a><br><br>
<a href="#">Change4</a><br><br>
Comment se comporte ce texte ?
</td>
et on se retrouve avec un code HTML très “propre” et sa mise en forme séparée.
Lorsqu'on voudra modifier l'apparence du contenu de ce <td>, c'est dans les styles que ça se fera, pas dans le code HTML. Ça sera beaucoup plus facile à faire.
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
7 janv. 2008 à 10:40
7 janv. 2008 à 10:40
Voir Message privée
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
8 janv. 2008 à 15:25
8 janv. 2008 à 15:25
Salut.
Me revoici avec une compréhension toute nouvelle grâce à toi.Ce n'est pas encore solide mais j' ai
l' imprssion que le bond a été remarquable.Corrigeons ce nouveau code car j' ai éprouvé quelques
difficutés avec les sous formats menud a:visited * menud a:active.
****
Me revoici avec une compréhension toute nouvelle grâce à toi.Ce n'est pas encore solide mais j' ai
l' imprssion que le bond a été remarquable.Corrigeons ce nouveau code car j' ai éprouvé quelques
difficutés avec les sous formats menud a:visited * menud a:active.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Une proposition</title>
<style type="text/css" media="screen"><!--
body {
background-color : #fff;
}
#table1 { background-color: #e2c2aa; width: 273px }
#table1 td { text-align: left; vertical-align: top; height: 350px }
a {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #ff6347;
text-decoration: underline;
}
#menud { }
#menud a:visited { color: black; font-weight: bold }
#menud a:hover { color: #228b22; font-style: italic; text-decoration: overline }
#menud a:active { color: #808080; font-weight: bold; text-decoration: underline }
--></style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td width="108" style="background-color:#c0c0c0;">
<p>
<a href="#">Lien1</a><br><br>
<a href="#">Lien2</a><br><br>
<a href="#">Lien3</a><br><br>
<a href="#">Lien4</a>
</p>
</td>
<td width="32"></td>
<td width="133" style="background-color:#ffc397;" id="menud">
<a href="#">Change1</a><br><br>
<a href="#">Change2</a><br>
<br>
<a href="#">Change3</a><br>
<br>
<a href="#">Change4</a>
<p>Contenu</p>
</td>
</tr>
</table>
<p> </p>
</body>
</html>
****
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
8 janv. 2008 à 15:56
8 janv. 2008 à 15:56
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive 6"> <title>nouvelle direction</title> </head> <body bgcolor="#ffffff"> <table width="607" border="1" cellspacing="2" cellpadding="0" height="19"> <tr height="19"> <td width="116" height="19">Cell1</td> <td width="116" height="19">Cell2</td> <td width="116" height="19">Cell3</td> <td width="117" height="19">Cell4</td> <td width="116" height="19">Cell5</td> </tr> </table> <p></p> </body> </html>
****
Avec ce code est-il possible de changer la couleur du "<td>" au passage de la souris par les css?
Merci d' avance.
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
8 janv. 2008 à 23:27
8 janv. 2008 à 23:27
C'est possible.
Et tu disposes de tout ce qu'il faut pour pouvoir le faire.
Cependant, certains navigateurs assez utilisés ne l'interprèteront pas.
Il leur faut du <a> pour que les “:hover”… se fassent remarquer.
Et des <a> contenant des <td> ou des <p>, ce n'est pas apprécié. Les navigateurs sont censés en générer des erreurs.
Essaye quand même.
Il est certainement possible de faire ça avec un peu de Javascript.
--
Et tu disposes de tout ce qu'il faut pour pouvoir le faire.
Cependant, certains navigateurs assez utilisés ne l'interprèteront pas.
Il leur faut du <a> pour que les “:hover”… se fassent remarquer.
Et des <a> contenant des <td> ou des <p>, ce n'est pas apprécié. Les navigateurs sont censés en générer des erreurs.
Essaye quand même.
Il est certainement possible de faire ça avec un peu de Javascript.
--
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
9 janv. 2008 à 12:47
9 janv. 2008 à 12:47
Bonjour. Excuses si je déçois mais j' aimerais que toute la cellule change de couleur.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Adobe GoLive 6</title>
<style type="text/css" media="screen"><!--
.cell { width: 100px; height: 19px }
.cell a { color: #deb887; text-decoration: none }
.cell a:hover { color: #e0ffff; text-decoration: underline; background-color: #8b0000 }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="180" border="1" cellspacing="2" cellpadding="0" height="19">
<tr height="19">
<td width="100" height="19">
<div class="cell">
<a href="#">Txt1</a></div>
</td>
<td width="100" height="19">
<div class="cell">
<a href="#">Txt2</a></div>
</td>
<td width="100" height="19">
<div class="cell">
<a href="#">Txt3</a></div>
</td>
</tr>
</table>
<p></p>
</body>
</html>
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
9 janv. 2008 à 19:43
9 janv. 2008 à 19:43
Bon, alors réfléchissons.
Il me semble que tu as compris que le changement de couleur (et autres) au survol par la souris s'obtient avec le “:hover”.
Pour obtenir le changement de la couleur du texte du lien, tu as modifié la “color” dans le “a:hover”.
Ça peut aussi s'appliquer à un <td> (avec les restrictions que je mentionnais) sans l'englober dans un <a>.
Sauf que ce n'est plus la “color” (du texte) que tu veux changer, mais la “background-color” du <td>.
Ton dernier exemple l'a déjà mis en œuvre avec l'ajout d'une <div>. Il fonctionne.
Mais le “:hover” n'est pas appliqué sur le bon élément. Il continue à agir sur les liens, pas sur les <td> ni les <div>
--
Il me semble que tu as compris que le changement de couleur (et autres) au survol par la souris s'obtient avec le “:hover”.
Pour obtenir le changement de la couleur du texte du lien, tu as modifié la “color” dans le “a:hover”.
Ça peut aussi s'appliquer à un <td> (avec les restrictions que je mentionnais) sans l'englober dans un <a>.
Sauf que ce n'est plus la “color” (du texte) que tu veux changer, mais la “background-color” du <td>.
Ton dernier exemple l'a déjà mis en œuvre avec l'ajout d'une <div>. Il fonctionne.
Mais le “:hover” n'est pas appliqué sur le bon élément. Il continue à agir sur les liens, pas sur les <td> ni les <div>
.cell a:hover {Change ça.
--
Galactée
Messages postés
16
Date d'inscription
samedi 5 avril 2008
Statut
Membre
Dernière intervention
1 octobre 2008
29 août 2008 à 20:39
29 août 2008 à 20:39
29 08 08 20h40 PM
Bonjour,
J'ai cru comprendre que vous vous y connaissez en Golive & feuille de style, donc je tente ma chance pour vous exposer mon pb : )
Je possède un Mac OS X version 10.5.2. Processeur 2 X 867 MHz PowerPC G4. Cache de niveau … o par processeur. Mémoire 512 Mo DDR SDRAM. 2007 Apple Inc. Léopard.
Il s’agit d’un ordinateur de bureau.
Je suis débutante à la création de sites Web. J’utilise ‘’Golive’’, version 7.0.2.
J’essaie de construire un site Web sur le thème de la cuisine exotique. C’est pour mon plaisir personnel, mais je prends cependant la chose très au sérieux !
MON PROBLEME SE SITUE AU NIVEAU DE LA FEUILLE DE STYLES C.S.S.
J’ai créé un tableau <table> <tr=1> <td= 3>
- Première colonne sur la gauche = 1 photo insérée.
- Colonne du milieu = Ingrédients, = 12 pixels, CENTER, ITALIQUE, SOULIGNE. Puis toujours dans cette même colonne, mais situé cette fois-ci à la ligne d’en dessous : Pour …. X personnes/ Temps de préparation …X/ Temps de cuisson … X = CENTER, mais vous remarquerez que cette fois-ci, je n’ai pas souligné, ni même mis en gras.
De plus, je cherche à rajouter une liste à puce , du style carré (scare). Je voudrais être également être en mesure d’INTERROMPRE le code momentanément. Vous allez comprendre pourquoi.
Dans la même recette, j’ai souvent différentes étapes. Comme par ex : Pour la SAUCE, bla, bla, bla. Et maintenant … Pour la PATE. C’est vraiment trop moche d’avoir une PUCE , à côté d’une RUBRIQUE ! Il me faut donc EGALEMENT avoir l’équivalent d’un saut de ligne Avant, et après cette nouvelle RUBRIQUE.
- Troisième et dernière colonne située sur la droite. J’ai mis le titre de la recette = Bla, bla, bla = 14 pixels, CENTER, ITALIQUE, SOULIGNE.
Là aussi, je rencontre parfois la même difficulté. Interrompre parfois la PUCE. Et, dans pratiquement tout les cas, à la fin de la 1 ère partie de la recette, je dois DE NOUVEAU interrompre la PUCE.
Pourquoi ?
Tout simplement parce que la plupart des recettes sont assez longues. Le texte DEPASSAIT par rapport à la photo qui se trouve sur la première colonne sur la gauche.
Après m’être prise la tête pendant des mois & des mois, j’ai eu alors l’idée de créer une rubrique (doublon). C’est-à-dire que j’ai dupliqué la même recette. Sur la partie A, dés que le texte commençait à DEPASSER par rapport à la photo, eh bien j’ai tout simplement fait le choix de SUPPRIMER tout le reste du texte qui dépasse, que ce soit par rapport à la rubrique du milieu, ou bien par rapport à la troisième colonne.
J’ai créé un lien, qui en cliquant dessus, BASCULE alors sur une autre page (qui est fait se trouve être à la fois, certes un doublon, mais encore, et surtout le reste de la recette : ) pas con hein ? …. En tout cas pour une débutante : ) Et bien entendu, pour revenir au début de la recette, il y a également un lien.
CONCRETEMENT, QUELS SONT LES DIFFICULTES QUE JE RENCONTRE ?
1) Au niveau de ma feuille de style C.S.S, une fois que j’essaie d’appliquer le style (INGREDIENTS), tout va bien. Par contre, quand pour la ligne d’en dessous, je veux que (Pour… X personnes, Temps de préparation ect….) se retrouvent, certes en 12 px, mais PAS EN GRAS, ni en SOULIGNE.
Eh bien ça me redonne la même présentation que pour la toute première saisie de cette colonne. C’est-à-dire, que pour ‘Ingrédients’, qui lui, se trouve être en gras, et en souligné & CENTER.
Pour rappel, dans les deux cas, CONCERNANT la colonne du milieu, je veux que ce soit CENTER.
2) Je ne sais pas comment faire pour INTERROMPRE le code des PUCES MOMENTANNEMENT, afin de pouvoir saisir une autre rubrique, (que ce soit pour la colonne du milieu, que pour la dernière sur la droite).
J’ai cru comprendre qu’il fallait faire un truc ave (DIV), (ID), mais pour parler franchement, j’y n’y comprends rien. Et je ne sais même pas vraiment à quoi ça sert.
Je vais poster ci-dessous d’une part le code source de ma feuille de style. (Je sais, elle n’est pas tope, mais je débute… : )
Et d’autre part, je vais également poster le code source de mon tableau.
Cela fait vraiment des mois que je galère. Est-ce qu’une bonne âme pourrait avoir pitié de moi : )
Merci à tous par avance ; )
CODE SOURCE DE MA FEUILE DE STYLE C.S.S
Body { font-family: Arial; background-color: #f5f2aa; text-align: center; width: 1000px }
p { color: black; font-size: 12px; text-align: justify; text-indent: 0.5cm; margin-right: 8px; vertical-align: top }
.Bordure { border: solid 2px black }
.Paragraphe2 { color: maroon; font-size: 14px; font-family: "Lucida Calligraphy"; text-align: justify }
.Center { text-align: center }
.Justify { text-align: justify } h1 { color: maroon; font-size: 35px; text-align: center }
.Paragraphe3 { color: maroon; font-size: 20px; font-weight: bold; text-decoration: underline; text-align: center }
.Palignegauche { text-align: left }
.P8imagecentre { }
.Center2 { font-style: italic; font-weight: bold; text-decoration: underline; text-align: center }
.Ccenter3 { font-style: italic; text-align: center }
.Ingredients /* ingrŽdients */ { color: black; font-size: 12px; font-style: italic; font-weight: bold; text-decoration: underline; text-align: center; list-style-type: square; list-style-position: outside }
.titrerecetteetsonderoulement { text-decoration: underline; text-align: center; list-style-type: upper-roman }
CODE SOURCE DE MON TABLEAU
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Poulet aux amandes</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body bgcolor="#ffffff">
<table width="800" border="1" cellspacing="2" cellpadding="0">
<tr valign="top" height="400">
<td valign="top" width="350" height="400"><img src="Tania-images/Sucrees/Divers/Flan-mangue1.jpg" alt="" height="400" width="350" border="0"></td>
<td class="Ingredients" valign="top" width="180" height="400">Ingrédients
<div class="p18">
<p class="p18"><span class="p18">Tomate</span></p>
<p class="p18"><span class="p18">Oignon</span></p>
<p class="p18"></p>
<p class="p18">(Je ne vois pas les puces carré s'afficher, pourquoi ?)</p>
<p class="p18"></p>
<p class="p18"></p>
<p class="p18"></p>
<p class="p18"></p>
<p class="p18"></p>
</div>
</td>
<td class="titrerecetteetsonderoulement" valign="top" width="270" height="400">Poulet aux amandes grillées
<p>1 er pb, je voudrais qu'après le titre de la recette, le déroulement étape par étape ne soit plus en souligné. Par ailleurs, je voudrais que des chiffres romains apparaissent sur la gauche, mais bien que j'ai sélectionné cela dans la feuille de style, ça n'apparaît pas). Pourquoi ?</p>
<p></p>
<p></p>
</td>
</tr>
</table>
<p></p>
</body>
</html>
Bonjour,
J'ai cru comprendre que vous vous y connaissez en Golive & feuille de style, donc je tente ma chance pour vous exposer mon pb : )
Je possède un Mac OS X version 10.5.2. Processeur 2 X 867 MHz PowerPC G4. Cache de niveau … o par processeur. Mémoire 512 Mo DDR SDRAM. 2007 Apple Inc. Léopard.
Il s’agit d’un ordinateur de bureau.
Je suis débutante à la création de sites Web. J’utilise ‘’Golive’’, version 7.0.2.
J’essaie de construire un site Web sur le thème de la cuisine exotique. C’est pour mon plaisir personnel, mais je prends cependant la chose très au sérieux !
MON PROBLEME SE SITUE AU NIVEAU DE LA FEUILLE DE STYLES C.S.S.
J’ai créé un tableau <table> <tr=1> <td= 3>
- Première colonne sur la gauche = 1 photo insérée.
- Colonne du milieu = Ingrédients, = 12 pixels, CENTER, ITALIQUE, SOULIGNE. Puis toujours dans cette même colonne, mais situé cette fois-ci à la ligne d’en dessous : Pour …. X personnes/ Temps de préparation …X/ Temps de cuisson … X = CENTER, mais vous remarquerez que cette fois-ci, je n’ai pas souligné, ni même mis en gras.
De plus, je cherche à rajouter une liste à puce , du style carré (scare). Je voudrais être également être en mesure d’INTERROMPRE le code momentanément. Vous allez comprendre pourquoi.
Dans la même recette, j’ai souvent différentes étapes. Comme par ex : Pour la SAUCE, bla, bla, bla. Et maintenant … Pour la PATE. C’est vraiment trop moche d’avoir une PUCE , à côté d’une RUBRIQUE ! Il me faut donc EGALEMENT avoir l’équivalent d’un saut de ligne Avant, et après cette nouvelle RUBRIQUE.
- Troisième et dernière colonne située sur la droite. J’ai mis le titre de la recette = Bla, bla, bla = 14 pixels, CENTER, ITALIQUE, SOULIGNE.
Là aussi, je rencontre parfois la même difficulté. Interrompre parfois la PUCE. Et, dans pratiquement tout les cas, à la fin de la 1 ère partie de la recette, je dois DE NOUVEAU interrompre la PUCE.
Pourquoi ?
Tout simplement parce que la plupart des recettes sont assez longues. Le texte DEPASSAIT par rapport à la photo qui se trouve sur la première colonne sur la gauche.
Après m’être prise la tête pendant des mois & des mois, j’ai eu alors l’idée de créer une rubrique (doublon). C’est-à-dire que j’ai dupliqué la même recette. Sur la partie A, dés que le texte commençait à DEPASSER par rapport à la photo, eh bien j’ai tout simplement fait le choix de SUPPRIMER tout le reste du texte qui dépasse, que ce soit par rapport à la rubrique du milieu, ou bien par rapport à la troisième colonne.
J’ai créé un lien, qui en cliquant dessus, BASCULE alors sur une autre page (qui est fait se trouve être à la fois, certes un doublon, mais encore, et surtout le reste de la recette : ) pas con hein ? …. En tout cas pour une débutante : ) Et bien entendu, pour revenir au début de la recette, il y a également un lien.
CONCRETEMENT, QUELS SONT LES DIFFICULTES QUE JE RENCONTRE ?
1) Au niveau de ma feuille de style C.S.S, une fois que j’essaie d’appliquer le style (INGREDIENTS), tout va bien. Par contre, quand pour la ligne d’en dessous, je veux que (Pour… X personnes, Temps de préparation ect….) se retrouvent, certes en 12 px, mais PAS EN GRAS, ni en SOULIGNE.
Eh bien ça me redonne la même présentation que pour la toute première saisie de cette colonne. C’est-à-dire, que pour ‘Ingrédients’, qui lui, se trouve être en gras, et en souligné & CENTER.
Pour rappel, dans les deux cas, CONCERNANT la colonne du milieu, je veux que ce soit CENTER.
2) Je ne sais pas comment faire pour INTERROMPRE le code des PUCES MOMENTANNEMENT, afin de pouvoir saisir une autre rubrique, (que ce soit pour la colonne du milieu, que pour la dernière sur la droite).
J’ai cru comprendre qu’il fallait faire un truc ave (DIV), (ID), mais pour parler franchement, j’y n’y comprends rien. Et je ne sais même pas vraiment à quoi ça sert.
Je vais poster ci-dessous d’une part le code source de ma feuille de style. (Je sais, elle n’est pas tope, mais je débute… : )
Et d’autre part, je vais également poster le code source de mon tableau.
Cela fait vraiment des mois que je galère. Est-ce qu’une bonne âme pourrait avoir pitié de moi : )
Merci à tous par avance ; )
CODE SOURCE DE MA FEUILE DE STYLE C.S.S
Body { font-family: Arial; background-color: #f5f2aa; text-align: center; width: 1000px }
p { color: black; font-size: 12px; text-align: justify; text-indent: 0.5cm; margin-right: 8px; vertical-align: top }
.Bordure { border: solid 2px black }
.Paragraphe2 { color: maroon; font-size: 14px; font-family: "Lucida Calligraphy"; text-align: justify }
.Center { text-align: center }
.Justify { text-align: justify } h1 { color: maroon; font-size: 35px; text-align: center }
.Paragraphe3 { color: maroon; font-size: 20px; font-weight: bold; text-decoration: underline; text-align: center }
.Palignegauche { text-align: left }
.P8imagecentre { }
.Center2 { font-style: italic; font-weight: bold; text-decoration: underline; text-align: center }
.Ccenter3 { font-style: italic; text-align: center }
.Ingredients /* ingrŽdients */ { color: black; font-size: 12px; font-style: italic; font-weight: bold; text-decoration: underline; text-align: center; list-style-type: square; list-style-position: outside }
.titrerecetteetsonderoulement { text-decoration: underline; text-align: center; list-style-type: upper-roman }
CODE SOURCE DE MON TABLEAU
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Poulet aux amandes</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body bgcolor="#ffffff">
<table width="800" border="1" cellspacing="2" cellpadding="0">
<tr valign="top" height="400">
<td valign="top" width="350" height="400"><img src="Tania-images/Sucrees/Divers/Flan-mangue1.jpg" alt="" height="400" width="350" border="0"></td>
<td class="Ingredients" valign="top" width="180" height="400">Ingrédients
<div class="p18">
<p class="p18"><span class="p18">Tomate</span></p>
<p class="p18"><span class="p18">Oignon</span></p>
<p class="p18"></p>
<p class="p18">(Je ne vois pas les puces carré s'afficher, pourquoi ?)</p>
<p class="p18"></p>
<p class="p18"></p>
<p class="p18"></p>
<p class="p18"></p>
<p class="p18"></p>
</div>
</td>
<td class="titrerecetteetsonderoulement" valign="top" width="270" height="400">Poulet aux amandes grillées
<p>1 er pb, je voudrais qu'après le titre de la recette, le déroulement étape par étape ne soit plus en souligné. Par ailleurs, je voudrais que des chiffres romains apparaissent sur la gauche, mais bien que j'ai sélectionné cela dans la feuille de style, ça n'apparaît pas). Pourquoi ?</p>
<p></p>
<p></p>
</td>
</tr>
</table>
<p></p>
</body>
</html>
stelroy007
Messages postés
16
Date d'inscription
mercredi 5 décembre 2007
Statut
Membre
Dernière intervention
16 janvier 2008
5
10 janv. 2008 à 17:48
10 janv. 2008 à 17:48
Je fais ce qui suit mais IE ne le reconait pas.
***
***
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Adobe GoLive 6</title>
<style type="text/css" media="screen"><!--
#big { width: 200px; height: 19px }
#big:hover { color: #ff4500; text-decoration: none; background-color: silver; width: 200px; height: 19px }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="180" border="1" cellspacing="2" cellpadding="0" height="19">
<tr>
<td id="big">
<a href="#" ><div id="big">Txt1</div></a>
</td>
<td id="big">
<a href="#"><div id="big">Txt2</div></a>
</td>
<td id="big">
<a href="#"><div id="big">Txt3</div></a>
</td>
</tr>
</table>
<p></p>
</body>
</html>
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 775
10 janv. 2008 à 21:55
10 janv. 2008 à 21:55
Bingo !
Tu l'as trouvé.
--
Tu l'as trouvé.
--
