Page HTML

ElGato81 Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
Snox5 Messages postés 1670 Statut Contributeur -
Bonjour,

Je me lance actuellement dans la création de ma première page HTML et j'aurai besoin d'un petit peu d'aide.

J'ai donc un background bien précis et je souhaiterai rajouter par dessus un background blanc enfin que mon texte soit le plus lisible possible tout en gardant le background principal.

En résumé je souhaiterai savoir s'il est possible d'avoir un background blanc et sur les côtés gauche et droite mon background principal et si possible de pouvoir ajuster la place que me prends le background blanc.

En cherchant un peu j'ai trouvé ceci :

<div style="background-color:white">contenu</div>

Le truc c'est que oui j'ai mon background blanc, mais je ne sais pas comment le redimensionner (width, height ?).

Merci d'avance ! :)

2 réponses

  1. DelNC Messages postés 2360 Statut Membre 2 010
     
    Bonjour

    dans ta <div style="background-color:white"> tu peux mettre des espaces externes et internes comme ceci

    margin-top				: 10px		;
    margin-bottom			: 10px		;
    margin-left				: 10px		;
    margin-right			: 10px		;
    	
    padding-top			: 5px			;
    padding-bottom			: 5px			;
    padding-left			: 5px			;
    padding-right			: 5px			;


    Essaye et dis moi si c'est ça que tu voulais faire
    0
  2. Snox5 Messages postés 1670 Statut Contributeur 214
     
    Salut,

    Dans un premier temps, je te conseil de séparer le code CSS et le HTML. C'est à dire les mettre dans deux fichiers différents.
    Tu vas créer un fichier "styles.css" dans le même dossier que celui ou est le document HTML.
    Dans ton document HTML, entre les balises <head></head>, écrit
    <link rel="stylesheet" href="styles.css">
    . Ca va lier le CSS à la page HTML. C'est une facon plus simple et propore de faire.

    Pour ce que tu veut faire :
    Appliquer une image de fond à l'élément <body> en CSS. tuto
    body {
      background-image: url("chemin/vers/fichierimage");
      background-size: cover; /*image prend tout l'écran*/
      background-attachment: fixed; /*ne défile pas, reste fixe*/
      background-repeat: no-repeat; /*ne répète l'image si elle ne prend pas tout l'écran*/
    }
    

    Créer une <div></div>, ajoute une classe, exemple : container :
    <div class="container"></div>

    Puis dans le CSS :
    div.container /*veut dire : propriétés affecteront div avec la class "container"*/ {
    background-color: #fff; /*couleur blanche*/
    margin : 0 auto; /*ajuste les marges et centre la div au mileu de l'écran*/
    width: 70%; /*la div sera large de 70% de la largeur du parent, donc de <body>*/
    }
    

    Voilà, avec tout ça, ça devrai fonctionner... Si tu as des question, demandes. :)
    +++
    0