Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS / Javascript > comment alligner la banniere > Lecture du sujet

comment alligner la banniere

Vous devez être inscrit pour pouvoir poster des messages

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne S@nhaji # Posté le 27/11/2005 à 12:35:55
Groupe : Membres
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 !
S@nhaji !
 
Hors ligne thedragonknight # Posté le 27/11/2005 à 12:38:17
yo!
Avatar
Groupe : Membres
Tu pourrais nous filer ton code css STP!!!

Ca sera plus facile pour nous de trouver!! ;)
<< visité mon site: http://www.anime-rpg.com >> :p


Je recrute des testeurs, redacteurs, newsers, etc... n'hésitez pas à me contacter ;)
 
Hors ligne Synapse # Posté le 27/11/2005 à 12:47:30
sinstudio
Avatar
Groupe : Membres
Salut S@nhaji,

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

<div id="en_tete">
   <!-- Ici on mettra la bannière -->
<img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere113" align="middle" />
 </div>

à ça :
Code : HTML

<div id="en_tete">
   <!-- Ici on mettra la bannière -->
<p><img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere113" align="middle" /></p>
 </div>


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

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

Normalement, ça devrait être bon, si je ne m'abuse :p
Image utilisateur
 
Hors ligne Ext1cti0n-007 # Posté le 27/11/2005 à 12:47:31
J'ai des POO dans les cheveux
Avatar
Groupe : Membres
Essaye ça :
Code : HTML
<div class="centre"><img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere de mon site" /></div>


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


Voila
Hors ligne Synapse # Posté le 27/11/2005 à 12:49:31
sinstudio
Avatar
Groupe : Membres
Citation : Ext1cti0n-007
Essaye ça :
Code : HTML
<div class="centre"><img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere de mon site" /></div>


CSS :
Code : 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 :-° ^^
Image utilisateur
 
Hors ligne S@nhaji # Posté le 27/11/2005 à 13:17:19
Groupe : Membres
Re-Bonjour,

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

Mes codes xHTML et css

Code : HTML
<!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">
   <!-- Ici on mettra la bannière -->
<p><img src="http://www.kokoom.com/sanhaji/images/banniere113.png" alt="banniere113" align="middle" /></p>
 </div>

<div id="menu">
   <!-- Ici on mettra le menu -->
    <p>Bienvenue sur mon site!</p>

   <div class="element_menu">
       <h3>HECI</h3> <!-- Titre du sous-menu -->
       <ul>
           <li><a href="page1.html">Presentation</a></li> <!-- Liste des liens du sous-menu -->
           <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">
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
   <p>Copyright "S@nhaji" 2005, tous droits réservés</p>   
   </div>

   
   </body>
</html>



Et css:
Code : 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 :p */
}

/* 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;

   }
 
S@nhaji !
 
Hors ligne thedragonknight # Posté le 27/11/2005 à 13:32:30
yo!
Avatar
Groupe : Membres
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!!! ^^
Édité le 27/11/2005 à 13:34:29 par thedragonknight
<< visité mon site: http://www.anime-rpg.com >> :p


Je recrute des testeurs, redacteurs, newsers, etc... n'hésitez pas à me contacter ;)
 
Hors ligne Ext1cti0n-007 # Posté le 27/11/2005 à 13:36:08
J'ai des POO dans les cheveux
Avatar
Groupe : Membres
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 :-° ^^


:euh:

Sinon pour ton problème :

Code : CSS
#en_tete p{text-align:center;}
Hors ligne S@nhaji # Posté le 27/11/2005 à 13:50:07
Groupe : Membres
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.
S@nhaji !
 
Hors ligne dworkin # Posté le 27/11/2005 à 13:59:24
zCorrecteur
Avatar
Groupe : Membres
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....


N'ayons l'air de rien... Soyons désinvoltes...
web agency rennes || petits liens || tiny url 2.0 || Stade Rennais || dworkin || What is 2.0 ? || Services à domicile || Poker, casino, paris sportifs || Placements || Paquet cadeau





 
Hors ligne S@nhaji # Posté le 27/11/2005 à 14:03:48
Groupe : Membres
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é

S@nhaji !
 
Hors ligne thedragonknight # Posté le 27/11/2005 à 14:05:24
yo!
Avatar
Groupe : Membres
De rien!!! :p

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!!! :D
Édité le 27/11/2005 à 14:06:17 par thedragonknight
<< visité mon site: http://www.anime-rpg.com >> :p


Je recrute des testeurs, redacteurs, newsers, etc... n'hésitez pas à me contacter ;)
 
Hors ligne S@nhaji # Posté le 27/11/2005 à 14:10:05
Groupe : Membres
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 ! :p

salutations
S@nhaji !
 
Hors ligne thedragonknight # Posté le 27/11/2005 à 14:16:36
yo!
Avatar
Groupe : Membres
Je te comprends je suis passé par là moi aussi!!!

Mais franchement vive le css!!! :D

Allez bonne continuation!! ;)
<< visité mon site: http://www.anime-rpg.com >> :p


Je recrute des testeurs, redacteurs, newsers, etc... n'hésitez pas à me contacter ;)
 
Hors ligne Ext1cti0n-007 # Posté le 27/11/2005 à 14:56:30
J'ai des POO dans les cheveux
Avatar
Groupe : Membres
Citation : thedragonknight
les tutoriels


Oué toutafay.

Les chevals aussi...
Pis des carnavaux :-°
Hors ligne thedragonknight # Posté le 27/11/2005 à 15:05:44
yo!
Avatar
Groupe : Membres
oui bon ça va, j'en ai pas fait expres!! ^^

On dit les TUTORIAUX


content Ext1cti0n-007??

:D
<< visité mon site: http://www.anime-rpg.com >> :p


Je recrute des testeurs, redacteurs, newsers, etc... n'hésitez pas à me contacter ;)
 

Retour au forum "XHTML / CSS / Javascript" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 473 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.2892s (0.2571s)