Problème HTML

27-12-2011 13:30:29

Salut!
Je suis en ce moment en train d'apprendre le HTML/CSS et j'ai quelques problèmes.
Je comptes faire un forum en php, mais il me faut d'abord les bases, et je fais une "maquette" en HTML.
Le 1er problème concerne mon article, qui va de Présentation au dernier abysse.
J'ai durant un essai, modifier la largeur de mon article, et je n'arrive plus à la re-modifier.
Le screen:[url]http://www.casimages.com/img.php?i=111227013820196939.png[/url]
Mon code CSS:

Code:

article
{
    display: inline-block;
    text-align: justify;
    width: 500px;
    margin-right: 90px;
}
aside
{
    display: inline-block;
    text-align: justify;
    vertical-align: top;
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
    float: right;
    margin-right: -180px;
}


#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

aside img
{
    margin-right: 3px;
}

Je suis un [u]débutant[/u].
Et au fait zoomer sur l'image, on voit pas bien.

Dernière modification par sasuke33500 (27-12-2011 13:36:43)

29-12-2011 11:31:41

Ho!H!
J'aimerais bien avoir ma réponse, moi. Message aux modo:Excusez-moi pour le flood, c'est pour que le topic revienne sur la page d'accueil, mais c'est toujours mieux que d'en refaire un.
[spoil]Les erreurs suivantes doivent être corrigées pour que le message puisse être envoyé :

Les messages doivent être argumentés, nous vous invitons à relire les règles. Pour le dialogue, le bar est à votre disposition.[/spoil]

30-12-2011 15:27:05

Tout d'abord je te déconseille d'utiliser le [b]display :inline-block[/b] pour des raisons de compatibilité avec les navigateurs. Utilise plutôt :
[b]float : right/left[/b] (pour l'article je dirais left et pour la partie de l'auteur right). (au fait tu n'aurais pas oublier le # ou le . devant les noms de tes name ? Dans le genre : [b]#aside[/b] ou [b]#article[/b])
Définit la largeur de ton body si ce n'est pas déjà fait.

Ensuite pour ce qui est des [b]border-radius[/b] et [b]box-shadow[/b], je te déconseille fortement. Pour comprendre va faire un tour sur Internet Explorer.
Utilise plutôt des images à la place, c'est plus long mais efficace

Dernière modification par naruto-1 (30-12-2011 15:28:03)

30-12-2011 15:46:58

[quote=naruto-1]Tout d'abord je te déconseille d'utiliser le [b]display :inline-block[/b] pour des raisons de compatibilité avec les navigateurs. Utilise plutôt :
[b]float : right/left[/b] (pour l'article je dirais left et pour la partie de l'auteur right). (au fait tu n'aurais pas oublier le # ou le . devant les noms de tes name ? Dans le genre : [b]#aside[/b] ou [b]#article[/b])
Définit la largeur de ton body si ce n'est pas déjà fait.

Ensuite pour ce qui est des [b]border-radius[/b] et [b]box-shadow[/b], je te déconseille fortement. Pour comprendre va faire un tour sur Internet Explorer.
Utilise plutôt des images à la place, c'est plus long mais efficace[/quote]
Merci et oui tu as raison j'ai oublié les #.

Et tu sais comment je peux faire pour centrer mon texte par rapport aux images de fond?
Je m'explique, prenons l'exemple du fond de WoN, il y a les shuriken sur fond bleu sur les côtés, et le blanc au milieu. Le texte est centré sur le fond blanc, et non par rapport à la page (enfin je crois).
Alors que moi, je ne sais que centrer par rapport à la page, et je voudrais mettre une image en fond sur les côtés, et le jaune du fond actuel au centre.
Mais vu que ça se centre par rapport à la page, ça donne une impression de décalage.
Je ne sais pas si j'ai bien expliquer, mais quelqu'un aurait la solution?

30-12-2011 18:25:48

[quote=sasuke33500]Salut!
Je suis en ce moment en train d'apprendre le HTML/CSS et j'ai quelques problèmes.
Je comptes faire un forum en php, mais il me faut d'abord les bases, et je fais une "maquette" en HTML.
Le 1er problème concerne mon article, qui va de Présentation au dernier abysse.
J'ai durant un essai, modifier la largeur de mon article, et je n'arrive plus à la re-modifier.
Le screen:[url]http://www.casimages.com/img.php?i=111227013820196939.png[/url]
Mon code CSS:

Code:

article
{
    display: inline-block;
    text-align: justify;
    width: 500px;
    margin-right: 90px;
}
aside
{
    display: inline-block;
    text-align: justify;
    vertical-align: top;
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
    float: right;
    margin-right: -180px;
}


#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

aside img
{
    margin-right: 3px;
}

Je suis un [u]débutant[/u].
Et au fait zoomer sur l'image, on voit pas bien.[/quote]
Ouais t'as raison je trouve en faite je teste le forum exuzemeoi

Désolé sa vient du fond du coeur

30-12-2011 18:49:36

Ce que tu dois faire c'est faire un truc du style :

<body>
<div id="textPage">
Ici tu mettra tes div menu, contenu, footer etc...
</div>
</body>

Ensuite tu insère la commande background pour le body et tu centre ta div textPage (avec position : absolute, une largeur, ton fond jaune et tout le reste).

Je ne sais pas si c'est ce que tu veux exactement, en tout cas c'est ce que j'ai compris

30-12-2011 18:55:36

[quote=naruto-1]Ce que tu dois faire c'est faire un truc du style :

<body>
<div id="textPage">
Ici tu mettra tes div menu, contenu, footer etc...
</div>
</body>

Ensuite tu insère la commande background pour le body et tu centre ta div textPage (avec position : absolute, une largeur, ton fond jaune et tout le reste).

Je ne sais pas si c'est ce que tu veux exactement, en tout cas c'est ce que j'ai compris[/quote]
Voilà mon code pour les images de fond, mais l'ordi ne m'affiche que le fond jaune, pas les images sur le côté, et le problème n'est pas dans le nom des images.

Code:

body
{
    background: url('images/fond_jaune.png') fixed repeat, url('images/ciel2.png') fixed no-repeat right, url('images/nuages.jpg') fixed repeat center;
}

30-12-2011 19:12:59

Non, ce qu'il faut faire c'est :

body{
background : url('images/ciel2.png') fixed no-repeat right;
}
#textPage{
background : url('images/fond_jaune.png') fixed repeat;
}

Mais là je comprend pas parce que tu as trois images O.o , tu veux mettre deux images de fond ?

30-12-2011 19:15:35

[quote=naruto-1]Non, ce qu'il faut faire c'est :

body{
background : url('images/ciel2.png') fixed no-repeat right;
}
#textPage{
background : url('images/fond_jaune.png') fixed repeat;
}

Mais là je comprend pas parce que tu as trois images O.o , tu veux mettre deux images de fond ?[/quote]
Oui, mais ciel et ciel2 sont la même image, je veux les mettre sur le côté, donc j'ai fait une copie que je mes à gauche et l'originale à droite.
Ensuite, le fond jaune est au centre.
Mais les 2 ciels sont au dessus sur les côtés.

Dernière modification par sasuke33500 (30-12-2011 19:16:02)

30-12-2011 19:21:15

Je crois que tu n'as pas encore compris quelque chose. C'est qu'en fait tu as ton fond du ciel qui prend toute ta page (donc le body) et ensuite tu superpose ton fond jaune avec la div textPage que tu mettra les valeurs qu'il te faut pour la centrer et lui mettre une taille.

Imagine toi que tu as ta page A3 (représente ton ciel) à laquelle tu superpose une page A4 centré (cela représenterait ton fond jaune). Je sais pas si je me suis fais comprendre

30-12-2011 19:25:06

[quote=sasuke33500][quote=naruto-1]Non, ce qu'il faut faire c'est :

body{
background : url('images/ciel2.png') fixed no-repeat right;
}
#textPage{
background : url('images/fond_jaune.png') fixed repeat;
}

Mais là je comprend pas parce que tu as trois images O.o , tu veux mettre deux images de fond ?[/quote]
Oui, mais ciel et ciel2 sont la même image, je veux les mettre sur le côté, donc j'ai fait une copie que je mes à gauche et l'originale à droite.
Ensuite, le fond jaune est au centre.
Mais les 2 ciels sont au dessus sur les côtés.[/quote]
Je crois que c'est seulement 2 image de fonc avec css3 non???
mais une meilleur idée tu edite ton fond avec un logiciel comme gimp

et tu utilise :

Code:

background-attachment: fixed;

et voila

30-12-2011 19:29:01

Il y a un problème avec ta solution, c'est qu'elle n'est pas adaptée à toute les résolution d'écran.

Désolé de démonter ta possibilité mais elle est vraiment improbable, il n'y a qu'à voir les différentes résolutions qui vont d'un écran 14 pouces à un écran 50 pouces voir nettement plus (si certain vont avec leur PS3 sur la TV)

Dernière modification par naruto-1 (30-12-2011 19:29:18)

30-12-2011 19:30:29

[quote=naruto-1]Il y a un problème avec ta solution, c'est qu'elle n'est pas adaptée à toute les résolution d'écran.

Désolé de démonter ta possibilité mais elle est vraiment improbable, il n'y a qu'à voir les différentes résolutions qui vont d'un écran 14 pouces à un écran 50 pouces voir nettement plus (si certain vont avec leur PS3 sur la TV)[/quote]
oui c'est vrai j'avais pas pensé a ça !

30-12-2011 19:34:13

[quote=naruto-1]Je crois que tu n'as pas encore compris quelque chose. C'est qu'en fait tu as ton fond du ciel qui prend toute ta page (donc le body) et ensuite tu superpose ton fond jaune avec la div textPage que tu mettra les valeurs qu'il te faut pour la centrer et lui mettre une taille.

Imagine toi que tu as ta page A3 (représente ton ciel) à laquelle tu superpose une page A4 centré (cela représenterait ton fond jaune). Je sais pas si je me suis fais comprendre[/quote]
Si j'ai bien compris, ça doit donner ça:

Code:

body
{    
            background: url('images/ciel2.png') fixed no-repeat right, url('images/ciel.png') fixed no-repeat left;
}
#text_page
{
     background-image:url('images/fond_jaune.png') fixed repeat;
}

Si c'est bien ça, il y a un truc que je ne comprends pas, les fonds "ciel.png" et "ciel.png" sont tous les deux à leur place, mais le fond jaune est... absent.

Dernière modification par sasuke33500 (30-12-2011 19:40:55)

30-12-2011 19:39:02

[quote=sasuke33500][quote=naruto-1]Je crois que tu n'as pas encore compris quelque chose. C'est qu'en fait tu as ton fond du ciel qui prend toute ta page (donc le body) et ensuite tu superpose ton fond jaune avec la div textPage que tu mettra les valeurs qu'il te faut pour la centrer et lui mettre une taille.

Imagine toi que tu as ta page A3 (représente ton ciel) à laquelle tu superpose une page A4 centré (cela représenterait ton fond jaune). Je sais pas si je me suis fais comprendre[/quote]
Si j'ai bien compris, ça doit donner ça:

Code:

body
{    
            background: url('images/ciel2.png') fixed no-repeat right, url('images/ciel.png') fixed no-repeat left;
}
#text_page
{
     background-image:url('images/fond_jaune.png') fixed repeat,
}

Si c'est bien ça, il y a un truc que je ne comprends pas, les fonds "ciel.png" et "ciel.png" sont tous les deux à leur place, mais le fond jaune est... absent.[/quote]
a la fin de :background-image:url('images/fond_jaune.png') fixed repeat tu met une "virgule" et non un ";" point virgule!!

30-12-2011 19:40:29

Il faut définir également définir la largeur que tu souhaite et la hauteur minimal, je ne vois que ça comme problème vu que tu as l'air satisfait de comment s'affiche ton ciel.

Et met un point virgule à la fin de ta ligne pour le fond jaune, ça peut aussi être ça le problème

EDIT : j'avais pas vu ton post mohamed désolé

Dernière modification par naruto-1 (30-12-2011 19:41:11)

30-12-2011 19:42:47

[quote=naruto-1]Il faut définir également définir la largeur que tu souhaite et la hauteur minimal, je ne vois que ça comme problème vu que tu as l'air satisfait de comment s'affiche ton ciel.

Et met un point virgule à la fin de ta ligne pour le fond jaune, ça peut aussi être ça le problème

EDIT : j'avais pas vu ton post mohamed désolé [/quote]
Il faut quelle balise pour la largeur de l'image?
Et ça n'arrange pas un problème: il n'y a pas le fond jaune.

30-12-2011 19:47:47

Non il faut mettre une taille à ta div et faire répéter ton image de fond jaune si elle n'est pas assez grande :

#textPage{
background : ton image;
min-height : 300px; (à toi de voir)
width : 300px; (à toi de voir aussi)
}

Je ne suis pas sûr de mon coup mais je ne vois que ça

30-12-2011 19:51:01

[quote=naruto-1]Non il faut mettre une taille à ta div et faire répéter ton image de fond jaune si elle n'est pas assez grande :

#textPage{
background : ton image;
min-height : 300px; (à toi de voir)
width : 300px; (à toi de voir aussi)
}

Je ne suis pas sûr de mon coup mais je ne vois que ça[/quote]
effectivement je croit que c'est ça!mais moi je ne met pas de "min" je ne te contredis pas hein!

et maintenant le problème peut venir de ton code html! envoie le code html stp qu'on le test

30-12-2011 19:55:52

[quote][quote]naruto-1 a écrit:

Non il faut mettre une taille à ta div et faire répéter ton image de fond jaune si elle n'est pas assez grande :

#textPage{
background : ton image;
min-height : 300px; (à toi de voir)
width : 300px; (à toi de voir aussi)
}

Je ne suis pas sûr de mon coup mais je ne vois que ça[/quote]
effectivement je croit que c'est ça!mais moi je ne met pas de "min" je ne te contredis pas hein!

et maintenant le problème peut venir de ton code html! envoie le code html stp qu'on le test[/quote]
Pour ma part, je te conseille de l'ajouter quand tu as des div à taille/hauteur variable pour éviter que cela ne te prenne toute la page à chaque fois, ce qui, esthétiquement, n'est pas super dans certain cas

Dernière modification par naruto-1 (30-12-2011 19:56:13)

30-12-2011 20:30:51

Voilà mon code HTML:

Code:

        <meta charset="unicode" />
            <link rel="stylesheet" href="style2.css" />
            <title>The-World-Of-RPG, la référence sur les rpg</title>
      </head>

      <body>
            
                <div id="text_page"> 
         <header>  
                <div id="bannière">
             <img src="banniere_worpg2.png" alt="bannière"/>       
                </div>
                <div id="titre_principal">
                <h1>The World Of RPG</h1>
                </div>
        </header>    
            <nav>
                        <ul>
                            <li><a href="#">Dossier</a></li>
                            <li><a href="#">Place du village</a></li>
                            <li><a href="#">Soluce</a></li>
                            <li><a href="#">Fanarts</a></li>
                            <li><a href="#">Salle de réunion</a></li>
                        </ul>
            </nav>
        </header>    
        <section>    
        <article>        
                <div id="présentation">
                <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Présentation du futur forum</h1>        
          Cette page est un design de préparation à la création d'un forum. Je vais m'inspirer de <a href="http://www.wonaruto.com/">ce site</a>
                    </br>
                <p>Vous voilà entré dans le monde de WORPG!</p>
                <p>Mais il vous faudra remplir des missions, étudier à l'académie des soldats et prouver votre valeur en affrontant les autres membres et défendre votre alliance au sein de l'abysse. Vous devrez braver tous les dangers et vous montrer d'une force et d'une stratégie incroyable pour un jour, vouloir rejoindre l'élite de votre alliance. Vous pourrez aussi vous joindre à une guilde et participer à des matchs contre les autres guildes. Choisissez vous un équipier et ensemble, devenez maître de l'abysse!</p>
                </div>
                <div id="images_présentation">
                <img src="images/abysse2.png" alt="abysse">
        </article>
        <aside>
                 <h1> A propos de l'auteur </h1>
                <img src="images/bulle.png" alt="" id="fleche_bulle" />
                <img src="sasuke33500.png" alt="mon avatar"/>
                <p> Bonjour tout le monde!</br>
                Je suis un créateur de site web débutant. Je suis sasuke33500 ou Frenezia, cela dépend des sites. Je suis né un 25 septembre.</br>
                Je suis en ce moment sur un projet de forum basé sur les rpg, comme final fantasy ou dragon quest, et j'espére voir ce site fini. Pour le moment, ceci n'est qu'un test en html, mais je veux coder ce forum en php.</p>
                <img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt"RSS" />
        </aside>
        </section>
        <footer>
                    <div id="mes_sites">
                 <h1>Mes sites web préférés</h1>
                 <ul>
                 <li><a href="http://www.wonaruto.com/">The Way Of Naruto</a></li>
                 <li><a href="http://www.siteduzero.com/">Le Site Du Zéro</a></li>
                 <li><a href="http://rpg-xp.creationforum.net/">RPG-XP</a></li>
                 </ul>
                </div>
                    <div id="mes_amis">
                <h1>Mes amis</h1>    
                <ul>
                <li><a href="#">Jenova</a></li>
                <li><a href="#">relidu91</a></li>
                <li><a href="#">X33</a></li>
                </ul>            
                <ul>
                <li><a href="#">Ichigo X33</a></li>
                <li><a href="#">sweetie</a></li>
                <li><a href="#">striker</a></li>
                </ul>
                </div>
                <div id="mailto">
                <p><a href="mailto:z.prevost@free.fr">Contactez moi!</a></p>
                </div>
            </div>
        </footer>
    </body>
</html>

Voilà, je m'approche du but, j'ai mon fond jaune, et mes ciels, mais le fond jaune est décalé par rapport au reste de la page.
Je ne sais pas si je me suis bien exprimé, donc voilà le screen: http://www.casimages.com/img.php?i=1112 … 28367.png.
Et sinon, au fait, pour la largeur de mon article, j'ai toujours pas réussI...

Dernière modification par sasuke33500 (30-12-2011 20:50:17)

31-12-2011 14:02:26

Salut, pour apprendre le HTML ou bien même des langages de programmation, je me suis toujours référé au site du zéro, il y a là bas de très bon tuto.

Tu as aussi ce site là qui est pas mal pour le html et xhtml ou appellons le par son vrai nom ça ne fait pas de mal Hyper Text Markup Language : http://fr.html.net/tutorials/html/introduction.php

31-12-2011 16:32:56

[quote=Pyroleader]Salut, pour apprendre le HTML ou bien même des langages de programmation, je me suis toujours référé au site du zéro, il y a là bas de très bon tuto.

Tu as aussi ce site là qui est pas mal pour le html et xhtml ou appellons le par son vrai nom ça ne fait pas de mal Hyper Text Markup Language : http://fr.html.net/tutorials/html/introduction.php[/quote]
Oui, le site du zéro, c'est là que j'ai appris, et uje n'ai pas trouvé la réponse, même si je n'ai pas tout fait.
Par contre, Hyper Text Markup Language, ça je ne connait pas, je vais aller voir, mais toi, tu pourrais m'aider?

31-12-2011 16:37:24

Pour placer ton fond jaune, je pense qu'il faut que tu lui attribues une largeur proportionnelle à la largeur de l'écran de l'utilisateur. pour cela, au lieu de dimensionner en pixel (px), tu dimensionnes en pourcentage de l'écran de l'utilisateur.

Par exemple, si tu veux que ton fond jaune prenne 30% de l'écran, tu fais

width : 30%;

Et ensuite, pour centrer ton div, tu fais :

margin-left : 35%;

Pourquoi 35 % ? Parce que ton fond jaune prend 30 % de la largeur d'écran, il reste donc 70% de l'écran, donc pour qu'il soit centré, il faut qu'il y est autant de place à gauche qu'à droite de ton corps, donc ça donne 70 / 2 = 35

J'espère t'avoir été utile.

Dernière modification par Akisha Arkano (31-12-2011 16:38:18)

31-12-2011 16:44:09

[quote=Akisha Arkano]Pour placer ton fond jaune, je pense qu'il faut que tu lui attribues une largeur proportionnelle à la largeur de l'écran de l'utilisateur. pour cela, au lieu de dimensionner en pixel (px), tu dimensionnes en pourcentage de l'écran de l'utilisateur.

Par exemple, si tu veux que ton fond jaune prenne 30% de l'écran, tu fais

width : 30%;

Et ensuite, pour centrer ton div, tu fais :

margin-left : 35%;

Pourquoi 35 % ? Parce que ton fond jaune prend 30 % de la largeur d'écran, il reste donc 70% de l'écran, donc pour qu'il soit centré, il faut qu'il y est autant de place à gauche qu'à droite de ton corps, donc ça donne 70 / 2 = 35

J'espère t'avoir été utile.[/quote]
Merci, je crois que les balises sont bonnes et vont me permettre de régler un énorme problème.
[b]EDIT:[/b]Nan en fait, ça décale, mais du mauvais côté, et margin-right ne fait absoluement rien...

Dernière modification par sasuke33500 (31-12-2011 16:49:48)

Forums » Problème HTML:

Problème HTML

Code:

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Code:

Re: Problème HTML

Re: Problème HTML

Code:

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Code:

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Code:

Re: Problème HTML

Code:

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Code:

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Pages: 1 2 3

Pied de page des forums