Forums

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

Home Forums CSS Trouble creating multiple borders with pseudo elements.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #158572
    Anonymous
    Inactive

    Greetings,

    I’m having a difficult time understanding this and no matter what I add or change here I get no results. I’m trying to understand positioning and pseudo elements by literally taking a page apart to see it in its basic parts. For some reason positioning and pseudo elements are proving the most difficult.

    Anyway, I am trying to put multiple borders before and after the <div id="main"> and am stumped. It seems pretty straight forward given it works for the <div id="inner">. I’ve changed and manipulated everything to try to get a border to show, but zilch.

    I’m beginning the code as

    #main:after,#main. after {
        content:" ";
            etc.....
    

    What am I missing?

    Thanks.

    #158576
    magicspon
    Participant

    #main:after,#main. after

    This doesn’t look right…

    #main:after,
    #main:before {
        content: " ";
        chuff
    } 
    
    #158581
    Anonymous
    Inactive

    Greetings magicspon,

    The etc… part isn’t. There wasn’t any point putting the rest of the coding I had entered since it wasn’t working anyway.

    This part may not work either

    #main:after, #main:before {
        content: " ";
    

    but it isn’t what I put. I put

    #main:after,#main. after {
    

    which works.

    Best Regards.

    #158583
    magicspon
    Participant
    #main. after 
    

    I can’t see how this would work… this isn’t a valid selector…

    this is:

    #main:after, #main:before {
        content: " ";
    }
    
    #158584
    Anonymous
    Inactive

    The source code shows

    #inner:after,#inner .after {
        content:" ";
        position:absolute;
        bottom:-1px;
        left:2px;
        right:2px;
        border-bottom:1px solid #9b9b9b;
    

    which is working because the desired line is created at the bottom.

    Best Regards.

    #158589
    magicspon
    Participant

    YUP… #inner:after,#inner .after { is valid

    this is not

    main. after – note the period at the end of main, and the space before after…

    #158606
    Anonymous
    Inactive

    Thank you for pointing that out. I added the following,

    #main:after,#main .after {
        content:" ";
        position:absolute;
        left:11px;
        top:0;
        bottom:10px;
        border-left:1px solid #ff0000;
    }
    #main:after,#main .after {
        content:" ";
        position:absolute;
        left:11px;
        top:0;
        bottom:10px;
        border-right:1px solid #ff0000;
    }
    #main:after,#main .after {
        content:" ";
        position:absolute;
        left:11px;
        right:11px;
        bottom:9px;
        border-bottom:1px solid #ff0000;
    }
    

    to this page. I’m not sure if the above code can be shortened or cleaned up and would appreciate input. It does what I wanted to achieve pseudo line wise, but a new problem has arisen. The left and right lines (in red) extend over the logo png and the right column background png. Is there a code to cause these lines to run under these images?

    Best Regards.

    #158625
    paulob
    Participant

    Hi Michael,

    Why have you repeated the same selectors 3 times?

    Each one just overrides the matched property/values of the one before.

    All you need is this:

    #main:after,#main .after {
        content:" ";
        position:absolute;
        left:11px;
        right:11px;
        top:0;
        bottom:9px;
        border:1px solid #ff0000;
        border-top:none;
    }
    

    Note that #main .after is for IE6 and 7 and in your original page that element is created using an IE expression and if you have dropped support for IE6 and 7 you can lose the selector #main .after.

    e.g.

    #main:after {
        content:" ";
        position:absolute;
        left:11px;
        right:11px;
        top:0;
        bottom:9px;
        border:1px solid #ff0000;
        border-top:none;
    }
    

    The header and logo can sit on top of the red line if you raise the z-index. They are already position:relative so z-index:2 should do the trick.

    .logo,.header{z-index:2}
    

    Note that the pseudo elements :before and :after will place generated content inside the specified element and not before or after the element.

    It is akin to having two extra elements in the div like this:

    <div id="main">
      <span> :before content is generated here</span>
        <p> Normal content is here</p>
      <span> :after content is generated here</span>
    </div>
    

    Of course if the div is relatively positioned then you can absolutely place those pseudo elements anywhere you like in respect to that div but strictly speaking :before and :after refer to content in that element and not before and after the element itself.

    Support for :before and :after is only IE8+ and iE8 is a little buggy with z-index on those pseudo elements so you have to double check its working.

    #158673
    Anonymous
    Inactive

    Greetings Paulob,

    Good to hear from you again!

    Why have you repeated the same selectors 3 times?

    The answer to that is simple. It’s because I don’t know what I am doing! LOL

    I did manage to get it down to this

    }
    #main:after,#main .after {
        content:" ";
        position:absolute;
        left:11px;
        top:0;
        bottom:10px;
        border-left:1px solid #ff0000;
        border-right:1px solid #ff0000;
    }
    #main:after,#main .after {
        content:" ";
        position:absolute;
        left:11px;
        right:11px;
        bottom:9px;
        border-bottom:1px solid #ff0000;
    }
    

    but didn’t realize it could be simplified even more to what you put. These pseudo elements and positioning of elements are proving to be the most difficult for me to understand.

    Note that the pseudo elements :before and :after will place generated content inside the specified element and not before or after the element.

    I think I understand what you are saying although it sounds contradictory at first read.

    There is an issue here with the coding in that it prevents the dropdown menu from working in Firefox, but still works in IE. It has to be the #main:after,#main .after { because I removed .logo,.header{z-index:2} and tried the menu and nothing. Removing the #main:after,#main .after restores the function. Why?

    Is there a way to get the pseudo line at the right to go under the right_column_bkg.png in the right of the <div id="inner">?

    Best Regards.

    #158714
    paulob
    Participant

    HI Michael,

    The dropdown menu needs a z-index to keep it on top.

    nav {
        position: relative;
        z-index: 1;
    }
    

    When you start positioning things you need to control their stacking level and that is done with z-index. (only positioned elements apply z-index).

    Is there a way to get the pseudo line at the right to go under the right_column_bkg.png in the right of the

    I’m not quote sure what you are asking exactly because if the right border went under that background wouldn’t that be the same as not putting a border there anyway?

    You can’t really have the border go half way up and then go under the background! Anyway you can’t really put anything under the background of a positioned parent. You could probably put something else on top to hide it but I don’t really understand what you want exactly.

    I think I understand what you are saying although it sounds contradictory at first read.

    :before and :after refer to the content in the specified element and not the element itself. You place content before something that in that element or you place something after the content in that element.

    #158717
    Anonymous
    Inactive

    Greetings Paul,

    Thank you for your reply.

    The image for the right border is 648px tall and obviously has a gradient. As I will be using this page as a template for other pages on the site I’m certain some pages will contain more text/content than this first page and as the page grows in length, having the border underneath will make it look like the gradient is consistent. With the line over the image the gradient for that line (currently red for easy viewing) is covered.

    I read about z-index day before last and felt it needed to be used for my last two issues. The problem was/is I am not sure where to place such things for them to function.

    Regarding :before and :after; a pseudo line outside the actual border of a div or table is still in the element, or am I way off? I assume that “content” is anything within an element?

    Best Regards.

    #158726
    paulob
    Participant

    Hi Michael,

    Although the image ( http://www.wslmf.org/images_2/right_column_bkg.png) is 648px tall it fades seamlessly into the background and therefore the page can be any size you like. You don’t need to do anything to allow the page to grow or contract; it will just work.

    I still don’t understand what you want to happen to the red border? How can it suddenly stop and go under the background on the right? I think you may need to draw a screenshot of what you want as I’m just not seeing it :)

    Regarding :before and :after; a pseudo line outside the actual border of a div or table is still in the element, or am I way off? I assume that “content” is anything within an element?

    I think my previous example explained it perfectly but you seem to have missed the concept still and are asking almost irrelevant questions :)

    :before and :after go hand in hand with generated content (content:””). It’s the generated content that creates something for you to style even if you have empty content (just like an empty span (as in the example I gave above).

    <div id="main">
      <span> :before content is generated here</span>
        <p> Normal content is here</p>
      <span> :after content is generated here</span>
    </div>
    

    When you use generated content it doesn’t actually generate the span in the html but for all purposes you can assume that you are styling an element like a span.

    So your question as to whether the border is outside the div or not is mostly irrelevant. Just ask the same question regarding the html above and asking whether the span is outside the div?

    It’s not outside the div it’s inside the div and inside any borders or padding on that div but that doesn’t mean you can’t use absolute positioning and then place that span to appear as though it is outside that div or indeed on top of its own borders.

    It’s the same for the pseudo elements and although they are placed inline ‘before’ the content in the div or ‘after’ the content in the div you can then still absolutely place them somewhere else if needed.

    You are over-thinking this a little. Just imaging the pseudo content is a span placed in the position that I have shown above and then use the normal rules of CSS to style it as you wish.

    With generated content you add content like this: content:” hello”;

    That would add the content ‘hello’ into the html either before or after the original content in that element depending on whether you had used before or after.

    e.g. Take this html:

    <div class="el">
    Nice to meet you
    </div>
    

    and then add this CSS:

    .el:before{
    content:"hello ";
    }
    

    Which results in this:

    <div class="el">
    Hello Nice to meet you
    </div>
    

    Now for some effects you don’t want text but you can still style the element (as you would with an empty span) by leaving the content empty but it will still generate a box for you to style.

    .el:before{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    background:red;
    }
    

    Hope that explains it a little more:)

    #158733
    Anonymous
    Inactive

    Greetings Paul,

    I think my previous example explained it perfectly….

    Perfectly described colour is of little value to a blind man. The blind man will never grasp the concept no matter how perfect the presenter believes he explained it because the presenter has experienced colour. You are well versed in CSS and the nomenclature thereof, whereas I am very new to it all.

    This did help:

    <div class="el">
    Nice to meet you
    </div>
    

    and

    <div class="el">
    Hello Nice to meet you
    </div>
    

    Here is an image of what I have in mind. The right border and right :after border on the <div id="main"> should be under the right column background image. As the page grows longer the right column background will remain at the top and the lines under it will grow but everything will maintain the gradient effect. The look is a better one as apposed to solid lines which break the flow of the page from a design perspective. I left the :after border in red to show the “cutoff” of where it would start going under the right column background.

    Best Regards.

    Michael

    #158745
    paulob
    Participant

    Hi Michael,

    The blind man will never grasp the concept no matter how perfect the presenter believes he explained it because the presenter has experienced colour.

    Point taken:)

    The same holds true for me as I am still not getting your explanation of the border. The drawing you showed is weird with a little red border poking around the right bottom corner. What possible use can this be? Are you going to make it a different colour?

    If you are making it the same colour as the background then it will be invisible anyway and serve no purpose.

    As I said the layout scales perfectly with a subtle dark border on the right fading into the gradient and then fading into the background allowing it to repeat forever. I see no issue here at all and nothing that needs to be fixed.

    http://www.pmob.co.uk/temp/images2/michaelbg.png

    Notwithstanding the above you can’t place a border both on top and under the background of elements that are underneath. You’d have to completely revise the stacking context of all those elements and build them up like a sandwich with each layer partially obscuring the next. It would be the layer at the bottom that would need the border and then you would layer background upon background on top to get overlapping effects while allowing the bottom layer to grow and eventually show more of its border.

    However, I don’t see there is a need for this and your drawing certainly doesn’t show the effect you mention. It just shows a red border cut off at the bottom and will look odd no matter what colour it is.

    Apologies but you will need to show a drawing of exactly what it is you are trying to achieve as I am a bit lost as you can tell :)

    #158761
    Anonymous
    Inactive

    Greetings Paul,

    Certainly no need to apologize. It’s difficult to see what others see and I’m happy to provide whatever is needed to illustrate what I see/want.

    Here is an enlarged view of what I’m wanting.

    I’m assuming that as there was a way to get the red lines to go under the logo and header, there is also a code to get it to go under the Right Column Image.

    Yes, the red line will be changed to a shade of black and is only red now as an easy focal point. While it may not seem to make a difference this line is important as it does better define the edge and provides a sense of depth. I saw this early on, provided my colleagues with both versions (one with and one without the line as a slight shading) and asked which they preferred and they largely chose the one with the slight shading. Though they could not see the line, they saw it did give depth to the border.

    Best Regards.

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