Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Opera.com home page single red line effect

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #190780
    drone4four
    Participant

    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?

    #192090
    drone4four
    Participant

    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.

    #192091
    drone4four
    Participant

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

    #192092
    bochristensen
    Participant

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

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

    #192094
    Paulie_D
    Member

    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.

    #192174
    drone4four
    Participant

    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.

    #193509
    drone4four
    Participant

    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.

    #193510
    Shikkediel
    Participant

    How about this :

    html {border-top: 3px solid red}
    

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

    #193522
    drone4four
    Participant

    Yes that worked. Thank-you, Shikkediel.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Other’ is closed to new topics and replies.