IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Design selon les navigateurs


Sujet :

HTML

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2011
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2011
    Messages : 4
    Par défaut Design selon les navigateurs
    Hello tout le monde !

    Gros gros problème qui m'amène a vous. Enfaite je dis gros mais je suis sur c'est simple comme bonjours....

    Je fais un design de site web, mon site codé HTML5/CSS3, s'affiche impeccablement chez moi et mon 17", par contre chez les autre et une résolution moindre des parties du site se chevauche.

    Voici l'adresse http://azledev.net84.net/

    CODE HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    <!DOCTYPE html>
    <html>
     
    	<head>
    	<meta charset="utf-8" />
    	<link rel="stylesheet" href="index.css" />
    				<!--[if lt IE 9]>
    				<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    				<link rel="stylesheet" href="style_ie.css" />
    				<![endif]-->
    	<title>GrepolisToolkit_V2</title>
    	</head>
     
    		<body>
    		<section>
     
    			<header>
    			<h1>GrepolisToolkit</h1>
    			<h2>Tools</h2>
    			</header>
     
    				<article id="tableau_stats">
    				<h3>Mondes Francais</h3>
    					<ul id="monde_g">
    					<li><a href="/mondes/ALPHA/">FR1 Alpha</a></li>
    					<li><a href="/mondes/BETA/">FR2 Béta</a></li>	
    					<li><a href="/mondes/GAMMA/">FR3 Gamma</a></li> 	
    					<li><a href="/mondes/DELTA/">FR4 Delta</a></li> 	
    					<li><a href="/mondes/EPSILON/">FR5 Epsilon</a></li> 
    					<li><a href="/mondes/ZETA/">FR6 Zeta</a></li> 	
    					<li><a href="/mondes/ETA/">FR7 Eta</a></li>	
    					<li><a href="/mondes/THETA/">FR8 Théta</a></li>	
    					<li><a href="/mondes/IOTA/">FR9 Iota</a></li>
    					<li><a href="/mondes/KAPPA/">FR10 Kappa</a></li> 
    					<li><a href="/mondes/LAMBDA/">FR11 Lambda</a></li>
    					<li><a href="/mondes/MU/">FR12 Mu</a></li>
    					<li><a href="/mondes/NU/">FR13 Nu</a></li>
    					<li><a href="/mondes/XO/">FR14 Xi</a></li>
    					<li><a href="/mondes/OMICRON/">FR15 Omicron</a></li>
    					<li><a href="/mondes/PI/">FR16 Pi</a></li>
    					<li><a href="/mondes/RHO/">FR17 Rho</a></li>
    					</ul>
    					<ul id="monde_d">
    					<li><a href="/mondes/SIGMA/">FR18 Sigma</a></li>
    					<li><a href="/mondes/TAU/">FR19 Tau</a></li> 
    					<li><a href="/mondes/UPSILON/">FR20 Upsilon</a></li>
    					<li><a href="/mondes/PHI/">FR21 Phi</a></li>
    					<li><a href="/mondes/CHI/">FR22 Chi</a></li>
    					<li><a href="/mondes/PSI/">FR23 Psi</a></li>
    					<li><a href="/mondes/OMEGA/">FR24 Omega</a></li>
    					<li><a href="/mondes/ATHENES/">FR25 Athènes</a></li>
    					<li><a href="/mondes/BYZANCE/">FR26 Byzance</a></li>
    					<li><a href="/mondes/CORINTHE/">FR27 Corinthe</a></li>
    					<li><a href="/mondes/DELPHES/">FR28 Delphes</a></li>
    					</ul>
    				</article>
     
     
    						<aside id="stats_generals">
    					    <h3>Statistiques générales</h3>
    					    <p>Actuellement le monde avec le plus de point est Eta avec ses 1,199,888,965 points. Athène est le plus joué avec ses quelques 45.000joueurs. Les plus féroces attaquants se trouve sur Gamma alors qu'au contraire les plus puissant boucliers se trouve sur Alpha.</p> 
    					    </aside>
     
    							<aside id="news">
    							<h3>Les news</h3>
    							<ul>
    							<li>Mise a jour serveurs francais : 12/11/2011 00h55</li>
    							<li>Ajout des mondes .net, .de, .jp : 10/11/2011 02h35</li>
    							<li>Refonte du design : 03/11/2011 18h30</li>
    							<li>Ajout du BBCODE île : 01/11/2011 04h20</li>
    							</ul>
    							</aside>
     
    			<footer>
    			</footer>
     
    		</section>
     
    </body>
    </html>


    CODE CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    /* Design créé par azledev (alias azboy), création placée sous copyright azdev©. Pour tout renseignements contacter moi */
     
    @font-face{
    		font-family: 'MarathonIIRegular';
    		src: url('polices/mara2v2-webfont.eot');
    		src: url('polices/mara2v2-webfontd41d.eot?#iefix') format('embedded-opentype'),
    		url('polices/mara2v2-webfont.woff') format('woff'),
    		url('polices/mara2v2-webfont.ttf') format('truetype'),
    		url('polices/mara2v2-webfont.svg#MarathonIIRegular') format('svg');
    		font-weight: normal;
    		font-style: normal;
    }
     
    @font-face{
    		font-family: 'DalekRegular';
    		src: url('polices/dalek___-webfont.eot');
    		src: url('polices/dalek___-webfontd41d.eot?#iefix') format('embedded-opentype'),
    		url('polices/dalek___-webfont.woff') format('woff'),
    		url('polices/dalek___-webfont.ttf') format('truetype'),
    		url('polices/dalek___-webfont.svg#DalekRegular') format('svg');
    		font-weight: normal;
    		font-style: normal;
    }
     
    body{
    		font-family:'MarathonIIRegular', Impact, "Arial Black", Arial, Verdana, serif;
    		background:url('Images/grepolis.jpg') top center no-repeat fixed;
    }
     
    section {
     
    		width: auto;
    		margin: auto;
    }
     
    aside, article{
    		background-color:rgba(24, 24, 24, 0.8);
    		border:1px solid blue;
    		/*border-radius*/
    		-webkit-border-radius:10px 10px 10px 10px;
    		-moz-border-radius:10px 10px 10px 10px;
    		-o-box-shadow:4px 6px 6px teal;
    		border-radius:10px 10px 10px 10px;
    		/*box-shadow*/
    		-webkit-box-shadow:4px 6px 6px teal;
    		-moz-box-shadow:4px 6px 6px teal;
    		-o-box-shadow:4px 6px 6px teal;
    		box-shadow:4px 6px 6px teal;
    		color:teal;
    		font-size:1.5em;
    		position:absolute;
    		padding:12px;
    		text-align:justify;
    		width:30%;
    		min-width:400px;
    }
     
    #tableau_stats{
    		left:15%;
    }
     
    #stats_generals {
    		left:50%;
    }
     
    #news{
     
    		margin-top: 300px;
    		left:50%;
    }
     
    a{
    		color:orange;
    		text-decoration:none;
    		/*transition-property*/
    		-webkit-transition-property:color;
    		-moz-transition-property:color;
    		-o-transition-property:color;
    		transition-property:color;
    		/*transition-duration*/
    		-webkit-transition-duration:2s;
    		-moz-transition-duration:2s;
    		-o-transition-duration:2s;
    		transition-duration:2s;
    }
     
    a:hover{
    		color:#760001;
    		border-bottom:3px solid #760001;
    }
     
    h1, h2{
    		font-family:'DalekRegular', Impact, "Arial Black", Arial, Verdana, serif;
    		font-size:3.5em;
    		color:rgba(254,164,8,0.7);
    		margin-top:10px;
    		display:inline-block;
    }
     
    h1{
    		margin-left:20%;
    }
     
    h2{
    		margin-left:15%;
    }
     
    h3{
    		font-family:'DalekRegular', Impact, "Arial Black", Arial, Verdana, serif;
    		color:rgba(254,164,8,0.7);
    		margin-top:3px;
    }
     
    #monde_d{
    		margin-left:50px;
    }
     
    #monde_g, #monde_d{
    		display:inline-block;
    		vertical-align:top;
    		list-style-type:none;
    		margin-top:0%;
    }

    Aperçu sur mon 17" :



    Aperçu sur une moindre résolution :



    Need help...

  2. #2
    Membre extrêmement actif
    Avatar de kdmbella
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2010
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Août 2010
    Messages : 799
    Par défaut
    pour ce problème, est tu certain que les navigateurs utiliser son compatible HTML5 /CSS3 ?

    autre chose en définissant tes paramètres il faut utiliser les pourcentages pour la taille de ta page et non des valeur fixe afin que le contenu s'adapte en fonction de l'écran de l'utilisateur : height: auto par exemple et width : 80 % par exemple
    C'est une piste que je te donne essaye là et si ça marche pas on va investigué ailleurs.
    "L'humanité se divise en trois catégories : ceux qui ne peuvent pas bouger, ceux qui peuvent bouger, et ceux qui bougent."
    - Benjamin Franklin

    De l'aide en Javascript , consultez la FAQ JS.

    De l'aide sur le FrameWork JS DHTMLX : posez vos questions sur le forum des Bibliothèques & Frameworks JS.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2011
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2011
    Messages : 4
    Par défaut
    Firefox 8.0 la dernière version donc logiquement compatible HTML5/CSS3.

    Enfaite, je viens de suivre ton conseil et j'ai mis

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    body{
    		font-family:'MarathonIIRegular', Impact, "Arial Black", Arial, Verdana, serif;
    		background:url('Images/grepolis.jpg') top center no-repeat fixed;
    		height: auto;
    		width : 80 %;
    }
    Et là... Sa marche !
    Pour le titre GrepolisToolkit Tools, là c'est carrément un p'tit coup de ruse, j'en suis pas très fière mais bon sa marche... J'ai screener ma page sans rien dedans juste le titre et le background, et je l'ai mis en background. Du coup le titre est fixé vu que c'est une image ! J'espère avoir été clair

    Bref 000Webhost est en maintenance donc je peux pas encore savoir si sa marche chez tout le monde.. Je te tiens au courant !

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2011
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2011
    Messages : 4
    Par défaut
    Hello,

    Après une semaine de dur labeur, je commence a arriver aux derniers soucis.

    Voici tout d'abords l'adresse pour accéder au code source : http://azledev.net84.net.

    Pour ceux qui ont un 17" logiquement c'est ça qui s'affiche (cliquez sur l'image pour la voir en grand) :



    Pour ceux qui ont un 15" logiquement c'est ça qui s'affiche (cliquez sur l'image pour la voir en grand) :



    Du coup comme on peux le voir ce n'est plus centrer pour les 15" trop a droite.. J'aimerais que quelque sois la résolution sa soit pour tous centré... Need help. [lol]

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    HTML5 n'a pas banni les DIVs de son langage et pour le centrage cela reste encore une excellente solution.

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2011
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2011
    Messages : 4
    Par défaut
    Bonjour,

    J'ai effectivement remis un Div #global pour prendre toute la page et centrer comme l'exemple du lien de kdmbella. Chez moi sa marche impec !!

    Reste plus qu'a valider par vous !

    http://azledev.net84.net/

Discussions similaires

  1. affichage différent selon les navigateurs
    Par mikesquake dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 09/09/2010, 18h19
  2. [JavaScript] [jquery]Trouver la valeur par defaut de propriétés css selon les navigateurs.
    Par SpaceFrog dans le forum Contribuez
    Réponses: 0
    Dernier message: 08/09/2010, 15h48
  3. Margin-left différent selon les navigateurs (IE et FF)
    Par snyfir dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 14/04/2008, 20h00
  4. [DOM]ordre des appels DOM et visualisation selon les navigateurs
    Par Herode dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 06/01/2007, 11h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo