Faire un design extensible

J'ai besoin d'explications...

7 décembre 2005 à 15:43:13

Alors pourriez vous me dire comment faire un site avec design extensible.
Je sais que pour la banière il faut mettre une partie qui se répète X foi en fontion de la résolution, et que je doi metre les tailles de mes blocks en %, pas en PX.

Mais c'est tout! J'ai entendu parlé de "kit graphique", c'est quoi, comment on fait, sa sert a quoi?

Merci d'avance!

Silke, gros zero.

Spiky

7 décembre 2005 à 15:45:50

Pour les extensible c'est par ici: Gabarit de mise en page CSS

Les kit-graphique, sont des webdesign tout fait, ils sont codé il ne te reste qu'à les modifier éventuellement et à les mettre sur ton site

.Nico

7 décembre 2005 à 15:53:16

Les kits graphiques sont des designs tout faits que tu peut trouver par ci par là sur le web. Ils sont rarement respectueux des standards, et c'est moyennement bien vu par les utilisateurs car tu risque de retrouver ton design sur un autre site

Char Aznable

7 décembre 2005 à 16:23:35

Citation : Spiky

Pour les extensible c'est par ici: Gabarit de mise en page CSS

Donc, avec les tableaux, c'est impossible de faire un design extensible ?

Spiky

7 décembre 2005 à 16:27:46

Je pense que je vais m'énerver

Les tableaux sont faits pour affiché des données tabulaires

Construire un site sans tableaux
Tableaux et DIV, petite comparaison concrète
Tableaux VS CSS, un combat de chaque instant

san1981

7 décembre 2005 à 16:54:04

Pour faire un design extensible, tu peux utiliser le principe du "conteneur" qui est plutôt facile. Dans ton fichier .htm, tu dois mettre ceci:

<body>

<div id="conteneur">
<div id="header">
Ta bannière ou image etc…
</div>

<div id="menu">
Ta liste avec les liens…
</div>

<div id="corps">
Le contenu de ton corps
</div>

<div id="pieddepage">
Pied de page, copyright, webmaster etc…
</div>

</div>

</body>

C'est juste en exemple (très simple je l'admets

), mais tu dois juste retenir de mettre la balise <div id="conteneur"> ainsi autour du reste de ta page.

Dans le fichier css, tu mets:

#conteneur
{
width: 100 %;
margin: auto;
}

Et après il ne te reste qu'à mettre des pourcentages ou px aux autres balises id

Et ton site est extensible!

Ps: J'avais fait un topic dans la v2 où quelqu'un m'avait mis des liens expliquant ceci en détail mais je ne sais pas comment récupérer ce topic pour te le donner…

Webmaster passionnée par mon métier mais aussi par les personnes qui m'entourent, l'art, le design, la nature, l'architecture, la lecture et toutes les beautés de la vie ;-)

Raphael

7 décembre 2005 à 17:11:02

Citation : Char Aznable

Donc, avec les tableaux, c'est impossible de faire un design extensible ?

Non ce n'est pas impossible. Il est tout à fait possible, en tableaux de réaliser des mises en page fluides, simplement en choisissant des unités relatives comme le % ou les "em".

Par contre les mises en page en tableau posent d'autres problèmes (lourdeur, accessibilité, etc.)

Note : http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions

Vinchz

7 décembre 2005 à 17:21:43

Pour ne pas se casser la tête, mets ton body avec une largeur de 100% et positionnes les différents div en css normalement (px)

Lenwë

7 décembre 2005 à 17:34:36

Pour les pourcentage ça va je m'en sort.

Là, j'ai un problème sur ma partie, j'ai voulu faire deux block dix dans mon block <div class="head">, mais le deuxième block(qui contient une image de 1px de large qui se répète) se met en dessous du premier(qui contient la bannière logo).
J'ai mis un margin-left de la taille de ma bannière pour que la répétition se fasse au bon moment.
Pourquoi ça met pas les 2 div contenus dans mon <div class="head"> sur la même ligne?
Comment faut il faire?

Raphael

7 décembre 2005 à 18:26:05

Citation : Deb

Arretez avec vos tableaux

il faut utiliser des div

Attention à ce raccourci de langage : si c'est pour remplacer chaque <td> de tableau par autant de <div>, cela ne sert strictement à rien et on n'y gagnera ni gain de poids ni une meilleure accessibilité.
Si on apprend aux débutants à bêtement remplacer les tableaux par des div, on ne fera pas avancer les standards et la conception propre.

Donc non, on n'utilise pas tout le temps des <div>, on utilise les éléments appropriés (<p>, <h1>, <ul>, <div>, etc.)

Lenwë

7 décembre 2005 à 18:38:28

Quand vous aurez fini de vous entretuer, quelqu'un pourra-t-il me dire pourquoi ma bannière(coupé en deux div) se met sur deux lignes?(voir mon post d'avant.)

Raphael

7 décembre 2005 à 18:43:00

Citation : Silke

Quand vous aurez fini de vous entretuer, quelqu'un pourra-t-il me dire pourquoi ma bannière(coupé en deux div) se met sur deux lignes?(voir mon post d'avant.)

Difficile de répondre sans exemple visuel, ni code, ni page en ligne

Par contre, ça me semble être un classique problème de Modèle de Boite : IE interprète les largeurs différemment des autres :
http://css.alsacreations.com/Bases-et-indispensables/Mon-site-valide-en-XHTML-Strict-n-est-pas-compatible-partout
http://blog.alsacreations.com/2004/12/08/100-methodologie-pour-resoudre-les-problemes-daffichage-en-css

Lenwë

7 décembre 2005 à 19:17:47

#en_tete
{
width: 100%;
height: 100px;
}
.headpartie1
{
width: 672px;
height: 100px;
background-image: url("banniere02.jpg");
}
.headpartie2
{
margin-left:672px;
height: 100px;
width:auto;
background-image: url("fondhead.jpg");
background-repeat: repeat-x;

}

Qu'est-ce qui ne vas pas?
J'obtien pas l'image qui se répète a coté de ma bannière mais en dessous(mais bien a 672px du bord)

Raphael

7 décembre 2005 à 19:25:49

Oui c'est normal : tes deux div internes sont placés dans le flux normal.
Comme tous les blocs, ils se positionnent l'un sous l'autre (fixer un height à ton entête ne sert à rien). Si tu veux placer des blocs les uns à côté des autres, il faut utiliser le positionnement flottant ou absolu.

Dans ton exemple je me pose plusieurs questions :
- quel intérêt de préciser un width 100% à l'entête puisqu'un bloc occupe par défaut toute la largeur ?
- pourquoi utiliser 2 div internes alors qu'il suffirait d'appliquer un background à l'entête ?

Lenwë

7 décembre 2005 à 20:55:15

pour le width100%, ouai c'est vrai il ne sert a rien, merci.
Poue les deux div internes, vu que je met deux images, je suis bien obliger d'en faire deux non?

J'ai essayé de mettre "position : absolute" a différent endroit, ça ne marche pas. Ou doi-je le mettre?

--------------------------------------UP-----------------------------------------

J'y suis arrivé, mais sous IE(alala, toujours IE) j'ai un espace d'environ 2-3px entre mes 2blocks.
Comment y remédier en sachant que j'ai déja mis tout mes paddings et mes margins a 0px?

Raphael

7 décembre 2005 à 23:30:44

Citation : Silke

Poue les deux div internes, vu que je met deux images, je suis bien obliger d'en faire deux non?

Ben là tu as 3 div.
Ce que je veux dire, c'est que 2 te suffiraient :
- un div global qui contiendrait une image de fond (au-lieu d'être vide comme dans ton cas)
- un div interne avec une autre partie de l'image de fond et placé en flottant par exemple

Citation

J'y suis arrivé, mais sous IE(alala, toujours IE) j'ai un espace d'environ 2-3px entre mes 2blocks.
Comment y remédier en sachant que j'ai déja mis tout mes paddings et mes margins a 0px?

C'est le fameux bug IE nommé "3 pixel gap", que l'on retrouve très souvent.

Voici deux pistes :
http://www.positioniseverything.net/explorer/threepxtest.html
http://test.blog-and-blues.org/haslayout/tests/float6.html

Lenwë

8 décembre 2005 à 18:27:56

Alors dans les pages que tu m'as donné j'ai pas trop compris, il faut que je mete ça? :

* html #en_tete {
margin-right: 10px;
}

* div#en_tete {
height: 1%;
margin-left: 0;
}

Sinon, je n'ai pas mis de "position : absolute" et ça marche, j'ai mis juste un "float : left" sur la première partie de la bannière.
A quoi sert la "absolute", faut-il que je le rajoute et pourquoi?

----------------------------------------UP-------------------------------------
Alors c'est bon, j'ai réussi sans trop de bidouillage.
je vous montre mes script, il y a surement plein de trucs qui vont pas, j'attends vos remarques :

<!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 Fantastique Universe!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="css de index.css" />
</head>
<body>
<div id="en_tete">
<div class="headpartie1"></div>
</div>

<div id="menu">

<div class="element_menu">
<h3>Titre menu</h3> 

<ul>
<li ><a class="boutonacceuil" href="http://www.lesite.com"></a></li>
   <li ><a class="boutonnews" href="http://www.lesite.com"></a></li>
<li><a></a></li>
</ul>

<h3>Titre menu</h3>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>

<h3>Partenaires</h3>

<li><a href="http://www.artgamer.com">Artgamer</a></li>
<li><a href="http://www.siteduzero.com">Site du Zero</a></li>
<li><a></a></li>

</div>

</div>

<div id="corps">

<h1>Bienvenue sur Fantastic Universe!</h1>
<p>
<img src="http://s144851876.onlinehome.fr/images/en_construction.gif" /><br />
   Ce site est encore en cours de construction, et pour un bon moment je pense!

   </p>

<h2>A qui s'adressera ce site ?</h2>
<p>
Alors, ici on parleras de jeux de figs Fantastiques, du genre de Confrontation ou de Warhammer Battle.<br />
Vous y trouverez une galerie photo, pourrez y proposer des articles de tout types(en relation avec les jeux de figs! ;)), et a plus long terme il y aura un forum et un tchat(là j'aurais vraiment beaucoup bossé!).
   Bon bah, en attendant allez sur d'autre site lol! <br />
   J'actualiserais cette page quand la sortie du site sera proche.<br />
   Silke, Webmaster
</p>

</div>
<div id="pied_de_page">
<p>Webmaster : Silke <br /> Copyright FU coopération, tous droits réservés.</p>
</div>

</body>
</html>

body
{
width: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 0px; /* Idem pour le bas du navigateur */
background-image: url("fondcorps.png");
position: absolute;
}

#en_tete
{
height: 100px;
background-image: url("banniere02.jpg");
margin:0px;
margin-bottom: 1px;
padding:0px;
}
.headpartie1
{
margin-left:652px;
height: 100px;
background-image: url("fondhead.jpg");
background-repeat: repeat-x;
}
#menu
{
float: left ; /* Le menu flottera à gauche */
width: 130px; /*taille du menu */
}

.element_menu
{
background-color: none;
background-image: url("http://s144851876.onlinehome.fr/images/fondmenu.jpg");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */

}
.element_menu h3 /* Tous les titres de menus */
{
color: rgb(225,188,111);
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
font-size: 17px;
}
.element_menu a
{
width: 125px;
height: 25px;
display: block;

}
.element_menu a.boutonacceuil
{

background-image: url("http://s144851876.onlinehome.fr/images/boutonacceuil.png") !important;
background-image: url("boutonacceuil8bits.png");

width:125px;
height:25px;

}
.element_menu a.boutonacceuil:hover
{
background: black url("http://s144851876.onlinehome.fr/images/boutonacceuilhover.png") no-repeat!important;
font-size: 20px;
color: black;
}
.element_menu a.boutonnews
{
background-image: url("http://s144851876.onlinehome.fr/images/boutonnews.png")!important;
width:125px;
height:25px;
background-image: url("boutonnews8bits.png");

}
.element_menu a.boutonnews:hover
{
background: black url("http://s144851876.onlinehome.fr/images/boutonnewshover.png") no-repeat!important;
font-size: 20px;
color : black;
}
.element_menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}

#corps
{
margin-left: 131px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 10px; /* 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: rgb(225,188,111);
background-image: url("http://s144851876.onlinehome.fr/images/Fond02.jpg");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
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 */
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;

background-image: url(""); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 0px;
text-align: left;
}
#corps img
{
display: block;
margin: auto;
}
#corps p
{
text-align: justify;
}
#pied_de_page
{
padding: 5px;

text-align: center;

color: rgb(30,53,144);
font-style: italic;
font-family: arial ;
font-size:80%;
background-color: ;
background-image: url("");
background-repeat: repeat-x;

border: ;
}

Merci pour vos futures remarques et conseils