28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Design celon les navigateurs

Pages :
(reprise du message précédent)

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) :

http://nsa28.casimages.com/img/2011/11/20/mini_111120044950985420.png

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

http://nsa27.casimages.com/img/2011/11/20/mini_111120044810492327.png

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. Smiley lol
Salut,
azledev a écrit :
Du coup comme on peux le voir ce n'est plus centrer pour les 15'' trop a droite..

J'ajouterais qu'avec mon 13'', c'est encore pire Smiley smile
Je serais toi, je n'utiliserais pas le positionnement absolu et je repartirais sur une base propre. Tu peux par exemple étudier ce gabarit pour comprendre comment positionner proprement tes éléments sur une largeur fluide.
Modifié par audrasjb (20 Nov 2011 - 17:38)
C'est exactement ce que je veux, bien cadrer quelque sois là résolution !! Mais alors je comprend rien de comment c'est fait Smiley biggol . Je vais re-regarder un peu sa Smiley langue

Pour info ma page en gros c'est :


<html>
<head>
<body>
<section> (toute la page)
<article #tableau_stats></article>
<aside #stats_generales></aside>
<aside #news></aside>
</section>
</body>
</html>


Ce qui reviens au 

<div id="global">
	<div id="entete">...</div>
	<div id="navigation">...</div>
	<div id="contenu">...</div>
</div>


Du gabarit 05 !
Modifié par azledev (20 Nov 2011 - 20:04)
Quand je parle de positionnement, c'est côté CSS. Il n'y aura pas vraiment de changement à faire dans tes fichiers HTML Smiley smile
Oui, tu peux prendre exemple sur le gabarit mis en lien plus haut et faire flotter tes conteneurs l'un contre l'autre.
j'essaye j'essaye, sa met ma patience a rude épreuve.... Smiley fache
Je sens que c'est simple comme bonjour et que c'est moi qui fait pas sa correctement. C'est assez rageant Smiley biggol
Salut,
azledev a écrit :
Reste plus qu'a valider par vous ! Si sa bug le centrage merci de me dire votre taille d'écran

Y a carrément du mieux !

Pense bien à indiquer un display:block sur les éléments html5 (header, article, section, footer, aside, etc.). Autant mon Safari m'affiche le site nickel, autant sur mon vieux Firefox, tout est cassé, et ça doit être pareil sur IE (d'ailleurs, il faudrait ajouter le script qui va bien pour faire reconnaitre ces éléments dans le DOM pour IE) Smiley smile
Modifié par audrasjb (22 Nov 2011 - 19:36)
bonjour,

selon les navigateurs , l'image de fond sur body , va se centrer sur la fenetre.

Pour eviter cela , il te faut aussi mettre un background a html ex: html {background:white;} et fixer une largeur minimale a body de la largeur de ton conteneur principal : ex: body {min-width:1000px;}

Ton background-attachment ne doit pas etre declaré comme fixed comme tu le fait pour body , mais le laisser par defaut a scroll.

Pour le moment , ton image de fond se centre sur la taille de la fenêtre du navigateur et pas celle de son contenu (pas forcement sur tout les navigateurs , mais quelques uns tout de même.

Cordialement,
GC
a écrit :

Y a carrément du mieux !

Pense bien à indiquer un display:block sur les éléments html5 (header, article, section, footer, aside, etc.). Autant mon Safari m'affiche le site nickel, autant sur mon vieux Firefox, tout est cassé, et ça doit être pareil sur IE (d'ailleurs, il faudrait ajouter le script qui va bien pour faire reconnaitre ces éléments dans le DOM pour IE) smile


Yes sa fait plaisir ce genre de commentaire !!

Pour le display:bloc il est dans le fichier style_ie qui est introduit par un commentaire conditionnel :


<!--[if lt IE 9]>
				<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
				<link rel="stylesheet" href="style_ie.css" />
				<![endif]-->


Voici son contenu : 

header, article, section, footer, aside {
    display: block;
    zoom: 1;
}
article, aside, footer {
	background: black;
}

aside, article, footer {
		font-size: 1em;
}

h3, footer {
		font-family:'DalekRegular', "Courier New", Impact, "Arial Black", Arial, Verdana, serif;
		color: orange;
}


Les polices la couleur pas la peine de s'en occuper c'est juste que la transparence ne marche pas sur IE ( a pars via toshop donc pas possible pour moi ! Smiley murf )

J'ai rajouter par contre pour ton firefox (bizarre chez moi sa marche impec mais j'ai la dernière version peut etre pour sa) le display:block directement a toutes les balise html5 dans mon code css de base (qui se charge automatique par tout les nav') donc pas grave si il en a deux ? Je voyais pas comment le faire juste pour FF !

gc-nomade, j'ai modifié le kg attachement, ouaaaaaaaa, c'est tellement mieux ! Merci ! Je trouvais sa laid mais je savais plus comment changer Smiley biggol

Sinon quand je met une couleur au html, sa cache une partie en bas de mon image ... Smiley bawling

Je pense que je vais enfin en voir le bout merci a vous!!
bonsoir,

a écrit :
( a pars via toshop donc pas possible pour moi ! )


oui, bah photoshop, d'accord, c'est pas gratuit. The Gimp, c'est pour faire joli?
avec ce logiciel, tu peux jouer avec la transparence, l'opacité.
azledev a écrit :
Pour le display:bloc il est dans le fichier style_ie qui est introduit par un commentaire conditionnel

Oui mais il faut aussi utiliser la déclaration display:block pour tous les navigateurs, ce n'est pas que pour IE. Cela doit donc se trouver sur la feuille de styles générale.
a écrit :
Sinon quand je met une couleur au html, sa cache une partie en bas de mon image ...


peut-être faut-il aussi signifié une hauteur minimal pour body qui affiche l'image de fond :
ex : body {min-height:775px;} Smiley smile

CG
gc-nomade, c'est modifié. Il n'y a pas de changement chez moi, peut-être que toi tu le vois ?
D'ailleurs cherche quelque chose de mieux que ce blanc. Mais je sais pas ce qui irais. L'idéal aurait été que l'image fasse toute la page Smiley cligne

audrasjb, pas de soucis dans ce cas là j'ai bien fait la bonne manip. Le display: block ce trouve a la fois dans la feuille css générale mais aussi dans celle d'IE. Smiley smile

FloydinBremen, j'ai bien GIMP sur mon pc en plus, mais je ne sais absolument pas comment m'en servir. Et du coup je sais pas comment avoir quelque chose de semblable. Smiley rolleyes
Pages :
Sujet clos
Aller à