Code html css problÃ¨me

tm2eddy0131 · Post by **tm2eddy0131** » 13 Feb 2014, 22:48

Je poste sur ce fofo parce que vu qu'il y a les codeurs du futur site maniacenter je me dis qu'il y a aussi d'autres connaisseurs ^^

J'essaie de faire une barre en position:fixe avec tout ce qui permet de naviguer (sur un fofo), mais il me fais des choses Ã©tranges et je vois pas d'oÃ¹ Ã§a vient, je prÃ©cise que j'utilise le css "mediascreen" qui change le contenu selon la rÃ©solution, c'est d'ailleurs quelque chose qui pose problÃ¨me aussi :/

voila le code, Ã tester sur plusieurs tailles de fenÃªtre

Code: Select all

<!DOCTYPE HTML>
<html dir="{S_CONTENT_DIRECTION}">
<html xmlnx="http://www.w3.orj/1999/xtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body bgcolor="cccccc">


<style type="text/css">

#barrehaut {
    background-image:url('http://img107.xooimage.com/files/8/1/a/barreapf2-43dec8b.png');
	color: #ffffff;
    top: 0px;
	left: 0px;
	right: 0px;
    position: fixed;
	width: 100%;
	height: 48px;
    border: 0px;
	padding-top: 0px;
font-family: arial, verdana, sans-serif;
overflow : hidden;

}



.apflogo {
  background-image: url('http://img106.xooimage.com/files/4/2/0/apflogopetit-43e7518.png');
  background-repeat: no-repeat;
  width: 350px;
  height: 40px;
  position: absolute;
  }
  
   @media screen and (max-width: 980px) and {
 .magnifying {  background-image:url('http://img109.xooimage.com/files/6/0/a/magnifying7-43def6c.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  right: 210px;
 position: absolute;
}
 }
 
.messagerie {  background-image:url('http://img105.xooimage.com/files/8/1/9/minimal-43deee0.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  right: 170px;
 position: absolute;
 }


 .user {  background-image:url('http://img103.xooimage.com/files/9/6/5/user17-43deee6.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  right: 130px;
 position: absolute;
}

 .list {  background-image:url('http://img101.xooimage.com/files/b/0/5/list12-43deece.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  right: 0px;
 position: absolute;
}


 .deconnexion {  background-image:url('http://img107.xooimage.com/files/5/0/b/deconnexion-43e3d6c.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  right: 90px;
 position: absolute;
}

 .uppage {  background-image:url('http://img106.xooimage.com/files/f/b/1/chevron6-43deebf.png');
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  right: 50px;
 position: absolute;
}

 .separation {  background-image:url('http://img107.xooimage.com/files/c/f/3/s-paration-43e7381.png');
  background-repeat: no-repeat;
  width: 1px;
  height: 40px;
  right: 45px;
 position: absolute;
}

 @media screen and (min-width: 980px) {
 .googlerecherche {  
   top: -500px;
      position: absolute;
	  width: 103px;
}
}

 @media screen and (max-width: 979px) {
 .googlerecherche2 {  
  background-repeat: no-repeat;
  width: 65%;
  margin-left: auto;
  margin-right: auto;
 top: -500px;
    position: absolute;
	
}
}


</style>

<span id="barrehaut" width="100%" height="57px">



<a href="http://amazing-pilotes-fun.xooit.fr/index.php"><div class="apflogo" alt="Accueil"></div></a>
<a href="http://amazing-pilotes-fun.xooit.fr/"><div class="magnifying" alt="Rechercher"></div></a>
<a href="http://amazing-pilotes-fun.xooit.fr/"><div class="messagerie" alt="Messagerie"></div></a>
<a href="http://amazing-pilotes-fun.xooit.fr/"><div class="user" alt="Mon compte"></div></a>
<a href="#"><div class="list" alt="Menu"></div></a>
<a href="http://amazing-pilotes-fun.xooit.fr/"><div class="uppage" alt="haut de page"></div></a>
<a href="#"><div class="deconnexion"></div></a>
<div class="separation"></div>

<!-- Search Google -->
	<div class="googlerecherche">
    <form action="https://www.google.fr/search" id="search_google" method="get"  name="search_google" target="_blank">
       <table align="center" width="45%">
          <tbody>
             <tr>
                <td align="center" height="34" nowrap="nowrap" valign="top">
               
                <nowrap><a href="http://www.google.com/" onclick="document.getElementById('search_google').submit(); return false;">
                <div class="logogooglegrand"><img align="middle" alt="Google" border="0" src="http://img107.xooimage.com/files/e/1/f/logo-google-43e74eb.png" style="margin: 0px; width: 103px;" /></div></a>
				<input class="post" maxlength="128" name="q" placeholder="Vous recherchez quelque chose ?" style="width: 70%; padding: 6px; font-size: 14 px; font-family: arial; font-weight: bold; background-color: rgb(255, 255, 255); border: 1px solid rgb(139, 138, 138);" type="text" /> <input class="liteoption" type="submit" value="Rechercher" style="width: 30%; padding: 6px; cursor: pointer; background-color: rgb(47, 144, 248); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border: 1px solid rgb(55, 122, 207); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.219608) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.219608) 0px 1px 2px; font-size: 14px; font-family: arial, verdana; font-weight: bold; text-shadow: rgba(0, 0, 0, 0.341176) 0px 1px 0px; background-position: initial initial; background-repeat: initial initial;" /></nowrap></td>
             </tr>
          </tbody>
       </table>
    </form>
	</div>

	<!-- Search Google -->
	<div class="googlerecherche2">
    <form action="https://www.google.fr/search" id="search_google" method="get"  name="search_google" target="_blank">
       <table align="center" width="45%">
          <tbody>
             <tr>
                <td align="center" height="34" nowrap="nowrap"  valign="top">
               
                <nowrap><a href="http://www.google.com/" onclick="document.getElementById('search_google').submit(); return false;">
                <img align="middle" alt="Google" border="0" src="http://img107.xooimage.com/files/5/1/9/icone-google-43e7c46.png" style="margin: 0px; width: 36px;"></img></a>
				<input class="post" maxlength="128" name="q" placeholder="Vous recherchez quelque chose ?" style="width: 65%; padding: 6px; font-size: 14 px; font-family: arial; font-weight: bold; background-color: rgb(255, 255, 255); border: 1px solid rgb(139, 138, 138);" type="text" /> <input class="liteoption" type="submit" value="Rechercher" style="width: 25%; padding: 6px; cursor: pointer; background-color: rgb(47, 144, 248); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border: 1px solid rgb(55, 122, 207); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.219608) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.219608) 0px 1px 2px; font-size: 14px; font-family: arial, verdana; font-weight: bold; text-shadow: rgba(0, 0, 0, 0.341176) 0px 1px 0px; background-position: initial initial; background-repeat: initial initial;" /></nowrap></td>
             </tr>
          </tbody>
       </table>
    </form>
	</div>
    <!-- Search Google -->
	
	
	
	
</span>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

merci

The_Big_Boo · Post by **The_Big_Boo** » 13 Feb 2014, 23:56

Je pense que tu devrais chercher des cours/tutos sur le responsive design pour aborder ton projet avec des bonnes mÃ©thodes. De plus, pour pouvoir t'aider, il faudrait Ã©galement savoir quel comportement tu veux lorsque la largeur disponible n'est plus suffisante pour tout placer.

Cela dit, il y a quelques remarques rapides que je peux faire.
- Utilise un div plutÃ´t qu'un span pour ta barre, c'est plus logique au niveau de la structure.
- Evite les attributs comme width="100%" dans tes balises, les styles devant Ãªtre uniquement dans le CSS (sauf si tu veux vraiment galÃ©rer au niveau de la maintenabilitÃ©).
- Evite aussi d'abuser des position:absolute, je pense en particulier Ã toutes tes icÃ´nes sur la droite qui profiteraient bien mieux d'un float:right.
- Pourquoi dupliquer le formulaire de recherche ? Le but est d'avoir chaque Ã©lÃ©ment une seule fois et de changer leur taille, leur visibilitÃ© et autre grÃ¢ce au CSS. Avoir les Ã©lÃ©ments en double est de choisir d'afficher l'un ou l'autre n'est clairement pas la bonne solution.

TheBigMiike · Post by **TheBigMiike** » 14 Feb 2014, 00:09

http://www.siteduzero.com devenu http://www.openclassrooms.com
Pour suivre des tutos

tm2eddy0131 · Post by **tm2eddy0131** » 14 Feb 2014, 14:12

ty big boo pour les remarques effectivement Ã§a me compliquera moins je pense
big mike ty mais j'ai toujours trouvÃ© que c'Ã©tait le bordel sur ce site ^^ j'ai grafikart qui est pas mal ^^

Nerpson · Post by **Nerpson** » 15 Feb 2014, 20:10

Salut tm2eddy013.

J'ai regardÃ© ton code, sans Ãªtre mÃ©chant, ton code est illisible. Tu devrais te mettre aux normes et virer le css des attributs et balises style pour tout regrouper dans un fichier css externe.

Code: Select all

<link rel="stylesheet" type="text/css" href="le_lien">

Je ne peux mÃªme pas analyser, Ã§a me prendrai trop de temps.

Sinon, j'aime beaucoup cette bande.

TheBigMiike · Post by **TheBigMiike** » 15 Feb 2014, 20:31

tm2eddy0131 wrote: big mike ty mais j'ai toujours trouvÃ© que c'Ã©tait le bordel sur ce site ^^ j'ai grafikart qui est pas mal ^^

Oui

depuis qu'ils ont sortie la v4 du Site du ZÃ©ro, il faut se rÃ©habituer et les pages sont plus longues Ã charger. Je prÃ©fÃ¨rai l'ancien site ou les langages Ã apprendre Ã©taient affichÃ©s dans un menu Ã gauche. C'Ã©tait moins bazard que maintenant, plus joli et mÃªme si le site faisait moins professionnel que maintenant, il Ã©tait fun

Sinon comme tu l'as dit GrafikArt est pas mal

Pour pour le regroupement dans un fichier .css dont Nerpson a parlÃ© (il a du faire une faute de frappe) c'est:

Code: Select all

<link rel="stylesheet" type="text/css" href="le_lien">

tm2eddy0131 · Post by **tm2eddy0131** » 15 Feb 2014, 23:57

oui je sais j'allais le faire plus tard, si je le faisais depuis le dÃ©but fallait se promener dans les 2 fichiers et je trouvais Ã§a moins pratique

nerpson wrote:Sinon, j'aime beaucoup cette bande.

ty

en bref je veux m'inspirer de nosdevoirs.fr et des propriÃ©tÃ©s de la barre, c'est a dire qu'elle s'optimise selon la rÃ©solution (surtout pour mobile) que le contenu et les menus changent

LaRousse · Post by **LaRousse** » 13 Mar 2014, 21:15

Pour modifier le contenu en fonction de la rÃ©solution.

Je te conseil d'utiliser les mediaqueries. (http://www.alsacreations.com/article/li ... eries.html)

Il existe aussi Bootstrap (http://getbootstrap.com/) ou encore Fundation 4 (http://foundation.zurb.com/), et il en existe plein d'autres

. Ce sont des bases html/js/css qui sont responsive (donc s'adapte au mobile). Tu as juste Ã lire la docs ou trouver des tutos pour l'utiliser. Ã§a reste trÃ¨s basique, il utilise des classes css prÃ©dÃ©finis.

Si tu as des questions n'hÃ©site pas

Nerpson · Post by **Nerpson** » 13 Mar 2014, 21:26

LaRousse · Post by **LaRousse** » 13 Mar 2014, 21:47

Ha oui j'avais pas vu la date ^^

Code html css problÃ¨me

Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Re: Code html css problÃ¨me

Who is online