Adding fixed.md as well as 2 image files: position-fixed-example.png, position-static-example.png #5500
Conversation
|
|
|
Also, do I need to do anything for the tests in the workflow that is currently awaiting approval? |
|
I have made a grammatical error on line 53 of the fixed.md file, I apologize for that being worded badly. I will correct that with any changes you might need as well. |
mamtawardhani
added
css
There was a problem hiding this comment.
Hey @kellyCookCodes thank you for contributing to Codecademy Docs! 😄
I've suggested a few modifications, could you review and make the required changes at your earliest convenience? Thank you! 😄
| Positions an [html](https://www.codecademy.com/resources/docs/html) element of a webpage by taking that element out of the normal flow of the document and pinning it to a specified [position](https://www.codecademy.com/resources/docs/css/position) where it will remain **fixed** in place, even while scrolling the page. | ||
|
|
||
| ## Syntax | ||
| ## `position: fixed;` |
There was a problem hiding this comment.
the syntax is to be wrapped in pseudo block, the ## need to be removed from here
There was a problem hiding this comment.
Removed both hash symbols on line 33 and replaced single backticks with triple backticks to enclose the term position: fixed;.
@mamtawardhani I hope I did this right?
There was a problem hiding this comment.
Hi @kellyCookCodes 😄 So, it still shows the same to me, sharing a screenshot for your reference. It hasn't changed in the entry. You need to wrap the syntax in a pseudo block
mamtawardhani
added
status: review 1️⃣ completed
status: waiting for author
and removed
status: under review
Removed quotations and hover text from image link for fixed nav element in the browser window/viewport. Co-authored-by: Mamta Wardhani <[email protected]>
Rewording for the comparison of fixed and static positions. line 104. Co-authored-by: Mamta Wardhani <[email protected]>
Rewording of the note regarding overflow of content, borders, padding, and margin. Co-authored-by: Mamta Wardhani <[email protected]>
Removed extra blank line. Co-authored-by: Mamta Wardhani <[email protected]>
|
Hey @kellyCookCodes let me know once you make the changes |
|
@kellyCookCodes are you still working on this? |
Hi Mamta, I also sent you an email as well, but I was hoping you had seen the questions I had on a few of the changes you had requested above in this comment string? |
Apologies for the delay, I've answered your comments above, you can check those 😃 |
@mamtawardhani It's strange, but I don't see any new comments from you above. Only the first comments you made. |
|
@mamtawardhani I still only see your original comments about which changes to make. There were three comments you had made where I added some questions that I typed right below each of those three comments. Or did you write your response somewhere else? |
There was a problem hiding this comment.
Thank you for contributing to Codecademy Docs @kellyCookCodes 😄
The entry looks good for a second round of review 🚀
| </body> | ||
| </html> | ||
| ``` | ||
| In the code block (above) the nav element with the is given the fixed class in **HTML**. |
There was a problem hiding this comment.
If you want to, yes you can 😃
| Positions an [html](https://www.codecademy.com/resources/docs/html) element of a webpage by taking that element out of the normal flow of the document and pinning it to a specified [position](https://www.codecademy.com/resources/docs/css/position) where it will remain **fixed** in place, even while scrolling the page. | ||
|
|
||
| ## Syntax | ||
| ## `position: fixed;` |
There was a problem hiding this comment.
Hi @kellyCookCodes 😄 So, it still shows the same to me, sharing a screenshot for your reference. It hasn't changed in the entry. You need to wrap the syntax in a pseudo block
mamtawardhani
added
status: ready for next review
and removed
status: waiting for author
labels
Sriparno08
added
status: under review
|
Hi @mamtawardhani,
Sorry to bother you. I can see your responses here now, but I could not see them the other day. Does it typically take a while before these messages are viewable in GitHub to other assigned parties? I'm just curious because this was my first time working with someone else on GitHub and I'm just trying to figure out why it took so long for me to be able to view your responses.
…On Tue, Oct 29, 2024 at 6:08 AM Mamta Wardhani ***@***.***> wrote:
***@***.**** approved this pull request.
Thank you for contributing to Codecademy Docs @kellyCookCodes
<https://github.com/kellyCookCodes> 😄
The entry looks good for a second round of review 🚀
------------------------------
In content/css/concepts/position/terms/fixed/fixed.md
<#5500 (comment)>:
> + - 'Static Site'
+ - 'Style'
+ - 'Syntax'
+ - 'UI'
+ - 'UX'
+ - 'Values'
+CatalogContent:
+ - 'learn-css'
+ - 'paths/front-end-engineer-career-path'
+ - 'paths/full-stack-engineer-career-path'
+---
+
+Positions an [html](https://www.codecademy.com/resources/docs/html) element of a webpage by taking that element out of the normal flow of the document and pinning it to a specified [position](https://www.codecademy.com/resources/docs/css/position) where it will remain **fixed** in place, even while scrolling the page.
+
+## Syntax
+## `position: fixed;`
Hi @kellyCookCodes <https://github.com/kellyCookCodes> 😄 So, it still
shows the same to me, sharing a screenshot for your reference. It hasn't
changed in the entry. You need to wrap the syntax in a pseudo block
image.png (view on web)
<https://github.com/user-attachments/assets/5f399559-6ef3-47e9-8ef5-da8154a29104>
------------------------------
In content/css/concepts/position/terms/fixed/fixed.md
<#5500 (comment)>:
> +### Bottom, Left, Right, and Top
+As with **absolute** and **relative** positioning, once we have positioned our **fixed** element relative to the viewport, we can manipulate its location using the position properties:
+
+* [bottom](https://www.codecademy.com/resources/docs/css/position/bottom)
+
+* [left](https://www.codecademy.com/resources/docs/css/position/left)
+
+* [right](https://www.codecademy.com/resources/docs/css/position/right)
+
+* [top](https://www.codecademy.com/resources/docs/css/position/top)
+
+
even these are still visible:
image.png (view on web)
<https://github.com/user-attachments/assets/719141aa-51b8-42fd-93fc-31738fed3cca>
------------------------------
In content/css/concepts/position/terms/fixed/fixed.md
<#5500 (comment)>:
> + - 'UX'
+ - 'Values'
+CatalogContent:
+ - 'learn-css'
+ - 'paths/front-end-engineer-career-path'
+ - 'paths/full-stack-engineer-career-path'
+---
+
+Positions an [html](https://www.codecademy.com/resources/docs/html) element of a webpage by taking that element out of the normal flow of the document and pinning it to a specified [position](https://www.codecademy.com/resources/docs/css/position) where it will remain **fixed** in place, even while scrolling the page.
+
+## Syntax
+## `position: fixed;`
+
+An element with a **fixed** position will be positioned relative to the viewport or the html element. In other words, it is fixed relative to the document it self.
+
+>Note: This differs from [absolute](https://www.codecademy.com/resources/docs/css/position/absolute) positioning which is positioned relative to its closest ancestor/parent element whose position is also set to a value of [relative](https://www.codecademy.com/resources/docs/css/position/relative) or **absolute** (a non-static position).
yes, this is visible in the entry now
------------------------------
In content/css/concepts/position/terms/fixed/fixed.md
<#5500 (comment)>:
> +## Codebyte Example
+
+
+### HTML
+```codebyte/html
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta lang="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Fixed Postion</title>
+ <link rel="stylesheet" href="static-style.css" type="text/css">
+ </head>
+ <body>
+ <nav class="fixed">
+ <h1 class="content">Hello World!</h1>
+ </nav>
+ </nav>
+ </body>
+</html>
+```
+
+### CSS
+```codebyte/css
+html {
+ box-sizing: border-box;
+ background-color: black;
+}
+
+nav.fixed {
+ display: inline-block;
+ height: 80px;
+ width: 100%;
+ position: fixed;
+ top: 50px;
+ left: 100px;
+ background-color: white;
+ z-index: 3;
+ border: 4px solid red;
+}
+```
It is visible for me still:
image.png (view on web)
<https://github.com/user-attachments/assets/58017978-b7cd-407b-8c38-5a67de1c4849>
------------------------------
In content/css/concepts/position/terms/fixed/fixed.md
<#5500 (comment)>:
> + <head>
+ <meta lang="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Fixed Postion</title>
+ <link rel="stylesheet" href="style.css" type="text/css">
+
+ </head>
+ <body>
+ <nav class="fixed">
+ <h1 class="content">Hello World!</h1>
+ </nav>
+ </nav>
+ </body>
+</html>
+```
+In the code block (above) the nav element with the is given the fixed class in **HTML**.
If you want to, yes you can 😃
------------------------------
In content/css/concepts/position/terms/fixed/fixed.md
<#5500 (comment)>:
> + border: 4px solid red;
+}
+```
+
+In the code block (above) the nav element with the *class of fixed* has its position property set to **fixed** in [CSS](https://www.codecademy.com/resources/docs/css) as well as its **top** and **left** properties with values of 50px and 100px respectively.
+This will render in the browser as shown in the image (below).
+
+![Image of a fixed nav element in the browser window/viewport.]("https://raw.githubusercontent.com/Codecademy/docs/main/media/"position-fixed-example.png "CSS for the Fixed property")
+
+Here (above) we see that the nav element has been taken out of the flow of the document and as with our **CSS** example (above), the nav element has been moved 50px from the top (which will move the nav element down 50px) and 100px from the left (which will move the nav element to the right 100px).
+
+>Note: Even though we have set our width property to 100%, the nav element is now out of the normal flow of the document and is overflowing the right side of the viewport.
+
+ If the nav element were to have the **position** property set to a value of [static](https://www.codecademy.com/resources/docs/css/position/static) (default position value), the nav element would be in situ (within its original default position) and it would be flush against the top/left corner of the viewport (as seen in the example below).
+
+![Image of a static nav element in the browser window/viewport.]("https://raw.githubusercontent.com/Codecademy/docs/main/media/"position-static-example.png "CSS for the Fixed property")
here the string needs to be removed - "CSS for the fixed property", it is
visible in the entry
image.png (view on web)
<https://github.com/user-attachments/assets/ae6f6fa2-d050-431d-b762-4998f990eee0>
—
Reply to this email directly, view it on GitHub
<#5500 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AZLXEYSJU746CTACONGSRY3Z56CGRAVCNFSM6AAAAABQADWPQ6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDGOBVGMZTOMJRGY>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
![https://raw.githubusercontent.com/Codecademy/docs/main/media/"position-fixed-example.png](https://raw.githubusercontent.com/Codecademy/docs/main/media/"position-fixed-example.png){kind=link}
![https://raw.githubusercontent.com/Codecademy/docs/main/media/"position-static-example.png](https://raw.githubusercontent.com/Codecademy/docs/main/media/"position-static-example.png){kind=link}
Hey @kellyCookCodes, no, usually they are visible at the same time. Could be a network issue, however, usually they are visible at the same moment |
Description
Created new folder named: fixed to contain the file fixed.md. This was to add a term entry for position: fixed; to file path docs/content/css/concepts/position/terms/fixed/fixed.md
Also added 2 image files to the media folder named: position-static-example.png and position-fixed-example.png.
This was to address some confusion surrounding the position property on codecademy forums for full-stack-career-path. The Docs covered bottom, left, right, and top, but not static, fixed, relative, absolute, or sticky.
I would also like to ask if it would be advantageous to add to the slug for catalogContent to include full-stack-engineer-career-path for the metadata at the top of the markdown file. Currently, it is listed with - 'learn-css' and - 'paths/front-end-engineer-career-path'.
*I do have one concern about the fixed.md file:
I was not able to find a free plagiarism checker online that didn't require a credit card on file (I don't have a credit card). To my knowledge, everything is in my own words and should be OK. Please let me know if this is not acceptable.
Issue Solved
Closes #5446
Type of Change
Checklist
mainbranch.Issues Solvedsection.