[resolu] Qui peux me traduire ce css ?

Question

Pages :

rezolinux

25 Nov 2009 à 19:17

Bonsoir à tous et à toutes,

Je voudrais savoir à quoi ça sert se nettoyeur ci-dessous :

.nettoyeur {
	clear: both;
	margin: 0px;
	padding: 0px;
	border: none;
	height: 0px;
	line-height: 1px;
	font-size: 1px;
}

Merci

Cordialement,
Modifié par rezolinux (05 Jan 2010 - 19:46)

Mikachu

25 Nov 2009 à 19:22

Salut,

C'est le genre de propriétés classiques utilisées pour les pieds de page pour que tous les contenus, quels que soient leur longueur ou leur positionnement ne débordent pas sur le pied de page.
Modifié par Mikachu (25 Nov 2009 - 19:23)

rezolinux

25 Nov 2009 à 19:27

Bonsoir,

Si je comprend bien, ça sert pour que le contenu central ne déborde pas sur le pied de page.

Exacte ?

Cordialement

Mikachu

25 Nov 2009 à 20:08

...qu'aucun ELEMENT ne déborde sur le pied de page, pas spécifiquement la zone centrale, qui selon les sites n'est pas forcément la plus longue. Smiley cligne

rezolinux

25 Nov 2009 à 20:26

Alors pourquoi le texte central déborde sur le pied page ?

Cordialement,

Mikachu

25 Nov 2009 à 20:39

OK...

Bon quand t'as un problème pour lequel tu veux une solution, essaye de donner toutes les informations dès le début, tu gagneras du temps et évitera de faire chercher pour rien...
Personne ici n'a la science infuse.

Une page en ligne permettrait de te renseigner plus précisément sur l'utilité de ces propriétés CSS, et le cas échant expliquer pourquoi tu as ce débordement.

rezolinux

25 Nov 2009 à 20:52

Merci de vouloir m'aider.

Voici le site en question :http://www.electinfoservice.com.

De plus je met le code en entier du css :

/* Correction des standards html */
body {
	background-color: #2A6597;
	padding: 0px;
	margin: 0px;
	text-align: center;
	font-size: 100%;
	font-family: Verdana, sans-serif;
	color: #000000;
}

a {
	text-decoration: none;
	color: #000000;
}

img, table {
	margin: 0px;
	padding: 0px;
	border: none;
}

h1, h2, h3, h4, h5, h6, div, p {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	font-weight: normal;
}

/* Général (commun à tous les squelettes) */
#page {
	width: 980px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	background: url("../images/fond3.gif") repeat-y;
}

#entete {
	width: 100%;
	height: 120px;
	background: url("../images/entete3.gif") no-repeat;
}

#entete h1 {
	padding: 25px;
	padding-bottom: 0px;
	font-size: 300%;
	color: #000000;
}

#conteneur {
	width: 100%;
	text-align: center;
}


#contenu {
	float:right;
	width: 810px;
}

#centre {
	/*background: url("../images/cent.gif") repeat-y;*/
	margin-top: -250px;
	margin-left:-10px;
	padding: 10px;
	float: left;
	width: 640px;
}

#hierarchie {
	float: left;
	width: 100%;
	font-size: 70%;
	line-height: 25px;
	margin-bottom: 5px;
}

#pied {
	width: 100%;
	height: 50px;
	background: url("../images/pied3.gif") no-repeat;
	text-align: center;
	font-size: 60%;
}

.nettoyeur {
	clear: both;
	margin: 0px;
	padding: 0px;
	border: none;
	height: 0px;
	line-height: 1px;
	font-size: 1px;
}

.vignette {
	float: left;
	width: 100px;
	margin-top: 5px;
}



.description {
	width: 100%;
	line-height: 30px;
	padding-top: 10px;
	text-align: center;
	font-size: 80%;
}

.article {
	width: 100%;
	padding-top: 10px;
	text-align: justify;
}

.texte {
	width: 97%;
	padding-left: 1%;
	padding-right: 1%;
	font-size: 80%;
}

.fin {
	width: 100%;
	padding-top: 30px;
}

/* particulier à article.html */

/* particulier à rubrique.html */
#grille {
	width: 94%;
	font-size: 80%;
	text-align: center;
	padding: 2%;
}

#grille h2 {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 5px;
}

.vignette-grille {
	float: left;
	width: 20%;
	padding-bottom: 5px;
	text-align: center;
}

.pagination {
	display: block;
	width: 100%;
	float: left;
	text-align: center;
	font-size: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.pagination a:hover, .pagination a:focus, .pagination .on {
	font-weight: bold;
}

/* particulier à plan.html */
#plan {
	width: 94%;
	font-size: 80%;
	text-align: justify;
	padding: 3%;
}

#plan h2 {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

.rub {
	width: 92%;
	padding: 2%;
	font-weight: bold;
	
}

.ss-rub {
	margin-left: 3%;
}

/* particulier à sommaire.html */
#sommaire {
	width: 50%;
	font-size: 10%;
	text-align: justify;
	padding: 0;
}

/* particulier à auteur.html */
#ecrire-auteur {
	width: 94%;
	font-size: 80%;
	padding: 3%;
}

#ecrire-auteur h2 {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

/* particulier à recherche.html */
#rechercher {
	width: 94%;
	font-size: 80%;
	padding: 3%;
	text-align: justify;
}

#rechercher h2 {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

/* CSS du menu vertical gauche*/

#menu-verticale-gauche ul {
	list-style: none;
	margin: 12px 0 0 0;
	padding: 5px;
	}
	
#menu-verticale-gauche ul li {
    padding: 5px 0 1px 10px;
    min-height: 16px;
}
#menu-verticale-gauche ul ul {
    margin-left: 2px;
    padding: 0 0 0 2px;
	padding:0.5em;
}
#menu-verticale-gauche li.on>a {
    font-weight: bold;
}

#bordure-gauche {
	border:double;
	}
/* CSS du menu vertical droite*/ 


#menu-verticale-droite {
	float: right;
	width: 170px;
	font-size: 80%;
	text-align: center;
	margin-top: -250px;
	}

#menu-verticale-droite ul{
	margin: 0;
	float:left;
	padding: 2px 0; /*espacement du block menu*/
	font: bold 1em "Georgia", "Times New Roman", "Times, serif";
	list-style-type:none;
}

#menu-verticale-droite a{
	display:block;
	margin: 5px 0;
	color: #000; /* couleur du texte*/
	text-decoration:none;
	line-height: 25px;
	width: 120px;
	border: 1px solid black;
	background-color:#DDD;
	text-align: center;
	position:relative;
	float:right;
}

#menu-verticale-droite a:hover{
	/*background: url("../images/negatif.png") repeat-y;*/
	border-width: 2px 1px 1px 2px;
	border-color:#4a4a4a #cecece #4a4a4a;
	background-color:#C90;
	}
	
/* CSS du sous-menus vertical gauche*/

.sous-menu {
	float: right;
	width: 170px;
	font-size: 80%;
	text-align: center;}

.sous-menu ul{
	margin: 0;
	float:left;
	padding: 5px 0; /*espacement du block menu*/
	font: bold 1em "Georgia", "Times New Roman", "Times, serif";
	list-style-type:none;
}

.sous-menu a{
	display:block;
	margin: 15px 0;
	color: #000; /* couleur du texte*/
	text-decoration:none;
	line-height: 25px;
	width: 120px;
	border: 1px solid black;
	background-color:#9CF;
	text-align: left;
	position:relative;
}

.sous-menu a:hover{
	/*background: url("../images/negatif.png") repeat-y;*/
	border-width: 2px 1px 1px 2px;
	border-color:#4ya4a4a #cecece #4a4a4a;
	background:#C90;
	}

Merci d'avance.

Cordialement,

Mikachu

26 Nov 2009 à 10:20

Salut,

Bon ben ton .nettoyeur est présent dans le code, mais sous l'entete, sur lequel il ne doit pas avoir beaucoup d'utilité, et non sous le contenu, ce qui provoquerait le passage du pied de page sous celui ci.

Un clear: both ajouté sur #pied corrigera ton problème. Il s'agit d'un problème de Dépassement des flottants

fvsch

26 Nov 2009 à 10:22

Bonjour,

Le fait que le code HTML soit en bazar n'aide pas. Pourquoi en bazar? Parce qu'en lisant le code produit, il est humainement impossible de savoir sur les bons </div> ou </ul> ou autres balises sont utilisées au bon endroit, si les éléments sont ouverts et fermés correctement, etc.

Une astuce intéressante, surtout si on travaille en PHP ou avec un système de template et qu'on n'a pas de contrôle précis sur l'indentation finale du code, c'est d'utiliser un commentaire pour marquer la fin des principaux conteneurs. Exemples:

<div id="content">
  <div class="intro">
    ...
  </div><!--.intro-->
  <div class="body">
    ...
  </div><!--.body-->
  <div class="pagenav">
    ...
  </div><!--.pagenav-->
</div><!--#content-->

En utilisant PHP ou un moteur de template, tu dois souvent scinder ton code sur plusieurs fichiers différents, et tu ne peux pas facilement faire respecter une indention précise. Tu peux donc obtenir le code suivant:

<div id="content"><div class="intro">







</div><div class="body">
</div>


                                   <div class="pagenav">

</div>

</div></div>

(sans exagérer...)

Si au moins tu as identifié la fin des principaux conteneurs avec un commentaire HTML qui va bien, tu peux t'y retrouver un peu plus facilement et débuguer plus facilement ton code. Ça t'aidera par exemple à ne pas avoir 16 erreurs de validation HTML pour ta page d'accueil.

Donc:
1. Je te conseille d'utiliser cette astuce.
2. Et corrige ton code HTML qui est invalide.

Après on reparle du reste...
(Mais rapidement: tu as un <div class="nettoyeur"></div> dans ton code, mais il n'est à priori pas du tout utilisé au bon endroit.)
Modifié par Florent V. (26 Nov 2009 - 10:22)

rezolinux

27 Nov 2009 à 01:04

Bonjour,

Merci de vos réponses, je corrige comme vous me l'avez dit. Au fait, je suis sous spip.
Je vous tiens au courant dès que j'ai fini.

Cordialement,
Modifié par rezolinux (27 Nov 2009 - 01:05)

Ericf

27 Nov 2009 à 02:31

Salut,

Florent V. a écrit :
Une astuce intéressante, surtout si on travaille en PHP ou avec un système de template et qu'on n'a pas de contrôle précis sur l'indentation finale du code, c'est d'utiliser un commentaire pour marquer la fin des principaux conteneurs.

C'est un principe à utiliser systématiquement quand on bosse en équipe et que des devs doivent reprendre un code HTML qu'ils ne connaissent pas pour l'intégrer dans leur code.
Ainsi commenté et séparé des autres par une ligne vide, chacun des blocs est clairement identifiable et les devs n'ont pas à chercher 3 plombes le code qui les intéresse.

Et quand on bosse sur un fichier qui peut faire plusieurs milliers de lignes de code, on apprécie aussi soi-même l'utilisation d'un tel principe.

Exemple, à mon sens plus clair que celui donné plus haut dans la mesure où les principaux blocs sont marqués au début et à la fin et séparés par une ligne vide :

<!-- GLOBAL -->
<div id="global">

    <!-- HEADER -->
    <div id="header">

		<!-- TITLE -->
		<h1></h1>
		<!-- END TITLE -->

		<!-- MAIN NAV -->
		<ul id="mainNav">
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
		<!-- END MAIN MENU -->

    </div>
    <!-- FIN HEADER -->

	<!-- MAIN CONTENT -->
	<div id="mainContent">

		<!-- SIDEBAR -->
		<div class="sidebar">

		</div>
		<!-- END SIDEBAR -->

		<!-- CONTENT -->
		<div class="content">

		</div>
		<!-- DIV CONTENT -->

	</div>
	<!-- END MAIN CONTENT -->

    <!-- FOOTER -->
    <div id="footer">

    </div>
    <!-- END FOOTER -->

</div>
<!-- END GLOBAL -->

rezolinux

28 Nov 2009 à 21:55

Merci de ta réponse,

Je suis en train de modifier je vous préviendrai dès que j'ai fini les petites correction

Cordialement,

Merci

rezolinux

28 Nov 2009 à 23:09

Bonsoir à tous,

C'est pour vous dire que j'ai mis les commentaires sur le site

http://www.electinfoservice.com

Qui m'aider ?

Merci d'avance.
Cordialement,

jQz

29 Nov 2009 à 12:15

Bonjour,

Ton site web contient encore 14 erreurs qu'il serait judicieux de corriger Smiley cligne

.

A lire : Quelle est la différence entre une classe et un id ?
Modifié par jQz (29 Nov 2009 - 12:15)

rezolinux

29 Nov 2009 à 22:40

Bonsoir,

Je n'arrive pas à corriger les 14 erreurs.

Qui peux-m'aider ?

Merci d'avance,

Cordialement,

fvsch

30 Nov 2009 à 13:53

Bonjour,

rezolinux a écrit :
Je n'arrive pas à corriger les 14 erreurs.

Qui peux-m'aider ?

1. Le validateur du W3C. Il donne des précisions sur les erreurs, bien souvent il suffit de lire. Smiley cligne

2. jQz t'a déjà donné une piste:

jQz a écrit :
A lire : Quelle est la différence entre une classe et un id ?

rezolinux

2 Jan 2010 à 15:45

Salut à tous,

Je vous souhaite mes meilleurs vœux 2010.

Enfin j'ai réussi à valider mes erreurs sur w3c.

cordialement

Nigel

5 Jan 2010 à 07:12

Florent V. a dit :
---
Une astuce intéressante, surtout si on travaille en PHP ou avec un système de template et qu'on n'a pas de contrôle précis sur l'indentation finale du code, c'est d'utiliser un commentaire pour marquer la fin des principaux conteneurs.
---

Au sujet des commentaires, je suis plutôt d'avis de les ajouter en language dynamique.
En effet, dans certains cas, les commentaires HTML ont tendance à faire délirer IE6 ainsi que Safari, oui, et même la version 4. Smiley ohwell

Au moins, avec cette méthode, ça n'arrivera pas, et nous évite des noeuds dans les cheveux.
Modifié par Nigel (05 Jan 2010 - 07:13)

Victor BRITO

5 Jan 2010 à 08:38

Nigel a écrit :
En effet, dans certains cas, les commentaires HTML ont tendance à faire délirer IE6 ainsi que Safari, oui, et même la version 4.

Et quels sont ces cas ? À part celui d'un commentaire placé avant le doctype (qui fait basculer IE, y compris la version 8, en mode Quirks), je ne vois pas. Smiley confus

Nigel

5 Jan 2010 à 08:49

Pour safari par exemple, j'ai eu le coup où un commentaire HTML entre la fin d'un </ul> et le début d'un <form> supprimait la marge droite du <ul> ou la marge gauche du form, je n'ai plus le cas sous les yeux.

Mais oui, il y a des cas un peu étranges parfois. Et dans ces cas précis, on imagine assez mal qu'il puisse s'agir des commentaires html... Vive les noeuds dans les cheveux.

EDIT : Il s'agissait d'un <form> et non d'un <input>, si mes souvenirs sont bons.
Modifié par Nigel (05 Jan 2010 - 09:40)

Pages :

Sujet clos

Questions générales et questions de débutants

[resolu] Qui peux me traduire ce css ?