28106 sujets

CSS et mise en forme, CSS3

Bonjour,
Je fais appel à vous car j'ai de gros problèmes...
J'ai réécrit un header pour mon siteweb, car j'utilisais des marges négatives et que je veux inverser de places des éléments :
upload/1620855527-82357-nav.png
Mais je n'arrive pas à faire une bonne version mobile, elle est vraiment dégueulasse dans tout les sens :
upload/1620855562-82357-nav2.png
upload/1620855579-82357-nav3.png
C'est le déroulant qui pose problème... en plus, le background du footer est caché.
Regardez mon code :
<header>
				<div id="flex-nav">
					<div id="label-nav">
						<label for="mobile" id="deroulant-mobile"><img src="/downloads/images/deroulant.png" alt="Menu" id="deroulant"></label>
					</div>
					<div class="titre_principal">
						<h1>Nous sommes la nouvelle génération de GEEKS !</h1>
					</div>
					<div id="titre_principal_mobile">
						<h1>Nous sommes des GEEKS !</h1>
					</div>
					<nav>
						<a href="https://iconic-i-clash.com/se-connecter" class="logo-account_a"><strong><img class="logo-account" src="/downloads/images/logo_account.png" alt="Se connecter"></strong></a>
						<ul id="sous">
							<li><a href="https://iconic-i-clash.com/"><strong><b>Accueil</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/actualites"><strong><b>Actualités</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/forum"><strong><b>Forum</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/boutique"><strong><b>Boutique</b></strong></a></li>
							<li><a href="https://iconic-i-clash.com/blog"><strong><b>Blog</b></strong></a></li>
						</ul>
					</nav>
				</div>
				<div>
					<input type="checkbox" id="mobile">
					<ul id="sous2">
						<li><a href="https://iconic-i-clash.com/"><strong><b>Accueil</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/actualites"><strong><b>Actualités</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/forum"><strong><b>Forum</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/boutique"><strong><b>Boutique</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/blog"><strong><b>Blog</b></strong></a></li>
					</ul>
				</div>
			</header>

Mon css :
header{
    background: url(/exemple/separateur.png) repeat-x bottom;
}

#flex-nav
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#sous
{
    list-style-type: none;
    display: flex;
    margin-bottom: 0.5rem;
    margin-right: 0.4rem;
}
#deroulant-mobile,#mobile,.banniere_texte2,#titre_principal_mobile{
    display: none;
}

#label-nav{
    display: none;
}

nav{
    display: flex;
    flex-direction: row-reverse;
    margin-right: 0.4rem;
}
#sous2{
    display: none;
}
@media screen and (max-width: 480px){
#deroulant-mobile{
        display: block;
    }

    #titre_principal_mobile{
        display: block;
    }
#mobile:checked + #sous2{
        display: block;
    }
    .titre_principal,#sous,.banniere_texte1
    {
        display: none;
    }

    #label-nav{
        display: block;
        margin-left: 0.2rem;
    }
    nav{
        margin-right: 0.2rem;
    }
    #deroulant
    {
        max-width: 2rem;
    }
}

Comment est-ce que je peux l'améliorer ?
Le code html est raté... et ul a des problèmes lorsque je lui met met des marges, ou une taille.
Merci de votre aide
EDIT :
Enfaite, la décoration est dans mon css et me convient, genre les liens et tout, mais on ne le voit pas sur la photo.
Ce qui me gêne est la répétition du <ul> qui me paraît inutile, or je ne trouve pas d'autres moyen pour avoir <ul> en dessous du titre et des 2 images.
Si j'ai dit que c'était dégueulasse, c'est à cause de cette répétition, plus le fait que sur mobile, l'<ul> se comporte bizarrement. Il a une marge gauche mais pas droite et ça n'a aucun sens.
Donc, je voudrais juste ne pas faire de répétition.
Le display: grid; ne peux pas aller puisque dans la nav, j'ai un lien qui devrait être séparé du menu...
Je l'avais mis aussi sur ma version normale, mais la taille des cases ne s'adaptent pas au texte, je crois.
Modifié par Louis_9876 (13 May 2021 - 15:24)
Salut,
Après avoir perdu toute une journée et des heures de codes, J'AI REUSSI !!
Je suis hyper content.
upload/1620937549-82357-nav2.png
upload/1620937543-82357-nav.png
Bref, la seule répétition de code est celle du logo se connecter, et je n'ai pas pu y échapper.
C'était hyper simple, juste des divs et des display: flex; à bien gérer.
Merci quand même...
Modifié par Louis_9876 (13 May 2021 - 22:26)
Administrateur
Bonjour,

c'est un problème pas simple et fortement dépendant des 2 designs mobile/desktop (en évitant de s'égarer entre les 2 sur tablette...).
D'expérience, display: grid a le même avantage que Flexbox pour ce qui est de réordonner les blocs (navigation avant lien Se connecter et inversement) mais pas l'inconvénient lorsqu'on ajoute flex-wrap : aucun risque qu'un grid item ne passe à la ligne comme un flex item parce qu'il n'a pas assez de place entre 568px et 575px par exemple (argh).

Avec ton design, je ne vois pas trop pourquoi avoir eu besoin de dupliquer le lien Se connecter : order (dans une Media Query) ne suffit pas ?
Salut,
Merci pour ta réponse !
Display: grid n'allait pas, je crois car je n'arrivais pas à coller deux divs entre elle à droite et une à gauche pour la version desktop.
Je ne connais pas order... et je n'ai, je crois, jamais utilisé flex-wrap.
Voici mon html :
<header>
				<div id="header-flex">
					<div id="label-nav">
						<label for="mobile" id="deroulant-mobile"><img src="/downloads/images/deroulant.png" alt="Menu" id="deroulant"></label>
					</div>
					<div class="titre_principal">
						<h1>Nous sommes la nouvelle génération de GEEKS !</h1>
					</div>
					<div id="titre_principal_mobile">
						<h1>Nous sommes des GEEKS !</h1>
					</div>
					<div id="logo-nav-se-connecter">
						<a href="https://iconic-i-clash.com/se-connecter" class="logo-account_a"><strong><img class="logo-account" src="/downloads/images/logo_account.png" alt="Se connecter"></strong></a>
					</div>
				</div>
				<nav>
					<input type="checkbox" id="mobile" role="button">
					<ul id="sous">
						<li><a href="https://iconic-i-clash.com/"><strong><b>Accueil</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/actualites"><strong><b>Actualités</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/forum"><strong><b>Forum</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/boutique"><strong><b>Boutique</b></strong></a></li>
						<li><a href="https://iconic-i-clash.com/blog"><strong><b>Blog</b></strong></a></li>
					</ul>
					<div id="logo-nav-se-connecter2">
						<a href="https://iconic-i-clash.com/se-connecter" class="logo-account_a"><strong><img class="logo-account" src="/downloads/images/logo_account.png" alt="Se connecter"></strong></a>
					</div>
				</nav>
			</header>

Qu'en penses-tu ?
Un simple order suffirait ?
Modifié par Louis_9876 (15 May 2021 - 12:24)
Salut,
De ce que j'ai compris, il faut que je fasse un display: grid; sur mobile.
Merci
Modifié par Louis_9876 (16 May 2021 - 21:28)
Administrateur
Je n'avais pas compris (ou pas vu) que tu dupliquais un élément, ce qui simplifie la mise en page (c'est évitable mais loin d'être simple, je vais pas faire croire l'inverse...).

Si ce n'est pas le même élément pour "Se connecter" (mobile : il fait partie de #header-flex mais desktop il est après nav), tu peux continuer à utiliser Flexbox sur mobile Smiley biggrin
Salut,
Je viens de mettre un display: grid; sur ma version mobile.
Le résultat est le même mais mon html est mieux :
<div class="logo">
			</div>
			<header>
				<div id="label-nav">
					<label for="mobile" id="deroulant-mobile"><img src="" alt="Menu" id="deroulant"></label>
				</div>
				<div class="titre_principal">
					<h1></h1>
				</div>
				<div id="titre_principal_mobile">
						<h1></h1>
				</div>
				<nav>
					<input type="checkbox" id="mobile" role="button">
					<ul id="sous">
						<li><a href=""><strong><b>Accueil</b></strong></a></li>
						<li><a href=""><strong><b>Actualités</b></strong></a></li>
						<li><a href=""><strong><b>Forum</b></strong></a></li>
						<li><a href=""><strong><b>Boutique</b></strong></a></li>
						<li><a href=""><strong><b>Blog</b></strong></a></li>
					</ul>
				</nav>
				<div id="logo-nav-se-connecter">
					<a href="" class="logo-account_a"><strong><img class="logo-account" src="" alt="Se connecter"></strong></a>
				</div>
			</header>

Merci pour vos aides précieuses, j'ai enfin réellement ce que je veux !
Modifié par Louis_9876 (19 May 2021 - 13:35)