Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Transparent Border-Box Banner Border

    Hey All!

    My problem is I am trying to style a banner I have which came with my wordpress template. I am looking to make a transparent border which I have somewhat succeeded at. However every time the banner changes the picture the border disappears. Any help would be great!

    link to my site with the banner:
    http://dev.baliliciousrestaurant.com/

    * Again when you first enter the site, the border is perfect, when it changes images, it disappears.

    ** Prefer the solution to be in CSS so I can just overide it

    Here is an example of the border i want to accomplish:
    [/URL]

    or just look at the 3 column images, the border there is what I want exactly.

    the CSS im using currently for the banner :

    div#slider.nivoSlider {
    position:relative;
    display:inline-block;
    padding: 0px 0px 0px;
    }
    div#slider.nivoSlider:after {
    content:"\A";
    border: 8px solid rgba(0, 0, 0, 0.4);
    width: 1086px;
    height: 355px;
    position:absolute;
    top:0px;
    left:0px;
    box-sizing: border-box;
    -wekbit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
    img { vertical-align:top; }

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Oh my God, that picture.

    Anyway, you should just have to style all the images the same way.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello xpnoiboix,
    Instead of styling each image ... add a little z-index so your #slider and it's border so it overlays the images as they rotate under it. Like this -
    Code:
    div#slider.nivoSlider:after {
        -moz-box-sizing: border-box;
        border: 8px solid rgba(0, 0, 0, 0.4);
        content: "\A ";
        height: 355px;
        left: 0;
        position: absolute;
        top: 0;
        width: 1086px;
        z-index: 10;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •