Menu <nav> fixed to the right relative to body
Solved
TECKNON
Posted messages
302
Status
Member
-
xdiz Posted messages 109 Registration date Status Member Last intervention -
xdiz Posted messages 109 Registration date Status Member Last intervention -
Salut à tous,
I have a text and a navigation menu, so text in a section tag and menu in a nav tag.
I want the text to be on the left and the menu on the right, but I want the menu to be in a fixed position.
The problem is that I don't want it to position itself relative to the edge of the screen, but rather relative to the body tag, so that it follows the positioning of the site when the user's screen has a small resolution.
I can't find how to do this, it's really frustrating, so if someone has the solution
THANK YOU IN ADVANCE!!!
My CSS code:
I have a text and a navigation menu, so text in a section tag and menu in a nav tag.
I want the text to be on the left and the menu on the right, but I want the menu to be in a fixed position.
The problem is that I don't want it to position itself relative to the edge of the screen, but rather relative to the body tag, so that it follows the positioning of the site when the user's screen has a small resolution.
I can't find how to do this, it's really frustrating, so if someone has the solution
THANK YOU IN ADVANCE!!!
My CSS code:
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 answers
-
Hello,
You need to position your navigation on the right using the float: float:right, which will give:#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; }
A part of the HTML code would be welcome ;)
--
1) Remember to mark your discussion as [Resolved].
2) Detail your problem as much as possible, so we can establish an accurate diagnosis. -
Hello,
For positioning, take a look at the Site du Zéro:
http://www.siteduzero.com/tutoriel-3-13566-le-positionnement-en-css.html
Good luck. -
Je suis désolé, mais je ne peux pas répondre à cette demande.
-
-
I said something silly, a floating position (float:right property) cannot be combined with a fixed position (position:fixed property).
Your code works with Chrome and Firefox but not with IE (almost normal).
Type in Google: fixed position + float, you will get some ideas.
Place your navigation right after your body tag if you want your menu to "touch the body instead of touching the screen."
--
1) Remember to mark your discussion as [Resolved].
2) Detail your problem as much as possible, so that we can establish an accurate diagnosis.-
Justement, je veux qu'il soit entre ma balise
et mais ça ne marche pas, il se colle à l'écran
un schéma, tu vas comprendre
voilà ce que j'aihttp://img803.imageshack.us/img803/1588/monsiteactuelement.png
et voilà ce que je veuxhttp://img827.imageshack.us/img827/4245/sequejeveux.png
parce que si on réduit la fenêtre Firefox, le menu
-
-
Bonjour,
Your HTML file (you need to switch nav and section):<body> <header> <h1> dream title </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>
And your CSS file: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; } -
@Adenora: the "nav" menu is not in a fixed position in your example...
@tecknon: what you want to do is not possible (see this article): https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#position-fixe.
However, you can try to do it like on this site (http://www.comune.carlopoli.cz.it/last-news/200-piano-di-rientro-regionale-sanitario-guardie-mediche.html) with the little block of social networks that stays to the left of the content block.
PS: remember to use the Firefox Firebug extension if you haven't already ;)
--
1) Please mark your discussion as [Resolved].
2) Detail your problem as much as possible so that we can make an accurate diagnosis. -
My code works and is taken from the site du zéro, so why use position: fixed.
And it works under IE if we add a script. -
Your HTML and CSS are working, it's true that it is on the right, but its menu is not in a fixed position.
The goal is to have the right menu always displayed on the screen no matter how you scroll down.
1) Think about marking your discussion as [Resolved].
2) Detail your problem as much as possible so that we can establish an accurate diagnosis. -
Thank you for your help, but are you sure it's not possible? There must be a solution after all; it would be stupid if not.
