Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[résolu]problème disign site.

lomaster

Par lomaster
dans Programmation

 Partager

Messages recommandés

lomaster Extrem Member

lomaster

Posté(e)
Posté(e) (modifié)

Bonjour à tou(te)s,

 

 

voila je réalise un site internet et je rencontre un petit problème.

 

tout d'abord une image de la page d'accueil :

 

zebky7.png

 

Voil comme vous pouvez le constater l'espace sur la droite est bien pauvre... Je souhaiterai mettre une image tout le long sur la partie droite ( à la place du rectangle rouge en image de fond, mais le texte ne la chevocherai pas...Problème je n'arrive pas à placer correctement les balises et les attributs...

 

voici les codes :

 

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>
   <title>Bienvenue sur mon site !</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="index.css" href="index.css" />
  </head>

	  <div id="en_tete">

   </div>

  <body>


   <h1 id="nom" >Accueil</h1>

		  <!–– Les menus ––>

   <div id="menu">	  
	   <div class="element_menu">
		   <ul>
			   <a href="index.html">Accueil</a><br/>
			   <a href="Galerie.html">Galerie</a><br/>
			   <a href="contacte.html">Contacte</a><br/>
			   <a href="Forum">Forum</a>
		   </ul>
  </div>   
   </div>

<p>Bonjour et bienvenu sur ATouT-Service</p>


		 <!–– Le pied de page ––>

   <div id="pied_de_page">
	   <p><ins>Site réalisé grâce à :</ins></p>
	   <p><a href="http://www.framasoft.net/article2579.html"><img src="photo/Notepad++.jpg" alt="notepad++" title="notepad++"></a><br/>
	   <a href="http://www.framasoft.net/article1011.html"> <img src="http://www.01net.com/img/fiches/17966.gif" alt="filezilla" title="filezzila"></a></p>
   </div>

 

et le css :

h1, h2, h3, h4
{
color: black;
}

body
{
  width: 760px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url("photo/papa.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */ 
  background-repeat: no-repeat;  
  font-family: Comic Sans MS;   
}

/* L'en-tête */

#en_tete
{
  width: 760px;
  height: 100px;
  background-image: url("photo/Banniere1.jpg");
  background-repeat: no-repeat;
  margin-bottom: 10px;
}


/* Le menu */

#menu
{
  float: left;
  width: 120px;
  margin-left:-250px;
  margin-top: 60px;
}

.element_menu
{

  background-repeat: repeat-x;
  margin-bottom: 20px;
  background-color: #626262;
  background-image: url("photo/menu1.jpg");   

}


/* Quelques effets sur les menus */


.element_menu ul
{
  padding: 0px;
  padding-left: 20px;
  margin: 0px;
  margin-bottom: 5px;
}

.element_menu a
{
  color: black;
  text-decoration: yes; /* lien non souligné */
}

.element_menu a:hover
{
  background-color: white;
  color: black;
}





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

#pied_de_page
{
  padding: 5px;

  text-align: center;

  background-repeat: repeat-x;


}
#nom
{
  margin-left: 270px;
  margin-bottom: 20px;
  padding: 5px;
  }
img
{
border: 0;
}

 

voila l'image ce nomme 11.jpg. O dois-je placer les balise dans le html et que dois-je mettre dans le css j'ai essaye nombre de combinaison mais je n'ai pas réussi... :P

 

si c'est trop compliquer je souhaiterai mettre une image de fond tout le long un dégrader qui partiré de la droite vers la gauche...comment faire?

Modifié par lomaster
Lien vers le commentaire
Partager sur d’autres sites

lomaster Extrem Member

lomaster

Posté(e)
  • Auteur
Posté(e)

le code marche, mais le problème c'est qu'il faut du texte pour que l'image apparaisse...sinon il n'y a rien.

 

<div id="barre-laterale">
</div>

 

#barre-laterale {
 width: 200px;
 float: right;
 background-image: url("photo/11.jpg");
}

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...