Menu <nav> a droite en fixed à rapport a body

Résolu
TECKNON Messages postés 302 Statut Membre -  
xdiz Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   -
salut all ,

j'ai un texte et un menu de navigation donc texte dans balise section et menue dans une balise nav
je veut que le texte soit a gauche et le menue a droite mais que le menue soie en position fixe
le blem et que je veut pas qu'il se place par rapport au bort de l'écran mais par rapport a la balise body comme ça il suis le positionnement du site quand l'ecrant utilisateur a une petite résolution
et je trouve pas comment faire sa me saoule grave alors si quelqu'un a la soluce
MERCI D'AVANCE !!!
mon code css : 

nav
{
	width: 20%;
	text-align: left;
        display: inline-block;
        border: 3px blue outset;
	border-radius: 10px;
	position: fixed;
	right: 0px;
	
}

section
{
	width: 80%; 
	display: inline-block;
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	font-family: "Times New Roman", "Comic Sans MS", Georgia, serif;
	border: 3px blue outset;
	
}

10 réponses

  1.
    xdiz Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   41
     
    Bonjour,

    Tu dois mettre ta navigation à droite grâce au flottant : float:right, cela donnera: 
    #nav {
	width: 20%;
	text-align: left;
        float: right;
        border: 3px blue outset;
	border-radius: 10px;
	position: fixed;
	right: 0px;	
}

#section
{
	width: 80%; 
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	font-family: "Times New Roman", "Comic Sans MS", Georgia, serif;
	border: 3px blue outset;
}


    Une partie du code HTML serait le bienvenu ;)
    1
    1. TECKNON Messages postés 302 Statut Membre 45
       
      justement je l'ai déjà fait ça et sa ne marche pas c'est même la premier chose que j'ai faite et sa marche pas reste coller a droite de la fenêtre
      code html 

      
<body> 
<header> 
            <h1> titre de reve </h1> 

</header> 



<nav> 
    <ul> 
     <li><a id="tes" href="tes.html"> tes </a></li> 
     <li><a id="ta" href="ta.html"> ta </a></li> 
     <li><a id="tot" href="tot.html"> tot</a></li> 
     <li><a id="pet" href="pet.html">pet </a></li> 
    </ul>  
</nav> 
 <section> 
             <p> testestetstetstststsststteteteteetet </p> 
               <p> testestetstetstststsststteteteteetet </p> 
             <p> testestetstetstststsststteteteteetet </p> 
       </section> 
</body>
      0
  2. tomtom02
     
    Bjr,

    Pour le positionnement, regarde un peu le site du zéro:

    http://www.siteduzero.com/tutoriel-3-13566-le-positionnement-en-css.html

    Bon courage.
    0
    1. TECKNON Messages postés 302 Statut Membre 45
       
      salut justement je me sert de se cour même de l'ancien !!!
      je trouve pas de soluce quand même
      0
  3. TECKNON Messages postés 302 Statut Membre 45
     
    UP SVP!!!!
    0
  4. TECKNON Messages postés 302 Statut Membre 45
     
    UP SVP!!!!
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. xdiz Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   41
     
    J'ai dis une bêtise, une position flottante (propriété float:right) ne peut être cumulée avec une position fixe (propriété position:fixed).

    Ton code passe avec Chrome et Firefox mais pas avec IE (presque normal).

    Tape dans google : position fixed + float, tu auras des idées.

    Tu places ta navigation juste après ta balise body si tu veux que ton menu "touche le body au lieu de toucher l'écran".
    0
    1. TECKNON Messages postés 302 Statut Membre 45
       
      justement je veut qu'il soit entre ma balise <section> et <body> mais sa marche pas il se colle a l'écran
      un schema tu vas comprendre

      voila ce que j'ai
      <image>http://img803.imageshack.us/img803/1588/monsiteactuelement.png</image>

      et voila ce que je veux
      <image>http://img827.imageshack.us/img827/4245/sequejeveux.png</image>

      parce que si on réduit la fenêtre Firefox et bien le menu <nav> se retrouve a flotter au dessus de <section>
      0
  7. Utilisateur anonyme
     
    Bonjour,

    Ton fichier html (il faut inverser nav et section) : 
    <body> 
    <header> 
        <h1> titre de reve </h1>
     </header> 

    <section> 
        <p> testestetstetstststsststteteteteetet </p> 
        <p> testestetstetstststsststteteteteetet </p> 
        <p> testestetstetstststsststteteteteetet </p> 
    </section> 
	   
    <nav> 
		<ul> 
			<li><a id="tes" href="tes.html"> tes </a></li> 
			<li><a id="ta" href="ta.html"> ta </a></li> 
			<li><a id="tot" href="tot.html"> tot</a></li> 
			<li><a id="pet" href="pet.html">pet </a></li> 
		</ul>  
     </nav> 
</body>


    Et ton fichier css : 
    body {
	margin:auto;
	width:900px;
}

nav {
	margin-left:80%;
	text-align: left;
        border: 3px blue outset;
	border-radius: 10px;
}

section
{
	float:left;
	width: 80%; 
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	font-family: "Times New Roman", "Comic Sans MS", Georgia, serif;
	border: 3px blue outset;
}
    0
  8. xdiz Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   41
     
    @Adenora : le menu "nav" n'est pas en position fixed dans ton exemple ...

    @tecknon : ce que tu veux faire n'est pas possible (voir cet article) : https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#position-fixe.

    Par contre tu peux essayer de faire comme sur ce site (http://www.comune.carlopoli.cz.it/last-news/200-piano-di-rientro-regionale-sanitario-guardie-mediche.html) avec le petit bloc des réseaux sociaux qui reste à gauche du bloc contenu.

    PS : pense à utiliser l'extension Firefox Firebug si ce n'est pas déjà le cas ;)
    0
  9. Utilisateur anonyme
     
    Mon code fonctionne et est tiré du site du zéro, donc pourquoi utiliser position:fixed.
    Et il passe sous IE, si on rajoute un script.
    0
  10. xdiz Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   41
     
    Ton HTML et CSS fonctionne, certes il est à droite, mais son menu n'est pas en position fixe.
    Son but est d'avoir son menu de droite qui reste toujours affiché à l'écran quelque soit le scroll vers le bas.

    1) Pensez à marquer votre discussion comme [Résolu].
    2) Détaillez votre problème un maximum, afin qu'on puisse établir un diagnostic précis
    0
  11. TECKNON Messages postés 302 Statut Membre 45
     
    merci de votre aide mais tu es sur c'est pas possible ? il doit y avoir une solution quand même c'est con si non
    0
    1. TECKNON Messages postés 302 Statut Membre 45
       
      merci a tous je mets en résolue au pire je le ferais en JavaScript vue que c'est possible ^^ et du temps je mettrais le menu a gauche vue qu'ela sa marche a plus et merci encore ^^
      0
    2. xdiz Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   41
       
      De rien ;)
      Des fois on est obligé de revoir son analyse pour trouver une "solution" ;)
      0

Discussions similaires

mon écran d'accueil google chrome est décalé à droite
89pierrot! -
germain -

6 réponses
Icone de forme clé agfiché sur mon téléphone samsung
Soula -
ondine -

2 réponses
mon écran est décalé sur la droite,comment le remettre normal?
minouche -
radames -

16 réponses
probleme page internet decaler a droite
julie -
mohsin-majestic -

14 réponses
J'ai un Samsung Galaxy A70 j'ai un clés qui s'affiche en haut de l'écran
Mourad -
james-bond77 -

3 réponses