Partage

[HELP] Afficher mon site correctement sur telephon

17 mai 2017 à 21:33:45

Alors voilà, sur mon ordi, tout s'affiche bien comme vous le doutez mais par contre sur téléphone voilà la galère!
Du coup je vous laisse mon HTML et mon CSS afin que des gentilles personnes puissent m'aider parce que je galère pas mal :D
Je suis désolée de la qualitée du codage, j'ai clairement "coder" avec le cul
body {
    background-image: url(carbonBackground.jpg);
    color: black;
    font-family:Calibri;
    font-size: 25px;
    margin-top: 50px;
    margin-bottom: 10%;
    margin-right: 20%;
    margin-left: 20%;
}

@font-face {
    font-family: 'coolveticaregular';
    src: url('coolvetica_rg-webfont.woff2') format('woff2'),
         url('coolvetica_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
  
.corps {
    background-color:white;
    box-shadow:         5px 2px 4px 4px black;
}
  
.corpsheader {
    text-align:center;
    background-color:#AB0000;
    color:white;
	padding:5px;
    font-family:coolveticaregular;
}
  
a {
    text-decoration: none;
    color:white;
}
  
.tout {
    color:black;
}
  
.actus {
    margin-top:2%;
    margin-bottom: 2%;
    margin-left: 2%;
    margin-right: 2%;
    border-style: solid;
    border-color:black;
    border-width:1px;
}
  
.titreactus {
	padding:5px;
    font-family:coolveticaregular;
    font-size:20px;
    background-color:#AB0000;
    color: white;
    text-align: center;
}

.titreactusb {
	padding:5px;
    font-family:coolveticaregular;
    font-size:17px;
	margin-top:20px;
    background-color:#AB0000;
    color: white;
    text-align: center;
}
  
.titreactusn {
	padding:5px;
    font-family:coolveticaregular;
    font-size:17px;
    background-color:#202625;
    color: white;
    text-align: center;
}  
  
.actusnom {
    font-size:18px;
	padding:10px;
	height:auto;
}

.actusnom2 {
    font-size:18px;
	padding:10px;
}
  
.voirp {
    text-align:right;
    opacity:0.40;
    font-size: 15px;
}
  
.all1{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
}
 
.elementart:nth-child(1)
{
    width: 55%;
    height: auto;
    margin-left: 2%;
    border-style: solid;
    border-color:black;
    border-width:1px;
    font-size:13px;
	margin-bottom:20px;
}
 
.elementart:nth-child(2)
{
    width: 38%;
    height: 150px;
    border-style: solid;
    border-color:black;
    border-width:1px;
    font-size:13px;
    margin-top: 0px;
    margin-left: 2%;
	margin-bottom:20px;
}

.copyright {
	color: white;
	text-align: center;
	margin-top:20px;
	font-family:System;
	font-size:10px;
}

.imagesteam {
	text-align:center;
	width:100%;
	margin:auto;
	margin-top:20px;
	width:"80%";
}

.imagerecrut {
	text-align:center;
	margin-top:20px;
	width:100%;
}


.idnews {
	text-align:center;
}

.lienpourstaff {
	color: black;
    font-family:Source Sans Pro Black;
    font-size:15px;
}

.nomstaff {
	color: black;
    font-family:Source Sans Pro Black;
    font-size:15px;
}

.imagearticle {
	text-align:center;
}

.flashinfo {
    border-style: solid;
    border-color:black;
    border-width:1px;
    font-size:13px;
    margin-top: 20px;
    margin-left: 2%;
	margin-bottom:20px;
}
HTML
<! DOCTYPE HTML>
<html>
    <head>
        <title>KaVarM - Actualités e-sport en français!</title>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
    <a href="index.html"><img src="res/logoheader.png"></a><a href="https://twitter.com/KaVarM_"><img src="res/icon/72/Twitter-Icon-2.png" style="float:right;"></a><a href="#"><img src="res/icon/72/facebook-Icon.png" style="float:right;"></a><br><br>
    <div class="corps">
        <div class="corpsheader">
            <a href="index.html">Accueil</a> &bull; <a href="news.html">News</a> &bull; <a href="partenaire.html">Partenaire</a> &bull; <a href="staff.html">Staff</a>
        </div>
        <div class="actus" >
            <div class="titreactus">
                Les actualités recentes de la scène française
            </div>
            <div class="actusnom">
                <a href="vexedrendservice.html"><p class="tout">&bull; Vexed: «On nous a demandé de rendre service, on a rendu service» déclare en recrutant KQLY.</p></a>
                <a href="pornhubesport.html"><p class="tout">&bull; MAXISAUCISSE rejoint la PornHub eSport!</p></a>
                <a href="recrutement.html"><p class="tout">&bull; Recrutement KaVarM.</p></a>
                <a href="wipr.html"><p class="tout">&bull; WiPR et son vol de vidéo russe.</p></a>
            </div>
            <div class="voirp">
                    <a href="news.html"><div class="tout">Voir toutes les news!</div></a>
            </div>          
       </div>
 
        <div class="all1">
            <div class="elementart" >
                <div class="titreactus">
                    Nos dernières vidéos *COMING SOON*
                </div>
                <div class="actusnom">
                    <p>&bull; A venir</p>
                    <p>&bull; A venir</p>
                    <p>&bull; A venir</p>
                    <p>&bull; A venir</p>
				<video width="480" height="270" controls>
	<source src="res/video/KaVarM.mp4" type="video/mp4">
	<source src="res/video/KaVarM.ogg" type="video/ogg">
				</video>
                </div>
            </div>
        <div class="elementart">
                <div class="titreactus">
					Plus d'infos peut-être?
                </div>
                <div class="actusnom2">
					KaVarM est un site internet parodiant la scène e-sport française tout en restant respectueux.
					Vous comprendrez donc que le site est à prendre au 2nd degrès et que nous adorons cette scène française, ainsi que le site parodié.
					Merci, le staff.
				</div>
			<div class="titreactusb">
				Pour nous contacter, merci de le faire sur notre twitter! <a href="https://twitter.com/KaVarM_eSport"> Cliquez ici pour être rediriger </a>
			</div><br>
			<div class="titreactusn">
				Ou vous pouvez également contacter le créateur sur steam! <a href="http://steamcommunity.com/id/ANMLx/"> Cliquez ici pour être rediriger </a>
			</div>
			<div class="imagesteam">
				<a href="https://steamcommunity.com/groups/KaVarM"><img src="res/steam.png" height="" width=""></img></a>
			</div>
			<div class="flashinfo">
            <div class="titreactus">
				Flash info:
            </div>
            <div class="imagerecrut">
				<a href="recrutement.html"><img src="res/recrutement.png"></img></a>
					<br>Nous recrutons au total deux graphistes, un moviemaker ainsi qu'un redacteur. Cliquez sur l'image pour avoir plus d'informations!
			</div>
			</div>
        </div>
        </div>
    </div>
	<div class="copyright">
		Copyright 2017, dev by Matteo "wintr" L.
	</div>
        <script src="js.js"></script>
    </body>
</html>
17 mai 2017 à 21:57:18

Hello,

Si tu as "coder avec le cul" faut pas chercher bien loin ^^ 

Et toutes ces valeurs en %, des margin et padding, laisse respirer tes conteneurs qui prendront la taille selon le contenu. Une fois fait tu as les medias-queries pour ajuster le positionnement selon la taille du navigateur.

Le mieux serait de poster directement le lien au site.

17 mai 2017 à 22:35:57

Le lien du site http://vakarmdupovre.esy.es/

J'ai pas trop compris ce que je devrais faire finalement???

et pour la citation "coder avec le cul" c'est que je ne suis pour l'instant pas très doué en CSS/HTML et forcément j'ai quelques soucis au niveau de l'organisation :)

-
Edité par MattéoLeclercq 17 mai 2017 à 22:39:19

17 mai 2017 à 23:15:18

Rien qu'en supprimant les margin du <body>, remplacés par :

max-width: 960px;

margin: 10px auto;

j'obtiens ceci avec une fenêtre de 600px

En dessous de environ 600, on touche ce que l'on appel un point de rupture. Une règle CSS medias-queries serait nécessaire.

Ici -> https://www.alsacreations.com/article/lire/930-css3-media-queries.html 

Ou la -> https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries 

 J'ai rajouté aussi cette ligne dans le head (pour le ratio sur mobile). 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">

Choisir son viewport-> https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html 

Ensuite il faut travailler sur le positionnement et la tailles des autre éléments, ainsi de suite. Utilise l'inspecteur d'éléments de ton navigateur (outils de développement F12) pour faire des tests.

Bon je n'ai fait que bidouiller pour montrer que c'est possible, mais il faudra revoir la copie en évitant tous ces %...

Si tu fais une mise en page que se positionne bien en réduisant la fenêtre de ton navigateur + quelques @medias + le viewport alors tu devrais avoir un bon design sur mobile.

-
Edité par Lucky13 17 mai 2017 à 23:25:18

18 mai 2017 à 19:24:54

Merci, merci j'ai réussi à améliorer déjà mon site et c'est super sympa de ta part!

Par contre, j'ai un petit soucis; je m'explique..

Je voudrais annuler la propriété display:flex; quand le site passe > des 980px dans mon conteneur all1

mais quand je rentre

@media screen and (max-width: 980px)
{
	video {
		display: none;
	}
	all1 {
		display: block;
	}
}

mon conteneur all1 continue de s'afficher en flex...

Je ne comprend pas du tout pourquoi :(

Merci d'avance

edit: je suis complètement débile j'écrivais all1 directement au mieux de .all1

-
Edité par MattéoLeclercq 18 mai 2017 à 19:26:16

18 mai 2017 à 20:28:50

t'as oublié le "." devant all1 c'est une classe donc :

.all1 {
    display: block;
}

Sinon il le prendra pas en compte :)

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE

[HELP] Afficher mon site correctement sur telephon

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown