Aller au contenu

1er site CSS

Guest kaporal-7

Par Guest kaporal-7
dans (X)HTML et CSS

 Partager

Sujets conseillés

Guest kaporal-7

Guest kaporal-7

Posté
Posté (modifié)

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 ?? B)

Modifié par kaporal-7
Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté
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>

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
steph13

steph13

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté
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

Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté (modifié)

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é par captain_torche
Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté
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:

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté (modifié)

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é par kaporal-7
Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté (modifié)

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é par kaporal-7
Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté

rien à faire j'ai toujours ses espacements.

- Lorsque je vais à la ligne.

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

Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté (modifié)

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é par kaporal-7
Lien vers le commentaire
Partager sur d’autres sites
Guest kaporal-7

Guest kaporal-7

Posté
Posté
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 ?

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...