Opera.com home page single red line effect

[drone4four]

What css element and html tag in the source for the Opera browser’s homepage renders a single red line / stripe at the very top?

[drone4four]

Thank you for this answer Shikkediel.

I supplanted the markup and style into a test case I created to learn from. Here it is:
http://codepen.io/Angeles4four/pen/gbLaEN
For the sake of clarity, I increased the size of the line from 3px to 10px.

As you can see, there is a gap between the top of the window and the red line. Also notice that the red line doesn’t stretch the full length of the widow. What are Opera’s web designers doing that I am not so far?

I am basically asking right now for someone to fix this issue for me. I feel kinda helpless. How could I seek answers better in the future? I ask because ESR’s how-to-ask-smart-questions is the gold standard for aspiring programmers and coders to help beginners help veterans help beginners. It’s a great document. I use it all the time. However I just can’t think of how I could better approach learning about this red line without asking you ppl to ‘fix things’ for me. This is a little embarrassing. Am I asking my questions in this thread the wrong way? Is there a better way? What other information could I provide to help you help me?

I do apologize for the 2 week gap between the time of Shikkediel’s reply and today.

[drone4four]

I’m by the way not sure why this thread is categorized under ‘other discussions’. I thought I initially posted this under CSS Combat.

[bochristensen]

You find the red line in the header-footer-d59be01b.css file.

http://codepen.io/rexprovo/pen/Wbojwz

[Paulie_D]

I’m by the way not sure why this thread is categorized under ‘other discussions’. I thought I initially posted this under CSS Combat.

It’s possible that you did but since it’s not actually solving a specific CSS “problem” but rather asking “how is something done”, it may have been moved by a moderator.

[drone4four]

Thank-you bochristensen and thank-you Shikkediel for demonstrating how to implement a line at the top of a webpage. Both your css examples work perfectly.

[drone4four]

I’m back with a new pen. I tried the header contents and css rules suggested by bochristensen and Shikkediel . It worked with the original pen I brought up, but I have since tried it with some other of web pages I been working on with varying success. Behold my latest test case:

http://codepen.io/Angeles4four/pen/pvPvOE

Note lines 1 through 5 in the css. Those are the lines I lifted from bochristensen and Shikkediel’s advice. I commented out * { margin:0 } because that casts a margin property of 0 across every single element – – which is not what I am trying to do. Commented out, I’m still not getting the effect I have set out to create.

I see that my existing header is already styled heavily, so I tried using an .ns–nf sub class rule in my css and created a modified header tag in my html file (as was sort of suggested). I figure I’m confusing the two headers.

I’m trying to get a red line at the very top spanning the width of the webpage, not just over the top of my initial header heading. The suggestions already made worked for a basic test case, but now that I am using quite a bit more variables and it’s harder to keep my initial ‘School for the Gifted’ header while adding another one with different variables specified by a class.

[Shikkediel]

How about this :

html {border-top: 3px solid red}

Or does it need to be at the edge of the header?

[drone4four]

Yes that worked. Thank-you, Shikkediel.

[Author]

Posts