HTML/CSS Responsive - Page 1

1

Le 10/10/2023 à 22:55

Bonjour,
Alors, j'ai appris a faire des sites internet à la bonne époque, en 2001, et aujourd'hui je me retrouve avec une techno qui a évolué de manière phénoménale, a laquelle je ne comprend plus rien, mais qui malheureusement est nécessaire pour avoir un site un minimum potable et visionnable sur téléphone portable.
d'ou, le css et le responsive, qui me fait taper la tête contre les murs depuis quelque temps.
en gros, j'ai mon site actuel qui ressemble à ça: http://www.orionsoft.games/ (pas taper si vous regardez le code source)
et j'aimerais qu'en responsive ça donne un truc comme ça:

déja, j'ai appris que même si un téléphone a une résolution effective FullHD, le navigateur renvoi une taille bien plus petite pour compenser le DPI
ensuite j'ai vu qu'il fallait ajouter ce truc magique: <meta name="viewport" content="width=device-width, initial-scale=1.0">
mais après, faire flotter des truc à droite dans le cas d'un PC et le passer en dessous dans le cas d'un téléphone, j'y arrive pas.
même les divs je comprend pas tout, exemple avec mon header ou j'ai une image en dessous de mon logo animé, et du texte à droite, pour faire ça je trouve ça tellement plus comprehensible de le faire avec 2 tables, en CSS je comprend pas comment faire avec des divs
vous auriez des sites tutoriel à me conseiller ?
j'ai tenter le site w3school, mais même si y'a beaucoup de chose, je trouve jamais le cas particulier que j'aimerais faire
pareil avec bootstrap, ça à l'air bien mais un peu trop générique, et puis surtout ça inclus une tonne de truc que j'ai pas besoin.

2

Le 11/10/2023 à 08:44

Je trouve que les articles de developer.mozilla.org sont souvent très bien rédiges, par exemple si tu veux regarder le modèle des flexbox qui est plus facile à manipuler que ce que tu as connu en 2001 :

Les concepts de base pour flexbox - CSS : Feuilles de style en cascade | MDNdeveloper.mozilla.orgLe module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

(ça date du moment où je m'occupais beaucoup de yaronet donc il y a peut-être mieux depuis). Ou bien sinon le modèle de grids (display: grid) qui d'après ce que tu décris pourrait correspondre à ta façon de visualiser une page Web.

Pour que le rendu s'adapte selon la largeur de l'affichage, regarde ce que tu trouves sur les "media queries" qui permettent de définir des règles CSS qui ne se déclenchent que sous certaines conditions, par exemple "la largeur de l'écran est inférieure à x", ou "le dispositif de pointage est grossier" (= c'est un écran touch sans souris).

All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

3

Le 11/10/2023 à 09:57

@media screen and (max-width: 1000px) {
	div.left { clear:left; }
	div.screen { display:none; }
}

et la le mec il le pécho par le bras et il lui dit '

4

Le 11/10/2023 à 14:45

merci pour vos réponse, j'ai réussi a faire quelque chose qui correspond à peu près a ce que je voulais.
pas sur que ça soit très propre, mais bon

5

Le 11/10/2023 à 15:00

ouais non en fait ça marche pas sur mon téléphone (que dans le simulateur de firefox)

6

Le 11/10/2023 à 15:26

rajoute un "overflow-x: hidden;" sur html

passe "width" en "max-width" dans .game "max-width: 1070px;"

vire le "width" en dur de ta table du haut (ou mieux vire la table)

puis

@media screen and (max-width: 1000px) {
div.screen { display:none; }
}

les choses vont passer toutes seules à la ligne si trop grandes, et le .screen va dégager si l'écran est petit

après tes colonnes gagneraient à passer en % quant la taille est petite

et la le mec il le pécho par le bras et il lui dit '

7

Le 11/10/2023 à 19:05

bon alors ça fonctionne en direct: http://orionsoft.free.fr/index_fr.html
mais pas quand y'a une redirection faite par OVH

http://www.orionsoft.games/

bon c'est pas très grave vu que je vais bientôt tout basculer sur mon serveur OVH
c'est cool d'avoir un site qui a enfin une bonne tête sur mobile

merci pour l'aide

8

Le 11/10/2023 à 23:12

Ici, je n'ai pas de différence visible entre les 2 URLs.

Par contre, quand je teste avec Firefox 115.3.1esr et une largeur de 659 pixels, toutes les "boîtes" englobantes n'ont pas la même largeur :

Accessoirement, je pense que ça rendrait mieux en forçant la largeur de l'image principale et du texte en-dessous à 100% de la largeur de la boîte (ou un peu moins, si tu n'as pas mis des bordures de taille fixe). Ou au pire, en centrant le tout plutôt qu'aligner à gauche.

— Zeroblog —

« Tout homme porte sur l'épaule gauche un singe et, sur l'épaule droite, un perroquet. » — Jean Cocteau
« Moi je cherche plus de logique non plus. C'est surement pour cela que j'apprécie les Ataris, ils sont aussi logiques que moi ! » — GT Turbo

9

Le 12/10/2023 à 09:05

je vais modifier ça pour avoir 2 types fixe, un type écran landscape et un type écran portrait

10

Le 12/10/2023 à 10:07

Artemis (./7) :
bon alors ça fonctionne en direct: http://orionsoft.free.fr/index_fr.html
mais pas quand y'a une redirection faite par OVH
http://www.orionsoft.games/

bon c'est pas très grave vu que je vais bientôt tout basculer sur mon serveur OVH
c'est cool d'avoir un site qui a enfin une bonne tête sur mobile
merci pour l'aide

Probablement que les deux ne sont pas la même page. Ou alors le CSS téléchargé n'est pas le même.

Highway Runners, mon jeu de racing à la Outrun qu'il est sorti le 14 décembre 2016 ! N'hésitez pas à me soutenir :)

https://itunes.apple.com/us/app/highway-runners/id964932741

11

Le 12/10/2023 à 10:13

largeur fixe de .game et width 100% pour les images en petit

html
{
	overflow-x: hidden;
}

body
{
	background-color: #274C77;
}

font
{
	font-size: 15px;
	font-family: serif;
	color: #E0EAF5;
}

.title
{
	font-size: 16px;
	font-weight: bold;
}

.header-title
{
	font-weight: bold;
}

img
{
	vertical-align: middle;
}

img.icn
{
	padding: 3px;
}

img.bigicn
{
	padding: 5px;
}

@media (min-width : 1000px)
{
	div.header
	{
		width: 50%;
		display: flex;
	}
}

div
{
	box-sizing: border-box;
}

.header-text
{
	padding-left: 10px;
}

.logo
{
	width: 150px;
}

.p
{
	vertical-align: middle;
}

.game
{
	max-width: 1070px;
	width:95%;
	border: 2px solid #437198;
	font-size: 14px;
	display: inline-block;
	padding: 3px;
	margin-bottom: 5px;
	background-image: linear-gradient(180deg, #6096BA, #437198);
}

.left
{
	float: left;
	text-align: left;
	width: 330px;
	padding: 5px;
}

.column
{
	float: left;
	text-align: left;
	min-width: 150px;
	padding-top: 10px;
	margin-left:20px;
}

.screen
{
	float: left;
	text-align: left;
	width: 330px;
	padding: 5px;
}
/*
.game:after
{
	content: "";
	display: table;
	clear: both;
}
*/
@media screen and (max-width: 1000px)
{
	div.screen { display:none; }

	font.header-title
	{
		font-weight: normal;
	}

	div.header
	{
		width: 100%;
		display: normal;
	}

	div.column
	{
		#width: 50%;
	}
}

@media screen and (max-width: 730px)
{
	div.left { width:100%; }
	div.left img { width:100%; }
	div.column { width: 40%; }
	div.left font { font-size: 200%; }
	.game { border-top-right-radius: 20px; }
}

a:link
{
	color: #E0EAF5;
	text-decoration:underline;
}

a:visited
{
	color: #E0EAF5;
	text-decoration:underline;
}

a:hover
{
	color: #FFFFFF;
	text-decoration:underline;
}

et la le mec il le pécho par le bras et il lui dit '

12

Le 12/10/2023 à 22:42

(je dis rien pour le reste mais overflow-x: hidden c'est sacrément crado quand même)

All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

13

Le 13/10/2023 à 10:05

c'était obligatoire avec ses tailles en dur, sinon il y avait une barre de scroll et les float ne passaient pas à la ligne :/
ça venait possiblement de la table, maintenant qu'elle est en % ça devrait le faire

sur la version initiale ça marchait sans

et la le mec il le pécho par le bras et il lui dit '

14

Le 18/10/2023 à 14:20

c'est bon, c'est en ligne et ça marche comme je le voulais