Ajustement d'emplacement de texe CSS

Bonjour, encore moi

Suite à votre aide sur mon dernier topic créer j'ai pu bien avancer dans mon CSS.

Cependant je rencontre quelque petits problemes

Une image pour illustrer le premier,

Le probleme ce situ au niveau de la box de connexion (en haut a droite)

Ici je voudrais que la fin du champ relatif au mot de passe et le lien pour le mot de passe oublié soient à 5px de la droite da mon div

Voici le code

Le probleme, quand je suis en position: relative, l'élément par rapport auquel il sont relatif semble etre celui à leur gauche, donc le champ du mail pour le champ du mot de passe et le bouton pour le lien en cas d'oubli.

Les codes

Le bout de css correspondant à cette partie

	div #connecte{
		position: absolute;
		right: 5px;
		top: 5px;
		font-size: 0.7em;
		color:red;
		
	}
	/* Partie connexion */
	
	div #connexion{
	
	position: absolute;
	width: 250px;
	background-color: #6D071A;

	}

	div .champ{
	    border-top: none;
	    border-left: none;
	    border-right: none;
	    width: 90px;
	    border-bottom: 1px solid purple;
	    font-size:0.5em;

	}
	 #champ_mail{
	 	position: relative;
		left:5px;
	}
	
	#champ_pass{
		position: relative;
		right: 5px;

		
	}

	#ligne2{
	    position:relative;
	    padding-top: 2px;
	}

/*;
	#connexion_ligne2{
		position: relative;
		list-style-type: none;
		display: inline-block;
		left: 5px;
		right: 5px;
		text-align: center;

	}
	#connexion_ligne2 li{
		list-style-type: none;
		display: inline-block;
		margin-left:10px;
	}
	*/

	#forgot_pass,#new_user{
		font-size: 0.5em;
		color: white;
	}
	#forgot_pass{
	    position: relative;
	   right:0px;
	    }

	#new_user{
		position: relative;
	    left: 5px;
	}


	div #button_login{
		position: relative;
		left: 10px;
		bottom: 2px;
	    border:none;
	    color:white;
	    width: 80px;
	    height: 20px;
	    background-color: #6D071A;
	    border: 1px solid white;
	    font-size: 0.5em;
	    border-radius: 40px /10px
	}

	div #button_login:hover{
	    color:#6D071A;
	    background-color: white;
	    border: 1px #6D071A;
	}

Et un extrait du code source pour l'html (sinon j'ai du php avec des echo donc c'est ilisible)

<div id='connexion'>
                        <form action='http://localhost/Cave/Accueil/accueil.php' method='post'>
                            <label>
                                <input type='email' name='email' placeholder='votre@mail.com' class='champ' id='champ_mail'>
                            </label>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <label>
                                <input type='password' name='password' placeholder='  •••password•••' class='champ' id='champ_pass'>
                            </label><br/>
                            <div id='ligne2'>
                            <!--
                            <ul id='connexion_ligne2'>
                                <li>
                                <a href='../Formulaire/register.php' id='new_user' > S'inscrire ?</a>
                                </li>
                                <li>
                                <button id='button_login'>Se connecter</button> 
                                </li>
                                <li>
                                 <a href='' id='forgot_pass'>   Mot de passe oublié ?</a> 
                                </li>
                             </ul>  -->
                             
                                
                                <a href='../Formulaire/register.php' id='new_user' > S'inscrire ?</a>
                                
                                <button id='button_login'>Se connecter</button> 
                                
                                
                                 <a href='' id='forgot_pass'>   Mot de passe oublié ?</a> 
                                

                             
                             </div>
                             </form></div>
               
                
                <nav>
          <li><a href="#">Lien sous menu 2</a></li>

Alors en trichant je peux les positioner à l’œil en faisant un left: Ypx , ou Y est mon nombre de pixel. Cependant je ne trouve pas ça tres propre. Y-a-t-il une solution pour fixer la relativité par rapport

EDIT: le probleme qui est résolu, je donne la solution en à la fin de ce message au cas ou des gens aurait le meme probleme.

J'ai ensuite un autre petit probleme, cette fois ci au niveau du menu. (Il vient d'ici, http://www.frogweb.fr/menu-deroulant-horizontal/ ,un endroit ou ya pas de probleme , ou en tous cas résolu :lol: )

Lorsque je sors du survol, la taille de sous menu se réduit et n'est plus égale à celle du parent au dessus, une image la auss expliquera mieux les choses

Voila ce qui ce passe quand je quitte le survol pendant la transition,

Le code html du menu

<nav>
                    <ul id="menu-demo2">
                        <li><a href="../Accueil/accueil.php">Accueil</a>
                            <ul>
                                <li><a href="#">lien sous menu 1</a></li>
                                <li><a href="#">lien sous menu 1</a></li>
                                <li><a href="#">lien sous menu 1</a></li>
                                <li><a href="../Accueil/accueil.php#horaire">Nos horaires d'ouverture</a></li>
                            </ul>
                        </li>
                        <li><a href="../Histoire/histoire.php">Notre histoire</a>
                            <ul>
                                <li><a href="#">Lien sous menu 2</a></li>
                                <li><a href="#">Lien sous menu 2</a></li>
                                <li><a href="#">Lien sous menu 2</a></li>
                                <li><a href="#">Lien sous menu 2</a></li>
                            </ul>
                        </li>
                        <li><a href="../Vignoble/vignoble.php">Notre Vignoble</a>
                            <ul>
                                <li><a href="#">lien sous menu 3</a></li>
                                <li><a href="#">lien sous menu 3</a></li>
                                <li><a href="#">lien sous menu 3</a></li>
                                <li><a href="#">lien sous menu 3</a></li>
                            </ul>
                        </li>
                        <li><a href="../Vins/vins.php">Nos Vins</a>
                            <ul>
                                <li><a href="#">Lien sous menu 4</a></li>
                                <li><a href="#">Lien sous menu 4</a></li>
                                <li><a href="#">Lien sous menu 4</a></li>
                                <li><a href="#">Lien sous menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="../Vins/vins.php">Boutique</a>
                            <ul>
                                <li><a href="#">Lien sous menu 4</a></li>
                                <li><a href="#">Lien sous menu 4</a></li>
                                <li><a href="#">Lien sous menu 4</a></li>
                                <li><a href="#">Lien sous menu 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

et son CSS

nav{
	    position: absolute;
	    right:20px;
	    bottom: 10px;
	    min-width: 400px;
	}

	#menu-demo2, #menu-demo2 ul{
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
	font-size: 0.7em;
	}
	#menu-demo2 li{
	display:inline-block;
	position:relative;
	border-radius:8px 8px 0 0;
	}
	#menu-demo2 ul li{
	display:inherit;
	border-radius:0;
	}
	#menu-demo2 ul li:hover{
	border-radius:0;
	}
	#menu-demo2 ul li:last-child{
	border-radius:0 0 8px 8px;
	}
	#menu-demo2 ul{
	position:absolute; /* ne pas passer en relative, sinon le menu remonte au survol*/
	z-index: 1000;
	max-height:0; /*cache les sous menus*/
	left: ;
	right: 0;
	overflow:hidden;
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
	}

	
	
	#menu-demo2 li:hover ul{
	max-height:15em;
	width: 100%;
	visibility: visible;


	}


	/* background des liens menus */

	#menu-demo2 li:first-child{
	background-color: #65537A;
	background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
	background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
	}
	#menu-demo2 li:nth-child(2){
	background-color: #729EBF;
	background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
	background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
	}
	#menu-demo2 li:nth-child(3){
	background-color: #F6AD1A;
	background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
	background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
	}

	#menu-demo2 li:nth-child(4){
	background-color: #F6AD1A;
	background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
	background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
	}

	#menu-demo2 li:last-child{
	background-color: #CFFF6A;
	background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
	background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
	}
	/* background des liens sous menus */
	#menu-demo2 li:first-child li{
	background:#2A2333;
	}
	#menu-demo2 li:nth-child(2) li{
	background:#333A40;
	}
	#menu-demo2 li:nth-child(3) li{
	background:#9F391A;
	}
	#menu-demo2 li:last-child li{
	background:#677F35;
	}
	/* background des liens menus et sous menus au survol */
	#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
	background:#65537A;
	}
	#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
	background:#729EBF;
	}
	#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
	background:#F6AD1A;
	}
	#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
	background:#CFFF6A;
	}
	/* les a href */
	#menu-demo2 a{ /*menu de base */
	text-decoration:none;
	display:block;
	padding:5px 20px;
	color:#fff;
	font-family:arial;
	}
	#menu-demo2 ul a{
	padding:8px ;
	}
	#menu-demo2 li:hover li a{ /*lien des sous menus*/
	color:#fff;
	text-transform:inherit;
	}
	#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
	color:#000;
	}

au début j'avais le meme problème pendant le survol mais j'ai ajouté un withd:100%; ligne 45 ce qui a resolu le probleme

j'ai essayer "la meme chose" en ajoutant ce morceau de code

#menu-demo2 li ul{
	max-height:15em;
	width: 100%;
	visibility: hidden;
}
	#menu-demo2 li:hover ul{
	max-height:15em;
	width: 100%;
	visibility: visible;
}

Alors ça résout le probleme d ela taille ,mais la propriété visibility me fait perdre tout l'effet de transition...que je voudrais conserver c'est essez cool

Edit:

Ce probleme est resolu j'ai ajouter un width: 100%; dans la partie #menu-demo2 ul , qui commence ligne 30 sur le code css au dessus

-
Edité par QuentinVidal5 20 juillet 2018 à 16:42:44

Oui, c'est l'idée de mettre du texte et de le cacher.
Mais là encore pour l'accessibilité, on ne le cache pas avec n'importe quoi.
La seule solution c'est un absolute (qui pour le coup est utile) et un left négatif important.
De cette manière le texte est invisble mais peut être lu par les lecteurs d'écran pour les personnes non-voyantes (merci pour eux).

Voilà comment tu pourrais faire, sans le absolute, avec les labels qui vont bien et moins de lignes de code :

        <form id='connexion' action='http://localhost/Cave/Accueil/accueil.php' method='post'>
            <div class="labels">
                <label for="champ_mail" class="label-mail"><span class="span-none">Votre email</span>
                    <input type='email' name='email' placeholder='votre@mail.com' class='champ' id='champ_mail'>
                </label>
                <label for="champ_pass" class="label-pass"><span class="span-none">Votre mot de passe</span>
                    <input type='password' name='password' placeholder='•••password•••' class='champ' id='champ_pass'>
                </label>
            </div>
            <div class="bottom-form">
                <a href='../Formulaire/register.php' id='new_user' >S'inscrire ?</a>
                <button id='button_login'>Se connecter</button>
                <a href='' id='forgot_pass'>Mot de passe oublié ?</a>
            </div>
        </form>

#connexion {
    float:right;
    margin-top:5px;
    margin-right:5px;
    background: #6D071A;
}
.span-none {
    position:absolute;
    left:-9999em
}
.labels {
    overflow:hidden;
}
.label-mail {
    float:left;
}
.label-pass {
    float:right;
}
.bottom-form a {
    color:#fff;
}
.bottom-form {
    text-align:center
}

-
Edité par Frogweb 20 juillet 2018 à 16:59:37

QuentinVidal5

20 juillet 2018 à 15:39:42

Le plus souvent la cause du bug est situé devant l'écran ;)

Frogweb

20 juillet 2018 à 16:40:51

Salut,

Pour le form connexion, ça c'est non :

&nbsp;&nbsp;&nbsp;&nbsp;

Ce n'est pas avec ça qu'on fait des marges. Sert toi de padding ou margin.

Je pense que si tu enlève le width sur #connexion ça devrait fonctionner. Ensuite tu joues avec les margin des deux labels pour placer comme tu veux.
Au pire tu utilise des float.

PS : des petits conseils, utilise le moins possible absolute. Ici tu peux te servir de float:right pour mettre ton form à droite.
Ton code n'est pas accessible, il doit y avoir du texte dans le label. Un placeholder ne le remplace pas.

Pour le menu je vais regarder. Mais le plus simple c'est de voir la page en ligne. C'est possible ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

20 juillet 2018 à 16:48:46

Merci Frogweb pour ta reponse,

J'ai trouver la solution à mon second problème, j'ai modifié mon premier message pour y ajouter la solution.

Oups les &nbsp , je l'avais mis au debut quand j'était vraiment pas bon visiblement j'ai pas tout lever, c'est vrai que c'est pas beau :euh: .

Je vais apprendre à utiliser les float pour arranger tout ça

Aie je vais réflechir a quoi mettre dans le label, c'est possible de mettre un truc et de le cacher avec un hidden en css?

Ah et non malheureusement le site n'est pas encore en ligne, il me manque des photos et des textes à ajouter avant de pouvoir mettre une premiere version potable...

Merci beaucoup

-
Edité par QuentinVidal5 20 juillet 2018 à 16:50:59

20 juillet 2018 à 16:55:19

20 juillet 2018 à 18:53:24

Merci beaucoup pour les astuces et le code corrigé.

J'avais lever le text des label pour gagner de la place, ce qui améliore l’esthétique ici à mon gout, mais j'avais totalement omis les mal-voyant

Merci encore

probleme de position: relative

Ajustement d'emplacement de texe CSS

Supprimer

Modérer

Signaler le message aux modérateurs