28172 sujets

CSS et mise en forme, CSS3

[Résolu] Design en pourcentage - d'écran ou de fenêtre ?

Bonjour bonjour !

Pour mon premier topic ici, je vais essayer de poser une question pas trop conne (c'est raté d'avance Smiley lol )

Je suis en train de penser le design d'un site, que étant un grand flemmard je voulais faire entièrement en pourcentages. C'est joli, sur le papier. Même en changeant la taille de la fenêtre j'arrive à tomber sur un truc à peu près beau. Oui mais ! Imaginons par exemple que j'ai une <section> d'environ 46% de la largeur en plein écran qui soit centrée. J'aimerais que même en redimensionnant la largeur de la fenêtre, cette <section> garde sa même largeur. Ce qui revient à dire qu'elle ferait au final 46% de la largeur de l'écran, et non pas 46% de la largeur de la fenêtre...
Voilà voilà... Est-il possible de paramètrer ça en CSS ? Si oui (ou même si non), comment ?
Merci d'avance de vos réponses !
Modifié par Stalzak (26 Oct 2013 - 18:30)
A ma connaissance, tu ne peux mas accéder aux caractéristiques techniques du PC (résolution de l'écran, périphériques, etc.) via JavaScript car c'est un gros problème de sécurité.

Donc la seule chose qu'il peut faire, c'est récupérer la taille de la fenêtre du navigateur.

Je te conseille plutôt de te tourner vers les media queries qui te permettent de définir que : pour un navigateur donc la largeur est située entre tant de pixels et tant de pixel, alors la largeur de ta <section> doit être de x%.

Si tu ne veux pas trop te casser la tête, tu peux utiliser ceci et l'adapter comme bon te semble : http://getbootstrap.com/
Bonjour Stalzac.

"Stalzac" a écrit :
Ce qui revient à dire qu'elle ferait au final 46% de la largeur de l'écran, et non pas 46% de la largeur de la fenêtre...

Il faudrait que tu m'expliques comment au final, tu peux avoir une boîte faisant 46% de la largeur de l'écran, quand la largeur de ta page est inférieur à ce 46% ?

Ta boîte ne peux pas être plus grande que la largeur de ta page. On alors, je n'ai pas compris ce que tu cherches à faire !

Mais si tu veux une boîte faisant 46% de large et quelle soit toujours positionnée de la même façon, tu appliques ce code suivant :
div {
		position		: fixed;
		top			: 0;
		bottom			: 0;
		left			: 0;
		width			: 46%;

		background-color	: red;
}
C'est 46% de la fenêtre OU du conteneur au-dessus. 
<body>
    <div id='bla1'>
        <div id='bla2'>blabla</div>
    </div>
</body>


Css 1 :
#bla1{width:100%;}
#bla2{width:50%;}

Bla 1 fera 100% de la fenêtre; bla 2 fera 50% de ta fenêtre (50% de 100%)

css 2
body{width:98%;}
#bla1{width:100%;}
#bla2{width:50%;}

Bla 1 fera 98% de ta fenêtre (100% de 98%) et bla 2 fera 49% de ta fenêtre (50% de 100% de 98%).

Bien sûr sans margin, padding et autre border ^^ Smiley lol
Modifié par Lothindil (25 Oct 2013 - 15:41)
C'est un topic assez étrange Smiley sweatdrop .
Je suppose que ce n'est pas la façon la plus propre de faire mais bon...
Les valeurs en pourcent concernant les hauteurs/largeurs se réfèrent toujours au parent de l'élément sur lesquelles elles s'appliquent. Si tu veux dans ton cas que cet élément ait une taille relative à celle de l'écran et non de la fenêtre, tu dois alors spécifier explicitement la largeur de son conteneur qui sera égale à celle de l'écran (cela supposera de la connaître), via un "min-width" par exemple.
En CSS, tu peux passer les media queries mais tu devras le faire pour chaque résolution.
Si non en JS, tu peux connaître la largeur d'un écran avec "screen.width".
Je ne sais pas si j'ai été clair (il est tard ou tôt ^^) et je ne suis pas non plus sûr d'avoir bien compris le but de ce que tu souhaites faire.
Salut,

Bien qu'ayant de sérieuses réserves sur les aspects ergonomiques de ce que tu souhaites mettre en place, tu peux récupérer la largeur de l'écran via un peu de JavaScript : window.screen.width;
Et donc appliquer cette largeur, toujours via JavaScript, et quelque soit la taille de la fenêtre du navigateur, à n'importe quel élément de ta page...

tm
Modifié par tm™ (26 Oct 2013 - 11:26)
Ha oui, du JavaScript. D'un coup ma question semble effroyablement conne dans la mesure où mon site contiendra du JavaScript... Smiley lol Merci pour cette réponse Smiley ravi
Puisque visiblement j'vous ait fait un peu peur avec cette question, voici quand même la raison pour laquelle j'avais envie de cette méthode : mon site (quand il sera fini *sifflote*) présentera une interface d'où il n'est pas nécessaire de scroller pour voir l'intégralité du site... Et pour pas que la police à l'intérieur soit en taille 2, il fallait que je trouve un moyen de profiter de toute la place disponible Smiley murf (Et au passage j'essayerai d'utiliser une media-query ou deux si la largeur ou la hauteur de la fenêtre se réduisent)
Administrateur
Bonjour,

Stalzak a écrit :
Imaginons par exemple que j'ai une &lt;section&gt; d'environ 46% de la largeur en plein écran qui soit centrée. J'aimerais que même en redimensionnant la largeur de la fenêtre, cette &lt;section&gt; garde sa même largeur. Ce qui revient à dire qu'elle ferait au final 46% de la largeur de l'écran, et non pas 46% de la largeur de la fenêtre...

l'utilisateur décide de la largeur qu'il veut donner à sa fenêtre (perso je réduis en largeur sur Wikipedia ou des forums en pleine largeur, ça fait des lignes trop longues à lire).
Tu voudrais 46% de approx. 1004px aussi bien que de approx. 1900px ou 2540px (ça existe) alors que le résultat sera complètement différent.
Premier écueil : tu ne connais rien ou mal de la largeur de fenêtre de tes utilisateurs et surtout de leurs habitudes (choix de réduire la fenêtre pour laisser la place à skype/miranda ou je ne sais quel logiciel par exemple).
Par contre tu sais à peu près quel contenu tu vas avoir dans tes pages (comment ça va s'afficher exactement non mais enfin tu sais si c'est un tableau, des images ou du texte).
Tu peux donc imposer à tes blocs de contenu d'avoir une largeur minimale, à d'autres d'avoir une largeur maximale (pour éviter les lignes de 200 caractères de long à lire) ou les 2 à la fois. Et ces blocs trouveront leur place dans un conteneur pleine largeur de fenêtre (width: auto; et pas width: 100%; en général). Pour faire cohabiter tout ça là ça devient plus ardu à gérer les blocs flottants, les inline-block, les affichages avec display: table et table-cell (à la façon de cellules de tableau... sans être des cellules de tableau TD évidemment), etc

Sinon as-tu entendu parler de Media Queries et de Responsive Web Design / Mobile First ?
C'est une solution à un autre problème qui n'est pas celui que tu décris mais c'est quand même lié à la problématique "largeurs d'écrans entre 320 et 2560px comment je fais ?" et mieux vaut se renseigner avant de commencer sans une trace de media queries.
Sujet clos
Aller à