Bonjour,

Sur mon projet 1 : http://www.cirtelo.fr/OPC/P1_langer_laurence/index.html

J'ai à nouveau un problème d'adaptation de l'image de fond à l'écran.

Les paramétrages de l'image de fond sont bons, mais la taille de l'affichage intègre le rond avec la flêche sur la droite (et non sur la gauche) d'où un scroll qui s'affiche en bas pour voir toute la page.

Auriez-vous une idée ?

Bien cdt

Laurence

Bonjour,

J'ai peut-être pas tout compris mais dans ton code tu as

<span class="fas fa-angle-left fa-2x slider slider1"></span>

qui affiche la flèche de gauche avec le rond. Ton problème de viendrais pas de cette ligne.

Bonjour,

En fait, à gauche, ça fonctionne bien. Voici la portion de code html

 <section id="accueil">
   
     <div class="test test2">
		<div class="container">
		    <span class="fas fa-angle-left fa-2x slider slider1"></span>
			<div class="element1">
			<article>
                <br>
			<h1 class="titre"><strong>WEBAGENCY</strong> : L'AGENCE DE TOUS<br> VOS PROJETS !</h1>
			<h4>Vous avez un projet web ? La WebAgency vous aide à le réaliser ! </h4>
			<button><span id="bouton">Plus d'infos</span></button>
			</article>
			</div>
            <span class="fas fa-angle-right fa-2x slider slider2"></span>
        </div>
	</div>
   </section>

Et en css :

.test
{
	width:100%;
	padding-left:0;
	padding-right:0;
	height:87vh;
	margin-bottom:0;
	padding-bottom:0;
	margin-left:0;
	margin-right: 0;
}

.test2
{
	background-image:url(../images/slider/bg1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.slider {
	margin-top: 45vh;
	align-content: center;
	flex-shrink: 0;
}

span.slider1
{
	margin-left: -5%;
}
span.slider2
{
    margin-left: 45%;
	margin-right: -2%;
}
span.slider:before
{
	width: 49px;
	height: 32px;
	background-color: #46454a;
	border-radius: 100%;
	vertical-align: middle;
	text-align: center;
	padding: 6px;
	display: inline-block;
}

Donc les deux ronds sont les mêmes, mais à gauche, ça n'impacte pas la taille de l'écran, en revanche, à droite, ça génère un espace supplémentaire.

Je vais essayer de tronquer le rond, mais logiquement c'est pour faire un slider, donc je devrais pouvoir positionner l'élément sans cet espace supplémentaire.

A suivre !

Bonjour

Ton problème ne viendrais pas de cette ligne

span.slider1
{
    margin-left: -5%;
}

Et surtout du -5%. Si tu modifies cette valeur, qu'est ce que ca donne

Bonjour,

je ne veux pas te décourager, mais tu as vraiment beaucoup d'éléments très mal positionnés, qui entraînent eux-même des problèmes de positionnement sur d'autres...

Comment as-tu conçu ton site? Es-tu partie de zéro ou bien es-tu partie d'un existant que tu as voulu modifier?

Ce n'est probablement pas le type de réponse que tu voulais, mais je te conseilles très très fortement, d'essayer de revoir les concepts de base, notamment les points suivants:

• quand utiliser un margin et un padding?
• quand utiliser position absolute et relative?
• comment positionner avec flexbox?

Déjà, avec ces 3 points principaux, tu va pouvoir repenser le css pour avoir quelque chose de beaucoup plus simple à déboguer et à enrichir.

Pour te donner un exemple de ce que j'avance, ça c'est une aberration comme positionnement:

Pour faire ce type de positionnement, tu dois te servir de position absolute sur ta flèche et relative sur ton container contenant l'image. Mais surtout pas utiliser margin comme ça !

Bon courage dans ton dev, et n'hésites pas à demander des précisions si besoin.

Merci beaucoup, ça explique beaucoup de choses !

Oui, je suis partie de 0 et sans avoir appris les positions absolues et relatives d'où pas mal de cafouillage mais ça commence à rentrer.

J'ai corrigé la page d'accueil en fonction de tes conseils, avec encore un souci pour positionner l'article. A suivre.

Merci beaucoup

Bonjour,

c'est une bonne chose d'être partie de zéro. En fait j'insiste autant sur la bonne approche pour ton positionnement, parce que cela va te retirer beaucoup de problèmes pour la suite.

Par exemple, je constates que tu définis souvent des width et des height dans ton CSS. C'est utile parfois, mais le plus souvent, il n'est pas nécessaire de le faire.

Il faut laisser la div s'adapter à son contenu et jouer avec les margins et padding selon le cas.

Si tu veux on peut faire l'exercice sur ton header pour te montrer de quoi je parle. Ensuite tu pourra mieux comprendre comment corriger tes erreurs pour ton slideshow.

Voici les captures d'écran de tout ce qui ne va pas sur le header:

La div qui encadre ton logo fait 50% de largeur alors que ce n'est pas utile:

Ton logo est mal positionné dans ta div:

Ton menu est mal positionné et n'a pas la bonne largeur:

Tes items de menu sont mal positionnés et n'ont pas la bonne largeur:

Le hover décale l'item du menu vers le bas:

Je te laisse essayer d'analyser tout ça et ensuite je te montrerai comment faire proprement.

-
Edité par -RR- 25 février 2020 à 17:06:13

Bonjour et merci infiniment de ces conseils pour que mes compétences de base soient correctes.

J'ai retravaillé le header :

- j'ai supprimé la div class element1 et passé le logo en élément flex. En effet, sans indication de largeur, l'élément 1 ne présente pas d'intérêt ? J'ai quand même une incertitude car du coup, la qualité du logo est moins bonne.

- J'ai corrigé l'élément 2 et utilisé je pense la bonne propriété flex pour positionner les éléments 3

- J'ai corrigé le problème du Hover qui faisait bouger les menus et bien positionné les menus au centre des éléments 3.

Je poursuis les corrections sur le reste du projet.

Merci encore

Laurence

Bonjour Laurence,

voici la correction pour ton header: https://codepen.io/raphaelriehl/pen/OJVpxaK

Je t'ai mis des commentaires dans le CSS avec des liens vers de la doc, et j'ai modifié le HTML pour qu'il soit plus propre.

Prends le temps de relire le code et n'hésite pas à analyser le résultat avec l'inspecteur d'éléments de ton navigateur.

Ça te permettra de comprendre comment sont positionnés les éléments et où sont appliqués les margins et paddings.

Dis toi que plus le CSS est simple mieux c'est.

Et comme tu peux le voir dans le code fourni, il n'y a ni width, ni height, ni position absolute ou relative.

Bon dev à toi !

-
Edité par -RR- 26 février 2020 à 14:04:42