comment alligner la banniere

27 novembre 2005 à 12:35:55

Bonjour !

Je vous presente mon site temporaire: http://sanhaji.kokoom.com/

J'ai essayé dans un premier temp de centrer la banniere, alors que celle ci etait en mode background dans le css (la méthode expliquée sur le cours de M@theo21..). Puis, comme ça ne marchait pas et que j'ai vu que je n'etait pas le seul à avoir ce problème, j'ai mis l'url de la banniere dans le fichier html, mais encore une fois il est impossible de centrer celle ci.

Que dois je faire ?

PS: Merci M@theo21 pour le tutorial html/css, il est vraiment bien fait, mais par contre je n'arrive pas à retrouver la liste des codes css en annexe.

S@nhaji !

thedragonknight

27 novembre 2005 à 12:38:17

Tu pourrais nous filer ton code css STP!!!

Ca sera plus facile pour nous de trouver!!

Synapse

27 novembre 2005 à 12:47:30

Salut S@nhaji,

Pour ton problème je te conseille, tout d'abord, de mettre tes images dans dans balises paragraphes, passer de ça

à ça :

Ensuite il ne te reste plus, dans ta css, qu'à faire :

#en_tete p img
{
text-align:center;
}

Normalement, ça devrait être bon, si je ne m'abuse

Ext1cti0n-007

27 novembre 2005 à 12:47:31

Essaye ça :

CSS :

.centre{text-align:center;}

Voila

Synapse

27 novembre 2005 à 12:49:31

Citation : Ext1cti0n-007

Essaye ça :
<div class="centre"><img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere de mon site" /></div>

CSS :
.centre{text-align:center;}

Voila

Pourrais-je rappeller que l'esprit du XTHML/CSS et de totalement séparer le code HTML du la mise en page et donc de en plus avoir des <div class="centre"> dans le .html :-°

S@nhaji

27 novembre 2005 à 13:17:19

Re-Bonjour,

Merci pour votre aide, mais ça ne marche toujours pas.

Mes codes xHTML et css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<base href="http://www.kokoom.com/sanhaji/">

<title>Bienvenu sur le siteweb de S@nhaji !
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="sdesign tempo" href="sdesign.css" />
</head>
<body>

<div id="en_tete">

<p><img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere113" align="middle" /></p>
</div>

<div id="menu">

<p>Bienvenue sur mon site!</p>

<div class="element_menu">
<h3>HECI</h3> 
<ul>
<li><a href="page1.html">Presentation</a></li> 
<li><a href="page2.html">Nouvelles</a></li>
<li><a href="page3.html">Cours</a></li>
</ul>
</div>

<div class="element_menu">
<h3>DIVERS</h3>
<ul>
<li><a href="page4.html">Civilisation</a></li>
<li><a href="page5.html">Lectures</a></li>
<li><a href="page6.html">Liens</a></li>
</ul>
</div>

</div>

<div id="corps">
<h1>Sanhaji's website... </h1>

<p>
(...)
</p>

<h2>Dernieres mis à jour:

</h2>

<p> (...)
</p>

<h2>A propos de l'auteur:
</h2>
<p>
(...)
</p>
</div>
</div>

<div id="pied_de_page">

<p>Copyright "S@nhaji" 2005, tous droits réservés</p>
</div>

</body>
</html>

Et css:

/*
deisign.css
---------

Par S@nhaji
Fichier créé le 29/11/2005
*/

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
}

/* L'en-tête */

#en_tete
{
width: 460px;
height: 100px;
margin-bottom: 10px;
.center{text-align: center;}
}

#en_tete p img
{
text-align:center;
}

.centre{
text-align:center;
}

/* Le menu */

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}

.element_menu
{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
font-variant: small-caps;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/* Quelques effets sur les menus */

.element_menu h3 /* Tous les titres de menus */
{ font-weight: bold;
color: #f0ffff;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: left;
background-color: #556b2f; /* Le fond sera vert */
padding: 5px; /* Tous les côtés ont une marge intérieure de 0 pixels */
margin: 0px;
margin-bottom: 5px;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{font-weight: bold;
list-style-image: url("images/empty.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #000000;
text-decoration:none;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
color: #d2691e;
}

a:active, a:focus /* Appliquer le même style aux liens actifs et focus */
{
background-color: #FFCC66;
}

/* Le corps de la page */

#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #000000;
background-color: #ffcb65; /* Une couleur de fond pour le corps */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#corps h1 /* Tous les titres h1 du corps */
{
color: #0f9a02;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
padding-left: 30px;
color: #990000;
text-align: left;
}
#corps p

{ font-family: "Times New Roman", Times, serif;
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */

}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;
font-weight: bold;
text-align: center;

color: #030032;

}

thedragonknight

27 novembre 2005 à 13:32:30

Citation : code css en tete

/* L'en-tête */

#en_tete
{
width: 460px;
height: 100px;
margin-bottom: 10px;
margin: auto;
background-image: url("lien vers ton image");
background-repeat: no-repeat;
}

Essaye ça pour ton en tete je pense qu'un margin auton ça marcherait!!!

Ext1cti0n-007

27 novembre 2005 à 13:36:08

Citation : Synapse

Pourrais-je rappeller que l'esprit du XTHML/CSS et de totalement séparer le code HTML du la mise en page et donc de en plus avoir des <div class="centre"> dans le .html

Sinon pour ton problème :

#en_tete p{text-align:center;}

S@nhaji

27 novembre 2005 à 13:50:07

Merci Thedragonknight, je crois que ça marche la.

Ext1cti0n-007, je crois que c'est ce que j'avais fait depuis le debut... Mais merci quand meme pour ton aide.

dworkin

27 novembre 2005 à 13:59:24

Il est absolument inconcevable d'arriver sur un site en posant une question alors que tu n'as pas lu les tutos.

Si ca avait été le cas, tu n'aurais pas cette imitation de code contenant à la fois du fond et de la forme.

Quand on ne suit pas les conseils, on ne demande pas d'aide après....

S@nhaji

27 novembre 2005 à 14:03:48

Salut Andre

Figures toi que j'ai lu les tuto et pas qu'une seule fois, mais deux !

L'image est maintenant uniquement en fond. Le fait qu'elle etait avant en fond et en forme etait du au fait que j'ai essayé plusieurs pistes pour la centrer.... Bref, c'est corrigé

thedragonknight

27 novembre 2005 à 14:05:24

De rien!!!

Mais smn.andre a raison, faut lire les tutoriels avant et surtout de bien les appliquer!!! faut prendre ton temps et d'abord d'essayer de trouver par toi-meme avant de demander de l'aide c'est comme ça qu'on apprend!!!

Bon bah sans rancune alors!!!

S@nhaji

27 novembre 2005 à 14:10:05

J'y ai passer 7 a 8 heures entre hier et Ahjourd'hui...

Mais c'est vrai que c'est dur au debut. Pire que l'anglais !

salutations

thedragonknight

27 novembre 2005 à 14:16:36

Je te comprends je suis passé par là moi aussi!!!

Mais franchement vive le css!!!

Allez bonne continuation!!

Ext1cti0n-007

27 novembre 2005 à 14:56:30

Citation : thedragonknight

les tutoriels

Oué toutafay.

Les chevals aussi...
Pis des carnavaux :-°

thedragonknight

27 novembre 2005 à 15:05:44

oui bon ça va, j'en ai pas fait expres!!

On dit les TUTORIAUX

content Ext1cti0n-007??