Insertion de bloc

Ecam · Message par **Ecam** » 27 déc. 2011, 16:03

Bonjour,
Je souhaiterais insérer des barres à droite et à gauche sur toute la longueur de ma page, je voulais les mettre avec les balises <div> mais je ne sais pas comment faire.
Voici un site qui montre le genre de barre que je voudrais :

http://ecam.perso.sfr.fr/

Merci de votre aide et bonnes fêtes.

Ecam

Teraoctet · Message par **Teraoctet** » 27 déc. 2011, 16:30

Bonjour
Au vu de l'encodage, l'image de fond comporte les barres orange et grise verticales.

Code : Tout sélectionner

<body background="images/background.gif" topmargin="0">

Pour vous il serait judicieux de créer une image de fond similaire et l'insérer en CSS, ce qui facilite grandement le travail.
Bonne fin de journée

Ecam · Message par **Ecam** » 27 déc. 2011, 17:35

Ca ma traversé l'esprit ^^ mais existe-il un logiciel pour ça ? Un éditeur d'image je pense ?

Teraoctet · Message par **Teraoctet** » 27 déc. 2011, 17:54

Vous avez de très bons logiciels gratuits: The Gimp, PhotoFiltre V6 (la version studio est payante) et Photoscape.
Les plus faciles à manipuler sont Photoscape et PhotoFiltre: Chacun à des filtres différents et des modes de prise en main différentes, dans l'ensemble ils sont confortables pour le travail.

En résumé ils sont presque complémentaires.

Message par **Ymai** » 28 déc. 2011, 13:24

Bonjour

Ecam a écrit :Bonjour,
Je souhaiterais insérer des barres à droite et à gauche sur toute la longueur de ma page, je voulais les mettre avec les balises <div> mais je ne sais pas comment faire.

Voici une méthode possible et qui s'inspire de ce qui est décrit là: http://info.sio2.be/kpz/3/1.php

On définit trois blocs <div> dans la page.

Code : Tout sélectionner

<div id="gauche">gauche</div>
<div id="centre">centre</div>
<div id="droite">droite</div>

Il suffit ensuite de les "styler" de la manière qui va bien:
le bloc #gauche est défini à la largeur qui convient et flottant à gauche
le bloc #droite est défini à la largeur qui convient et flottant à droite
le bloc #centre est défini flottant à gauche

Pour obtenir une mise en page correcte, il faudrait limiter la largeur du contenu de la page à une certaine valeur.
On définit donc le corps du texte (body) en largeur 1000px, par exemple. Pour que le corps du texte soit centré, on fixe la marge à la valeur "auto".
À l'intérieur de <body>, il faut que le contenu mesure un max de 1000px. Donc, on fixe la largeur du bloc #centre à 1000px - largeur#gauche - largeur#droite.
Finalement, on peut avoir quelque chose comme:

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Exemple</title>
<style type="text/css">
body {
margin: auto;
width: 1000px;
}
#gauche {
float: left;
width: 150px;
background-color: #ffff66;
}
#droite {
float: right;
width: 170px;
background-color: #99ffff;
}
#centre {
background-color: #ffccff;
width: 680px;
float: left;
}

</style>
</head>
<body>
<div id="gauche">gauche</div>
<div id="centre">centre</div>
<div id="droite">droite</div>
</body>
</html>

Après, on ajuste selon ses besoins.
Il y a certainement d'autres solutions qui permettraient une mie en page "élastique" de largeur variable.

[privateJoke="on"]
Qu'il soit dit que je n'accepterai aucune remarque sur le choix des couleurs de l'exemple. Même de la part de certains esprits forts qui fréquentent parfois ce forum.
[privateJoke="off"]

Teraoctet · Message par **Teraoctet** » 28 déc. 2011, 17:42

Bonjour Ymai
Ne serait il pas plus facile de créer le fond de page avec le design?... Car sur lla page d'exemple c'est bien de cela qu'il s'agit soit 2 barres de couleurs verticales.
Quant au texte en tout petit en bas je suis miro je sais

je ne vois pas pourquoi les couleurs seraient contestée

Message par **Ymai** » 28 déc. 2011, 19:41

Bonjour
La question était bien

Ecam a écrit :Je souhaiterais insérer des barres à droite et à gauche sur toute la longueur de ma page, je voulais les mettre avec les balises <div> mais je ne sais pas comment faire.

Les indications que je fournis me semblent y répondre.
Après, je ne sais pas trop quelle est la meilleure solution. Chacun fait son lit...

Teraoctet · Message par **Teraoctet** » 28 déc. 2011, 20:25

En effet Ymai vous avez raison, je me suis fié à la page que Ecam citait en exemple.

Ecam · Message par **Ecam** » 29 déc. 2011, 20:53

Teraoctet a écrit :Bonjour Ymai
Ne serait il pas plus facile de créer le fond de page avec le design?... Car sur lla page d'exemple c'est bien de cela qu'il s'agit soit 2 barres de couleurs verticales.
Quant au texte en tout petit en bas je suis miro je sais je ne vois pas pourquoi les couleurs seraient contestée

Ou trouves tu le design sur Kompozer, j'ai bien essayé d'insérer un fond d'écran à l'aide du logiciel de dessin du pack open office ( je sais il y mieux

) en le transformant en fichier JPG mais l'ecran de fond ne me prend que la moitié de mon ecran.

Teraoctet · Message par **Teraoctet** » 29 déc. 2011, 21:10

Bonsoir Ecam,
Pas de design dans Kompozer, il faut le créer avec un autre logiciel de dessin dont j'ai fait mention plus haut sur ce fil. Pour les dimension largeur 1000à 1200px. Pour la hauteur, c'est en fonction de ce que vous voulez mettre dans votre page.
Il vous suffira de les garder en format GIF dans le dossier 'image' de votre site local puis l'insérer comme background dans votre page: clic sur Format > Couleurs et fond de page > Image de fond. clic sur la chemise jaune pour ouvrir vos images du site et choisir l'image que vous avez créé, puis valider

Ecam · Message par **Ecam** » 31 déc. 2011, 01:08

Bonsoir,
Dsl pour la réponse tardive, j'ai essayé vos 2 solutions ( image de fond / structure de la page en bloc ), j'ai choisis d'insérer des balises <div>, au moins si mes blocs centraux ne sont pas adaptés je peux modifier le dimensions des blocs "droite/gauche" ou vice versa. J'ai l'impression de mieux "contrôler" ma mise en page avec cette méthode.
Je vous remercie pour vos réponses.

Ecam

Teraoctet · Message par **Teraoctet** » 31 déc. 2011, 03:15

Bonsoir

Ecam a écrit :Bonsoir,
j'ai choisis d'insérer des balises <div>, au moins si mes blocs centraux ne sont pas adaptés je peux modifier le dimensions des blocs "droite/gauche" ou vice versa. J'ai l'impression de mieux "contrôler" ma mise en page avec cette méthode.
Ecam

Pourquoi ne construisez vous pas avec un tableau? et vous l'adaptez sur votre image de fond. Ensuite les cellules du tableaux peuvent être fusionnées en fonction de vos besoins.

Message par **Ymai** » 31 déc. 2011, 05:02

Bonjour

Teraoctet a écrit :Pourquoi ne construisez vous pas avec un tableau?

Probablement pour les mêmes raisons qui font que je n'utiliserai pas une clef anglaise pour tailler la vigne, le tableur pour écrire de la poésie ou même parce que http://www.cybercodeur.net/weblog/prese ... thing.html

À chaque outil, son usage...

Teraoctet · Message par **Teraoctet** » 31 déc. 2011, 12:03

Bonjour
OK OK OK.... vous avez raison
Le wisiwig génère l'encodage en partie, dans ce cas il suffit juste de le contrôler et de le modifier le cas échéant.
je n'utilise le CSS que pour le fond de page et les couleurs bien souvent différentes des textes. Sauf si je devais faire un site pour les sœurs bénédictine de saint benoît de nursie

En résumé tout dépend du site à créer.

Ecam · Message par **Ecam** » 31 déc. 2011, 13:15

Les tableaux, c'est ce que j'ai essayé en tout premier, mais je n'arrivais pas à les positionner ni à faire ce que je voulais ( d'où ma demande sur le forum ).

Geckozone

Insertion de bloc

Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Re: Insertion de bloc

Qui est en ligne ?