1er site CSS

22 Février 2006

Bon j'ai décidé finalement de pas faire de tableau, ou presque pas !

J'ai un souci par contre

Je dois mettre un Logo à gauche et un autre au même niveau à droite.

Jusque là tous va bien voici mon code CSS (Le 1er ci dessous). Ensuite je veux mettre un menu sous le logoM2 mais au meme niveau que le logoM surtout pas en dessous. J'ai rajouter un peu de code (2eme code) mais ça ne fonctionne pas.

.head1 {
width: 764px;
height: 170px;
}

.logoM {
float: left; /* alignement du logo à gauche*/
margin-left: 0px;  /* placement du logo dans son conteneur, head1 */
margin-top: 0px;
border: 0;
}

.logoM2 {
float: right; /* alignement du logo à droite*/
margin-right: 10px;  /* placement du logo dans son conteneur, head1 */
margin-top: 10px;
border: 0;
}

.head2 {
float: right; 
width: 380px;  
height: 20px;
}

.head2 a{font-size: 16px;font-weight: bold;color: #060C6F;
text-decoration: none;
margin-left: 20px; /* espacement entre chaque sous-menu */
}

Une solution ??

Modifié 22 Février 2006 par kaporal-7

**captain_torche** · 22 Février 2006

Dans l'idéal, il faudrait que tu postes ton HTML également, qu'on puisse avoir une idée de l'organisation de ton code.

22 Février 2006

Dans l'idéal, il faudrait que tu postes ton HTML également, qu'on puisse avoir une idée de l'organisation de ton code.

<{POST_SNAPBACK}>

Oui c'est mon code HTML

<!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">

<head>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="file:///C|/Documents and Settings/People/Bureau/M/3.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<div align="center">
  <table width="764" border="1">
    <tr>
      <td><div align="left">
        <p><img src="logoM.jpg" class="logoM" alt="logoM" /><img src="logoM2.jpg" class="logoM2" alt="logoM" /></p>
      </div>
	  <div class="head2">  <a href="...">Services</a>  <a href="...">Produits</a>  <a href="...">Forum</a>  <a href="...">Catalogue</a>  <a href="...">Contacts</a></div></td>
    </tr>
  </table>
</div>

</body>
</html>

22 Février 2006

Finalement en rajoutant ça

.head2 {
margin-left: 370px;
margin-top: 150px;
width: auto;  
height: 20px;
}

.head2 a{font-size: 16px;font-weight: bold;color: #060C6F;
text-decoration: underline;
margin-left: 20px; /* espacement entre chaque sous-menu */
}

Ca marche :fete:

**captain_torche** · 22 Février 2006

Bon, un petit truc vite fait (donc pas forcément super-génial), mais pour te donner une idée du "sans tableau".

<!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">
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#header {
	margin: auto;
	margin-top: 10px;
	padding: 2px;
	width: 764px;
	height: 30px;
	border: 1px solid #000;
}
#header .logo1 {
	float: left;
}
#header .logo2 {
	float: right;
}
#header ul {
	float: left;
	list-style-type: none;
	width: 600px;
	text-align: center;
}
#header li {
	display: inline;
}
#header a {
	color: #060C6F;
	text-decoration: none;
	font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<div id="header">
	<img src="logoM.jpg" alt="logoM" class="logo1" />
	<ul>
		<li><a href="">Services</a></li>
		<li><a href="">Produits</a></li>
		<li><a href="">Forum</a></li>
		<li><a href="">Catalogue</a></li>
		<li><a href="">Contacts</a></li>
	</ul>
	<img src="logoM.jpg" alt="logoM" class="logo2" />
</div>
</body>
</html>

Bon, j'ai mis le CSS en interne pour tout avoir dans un seul fichier, mais c'est effectivement une bonne idée de l'externaliser. Par contre, pense à mettre un chemin relatif vers ton fichier CSS (parce que je doute que ton hébergeur comprenne le c:\Documents and settings\People\Bureau\M\3.css

22 Février 2006

Si quelqu'un pouvait m'aider ??? Je cherche à faire maintenant 3 COLONNES, une pour un menu à gauche, l'autre le corps de ma page au centre avec du texte et la troisième un autre menu à droite ?? :fete:

**captain_torche** · 22 Février 2006

Je pense que tu trouveras ton bonheur sur le site d'alsacreations.

steph13 · 22 Février 2006

Pour trois colonnes, il faut utiliser la fonction "float" dans tons css.

#col1{
float:left;
width: 150px
...
}

col2{
float:right;
width:150px;
...
}

colcentre{
margin:0px 150px 0px 150px;
...
}

Quelques chose dans ce goût la...

Voir gabarits css

22 Février 2006

J'ai un bug. J'ai fais trois colonne comme prévu, tout est ok. Seulement je veux rajouter une ligne en bas du site, mais lorsque je saute une ligne dans l'une des trois colonne, la ligne du bas de rétrécit. Que faire ?

Si je rajoute "float" ça deforme la taille de ma page :evil:

body {
	background-color:white;
	margin:0px 0px 0px 0px;
	margin-top: 5px;
}

.head1 {/*Définit la position des Logo M et M2*/
width: 764px;
height: 170px;
}

.head2 {/*Menu*/
margin-left: 370px;
margin-top: 145px;
width: auto;  
height: 15px;
}

.head2 a{font-size: 16px;font-weight: bold;color: #060C6F;/*Caractéristiques de Head*/
text-decoration: underline;
margin-left: 20px; /* espacement entre chaque sous-menu */
}

.gauche { /* définition de la colonne gauche */
  float:left ; /* flotte à gauche */
  width:24% ; /* largeur : 24% de .container */
  background-color:#FE6001 ; /* couleur de la colonne */
  height:100% ; /* hauteur : 100% du .container */
  margin:0 ; padding:0} /* marges */

.centre {/* définition de la colonne centre */
  float:left ; /* flotte à gauche */
  width:51% ; /* largeur : 50% de .container */
  height:100% ; /* hauteur : 100% du .container */
  margin:0;padding:0 ; /* marges */
  background-color:#760587; /* couleur de la colonne */
  border-left:4px solid white; /* bordure gauche */
  border-right:4px solid white} /* bordure droite */

.droite { /* colonne droite */
  float:left ; /* flotte à gauche */
  width:24% ; /* largeur : 23% de .container */
  background-color:#FE6001 ; /* couleur de la colonne */
  height:100% ; /* hauteur : 100% du .container */
  margin:0 ; padding-left:0}/* marges */

.spacer { /* force au retour à la ligne après des fenêtres float */
  clear:both 
}

.bas { /* définition de la colonne bas*/
  width: 764px;
  height: 20px;
  background-color:#760587 ;
  margin:0 ; padding-left:0
}

.logoM {
float: left; /* alignement du logo à gauche*/
margin-left: 0px;  /* placement du logo dans son conteneur, head1 */
margin-top: 0px;
border: 0;
}

.logoM2 {
float: right; /* alignement du logo à droite*/
margin-right: 10px;  /* placement du logo dans son conteneur, head1 */
margin-top: 10px;
border: 0;
}

h1 {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
}
h2 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
h3 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
p {
	font-family:verdana, sans-serif;
	font-size:80%;
	color:#FE6001;
	text-align:left;
	margin-left:0px;
	margin-right:0px;
	margin-top: 2px;
}
li {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:none;
}
a:visited {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-decoration:underline;
}
table {
border-color:#760587;
border-style:dotted;
border-width:1px;
}
td {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
text-align:left;
background-color:transparent;
border-style:solid;
border-width:0px;
}

MON CSS

**captain_torche** · 22 Février 2006

Et ton HTML ?

22 Février 2006

Et ton HTML ?

<{POST_SNAPBACK}>

<!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">

<head>
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="file:///C|/Documents and Settings/People/Bureau/M/3.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<div align="center">
  <table width="764" border="1">
    <tr>
      <td><div align="left">
        <p><img src="logoM.jpg" class="logoM" alt="logoM" /><img src="logoM2.jpg" class="logoM2" alt="logoM" /></p>
      </div>
   <div class="head2">  <a href="...">Services</a>  <a href="...">Produits</a>  <a href="...">Forum</a>  <a href="...">Catalogue</a>  <a href="...">Contacts</a></div>
   
   <p></p>
   <div class="gauche">
     <p> </p>
     </div>
   <div class="centre">
     <h1>Bienvenue chez MEDIAKAP.NET le spécialiste de la conception de sites Internet Design. Nous mettons toutes vos envies à votre portée : création du site Internet, relookage, réservation du nom de domaine, hébergement, référencement avec des outils très professionnels, Statistiques, Formation à Internet et ses logiciels, prospectus commercial ... </h1>
     <h1>Charte graphique personnalisée, avec   vous  aurez un site Internet tendance et design, unique ! Intéressez ? Contactez  nous immédiatement.
       </p>
                </h1>
   </div>
   <div class="droite">
     <p> </p>
     </div> 
	<p></p>
      <div class="bas">
        <p> </p>
        </div></td>
    </tr>
  </table>
</div>
</body>
</html>

Le voici mais j'ai rajouter un peu de texte

**captain_torche** · 22 Février 2006

Bon, j'ai un peu modifié ton code.

Tu as du mal à te séparer des tableaux, hein !

Je t'ai donc supprimé toute trace de tableau (tu n'en utilisais qu'un, une ligne, une cellule -> j'ai fait la même chose avec un DIV).

Sinon, ton souci principal, venait du fait que ton footer, n'avait pas d'instruction de placement.

Tu avais bien spécifié un .spacer, mais il n'était pas utilisé dans le code.

Il a donc suffi de spécifier un clear: both dans le footer (.bas), et le tour était joué.

<!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">

<head>
<style type="text/css">
body {
margin: 0;
margin-top: 5px;
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
text-align:left;
}

.head1 {
width: 764px;
height: 170px;
}

.head2 {
margin-left: 370px;
margin-top: 145px;
width: auto;
height: 15px;
}

.head2 a{
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: underline;
margin-left: 20px;
}

.gauche { /* définition de la colonne gauche */
float:left ; /* flotte à gauche */
width:24% ; /* largeur : 24% de .container */
background-color:#FE6001 ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding:0} /* marges */

.centre {/* définition de la colonne centre */
float:left ; /* flotte à gauche */
width:50% ; /* largeur : 50% de .container */
height:100% ; /* hauteur : 100% du .container */
margin:0;padding:0 ; /* marges */
background-color:#760587; /* couleur de la colonne */
border-left:4px solid white; /* bordure gauche */
border-right:4px solid white} /* bordure droite */

.droite { /* colonne droite */
float:left ; /* flotte à gauche */
width:24% ; /* largeur : 23% de .container */
background-color:#FE6001 ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding-left:0}/* marges */

.bas { /* définition de la colonne bas*/
clear: both;
width: 764px;
height: 20px;
background-color:#760587 ;
margin:0;
padding-left:0
}

.logoM {
float: left; /* alignement du logo à gauche*/
margin-left: 0px; /* placement du logo dans son conteneur, head1 */
margin-top: 0px;
border: 0;
}

.logoM2 {
float: right; /* alignement du logo à droite*/
margin-right: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 10px;
border: 0;
}

h1 {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
}
h2 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
h3 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
text-align:left;
margin-left:0px;
margin-right:0px;
margin-top: 2px;
}
li {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:none;
}
a:visited {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-decoration:underline;
}
#conteneur {
	margin: auto;
	width: 764px;
	border: 1px dotted #760587;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<div id="conteneur">
	<div align="left">
		<p><img src="logoM.jpg" class="logoM" alt="logoM" /><img src="logoM2.jpg" class="logoM2" alt="logoM" /></p>
	</div>
	<div class="head2">  <a href="...">Services</a>  <a href="...">Produits</a>  <a href="...">Forum</a>  <a href="...">Catalogue</a>  <a href="...">Contacts</a></div>
	<div class="gauche">
		<p> </p>
	</div>
	<div class="centre">
		<h1>Bienvenue chez MEDIAKAP.NET le spécialiste de la conception de sites Internet Design. Nous mettons toutes vos envies à votre portée : création du site Internet, relookage, réservation du nom de domaine, hébergement, référencement avec des outils très professionnels, Statistiques, Formation à Internet et ses logiciels, prospectus commercial ... </h1>
		<h1>Charte graphique personnalisée, avec   vous  aurez un site Internet tendance et design, unique ! Intéressez ? Contactez  nous immédiatement.
		</h1>
	</div>
	<div class="droite">
		<p> </p>
	</div>
	<div class="bas">
		<p> </p>
	</div>
</div>
</body>
</html>

Edit : pour l'espacement entre les lignes, tu as deux choix :

Soit c'est entre deux lignes d'un même paragraphe, auquel cas il faudra spécifier

p {
line-height: ta_valeur;
}

Soit c'est entre deux paragraphes, auquel cas il faudra définir les marges du paragraphe.

Modifié 22 Février 2006 par captain_torche

22 Février 2006

Bon, j'ai un peu modifié ton code.

Tu as du mal à te séparer des tableaux, hein !

Je t'ai donc supprimé toute trace de tableau (tu n'en utilisais qu'un, une ligne, une cellule -> j'ai fait la même chose avec un DIV).

Sinon, ton souci principal, venait du fait que ton footer, n'avait pas d'instruction de placement.

Tu avais bien spécifié un .spacer, mais il n'était pas utilisé dans le code.

Il a donc suffi de spécifier un clear: both dans le footer (.bas), et le tour était joué.

<!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">

<head>
<style type="text/css">
body {
margin: 0;
margin-top: 5px;
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
text-align:left;
}

.head1 {
width: 764px;
height: 170px;
}

.head2 {
margin-left: 370px;
margin-top: 145px;
width: auto;
height: 15px;
}

.head2 a{
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: underline;
margin-left: 20px;
}

.gauche { /* définition de la colonne gauche */
float:left ; /* flotte à gauche */
width:24% ; /* largeur : 24% de .container */
background-color:#FE6001 ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding:0} /* marges */

.centre {/* définition de la colonne centre */
float:left ; /* flotte à gauche */
width:50% ; /* largeur : 50% de .container */
height:100% ; /* hauteur : 100% du .container */
margin:0;padding:0 ; /* marges */
background-color:#760587; /* couleur de la colonne */
border-left:4px solid white; /* bordure gauche */
border-right:4px solid white} /* bordure droite */

.droite { /* colonne droite */
float:left ; /* flotte à gauche */
width:24% ; /* largeur : 23% de .container */
background-color:#FE6001 ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding-left:0}/* marges */

.bas { /* définition de la colonne bas*/
clear: both;
width: 764px;
height: 20px;
background-color:#760587 ;
margin:0;
padding-left:0
}

.logoM {
float: left; /* alignement du logo à gauche*/
margin-left: 0px; /* placement du logo dans son conteneur, head1 */
margin-top: 0px;
border: 0;
}

.logoM2 {
float: right; /* alignement du logo à droite*/
margin-right: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 10px;
border: 0;
}

h1 {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
}
h2 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
h3 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
text-align:left;
margin-left:0px;
margin-right:0px;
margin-top: 2px;
}
li {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:none;
}
a:visited {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-decoration:underline;
}
#conteneur {
	margin: auto;
	width: 764px;
	border: 1px dotted #760587;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<div id="conteneur">
	<div align="left">
  <p><img src="logoM.jpg" class="logoM" alt="logoM" /><img src="logoM2.jpg" class="logoM2" alt="logoM" /></p>
	</div>
	<div class="head2">  <a href="...">Services</a>  <a href="...">Produits</a>  <a href="...">Forum</a>  <a href="...">Catalogue</a>  <a href="...">Contacts</a></div>
	<div class="gauche">
  <p> </p>
	</div>
	<div class="centre">
  <h1>Bienvenue chez MEDIAKAP.NET le spécialiste de la conception de sites Internet Design. Nous mettons toutes vos envies à votre portée : création du site Internet, relookage, réservation du nom de domaine, hébergement, référencement avec des outils très professionnels, Statistiques, Formation à Internet et ses logiciels, prospectus commercial ... </h1>
  <h1>Charte graphique personnalisée, avec   vous  aurez un site Internet tendance et design, unique ! Intéressez ? Contactez  nous immédiatement.
  </h1>
	</div>
	<div class="droite">
  <p> </p>
	</div>
	<div class="bas">
  <p> </p>
	</div>
</div>
</body>
</html>

Edit : pour l'espacement entre les lignes, tu as deux choix :

Soit c'est entre deux lignes d'un même paragraphe, auquel cas il faudra spécifier

p {
line-height: ta_valeur;
}

Soit c'est entre deux paragraphes, auquel cas il faudra définir les marges du paragraphe.

<{POST_SNAPBACK}>

Merci c'est sympa de part mais comme tu as vu je fais une feuille de style externe, j'ai voulu donc séparer les deux fichiers mais ça donne rien de bon ? :huh:

22 Février 2006

Regardez

.bas { /* définition de la colonne bas*/
clear: both;
width: 764px;
height: 20px;
background-color:#760587;
margin:0px;
padding-left:0
}

Mon interlignage est ok. C'est mon saut de ligne qui est trop important comment le reduire ?

Modifié 22 Février 2006 par kaporal-7

**captain_torche** · 22 Février 2006

L'interlignage, c'est l'espace entre deux lignes de texte.

Si tu veux simplement (si j'ai bien compris), espacer ton footer et le reste de ton site, rajoute juste

margin-top: ta_valeur; dans le code de .bas.

Sinon, pour faire un css externe, il faut que tu copies/colles le contenu entre les balises <style>, dans un fichier (par exemple, style.css).

Ensuite, tu remplaces ces balises style, par

<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="style.css" />

22 Février 2006

Merci beaucoup.

Mais en faite c'est plutôt lorsque dans un paragraphe je saute une ligne j'ai l'impression qu'il en saute 2 ??? Un espace trop important :wacko:

Modifié 22 Février 2006 par kaporal-7

**captain_torche** · 22 Février 2006

Ca dépend de ce que tu appelles "sauter une ligne".

Passer à la ligne, avec <br /> ?

Changer de paragraphe (fermer la balise </p>, rouvrir un autre <p>) ?

Dans le premier cas (et quel que soit le nombre de <br />, c'est le line-height qui est en cause.

Dans le second, c'est les marges de la balise paragraphe qu'il faut regarder.

22 Février 2006

Regarde mon probleme est dans la class .bas

HTML


body {
margin: 0;
margin-top: 5px;
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
text-align:left;
}

.head1 {
width: 764px;
height: 170px;
}

.head2 {
margin-left: 370px;
margin-top: 145px;
width: auto;
height: 15px;
}

.head2 a{
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: underline;
margin-left: 20px;
}

.gauche { /* définition de la colonne gauche */
float:left ; /* flotte à gauche */
width:24% ; /* largeur : 24% de .container */
background-color:#FE6001 ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding:0} /* marges */

.centre {/* définition de la colonne centre */
float:left ; /* flotte à gauche */
width:50% ; /* largeur : 50% de .container */
height:100% ; /* hauteur : 100% du .container */
margin:0;padding:0 ; /* couleur de la colonne */
border-left:4px solid white; /* bordure gauche */
border-right:4px solid white} /* bordure droite */

.droite { /* colonne droite */
float:left ; /* flotte à gauche */
width:25% ; /* largeur : 23% de .container */
background-color:#FE6001 ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding-left:0}/* marges */

.bas { /* définition de la colonne bas*/
	clear: both;
	width: 764px;
	height: 0px;
	background-color:#760587;
	margin:0px;
	padding-left:0;
}

.logoM {
float: left; /* alignement du logo à gauche*/
margin-left: 0px; /* placement du logo dans son conteneur, head1 */
margin-top: 0px;
border: 0;
}

.logoM2 {
float: right; /* alignement du logo à droite*/
margin-right: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 10px;
border: 0;
}

h1 {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:justify;
}
h2 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:justify;
}
h3 {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
text-align:left;
margin-left:0px;
margin-right:0px;
margin-top: 0px;
}
li {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:none;
}
a:visited {
font-family:verdana, sans-serif;
font-size:80%;
color:#760587;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:80%;
color:#FE6001;
background-color:transparent;
text-decoration:underline;
}
#conteneur {
margin: auto;
width: 764px;
border: 1px dotted #760587;
}

Tjrs problème de saut de ligne et espacement avec le bas de page :boude:

**captain_torche** · 22 Février 2006

Rajoute juste ceci à otn CSS

.bas h1 {
	margin: 0;
}

Sinon, évite l'utilisation des balises de titre (h1, h2, ...) quand ce n'est pas justifié (donc quand ce n'est pas un titre).

C'est le cas, par exemple, du texte de ton footer.

22 Février 2006

rien à faire j'ai toujours ses espacements.

- Lorsque je vais à la ligne.

- Et entre la dernière ligne et le bas de page :hypocrite:

**captain_torche** · 22 Février 2006

Change le width: 25% en 24% dans le .droite

Enlève le height: 0 dans le .bas

Et sinon, fais un peu de tests, tout de même.

Je veux bien t'aider, mais pas faire ton site !

22 Février 2006

Ca marche toujours pas, j'ai fais 10 000 tests et rien à faire ! :huh:

IMPOSSIBLE d'aller à la ligne sans que ça saute 2cm :nono:

Modifié 22 Février 2006 par kaporal-7

**captain_torche** · 22 Février 2006

Rajoute ça au début de ton CSS :

* {
margin: 0;
padding: 0;
}

Ca va te réinitialiser toutes les marges.

23 Février 2006

Rajoute ça au début de ton CSS :
* {
margin: 0;
padding: 0;
}
Ca va te réinitialiser toutes les marges.

<{POST_SNAPBACK}>

Parfait :hourra: , merci captain !

Tu sais quel pourrait être l'origine du problème ?

**captain_torche** · 23 Février 2006

Une marge 'par défaut' appliquée à tes balises, variable en fonction du navigateur.

Connexion

1er site CSS

Sujets conseillés

Guest kaporal-7

captain_torche

Guest kaporal-7

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

steph13

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

Guest kaporal-7

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

Guest kaporal-7

captain_torche

Veuillez vous connecter pour commenter

Parcourir

Activité