Problème HTML

31-12-2011 16:52:15

Pour centrer, il faut que tu ajoutes les "données" margin-right et left.
Perso, j'ai tout autant galèrer que toi jusqu'à ce que je trouve la soluce

Tu mets :"margin-right:auto" et pareil pour le left.
Et normalement, sa devrait te le centrer

Sous firefox et chrome sa marche.
Sous IE sa marche pas.. mais ie c'est de la merde !
Dans 99% des cas, il te faudra une CSS spéciale pour IE...

Code:

CSS :

body{
    width:auto;
    height:auto;
}
.marges{
    margin-right:auto;
    margin-left:auto;
    width: 300px;
    height:300px;
    background-color:red;
}

Code:

HTML

<head>
        <link rel="stylesheet" type="text/css" href="./teste-css.css">
        <link rel="stylesheet" type="text/css" media="print" href="./teste-css.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta lang="fr">
        <title>TESTE MARGES</title>
</head>
    <body>
        <div class="marges">
            <p>teste</p>
        </div>
    </body>
</html>

Dernière modification par sasuke12_13 (31-12-2011 17:02:38)

31-12-2011 16:59:45

Si tu utilises un margin-left et un width avec une valeur proportionnelle (avec des %), il ne faut pas que tu ais une autre ligne avec des valeurs en pixel (px), tu pourrais nous envoyer ton code CSS que tu as maintenant ?

31-12-2011 17:00:00

[quote=sasuke33500][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...[/quote]
si la soluce de sasuke12_13 ne fonctionne t'a qu'a augmenté les pourcentage sur la soluce de akisha jusqu'a ce que la position te convienne!

31-12-2011 17:01:07

[quote=Akisha Arkano]Si tu utilises un margin-left et un width avec une valeur proportionnelle (avec des %), il ne faut pas que tu ais une autre ligne avec des valeurs en pixel (px), tu pourrais nous envoyer ton code CSS que tu as maintenant ?[/quote]
Voilà [u]tout[/u] mon code CSS, si vous voulez seulement une partie, dites lemoi:

Code:

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body
{    
    background: url('images/ciel2.png') fixed no-repeat right, url('images/ciel.png') fixed no-repeat left;
    margin-right : auto;
    margin-left: auto;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    width: 100%;
}

#text_page
{    
    background-image: url('images/fond_jaune.png');
    width : 10%;
    min-height : 300px; 
    width : 1050px; 
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

#présentation
{
    text-align: center;
    vertical-align: center;
    width: 300px;
    font-size: 20px;
    display: inline-block;
}
h1
{
    font-family: ballpark, Dayrom, serif;
    color: maroon;
}
header
{
    background: url('images/separateur.png') repeat-x bottom;
}
header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}
nav
{
    display: inline-block;
    width: 1250px;
    text-align: center;
}
nav ul
{
    list-style-type: none;
}
nav li
{
    display: inline-block;
    margin-right: 15px;
}
nav
{
    background: url('images/separateur.png') repeat-x bottom;
    text-align: center;
    vertical-align: center;
}
#titre_principal
{    
    text-align: center;
}
nav a
{
    border-bottom: 3px solid #760001;
}
/* Bannière */
#bannière
{
    height: 200px;
    border-radius: 5px;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    color: white;
    font-size: 0.8em;
}
#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}


/* Corps */

article
{
    display: inline-block;
    text-align: justify;
    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;
}

31-12-2011 17:04:36

Même avec des pourcentage, ma technique fonctionne

[spoil]et oui, sa fonctionne
On y croirais pas au premiers abords mais pourtant
et oui, sa fonctionne
On y croirais pas au premiers abords mais pourtant
et oui, sa fonctionne
On y croirais pas au premiers abords mais pourtant ;)et oui, sa fonctionne
On y croirais pas au premiers abords mais pourtant [/spoil]

31-12-2011 17:07:21

Voilà, le problème est que tu affectes 2 fois width. Il faut choisir, soit tu prend des valeurs en % (même résultat quelque soit la largeur de l'écran), soit des valeurs en px (optimisé pour ton écran).

Donc il faut que tu supprimes l'un des deux width. Personnellement je te conseillerais de garder les valeurs en %, dans ce cas, mets aussi ton margin-left en %.

31-12-2011 17:53:53

Bon j'ai toujours des problèmes et du coup, je me demande si le text_page englobe bien tout le texte, donc voici mon code html:

Code:

<!DOCTYPE html>
    <html>
        <head>
            <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>

Et quelqu'un saurait ajuster la longueur des séparateurs au dessus et sous le menu de navigation?

Dernière modification par sasuke33500 (31-12-2011 18:03:57)

31-12-2011 18:02:51

[quote=sasuke33500]Bon j'ai toujours des problèmes et du coup, je me demande si le text_page englobe bien tout le texte, donc voici mon code html:

Code:

<!DOCTYPE html>
    <html>
        <head>
            <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>

[/quote]
En effet, ton div text_page n'est pas fermé. Il faut que tu rajoutes </div> juste après </footer>.

Je ne sais pas cela va résoudre ton problème, comment apparaît ta page web exactement maintenant ?

31-12-2011 18:08:08

[quote=Akisha Arkano][quote=sasuke33500]Bon j'ai toujours des problèmes et du coup, je me demande si le text_page englobe bien tout le texte, donc voici mon code html:

Code:

<!DOCTYPE html>
    <html>
        <head>
            <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>

[/quote]
En effet, ton div text_page n'est pas fermé. Il faut que tu rajoutes </div> juste après </footer>.

Je ne sais pas cela va résoudre ton problème, comment apparaît ta page web exactement maintenant ?[/quote]
Maintenant, ça ressemble à ça: http://www.casimages.com/img.php?i=1112 … 124147.png

Dernière modification par sasuke33500 (31-12-2011 18:31:38)

31-12-2011 18:43:20

[quote=sasuke33500][quote=Akisha Arkano][quote=sasuke33500]Bon j'ai toujours des problèmes et du coup, je me demande si le text_page englobe bien tout le texte, donc voici mon code html:

Code:

<!DOCTYPE html>
    <html>
        <head>
            <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>

[/quote]
En effet, ton div text_page n'est pas fermé. Il faut que tu rajoutes </div> juste après </footer>.

Je ne sais pas cela va résoudre ton problème, comment apparaît ta page web exactement maintenant ?[/quote]
Maintenant, ça ressemble à ça: http://www.casimages.com/img.php?i=1112 … 124147.png[/quote]
Ca à l'air de ressembler à ce que tu voulais, tu as besoin d'autres conseils pour ton site ?

31-12-2011 18:50:25

[quote=Akisha Arkano][quote=sasuke33500][quote=Akisha Arkano]
En effet, ton div text_page n'est pas fermé. Il faut que tu rajoutes </div> juste après </footer>.

Je ne sais pas cela va résoudre ton problème, comment apparaît ta page web exactement maintenant ?[/quote]
Maintenant, ça ressemble à ça: http://www.casimages.com/img.php?i=1112 … 124147.png[/quote]
Ca à l'air de ressembler à ce que tu voulais, tu as besoin d'autres conseils pour ton site ?[/quote]
Ben on voit pas super bien mais le text_page est décalé par rapport au reste, et je voudrais centrer le texte par rapport au text_page et non par rapport à la page entière.
Et je voudrais aussi augmenter la largeur de mon article, mais j'ai beau augmenter la valeur de width, ça ne marche pas, ainsi que rapprocher mon aside du centre.

31-12-2011 19:06:41

Essaye de faire text_align:center dans article.

et si tu veux déplacer ton aside, joue sur margin-right avec des valeurs positives par contre, pas négatives.

Ensuite, si tu veux augmenter la largeur de ton article, tu dois modifier le width de text_page (en vérifiant bien que tu n'affectes une valeur à width qu'une seule fois dans text_page).

Il faut bien comprendre qu'en css/html, il y a le principe de contenant / contenu.

Si tu fixes une valeur au contenant, la largeur du contenu ne pourra pas excéder celle du contenant. Si tu utilise un margin-left par exemple dans un contenu (comme article par exemple qui est contenu dans le contenant text_page) le décalage se fera par rapport au bord de text_page.

31-12-2011 19:36:08

[quote=Akisha Arkano]Essaye de faire text_align:center dans article.

et si tu veux déplacer ton aside, joue sur margin-right avec des valeurs positives par contre, pas négatives.

Ensuite, si tu veux augmenter la largeur de ton article, tu dois modifier le width de text_page (en vérifiant bien que tu n'affectes une valeur à width qu'une seule fois dans text_page).

Il faut bien comprendre qu'en css/html, il y a le principe de contenant / contenu.

Si tu fixes une valeur au contenant, la largeur du contenu ne pourra pas excéder celle du contenant. Si tu utilise un margin-left par exemple dans un contenu (comme article par exemple qui est contenu dans le contenant text_page) le décalage se fera par rapport au bord de text_page.[/quote]
Merci, j'ai réussi à déplacer mon aside, mais si je change la largeur du text_page, ça va modifier tout le design, non?
Et le problème de décalage du text_page n'est pas réglé....

EDIT: Je viens de régler un problème, mais est-ce qu'on peut donner une valeur en % à une image de fond? Regardez par vous-même le problème: http://www.casimages.com/img.php?i=1201 … 605597.png

Dernière modification par sasuke33500 (01-01-2012 17:06:49)

01-01-2012 20:57:26

Si tu changes ta largeur du text_page, ça ne va pas modifier ton texte SI tu as mis des margin-left en % OU un margin auto.

Si ton text_page est décalé, c'est probabablement que tu as affecté plusieurs fois une valeur à ton width dans text_page. Tu dois garder le width qui est en %.

Pour dimensionner une image de fond, il me semble que tu ne peux que lui donner une valeur en ox. Si tu lui mets une valeur en %, cela la redimensionnera en % de sa valeur de base. Ton image est-elle un fond qui se répète (comme dans Won où se sont des bandes de shuriken) où est-ce une image unique qui prend tout l'écran ?

Une astuce que j'ai trouvé sur le net : tu mets un fond uni à ton bacground, et tu y superposes ton image :

tu as juste à rajouter une couleur devant url(images/ciel2.png) dans ce style (tu rajoutes également center pour des questions d'esthétique):

background: #12345 url('images/ciel2.png') top center (la suite de ce que tu as mis)

au fait, pourquoi as-tu deux images à la suite ? Une seule ne suffirait-elle pas ?

Pense juste à modifier le #12345 pour une couleur qui te plaise. Pour trouver facilement le code de la couleur : http://www.code-couleur.com/

02-01-2012 11:49:35

[quote=Akisha Arkano]Si tu changes ta largeur du text_page, ça ne va pas modifier ton texte SI tu as mis des margin-left en % OU un margin auto.

Si ton text_page est décalé, c'est probabablement que tu as affecté plusieurs fois une valeur à ton width dans text_page. Tu dois garder le width qui est en %.

Pour dimensionner une image de fond, il me semble que tu ne peux que lui donner une valeur en ox. Si tu lui mets une valeur en %, cela la redimensionnera en % de sa valeur de base. Ton image est-elle un fond qui se répète (comme dans Won où se sont des bandes de shuriken) où est-ce une image unique qui prend tout l'écran ?

Une astuce que j'ai trouvé sur le net : tu mets un fond uni à ton bacground, et tu y superposes ton image :

tu as juste à rajouter une couleur devant url(images/ciel2.png) dans ce style (tu rajoutes également center pour des questions d'esthétique):

background: #12345 url('images/ciel2.png') top center (la suite de ce que tu as mis)

au fait, pourquoi as-tu deux images à la suite ? Une seule ne suffirait-elle pas ?

Pense juste à modifier le #12345 pour une couleur qui te plaise. Pour trouver facilement le code de la couleur : http://www.code-couleur.com/[/quote]
Voilà, j'ai modifié quelques trucs, que j'ai trouvé sur le site du zéro.
J'ai donné une valeur (100%) à mon ciel.png, ça donne pas tout à fait ce que je pensais, mais au final, c'est pas mal du tout.
c'est vrai, au début je mettais 2 images, pour en avoir une de chaque côté, mais ce n'est plus nécessaire, donc je vais en mettre une seule.
Regardez le screen: http://www.casimages.com/img.php?i=1201 … 08997.png.
Il ne me reste plus qu'un problème, je n'arrive pas à aligner les différentes parties de mon footer, j'ai même essayé display: inline block; .

[b]EDIT[/b]: Est-ce qu'il est possible d'écrire sur une image?

Dernière modification par sasuke33500 (02-01-2012 12:05:15)

02-01-2012 12:24:39

Je t'avoue qu'avec ton image, je ne vois pas tout le footer, donc je ne peux pas voir le problème que tu évoques. Pense bien que les listes à puce sont forcément décalées par rapport à un <p> par exemple.

Ensuite, oui on peut écrire sur une image, mais pour cela il faut définir un div (ou un span) avec un background transparent et placé au bon endroit sur l'image. C'est pour mettre le titre de son site dans la bannière ? Dans ce cas le mieux est de mettre l'écriture directement dans l'image, avec un logiciel de dessin (photoshop, paint, etc...).

02-01-2012 12:44:43

[quote=Akisha Arkano]Je t'avoue qu'avec ton image, je ne vois pas tout le footer, donc je ne peux pas voir le problème que tu évoques. Pense bien que les listes à puce sont forcément décalées par rapport à un <p> par exemple.

Ensuite, oui on peut écrire sur une image, mais pour cela il faut définir un div (ou un span) avec un background transparent et placé au bon endroit sur l'image. C'est pour mettre le titre de son site dans la bannière ? Dans ce cas le mieux est de mettre l'écriture directement dans l'image, avec un logiciel de dessin (photoshop, paint, etc...).[/quote]
Pour le footer, c'est bon je viens de réussir, mais sans le savoir, du coup, je sais pas comment j'ai fais .

En non, c'est pas pour la bannière, c'est pour faire comme : Fanarts Naruto de la Communauté, En ce moment ou Derniers avatars quand tu cliques sur le nom de ton villages sur WoN.

[b]EDIT[/b]: Ah oui!
Et je voudrais que le texte de mon article se tasse vers la gauche. Je sais pas si vous comprenez, mais je voudrais que le bord du texte de mon article fasse une ligne droite.

Dernière modification par sasuke33500 (02-01-2012 12:47:06)

02-01-2012 12:49:33

[quote]En non, c'est pas pour la bannière, c'est pour faire comme : Fanarts Naruto de la Communauté, En ce moment ou Derniers avatars quand tu cliques sur le nom de ton villages sur WoN.[/quote]
En fait ce que tu veux faire c'est écrire du texte et mettre un background avec une image non ? Dans ce cas, c'est quelque chose que tu as déjà fait ^^

02-01-2012 14:20:37

[quote=sasuke33500]Pour le footer, c'est bon je viens de réussir, mais sans le savoir, du coup, je sais pas comment j'ai fais .

En non, c'est pas pour la bannière, c'est pour faire comme : Fanarts Naruto de la Communauté, En ce moment ou Derniers avatars quand tu cliques sur le nom de ton villages sur WoN.

[b]EDIT[/b]: Ah oui!
Et je voudrais que le texte de mon article se tasse vers la gauche. Je sais pas si vous comprenez, mais je voudrais que le bord du texte de mon article fasse une ligne droite.[/quote]
Pour ton truc des images, si je ne dis pas de bêtises, sa doit être de simples images "liens" et une fois que tu clique dessus sa te ramène à une page ou l'image source se trouve
donc un truc tout con du style :

Code:

<a href="./lalala.html">
   <img href="lienimage.png" />
</a>

Pour que sa soit bien mis en formes, bah ...
Un "div" pour chaque image à mettre en place ce qui nous donnerait un truc du style :

Code:

<div class="galerie">
   <a href="./lalala.html">
       <img href="lienimage.png" />
   </a>
   <label> Nom de l'image </label>
   <label> Label complémentaire </label>
</div>

Et pour le texte, bah un simple text-align devrait faire l'affaire

Code:

CSS :

.Texte-Gauche{
text-align : left;
}

Si je suis complètement à coté de ce que tu attendais, je m'excuse d'avance

[b]EDIT :[/b] Par contre, si tu veux faire ça, il serait bien que tu utilises le php parce-que sinan tu vas vraiment te faire chier ...

Dernière modification par sasuke12_13 (02-01-2012 14:24:18)

02-01-2012 14:45:55

[quote=sasuke12_13][quote=sasuke33500]Pour le footer, c'est bon je viens de réussir, mais sans le savoir, du coup, je sais pas comment j'ai fais .

En non, c'est pas pour la bannière, c'est pour faire comme : Fanarts Naruto de la Communauté, En ce moment ou Derniers avatars quand tu cliques sur le nom de ton villages sur WoN.

[b]EDIT[/b]: Ah oui!
Et je voudrais que le texte de mon article se tasse vers la gauche. Je sais pas si vous comprenez, mais je voudrais que le bord du texte de mon article fasse une ligne droite.[/quote]
Pour ton truc des images, si je ne dis pas de bêtises, sa doit être de simples images "liens" et une fois que tu clique dessus sa te ramène à une page ou l'image source se trouve
donc un truc tout con du style :

Code:

<a href="./lalala.html">
   <img href="lienimage.png" />
</a>

Pour que sa soit bien mis en formes, bah ...
Un "div" pour chaque image à mettre en place ce qui nous donnerait un truc du style :

Code:

<div class="galerie">
   <a href="./lalala.html">
       <img href="lienimage.png" />
   </a>
   <label> Nom de l'image </label>
   <label> Label complémentaire </label>
</div>

Et pour le texte, bah un simple text-align devrait faire l'affaire

Code:

CSS :

.Texte-Gauche{
text-align : left;
}

Si je suis complètement à coté de ce que tu attendais, je m'excuse d'avance

[b]EDIT :[/b] Par contre, si tu veux faire ça, il serait bien que tu utilises le php parce-que sinan tu vas vraiment te faire chier ...[/quote]
Ouais mais je le connais pas encore le php...

Et sinon, j'ai de nouveau un problème avec mon footer, je sais pas pourquoi, mais il ne s'aligne plus.
Regardez le screen : [url]http://www.casimages.com/img.php?i=120102025230961315.png[/url]

Et les commandes avec Alt Gr ne fonctionnent plus, pourtant, je ne pense pas que ma touche soit cassé, en fait j'ai eu un problème et j'ai essayé tous les raccourcis clavier , à la suite de ça, ça n'a plus marché, d'ailleurs, ça ne me le fait que pour notepad++.
Savez-vous ce qui ce passe?

Dernière modification par sasuke33500 (02-01-2012 17:12:00)

02-01-2012 15:35:11

[quote]Et sinon, j'ai de nouveau un problème avec mon footer, je sais pas pourquoi, mais il ne s'aligne plus.[/quote]
Quand tu dis que ton footer ne s'aligne plus, tu veux dire que le texte qui est à l'intérieur n'est plus centré ? Si c'est la cas, vérifie que dans ton css tu as bien un text-align : center.

Sinon, de quelles commandes tu parles avec la touche alt gr ? Celles qui sont présentent dans notepad++ ?

02-01-2012 15:43:42

[quote=Akisha Arkano][quote]Et sinon, j'ai de nouveau un problème avec mon footer, je sais pas pourquoi, mais il ne s'aligne plus.[/quote]
Quand tu dis que ton footer ne s'aligne plus, tu veux dire que le texte qui est à l'intérieur n'est plus centré ? Si c'est la cas, vérifie que dans ton css tu as bien un text-align : center.

Sinon, de quelles commandes tu parles avec la touche alt gr ? Celles qui sont présentent dans notepad++ ?[/quote]
Non, les différentes parties du footer ne sont pas alignée, pourtant ce sont des inline-block.

Et sur notepad++, ma touche AltGr est tout simplement inutilisable.
Par exemple, je ne peux pas ouvrir et fermer mes balises CSS avec { et }.

02-01-2012 16:16:57

Comment était ton footer avant ?
Parce-que la, il me semble aligné ...

Dernière modification par sasuke12_13 (02-01-2012 16:17:16)

02-01-2012 17:08:46

[quote=sasuke12_13]Comment était ton footer avant ?
Parce-que la, il me semble aligné ...[/quote]
Le problème, c'est le "contactez moi!" qui est en dessous et non à droite du reste.
Et puis, je voudrais les espacer un peu, et mettre un margin, mais ça ne marche pas.

Dernière modification par sasuke33500 (02-01-2012 17:08:58)

02-01-2012 17:25:30

[quote]Le problème, c'est le "contactez moi!" qui est en dessous et non à droite du reste.
Et puis, je voudrais les espacer un peu, et mettre un margin, mais ça ne marche pas.[/quote]
Pour ton footer, est-ce que le code css que tu as mis sur cette page est d'actualité ? Car je ne vois nul part ton css sur le footer. Tu as peut-être oublié de mettre le div mailto en inline.

Forums » Problème HTML:

Re: Problème HTML

Code:

Code:

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

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

Re: Problème HTML

Re: Problème HTML

Re: Problème HTML

Code:

Code:

Code:

Re: Problème HTML

Code:

Code:

Code:

Re: Problème HTML

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