Ordre CSS pour mon paragraphe

fgaascht · 24 Juillet 2006

Bonjour,

Ma feuille de style css ne semble plus fonctionner pour ce qui est des paragraphe. Je ne vois pas trop où est l'erreur. Je pense que cela est du à un mauvais positionnement. Si oui, comment faut il que je raisone si je ne veux plus faire de telles fautes ?

Merci d'avance.

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #3366AA;
font-size: 1em;
margin: 30px;
padding: 0;
}

#header
{
height: 50px;
background-color: #36526D;
border-bottom: 1px solid #000000;
}

ul#header
{
height: 25px;
margin: 0;
padding: 0;
list-style-type: none;
}

ul#header li
{
float: left;
text-align: center;
}

ul#header li a
{
width: 126px;
line-height: 25px;
font-size: 0.9em;
font-weight: bold;
letter-spacing: 2px;
color: #36526D;
display: block;
text-decoration: none;
background: url(style/images/bouton.gif);
}

ul#header li a:hover
{
background: url(style/images/bouton-headerinverse.gif);
color: #FFFFFF;
}

#bann
{
height: 150px;
background-image: url(style/images/banniere.jpg);
}

#liner
{
height: 5px;
background-color: #36526D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#conteneur
{
width: 756px;
margin: 0 auto;
background: #ccc url(style/images/trafic.gif) repeat-y 0 0;
border: 1px solid #000000;
}

#texte
{
background-color: #FFFFFF;
margin-left: 150px;
line-height: 1.7em;
padding: 12px;
text-align: justify;
font-size: 0.8em;
border-left: 1px solid #000000;
}

#texte h5
{
font-size: 1em;
text-decoration: underline;
margin: 1px 0px 1px 0px;
}

#texte h4
{
font-size: 1.1em;
text-decoration: underline;
margin: 0px 0px 10px 0px;
}

#texte h3
{
font-size: 1.3em;
text-decoration: underline;
}

#texte info
{
font-size: 1em;
}

#texte a
{
text-decoration: none;
color: #0066CC;
}

#texte a:visited
{
color: #36526D;
}

div[description]
{
font-size: 0.9em;
text-align: justify;
border: 1px solid #555A64;
background: #DDDDDD;
color: #222;
padding: 1px 8px;
margin: 5px 0px 10px 0px;
}

div[lang="en"]
{
font-size: 0.9em;
font-style: italic;
text-align: justify;
border: 1px solid #ddd;
background: #CCB399;
color: #222;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
margin: 3px;
}

div[recette]
{
font-size: 0.9em;
text-align: justify;
border: 1px solid #807F7F;
background: #C3BAA6;
padding: 0px 8px 0px 8px;
margin: 3px;
}

#menu
{
float: left;
width: 150px;
background: #6D7F91;
border-right: 1px solid #000000;
}

.sous_menu
{
height: auto;
margin: 0px 5px;
padding: 0px;
border-top: solid 1px #a3c0d5;
}

.sous_menu li
{
text-align: center;
list-style-type: none;
border-bottom: 1px solid #a3c0d5;
border-left: solid 1px #a3c0d5;
border-right: solid 1px #a3c0d5;
}

.menu_element
{
list-style-type: none;
padding-bottom: 7px;
}

.menu_element h4
{
display: block;
text-align: center;
margin: 10px 5px 3px 5px;
padding: 3px;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
background-color: #36526D;
border: solid 2px #004B91;
}

.menu_element li
{
margin-bottom: 0px;
line-height: 20px
}

.menu_element a
{
font-size: 0.8em;
display: block;
margin: 0px;
padding: 1.5px 1.5px 3px 1.5px;
height: auto;
vertical-align: middle;
color: #CC9200;
background: #204160;
font-weight: bold;
text-decoration: none;
}

.menu_element a:hover
{
text-decoration: none;
color: #204160;
background-color: #CC9200;
}

.menu_element a:visited
{
text-decoration: none;
color: #CCB399;
}

#footer
{
clear: both;
height: 48px;
text-align: center;
font-size: 0.6em;
color: #FFFFFF;
background-color: #36526D;
border-top: 1px solid #000000;
padding-top: 3px;
}

<!-- Debut style paragraphe -->
p
{
text-indent: 35px;
text-align: justify;
margin: 0px;
margin-bottom: 8px;
}
<!-- Fin style paragraphe -->

<!-- Debut zoom image [url="http://mammouthland.free.fr/cours/css/cours8_2.php"]http://mammouthland.free.fr/cours/css/cours8_2.php[/url] -->
img
{
float: left;
border: 1px solid #000000;
margin: 5px;
}	

.thumb
{
float: left;
position: relative; 
top: 0;
left: 0;
margin-left: 0px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0px;
}

.thumb a
{
margin: 0;
text-decoration: none;
}

texte .thumb a:hover
{
background-color: #FFFFFF;
}

.thumb a .grand
{
border: 0px;
display: block;
position: absolute; 
width: 0px; 
}	  

.thumb a:hover .grand
{
border: 1px #000000;
position: absolute; 
top: 30px;
left: 100px;
width: auto; 
height: auto; 
}
<!-- Fin zoom image [url="http://mammouthland.free.fr/cours/css/cours8_2.php"]http://mammouthland.free.fr/cours/css/cours8_2.php[/url] -->

img
{
margin: 4px;
border: none;
}

#footer img
{
text-align: center;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}

table.centre
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}

<!-- Debut tableau cinema -->
table.cinema
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
border-collapse: collapse;
border: 1px solid #000000;
}
<!-- Fin tableau cinema -->

<!-- Debut en-tete tableau cinema -->
table.cinema th
{
padding: 0px 3px;
text-align: center;
border: 2px solid #000000;
}
<!-- Fin en-tete tableau cinema -->

table.cinema td
{
padding: 0px 3px;
text-align: center;
border: 1px solid #000000;
}

Modifié 24 Juillet 2006 par fgaascht

Sarc · 24 Juillet 2006

Bonsoir,

Merci d'utiliser la balise codebox pour les codes très longs, ça évite de faire 8 écrans de code... c'est plus lisible !

Edite ton message quand tu reviens...

Pareil pour voir un problème, il nous faut souvent une URL pour voir où est le problème, le sentir, le juger, et le réparer ensuite, juste le code, ça nous suffit pas !

Donc il faudrait donner l'url et expliquer le problème, on pourra voir après

Bonne soirée !

fgaascht · 24 Juillet 2006

Apres edition de mon premier message, voici:

Un lien vers une de mes page web en creations pour expliquer le problème:

http://users.skynet.be/bk377295/musees.html

Avant d'ajouter le code (#footer img) pour centrer mon logo phpmyvisites (cf un autre topic), j'avais un interligne comme le montre mon code css (p). Malheureusement depuis l'ajout du code pour centrer une image de mon footer, cela ne semble plus fonctionner.

Où peut être l'erreur ?

fgaascht · 25 Juillet 2006

Après un peu de reflexion et en essayant de me rapeller les modifications avant que le problème ne survienne, j'avais ajouté les celebres

<!-- -->

et en fait le problème venait bien de là.

Il me semblait pourtant que cela n'avait aucune influence sur la feuille css, ou est-ce une mauvaise compréhension de ma part ?

Je remarque egalement une marge bleue autour de mes images "zoom" (que je pense tout de même supprimer), d'où peut elle provenir ? De ma feuille de style css ? Mais je ne vois pas trop d'où ? Ou est-ce dû au fait que ce soit un lien ?

Modifié 25 Juillet 2006 par fgaascht

Dudu · 26 Juillet 2006

Salut

Il me semblait pourtant que cela n'avait aucune influence sur la feuille css, ou est-ce une mauvaise compréhension de ma part ?

Et pourtant..

Les styles CSS sont appliqués à l'HTML qu'aura compris le navigateur. C'est-à-dire qu'en cas d'erreur dans ton code HTML le navigateur va procéder à une sorte de gestion des erreurs: il va 'modifier' ton code afin de le rendre affichable le plus correctement possible.

Et c'est cet HTML modifié à qui on va ensuite appliquer les styles.

Ce que je dis n'est pas clair ? Pas grave, Laurent Denis l'a dit de manière plus claire chez Alsacréations.

Et en clair, que dois-tu faire ?

Modifier cette affreuse ligne 134 dans laquelle les navigateurs se prennent les pieds

<div description> il manque l'attribut id, les guillemets... bref tout ce que le navigateur va rechercher.

Là, avec un peu de (mal)chance il va carrément ignorer la balise.. avec toutes les conséquences que ça peut avoir :blush:

Au fait: pense aussi à fermer tes balises uniques avec un slash final (le validateur te dira lesquelles exactement)

PS: tu m'as fait peur, j'ai cru que j'avais tout cassé avec mon code dans l'autre topic :w00t:

**captain_torche** · 26 Juillet 2006

fgaascht -> Effectivement, la couleur bleue est dûe au lien.

Le meilleur moyen de s'en débarasser, est de définir une règle CSS applicable à toutes les images contenues dans des liens :

a img {
 border: 0;
}

Monique · 26 Juillet 2006

Bonjour,

Après un peu de reflexion et en essayant de me rapeller les modifications avant que le problème ne survienne

Cela me donne l'occasion d'un petit conseil...

En cours de création d'une page, après les étapes importantes, faire régulièrement des copies de sauvegardes une fois que le résultat obtenu est satisfaisant (en n'oubliant pas la feuille de style).

Cela permet de ne pas repartir de zéro quand rien ne va plus et qu'on est perdu à la suite d'une série de modifications

fgaascht · 26 Juillet 2006

Pour ce qui est du <div description> et de son manque de "id" et de guillemets, j'étais parti de cette solution proposée par Xethorn à partir de mon message "du texte dans une boite" sur ce même forum ICI

Si vous pouvez me proposer une autre méthode qui soit prise en charge par IE et firefox, je suis prenneur. Mon site web n'est pas encore fini (encore 2 mois de vacances).

Pour ce qui est des images et de la marge, merci pour la reponse mais je pense tout de même supprimer ce zoom qui est vraiment trop superflus.

Dudu · 1 Août 2006

Salut

Désolé de ne répondre qu'une semaine après: vivement les journées de 48h :unsure:

Je ne saisis pas trop le rapport entre la réponse de Xethorn dans la discussion que tu cites et l'usage d'une balise inexistante :huh:

D'autre part, il n'y a pas que Firefox et IE dans la vie (et heureusement quand on voit dans quelle direction va Firefox): si c'est pour apparaitre bien dans IE, pas trop mal dans FF, et destroy pour les autres ce n'est pas la peine je pense

À mon avis il y a deux solutions:

la méthode radicale:
Doubler tous tes attributs lang avec des attributs class, c'est redondant mais au moins ça marche. Tout ça pour IE.
la méthode Dudu:
Respecter les utilisateurs d'IE en leur donnant une mise en page digne de ce nom.. mais pour les "petits plus" que leur navigateur ne sait pas gérer.. et bien tant pis.
Attention avec cette méthode à ne pas tomber dans la discrimination anti-IE: ma maman et peut-être la tienne utilisent IE Donc les messages "vous utilisez IE c'est de la m*** utilisez Firefox" non, mais ont-elles réellement besoin de la petite bordure bleue toute mignonne ? Si le texte est lisible et la mise en page correcte: non.

Ou alors utiliser une armada de Javascript, ou des commentaires conditionnels, ou les deux combinés: je n'en suis pas fan personnellement.

Ce qui est sûr, c'est que ton <div description> met la zone et que ça nuit à la pérennité de ton code: tu veux vraiment retoucher ton code tous les 3 mois à chaque fois qu'une nouvelle version d'un navigateur sort ?

Connexion

Ordre CSS pour mon paragraphe

Sujets conseillés

fgaascht

Sarc

fgaascht

fgaascht

Dudu

captain_torche

Monique

fgaascht

Dudu

Veuillez vous connecter pour commenter

Parcourir

Activité