Partage

Besoin d'aide pour mon code html

22 avril 2017 à 14:53:52

bonjour, voici mon site : http://www.g-prog.fr/

j'aimerais avoir le shoutbox a coter de l'image avec marquer ____shoutbox____ au dessus ainsi que agrandir le chat en dessous

comment faire ? voici mon code :

<!DOCTYPE html>
<html>
    <head>
    	<link rel="stylesheet" href="style.css" />
        <meta charset="utf-8" />
        <title>G_PROG</title>
    </head>
    

    <body>
   		<header>         
        	<a href="index.html"><img src="images/logo.png" id="logo"> </a>
        	<a href="silver.html"><img src="images/silver.png" id="silverr"> </a>
        	<a href="gold.html"><img src="images/gold.png" id="goldd"> </a>
        	<a href="platine.html"><img src="images/platine.png" id="platinee"> </a>
        	<a href="connexion.html"><img src="images/connexion.png" id="conn"> </a>
        	<a href="inscription.html"><img src="images/inscription.png" id="inscrr"> </a>
    	</header>

    		<section>
    		<div id="conteneur">
    			<center>
    					<img src="images/accueil.png" height="200" width="300" id="redi">
       			</center>
       			<article>
       				<img src="images/g-prog.jpg" height="550" width="1000" id="bg">
       				<aside>
       				<div class="col-md-3">
       			<h2><strong align="right">______Shoutbox______</strong></h2>
					<!-- Debut shoutbox - https://www.i-tchat.com -->
					<center>
<iframe class="chat" id="chatt" align="right" align="top" src="https://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=130210" width="207" height="700" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="https://www.i-tchat.com" title="tchat" onClick="window.open(this.href+'?130210');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<br />Agrandir le <a align="right" href="https://www.i-tchat.com/?130210" onClick="window.open(this.href);return false;">chat</a> .
<!-- Fin shoutbox -->
</center>

       		</aside>
       		</div>
       			</article>
       		</div>

    		</section>

    	    <footer>
    			<a href="contacte.html"><img src="images/contacte.png" id="contact"/> </a>
			</footer>
    </body>

   <p><font color="white">© Tous droits réservés 2017 www.g-prog.fr</font></p>

</html>

header
{
    background-image: url("images/fond.jpg");       
    left: 0;
    right: 0;
    background-size: 120%;
}

#logo
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#logo:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

footer
{
	margin-left: 800px;
}

#silverr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#silverr
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee
{
	
    margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn
{
	margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr
{
	margin-left: 25px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

body
{
	background-image: url("images/background.jpg");
    border-bottom: 1px solid #f1f2f7;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1002;
    background-position: top;
    position: relative;
    margin : 0px;
    background-repeat: repeat-y;
}

section
{
	color: aqua;
	position: center;
}



#bg
{
	margin-top: -50px;
	margin-left: 450px;
}

#droit
{
	color: white;
	font: white;
}

#chat
{
	padding-left: 200px;
}

florianboy01

22 avril 2017 à 15:46:04

Salut,

Il me semble que tu referme ta balise <aside> avant le <div> qui l'a suit.

A quoi correspond ton id="conteneur" et class="col-md-3", je ne vois pas leur définition dans ton CSS ?

jeromecoco

22 avril 2017 à 16:10:46

florianboy01 a écrit:

Salut,

Il me semble que tu referme ta balise <aside> avant le <div> qui l'a suit.

A quoi correspond ton id="conteneur" et class="col-md-3", je ne vois pas leur définition dans ton CSS ?

c'étais un test que j'ai fais tout a l'heure, mais j'ai oublier de le retirer, ça ne sert a rien

j'ai éssayer de corriger ça , le te remet le code :

<!DOCTYPE html>
<html>
    <head>
    	<link rel="stylesheet" href="style.css" />
        <meta charset="utf-8" />
        <title>G_PROG</title>
    </head>
    

    <body>
   		<header>         
        	<a href="index.html"><img src="images/logo.png" id="logo"> </a>
        	<a href="silver.html"><img src="images/silver.png" id="silverr"> </a>
        	<a href="gold.html"><img src="images/gold.png" id="goldd"> </a>
        	<a href="platine.html"><img src="images/platine.png" id="platinee"> </a>
        	<a href="connexion.html"><img src="images/connexion.png" id="conn"> </a>
        	<a href="inscription.html"><img src="images/inscription.png" id="inscrr"> </a>
    	</header>

    		<section>
    		
    			<center>
    					<img src="images/accueil.png" height="200" width="300" id="redi">
       			</center>

       			<aside>
       			
       			<h2><strong>____Shoutbox____</strong></h2>
					<!-- Debut shoutbox - https://www.i-tchat.com -->
					<center>
<iframe class="chat" id="chatt" align="right" align="top" src="https://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=130210" width="207" height="700" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="https://www.i-tchat.com" title="tchat" onClick="window.open(this.href+'?130210');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<br />Agrandir le <a align="right" href="https://www.i-tchat.com/?130210" onClick="window.open(this.href);return false;">chat</a> .
<!-- Fin shoutbox -->
					</center>
				</aside>
       		
       			<article>
       				<img src="images/g-prog.jpg" height="550" width="1000" id="bg">
       			</article>

    		</section>

    	    <footer>
    			<a href="contacte.html"><img src="images/contacte.png" id="contact"/> </a>
			</footer>
    </body>

   <p><font color="white">© Tous droits réservés 2017 www.g-prog.fr</font></p>

</html>

header
{
    background-image: url("images/fond.jpg");       
    left: 0;
    right: 0;
    background-size: 120%;
}

#logo
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#logo:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

footer
{
	margin-left: 800px;
}

#silverr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#silverr
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee
{
	
    margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn
{
	margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr
{
	margin-left: 25px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

body
{
	background-image: url("images/background.jpg");
    border-bottom: 1px solid #f1f2f7;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1002;
    background-position: top;
    position: relative;
    margin : 0px;
    background-repeat: repeat-y;
}

section
{
	color: aqua;
	position: center;
}



#bg
{
	display: inline-block;
	margin-top: -50px;
	margin-left: 450px;
}

#droit
{
	color: white;
	font: white;
}

#chat
{
	padding-left: 200px;
}
section aside
{
    display: inline-block;
    text-align: justify;
	margin-right: 20px;
}

ps : rien n'a changé, j'ai juste réussis a mettre a gauche en haut la chattbox, mais du coup sur le site l'image est redescendu :/ j'ai cherché mais rien ne fonctionne :/

florianboy01

22 avril 2017 à 16:26:56

re,

Il me semble que l'attribut "align" n'est plus supporté en html5 pour les iframe ...

Je te conseil de jeter un œil sur ce site pour en savoir plus ...

https://www.w3schools.com/tags/tag_iframe.asp

jeromecoco

22 avril 2017 à 16:31:27

effectivement tu as raison et donc la après des heures de recherches, je suis presque au bout mais je sais pas comment remonter légèrement le chatt de facon a ce que le du chatt soit = au haut de l'image

<!DOCTYPE html>
<html>
    <head>
    	<link rel="stylesheet" href="style.css" />
        <meta charset="utf-8" />
        <title>G_PROG</title>
    </head>
    

    <body>
   		<header>         
        	<a href="index.html"><img src="images/logo.png" id="logo"> </a>
        	<a href="silver.html"><img src="images/silver.png" id="silverr"> </a>
        	<a href="gold.html"><img src="images/gold.png" id="goldd"> </a>
        	<a href="platine.html"><img src="images/platine.png" id="platinee"> </a>
        	<a href="connexion.html"><img src="images/connexion.png" id="conn"> </a>
        	<a href="inscription.html"><img src="images/inscription.png" id="inscrr"> </a>
    	</header>

    		
    		
    			<center>
    					<img src="images/accueil.png" height="200" width="300" id="redi">
       			</center>
       			<section>
       			<article>
       				<img src="images/g-prog.jpg" height="550" width="1000" id="bg">
       			</article>
       			<aside>
       			<center>
       			<h2><strong>____Shoutbox____</strong></h2>
					<!-- Debut shoutbox - https://www.i-tchat.com -->
					
<iframe class="chat" id="chatt" src="https://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=130210" width="207" height="700" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="https://www.i-tchat.com" title="tchat" onClick="window.open(this.href+'?130210');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<br /> .
<!-- Fin shoutbox -->
					</center>
				</aside>
       		
       			

    		</section>

    	    <footer>
    			<a href="contacte.html"><img src="images/contacte.png" id="contact"/> </a>
    			<p><font color="white">© Tous droits réservés 2017 www.g-prog.fr</font></p>
			</footer>
    </body>

   

</html>

header
{
    background-image: url("images/fond.jpg");       
    left: 0;
    right: 0;
    background-size: 120%;
}

#logo
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#logo:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

footer
{
	margin-left: 800px;
}

#silverr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#silverr
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee
{
	
    margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn
{
	margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr
{
	margin-left: 25px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

body
{
	background-image: url("images/background.jpg");
    border-bottom: 1px solid #f1f2f7;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1002;
    background-position: top;
    position: relative;
    margin : 0px;
    background-repeat: repeat-y;
}

section
{
	color: aqua;
	position: center;
}



#bg
{
	display: inline-block;
	margin-top: -50px;
	margin-left: 450px;
}

#droit
{
	color: white;
	font: white;
}

#chat
{
	padding-left: 200px;
}

section aside
{
    display: inline-block;
    text-align: justify;
	margin-right: 0px;
}

section
{
    display: flex;
    margin-bottom: 0px;
}

article, aside
{
    text-align: justify;
}

article
{
    margin-right: 0px;
    flex: 3;
}

florianboy01

22 avril 2017 à 16:47:30

En fait, tu utilise dans ton code également des balises qui ne sont plus supporté en html5.

Pour bien faire, il faudrait tout reprendre à zéro.

Je te conseille de suivre le cour de Mathieu Nebra, tu gagnera du temps et tu comprendra beaucoup de chose ...

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

En t'aidant en plus avec le site que je t'ai donné en premier, tu apprendra très vite ...

jeromecoco

22 avril 2017 à 16:51:07

je m'aide déjà du cours de mathieu nebra, j'ai tout appris sur son cours. Mais la seul balise que je connais pas c'est iframe, mais c'est ma chattbox qui me la donner ce code

florianboy01

22 avril 2017 à 16:58:36

La balise <center> n'est plus supporté en html5 par exemple ...

As tu remarqué que ta barre de navigation "part en couille" quand on place la sourie sur un des liens ?

Désolé, il y a trop à faire et j'ai du boulot sur mes sites ...

J'espère pour toi que quelqu'un qui aura du temps viendra t'aider.

Bonne continuation

jeromecoco

22 avril 2017 à 17:28:59

<center> marche pourtant, pas dans tout les cas effectivement^^, dac pas de soucis je comprend

AbcAbc6

22 avril 2017 à 20:07:52

Bonsoir,

Je t'invite à éditer ton premier message afin d'en modifier le titre de ton sujet, car «Besoin d'aide pour mon code html» n'est pas explicite de la problématique que tu rencontres. En effet si tu poste c'est que tu as besoin d'aide et si c'est dans le forum HTML on ce doute que cela concerne ce langage.

Alors oui <centrer> est encore utilisée mais pour des raisons de rétrocompatibilité des navigateur, <font> et <center> ne font plus partie des spécifications html5 et ne doivent plus être utilisée. Tu peux très bien utiliser la balise <jeromecoco> et la styliser cela fonctionnera également mais ne sera pas valide.

Pour commencer passe ton code au validateur html et css. https://validator.w3.org/ https://jigsaw.w3.org/css-validator/

La balise img ne se balade jamais sans sont attribut alt obligatoire, voici pourquoi l'utiliser et comment

Coter CSS : left: 0; et right: 0; ne fonctionne que sur des éléments positionner, le header ne l'est pas donc c'est sans effet.

Border-radius n'est plus à préfixer voir http://caniuse.com/#feat=border-radius

pourquoi une position: relative; sur les:hover ?

Un margin-left: 800px; pour le footer c'est une trop grande valeur, cela doit attirer ton attention, ce n'est pas comme cela que l'on positionne les éléments dans la page.

Tu as de la redondance dans ta CSS, quand tu as du code qui ce répète tu peux écrire les sélecteurs entre virgule #contact, #logo {...} ainsi que #silverr, #goldd {...} mais il est recommander d'utiliser les class et de garder les ID pour les ancres et le JavaScript.

Pourquoi un z-index: 1002; sur le body ?

Tu indiques margin-left: 450px; pour #bg et une largeur de 1000px pour cette image résulta cela me crée une barre de scroll latéral puisque le contenu dépasse la largeur de mon écran.

position: center; cela n'existe pas.

Je te recommande également de suivre le cours html5/css3 de ce site pour obtenir les bases du positionnement.

Si tu as d'autre question?

jeromecoco

22 avril 2017 à 20:36:53

dac merci, je vais faire tout ça ce soir, et refaire les tutos html et css car ça fais 2 ans que je les avais fais

florianboy01

22 avril 2017 à 20:57:09

@AbcAbc6 ,

Tu as pris le temps de pousser ton analyse beaucoup plus loin que moi et a te lire, on sent l'expérience derrière, ce que je n'ai pas encore ...

lol, pour le scroll latéral, il doit avoir un 21 pouce comme moi, parce que chez moi, c'est centrer, mais je suis bien d'accord pour dire que c'est pas comme ça qu'on centre un objet. Je serai curieux de voir à quoi ressemble le menu sur un 15 ou 17 pouces aussi !!!

J'ai abandonné parce que pour moi, c'était "on efface tout et on recommence de zéro", ça tombe bien, on est sur le site des zéro !!!

Je rajouterai que moi aussi j'avais suivi le cour ... en 2007, ben je l'ai re-suivi pour me mettre à jour et j'ai bien fait !! J'ai appris plein de chose nouvelles !!

AbcAbc6

23 avril 2017 à 2:45:26

J'ai abandonné parce que pour moi, c'était "on efface tout et on recommence de zéro", ça tombe bien, on est sur le site des zéro !!!

C'est un bon conseil, il est parfois plus simple de reprendre tout plutôt que de perdre du temps à tenter de modifier tant bien que mal certaine maladresse.

Je serai curieux de voir à quoi ressemble le menu sur un 15 ou 17 pouces aussi !!!

réduit la taille de ton navigateur, je t'ai fait une capture de ce que je vois (avec la taille de la fenêtre)

florianboy01

25 avril 2017 à 14:34:22

En effet, ça ressemble à rien, il faut vraiment tout reprendre à zéro, pas d'autres possibilités ....