Maniaplanet Forum


https://forum.maniaplanet.com/

Code html css problème

https://forum.maniaplanet.com/viewtopic.php?t=25540

Page 1 of 2

Code html css problème

Posted: 13 Feb 2014, 22:48
by tm2eddy0131
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

Re: Code html css problème

Posted: 13 Feb 2014, 23:56
by The_Big_Boo
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.

Re: Code html css problème

Posted: 14 Feb 2014, 00:09
by TheBigMiike
http://www.siteduzero.com devenu http://www.openclassrooms.com
Pour suivre des tutos

Re: Code html css problème

Posted: 14 Feb 2014, 14:12
by tm2eddy0131
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 ^^

Re: Code html css problème

Posted: 15 Feb 2014, 20:10
by Nerpson
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. :thumbsup:

Re: Code html css problème

Posted: 15 Feb 2014, 20:31
by TheBigMiike
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 :thumbsup:

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">

Re: Code html css problème

Posted: 15 Feb 2014, 23:57
by tm2eddy0131
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. :thumbsup:
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

Re: Code html css problème

Posted: 13 Mar 2014, 21:15
by LaRousse
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 ;)

Re: Code html css problème

Posted: 13 Mar 2014, 21:26
by Nerpson
Joli déterrage de sujet ! Sinon c'est vrai que ces liens sont utiles.

Re: Code html css problème

Posted: 13 Mar 2014, 21:47
by LaRousse
Ha oui j'avais pas vu la date ^^
All times are UTC+01:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited