Forum TourDeJeu [Powered by Invision Power Board]

Version imprimable du sujet
Cliquez ici pour voir ce sujet dans son format original

Forum TourDeJeu > Design et graphismes > Html Et Css

Ecrit par: Vorgat Jeudi 12 Mai 2005 à 17h21

Voilà, je fais une bordure couble (border), et j'aimerais que la bordure, épouse la taille du texte, comment faire ?

Ecrit par: Arckam Jeudi 12 Mai 2005 à 17h51

Ce n'est pas très clair.

Donne-nous un exemple de ce que tu veux Et donne nous ton code aussi.

Ecrit par: Vorgat Jeudi 12 Mai 2005 à 18h01

Bon, maintenant, j'ai une autre question, mon texte disparais pour je ne sais qu'elle raison. Voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="css.css" />
<title>Document</title>
</head>
<body>
<div id="en_tete">
</div>
<div id="menu">
<div id="menu1>
<ul>
<li>Accueil</li>
<li>Inscrption</li>
<li>Regles</li>
<li>Jeu</li>
<li>Liens</li>
<li>Faq</li>
</ul>
</div>
</div>
<div id="menu2">
<form method="post" action="traitement.php"></form>
<p><input type="text" name"pseudo"/></p>
</div>
</body>
</html>

Ecrit par: Arckam Jeudi 12 Mai 2005 à 19h08

dans ton code tu as une ligne

CODE

où il manque un guillemet. Essaye avec.

Ecrit par: Vorgat Jeudi 12 Mai 2005 à 19h37

Bon, maintenant, avec ce code CSS:

#menu_a
{
color: blue;
font-size: 1.2em;
font-family: "Monotype Corsiva", baskerville, helvetica, serif;
border: 6px ridge #333300;
}

.important
{
color: #990000
}

legend
{
font-family: "Monotype Corsiva", Georgia, "Times New Roman", Times, serif;
color: black;
font-weight: bold;
}

fieldset
{
border: 4 px ridge #333300;
background-color: #003300;``
}

Et le html plus haut, j'aimerais pouvoir mettre les bordures d'une taille précise…

Mais je ne sis comment faire…

Ecrit par: Nonothehobbit Jeudi 12 Mai 2005 à 23h21

enlève l'espace entre le nombre et l'unité (4px au lieu de 4 px)

Ecrit par: Arckam Jeudi 12 Mai 2005 à 23h49

Et fait très attention à tes guillemets.

CODE

font-family: "Monotype Corsiva", baskerville, helvetica, serif;

CODE

background-color: #003300;``

Par exemple.

Ecrit par: Vorgat Vendredi 13 Mai 2005 à 17h53

J'aimerais réduire le résultats de ce code.

CODE

<label>
Votre pseudo :
<input type="text" name="pseudo"/>
</label>
<br />
<label>
Votre mot de passe :
<input type="password" name="pass" />
</label>

Ecrit par: Arckam Vendredi 13 Mai 2005 à 19h24

C'est à dire ?

Avoir une police plus petite ? Alors tu peux mettre tout ça dans un <div> avec un attribut style="font:taille nom;" par exemple. CE n'est qu'un exemple, il y a 36 façons de le faire.

Si tu veux réduire autre chose donne nous plus de détails.

Ecrit par: Vorgat Vendredi 13 Mai 2005 à 20h08

Ce que je veux réduire, c'est de la barre blanche ou l'on ecris son nom et son mot de passe…

Ecrit par: Vorgat Dimanche 15 Mai 2005 à 10h59

Bon, j'ai fait un trucs, j'aimerais savoir ce que vous en pensez (niveau graphique), ne vous occupez pas de la bannière et du texte.

user posted image

Ecrit par: Nonothehobbit Dimanche 15 Mai 2005 à 13h24

Noir sur marron c'est pas très lisible, et bleu sur beige non plus. A part ça ça va, si ce n'est que tu utilise une police spéciale, qui ne s'affichera pas chez la plupart des internaute. Donc le rendu en times, je sais pas si ça sera très joli. ^^

Ceci mis à part, tu as du poser 4 ou 5 question, on t'as demander d'en détailler au moins 3 afin de t'aider mais à chaque fois tu embrayait sur autre chose. Donc avant que tu ne demande autre chose, j'aimerai quand même savoir si tu souhaite notre aide ou non ?

Ecrit par: Vorgat Dimanche 15 Mai 2005 à 14h45

Déja, pour la police, je propose de la télécharger, ensuite, pour les couleurs, je vais changer, et j'ai trouver les réponses à mes questions. Mais merci pour ta critiques Nono…

Ecrit par: Arckam Dimanche 15 Mai 2005 à 17h19

Et bien je suis épaté. Pour quelqu'un qui n'avait jamais fait ça avant tu apprends bien.

Effectivement, tu as quelques petits soucis esthétiques, mais c'est une question de gout d'une part et d'habitude d'autre part.

Concernant ta police, il est généralement de bon goût de ne pas proposer de polices à télécharger. En fait ça fait assez has been les polices spéciales

Soit tu utilises des polices standards (et y'a quand même pas mal de choix) soit tu utilises des images.

Et effectivement, tu embrayes chaque fois sur autre chose, c'est déroutant, mais apparemment tu avances, c'est ce qui compte

Ecrit par: Vorgat Dimanche 15 Mai 2005 à 18h08

Je ne vois pas ce qu'il y a de has been à faire ça. Mais bon, je vais changer la police, mais je ne les connais pas à vrai dire…

Ecrit par: Nonothehobbit Dimanche 15 Mai 2005 à 19h58

C'est pas vraiment que ce soit Has Been, c'est que personne ne prendra jamais la peine de télécharger une police pour visiter un site. A moins qu'il ne le visite souvent, mais bon, le style est important pour la première visite, donc il faut toujours prévoir sans. Puis une police spéciale pour le fun si ça interresse des gens, mais ça ne doit pas être essentiel pour le site.

Pour les police, il y en a 2 types : les polices "générique" et les polices de caractères à part entière.

Parmis les génériques (dite moi si je me trompe), tu as : serif (type times new roman), sans-serif (type arial), cursive (type bd (comic sans ms)) et fantasy (pas sûr pour celle là).
Puis après, tu as les polices de caractères (arial, impact, times new roman, courrier, etc...). Parmi ces polices, il y en a des courantes, que tu peux utiliser sans soucis (times, impact, arial, courrier, verdana...)

Tu peux spécifier plusieurs police dans un style (attribut font-family), le navigateur tentera d'afficher la premiere, puis la seconde si la premiere n'est pas installée, etc. Si aucune police n'est présente, ce sera celle du navigateur par défaut.

Normalement, pour être sûr de l'affichage, il faut toujours spécifier au moins une police générique.

Ouala. Fait une recherche dans la doc du W3C pour en savoir plus.

Ecrit par: Flamme Lundi 16 Mai 2005 à 10h03

QUOTE (Nonothehobbit @ 15 May 2005, 18:58 )

Parmis les génériques (dite moi si je me trompe), tu as : serif (type times new roman), sans-serif (type arial), cursive (type bd (comic sans ms)) et fantasy (pas sûr pour celle là).

Ce n'est pas Fantasy mais plutôt Monospace (la plupart du temps ça correspond dans les faits à une police de type "courier", je pense...).

Ecrit par: Vorgat Lundi 16 Mai 2005 à 15h40

Bon, cet fois-ci, j'ai un probleme que je ne sais règler tout seul. Voilà:

J'ai une image, et je ne veux pas qu'elle se répète, et je ne veux pas qu'elle défile. Seulement le texte. Mais je veux que SEULEMENT le texte du milieu défile. En gros, comme exemple, la page d'accueil de Terre de Tréas…

Ecrit par: Nonothehobbit Lundi 16 Mai 2005 à 18h51

QUOTE (Flamme @ 16 May 2005, 09:03 )

QUOTE (Nonothehobbit @ 15 May 2005, 18:58 )

Parmis les génériques (dite moi si je me trompe), tu as : serif (type times new roman), sans-serif (type arial), cursive (type bd (comic sans ms)) et fantasy (pas sûr pour celle là).

Ce n'est pas Fantasy mais plutôt Monospace (la plupart du temps ça correspond dans les faits à une police de type "courier", je pense...).

Egalité :

QUOTE

<generic-family>
In the example above, the last value is a generic family name. The following generic families are defined:

* 'serif' (e.g. Times)
* 'sans-serif' (e.g. Helvetica)
* 'cursive' (e.g. Zapf-Chancery)
* 'fantasy' (e.g. Western)
* 'monospace' (e.g. Courier)

Style sheet designers are encouraged to offer a generic font family as a last alternative. Generic font family names are keywords and must NOT be quoted.

http://www.w3.org/TR/CSS21/fonts.html#value-def-generic-family

Ecrit par: Flamme Lundi 16 Mai 2005 à 22h41

Bah, je dois avouer que mes réferences sont anciennes... Mieux vaut détenir une petite part de vérité que pas de vérité du tout...

QUOTE ("Vorgat")

J'ai une image, et je ne veux pas qu'elle se répète, et je ne veux pas qu'elle défile. Seulement le texte. Mais je veux que SEULEMENT le texte du milieu défile. En gros, comme exemple, la page d'accueil de Terre de Tréas…

Tu parles d'un fonds fixe ?

Dans ta feuille de style :

body {
background: url("toto.jpg");
background-repeat: no-repeat;
background-attachment: fixed
}

Ecrit par: Vorgat Mardi 17 Mai 2005 à 17h00

Je reformule un peu mieux ma question, je veux pas que la bannière et le menu ne defile, juste le texte.

Ecrit par: Kalan Mardi 17 Mai 2005 à 21h01

Si je comprends ta question, tu veux que pour ta page, quand tu utilises la scrollbar, le Menu et le bandeau d'entête "ne bougent" pas ?
Je ne vois pas 36 solution; mais je suis pas l'expert :

1/ sur crées 3 frames. Le premier avec ton bandeau, le second ton menus et le troisième avec le contenu. Et le Scroll ne sera QUE pour ce frame. Inconvénient : les frames ne sont pas super gérables. Tu ne suis pas facilement la navigation des internautes et en terme de référencement, je crois que c'est pas top

2/tu crée un script client (javascript) pour replacer SYSTEMATIQUEMENT ton bandeau et ton menu en position visible. Je sais pas comment faire; mais tu trouveras assez facilement des exemples sur les sites dédiés tels http://www.editeurjavascript.com/

Ecrit par: Nonothehobbit Mardi 17 Mai 2005 à 22h07

Et pourquoi pas tout simplement mettre le contenu "défilable" dans un div scrollable ? (<div style="overflow:auto"></div>)

Ecrit par: Vorgat Mercredi 18 Mai 2005 à 11h34

Mais à ce moment là, je devrai mettre une logueur prédéfinis pour le texte…(height)

Ecrit par: Flamme Mercredi 18 Mai 2005 à 12h55

Pour ma part, pour faire simple, j'utilise un iframe sur La Guerre des Forts et http://monde-des-forts.org/missrachel, un site d'Asso de GN que je webmasterise. Ca a les même inconvénients que les frames, j'en suis consciente, mais il y a aussi des avantages :
- beaucoup moins lourd que les frames multiples
- plus de facilité de mise à jour des pages.

Une fois que tu as défini ton iframe dans la page centrale, les pages que tu y affiches se redimensionnent naturellement à sa taille en largeur et su tu précise un scrolling un ascenseur apparait quand le contenu de la page appelée dépasse ton frame. Seul hic : l'ascenseur pas très beau au milieu de la page, mais sous IE tu as la possibilité de définir un style pour l'accorder aux couleurs du site (mais ça ne marche que sous IE, même si certains vont encore râler sur les initiatives propriétaires du navigateur - et toujours sur celles d'IE et pas sur celles des autres, hein...

- mais je trouve quand même que c'est une bonne idée...)

Il suffit d'insérer ce code dans la page :
<iframe width=xxx height=xxx frameborder=no scrolling="oui" name="nom_cadre" src="accueil.html"></iframe>
Attention n'oublie pas à chacun de tes liens de mettre target="nom_cadre" si tu veux que la page mise en lien s'affiche dans l'iframe et target="_blank" si tu veux que ça s'affiche dans une nouvelle page.

Ecrit par: Vorgat Mercredi 18 Mai 2005 à 13h04

Le probleme de Vorgat: 18/05/05

J'ai à peu près résoolu mon problème précedent, mais celui-ci, je ni arrive pas (sinon, c' serai pas un problème

).

Donc, je vais remetre deux petit code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</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.css" />
</head>

<body>



<div id="en_tete">
<img src= "ancienroyaume.gif" title="ancien_royaume" />
</div>



<div id="menu">
<div class="element_menu">
<ul>
<li><a href="html.htm">Introduction</a></li>
<li><a href="Carac'.htm">Nouvelle</a></li>
<li><a href="page3.html">Règlement</a></li>
<li><a href="page.4.html">Inscription</a></li>
<li><a href="page5.html">Visite guidée</a></li>
<li><a href="page6.html">Screenshot</a></li>
<li><a href="page7.html">Partenaire</a></li>
<li><a href="page8.html">Crédit</a></li>
</ul>
</div>

<div class="element_menu id="mot">
<form method="post" action="traitement.php">
<p>
<label>
Votre pseudo :
<input type="text" name="pseudo"/>
</label>
<br />
<label>
Votre mot de passe :
<input type="password" name="pass" />
</label><br />
<label>Me retenir<br />
<input type="checkbox" name="retenir" id="retenir" /></label><br />
<input type="submit" value="Entrer" id="bouton" />
</p>
</form>

</div>
</div>



<div id="corps">
<h1>Ancien royaume</h1>

<p>
Bienvenue sur dans l'ancien royaume ! !<br />
Vous n'avez pas peur j'espère, d'entrer dans ce monde obscur ? De combattre, de risquer la mort ?
</p>

<h2>Qu'est-ce que Ancien royaume ?</h2>
<p>
Ancien royaume est un Jeu de rôles dans un univers original, inventé par Lars. C'est un MMORPG plus exactement. Dans un univers médiéval-fantastique. Vous avez hate de jouer,<br />
mais le mieux, c'est de savoir jouer avant de s'inscire. Consultez les règles avant de jouer. Mais ne les lisez pas tous non plus.
</p>

<h3>Bonus</h3>
<p>
Pour appréciez pleinement ce jeu, je vous conseil de télécharger cette écriture <a href="../../Desktop/ecriture.ttf">ici.</a><br /><br /><br /><br /><br /><br /><br />
</p>
</div>

</body>
</html>

Et voici le deuxieme (css):

CODE

/* CSS Document */
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #000000;
font-family: "Baskerville", "Helvetica", "serif";
background-image: url("ebene.jpg");
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-repeat: no-repeat;
margin-bottom: 40px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #626262;
background-color: #333300;
font-family: "Monotype Corsiva", "baskerville", "serif";
border: 5px ridge #663300;
margin-bottom: 20px;
font-size: 1.3em;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
text-decoration: underline
background-color: #990000;
color: #CC0000;
}

/* 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 */
margin-top: 60px;
color: #000000;
background-image: url("../../Pictures/parchemin.jpg");
background-repeat: repeat; /* Une petite image de fond qui se répètera horizontalement en haut */

border: 5px solid cc9999; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

input
{
width: 100px;
color: #666666;
}

#retenir
{
width: 15px;
}

a:visited
{
color: #660033;
}

#bouton
{
font-family: "Monotype Corsiva", "baskerville", "serif";
background-color: #993300;
text-align: center;
}

h1, h3, h2
{
text-align: center;
}

h1
{
color: #990000;
}

Voilà mon problème:

Je veux faire un petit cadre, avec qui est en ligne, à droite, à peu près au même endroit que le menu. J'ai essayer avec float; j'y arrive pas…

Ecrit par: Haiken Mercredi 18 Mai 2005 à 14h36

y'a un modèle avec ce que tu veux faire là (si je ne me trompe point) : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

(c'était dans un autre topic...)

Ecrit par: Vorgat Mercredi 18 Mai 2005 à 16h20

J'ai pas bien compris, la page…

Ecrit par: Vorgat Vendredi 27 Mai 2005 à 15h50

BOnjour, voilà, c'était pour vous remerciez, de m'avoir aidé à apprendre le html et le css. C'est tellement bien, et puis, ça ne sert pas qu'à faire des sites, maintenant, je peux me la peter en cours de techno

. DOnc, je remercis tout le monde.

-Vorgat-