pre tag & position absolute issue
Hey, i have two questions regarding a code block design i'm making.
1. Regarding the
pre tag, I'm aware that you have to un-indent everything within it so extra space isn't presented on the page however i still get space above and below my text even when i do this, why is this? (see image 1)
2. i'm using position absolute (i've tried margin-left: auto; without position absolute too and it provides the same problem), to push the language name to the top right of the div however when the screen is too small to fit the text and my horizontal scrolling on the div kicks in, when you scroll the element doesn't follow to the new top right, how would i make it do this? (see image 2)
https://codepen.io/deerCabin/pen/mdZeqVJ
Thank you in advance.
10 Replies
1) there is a newline after the code tag, which is causing that.
2) the css pseudo element seems to be working
ahh i see, thank you. have you tried shrinking the screen and scrolling?
The pseudo-element is always in the correct place but it may look like it isn't because of the way the pre tag is overflowing. change the pre tag to have overflow: hidden and you will see the psedo element lines up perfect
i see, however it then cuts off the text if i change it to
overflow: hidden;. an example of the issue may help, i'm not sure if i explained correctly.then set your pre tag to have overflow-x: scroll and that should let you to scroll and have your pseudo element not move
ah that did it, thank you for your help
oh, one quick question, do i have to un-indent everything all the way back where it is, or is there a way to have things indented without the space being included on the page?
I am not sure what you mean by un-indent, usually people mean negative margins when they talk un-indent, but I don't see aany of those
no worries, by un-indent i mean the what's in the first picture, if i indent the code then it re produces the spaces like in the second picture. I know this is happening because the pre tag is picking up on the tabs, but i was wondering if i could still indent the code without having it pick up on the spaces somehow, it's a nightmare to read and edit when it isn't indented haha.
oh I see, that is the negative of using a presentation tag, it honors all white space including tabs and new lines
ah no worries then, i appreciate the info