Feuille de style CSS & <tab
Galactée
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
kawot Messages postés 65 Date d'inscription Statut Membre Dernière intervention -
kawot Messages postés 65 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
29 08 08 20H45 PM
Bonjour,
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>
29 08 08 20H45 PM
Bonjour,
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>
A voir également:
- Feuille de style CSS & <tab
- Style word - Guide
- Avis sur samsung galaxy tab a9+ - Accueil - Tablettes
- Bruler feuille de laurier - Guide
- Feuille de pointage excel - Télécharger - Tableur
- Samsung kies galaxy tab 3 ✓ - Forum Mobile
6 réponses
Salut,
je peux te faire ça sans tableaux ? ^^ Faire des mises en page sans tableaux est une bonne habitude à prendre, le CSS regorge de belles astuces ;)
Sinon ton histoire d'interrompre le code : c'est pas vraiment ça l'idée, même si je vois à peu près ce que tu veux. Le HTML n'est pas un flux d'instructions que l'on peut contrôler, comme un script PHP ou Javascript... ;)
Coder proprement c'est aussi s'assurer que tous les navigateurs afficheront ton site à peu près de la même façon. Et des fois avec IE, c'est pas facile... :S
Si tu as des questions d'ordre général sur le HTML, mp-moi et je te file mon MSN. Sinon, je voudrais voir ton site dans son état actuel pour avoir une vue d'ensemble du problème ! :)
je peux te faire ça sans tableaux ? ^^ Faire des mises en page sans tableaux est une bonne habitude à prendre, le CSS regorge de belles astuces ;)
Sinon ton histoire d'interrompre le code : c'est pas vraiment ça l'idée, même si je vois à peu près ce que tu veux. Le HTML n'est pas un flux d'instructions que l'on peut contrôler, comme un script PHP ou Javascript... ;)
Coder proprement c'est aussi s'assurer que tous les navigateurs afficheront ton site à peu près de la même façon. Et des fois avec IE, c'est pas facile... :S
Si tu as des questions d'ordre général sur le HTML, mp-moi et je te file mon MSN. Sinon, je voudrais voir ton site dans son état actuel pour avoir une vue d'ensemble du problème ! :)
Tu sais ton ancien site c'est très beau comparé avec ce que je faisais, je recevais la note la plus nul, maintenant je suis euh enfin un peut plus doué et j'ai même un site web à moi, bon je te conseille de lire les tutoriaux lis trop et tu serais une petite génie !
Ce que tu fais s'appelle du perfectionnisme, et je t'admire beaucoup !
Bon alors voilà finalement j'étais parti sur ma lancée j'ai gardé la mise en forme tableau mais... tu verras y'a un ptit problème. Zip !
J'ai mis pas mal d'explications donc j'espère que tu comprendras, mes amis me reprochent parfois d'expliquer mal :/
Enregistre bien le zip, je laisserai le lien que quelques jours. Je suis en train de dépoussiérer mon site (moi aussi ^^).
D'ailleurs si tu veux aller faire un tour, je te préviens c'est bien bordélique ! http://groarh.webmaster.free.fr/
P.S. Il est super ton site, en plus il est bien rempli, t'as du trimer pour faire tout ça :S
P.S.2. J'y pense après coup mais... le problème du débordement peut se résoudre en mettant une div dans le 3e td et en appliquant l'overflow (dont je parle dans le zip) à cette div.
Il faut savoir que la balise div est une boîte : seule, elle ne sert à rien, d'ailleurs elle est invisible, mais elle sert à regrouper d'autres éléments.
Bon alors voilà finalement j'étais parti sur ma lancée j'ai gardé la mise en forme tableau mais... tu verras y'a un ptit problème. Zip !
J'ai mis pas mal d'explications donc j'espère que tu comprendras, mes amis me reprochent parfois d'expliquer mal :/
Enregistre bien le zip, je laisserai le lien que quelques jours. Je suis en train de dépoussiérer mon site (moi aussi ^^).
D'ailleurs si tu veux aller faire un tour, je te préviens c'est bien bordélique ! http://groarh.webmaster.free.fr/
P.S. Il est super ton site, en plus il est bien rempli, t'as du trimer pour faire tout ça :S
P.S.2. J'y pense après coup mais... le problème du débordement peut se résoudre en mettant une div dans le 3e td et en appliquant l'overflow (dont je parle dans le zip) à cette div.
Il faut savoir que la balise div est une boîte : seule, elle ne sert à rien, d'ailleurs elle est invisible, mais elle sert à regrouper d'autres éléments.
Bonjour,
Oui c'est normal, enfaite un tableau ce n'est pas un problème, j'était comme toi avant et maintenant regarde le design que j'ai fait moi même http://www.kawot.com et j'ai que 14 ans une chose vraiment très génial à coup sur, bon si tu accepte les conseils d'un môme ^^ lis tous les tutoriaux du html et du css dans le siteduzero
Oui c'est normal, enfaite un tableau ce n'est pas un problème, j'était comme toi avant et maintenant regarde le design que j'ai fait moi même http://www.kawot.com et j'ai que 14 ans une chose vraiment très génial à coup sur, bon si tu accepte les conseils d'un môme ^^ lis tous les tutoriaux du html et du css dans le siteduzero
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Tout d’abord, merci pour ta réponse si rapide.
Pour tout te dire, je ne peux pas te montrer mon site Web dans son état actuel car il se trouve encore sur mon disque dur.
Ce n’est pas que je ne veux pas te l’envoyé, mais il est trop volumineux pour être expédié par Hotmail par exemple.
Je vais tout t’expliquer.
Il y a deux ans de cela, j’avais pris à la fac « l’option-initiation à un mini site Web ».
Mon prof avait été très généreux sur ma note finale. Je me suis sentie assez mal. Du coup, j’ai fait des pieds et des mains pour m’offrir un Mac, ainsi que ces deux logiciels qui coûtent la peau des fesses, c’est-à-dire : Golive & Photoshop. Je voulais également acquérir Dreamweaver, mais pour certaines raisons, ça n’a pas été possible : ( … ! Mais bon, c’est pas si grave car j’avais commencé à apprendre avec Golive.
Ah pour info, j’avais pris cette option au moment du CPE, (enfin, je m’étais inscrite deux mois auparavant). Du coup, non seulement on n’a pu avoir que la moitié des cours, (vu que les facs françaises étaient bloquées), mais en plus, je devais soi-disant PARTAGER mon ordinateur avec, désolée un sale con. Un ancien prof qui avait décidé de reprendre ses études.
Comme on avait loupé + de la moitié du semestre, notre prof avait insisté auprès de l’administration afin d’acquérir 5 ou 6 nouvelles licences, et d’installer ainsi Golive dans les salles d’informatique.
Mais il faut bien comprendre que lorsque l’on a loupé autant de cours, et que l’on a à peine pu toucher au clavier, eh bien juste 1 mois avant la fin des cours, c’était pas évident de se retrouver toute SEULE devant son ordi.
Du coup, j’ai rendu un travail un peu bâclé. Mais j’ai vraiment fait de mon mieux. Une fois qu’il a été en ligne, je me suis rendue compte que j’avais laissé quelques fautes d’orthographes stupides. Et puis je me demande vraiment qu’est-ce qui m’a pris de choisir cette couleur bleu affreuse : (
A l’époque, je ne savais pas utiliser du tout les listes à puces, alors j’ai dû improviser.
Tout ça pour te dire que cette histoire m’a un peu frustrée, et que je me suis jurée à moi-même, d’essayer de refaire ce site Web, en mieux : ) ! Je sais, c’est con. Mais je suis comme ça.
Donc, si tu veux te foutre de ma gueule : ) tu peux voir la toute première version de mon site Web à l’adresse suivante :
http://sites.univ-lyon2.fr/lettres/nte3/trav_05-06.html
Depuis, j’ai changé le SIMPLE tableau, en 3 tableaux sur la même page, vu que le but de mon site Web est de comparer la même recettes, avec quelques variantes.
Au, je sais qu’au début, j’ai inversé des mots. Mais depuis, dans la nouvelle version, ça va mieux.
Enfin, tu vas tout de même pouvoir voir à quoi il ressemble + ou – 2 ans + tard.
Tu sais, j’aimerais vraiment être en mesure l’améliorer. Sinon, j’aurais pas cassé ma tirelire avec la toute dernière version de Mac = Léopard, + Golive+ Photoshop.
Voilà toute l’histoire.
Oh, pour répondre à ta question, je voudrais vraiment que dans chaque page, il y ait ces trois tableaux, pour le côté COMPARATIF.
Merci mille fois de faire de ton mieux pour m’aider.
Ps1 : Mon site Web se nome « les îles gourmandes ».
Ps2 : Je ne peux pas utiliser MSN, (mais c’est trop long à expliquer)….. : )