SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to clean up CSS3 striped background

    I am trying to get an alternating striped background on this site, but every other border is heavier since the line is duplicated. How can I get them all like the first one? http://kickinkaratesystems.com/

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Would you mind describing the problem again? I don't see any striped lines on this page.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Would you mind describing the problem again? I don't see any striped lines on this page.
    Well, I kinda jacked up the layout a bit but you can still see in this screenshot http://d.pr/i/lRPw

    I think theres also something causing some white space on the right :/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Trying to align content with a background like that is quite hit and miss and not a good idea. My suggestion would be to organize your page into "full width bands". Then you can target each one individually, placing gradients where you need them.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by satori83 View Post
    I am trying to get an alternating striped background on this site, but every other border is heavier since the line is duplicated. How can I get them all like the first one? http://kickinkaratesystems.com/
    The horizontal lines with vertical gradients render as desired in Firefox but render as your screenshot shows in webkit browsers. I don't know why.

    As far as layout techniques go, I'm with Ralph on this one. Trying to arrange content over a background image is asking for problems especially if one considers fluid behavior and users who change their font size to anything other than your design.

    For anyone else who wants to give this a shot, this is all it takes to demonstrate the problem:
    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/stylesheet.css">
        <title>template</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1188489-Trying-to-clean-up-CSS3-striped-background
    2014.01.25 20:03
    satori83
    -->
        <style type="text/css">
    
    *, *:before, *:after {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    #wrapper {
        height:1200px;
        background:linear-gradient(to bottom, #ECECEC 47%, #BFBFBF 48%, #FEFEFE 48%, #FEFEFE 99%, #BFBFBF 100%, #ECECEC 100%) repeat scroll 0 0 / 50px 50% rgba(0, 0, 0, 0);
        background-size: 50px 50%;
        padding: 0 0 40px;
    }
    
        </style>
    </head>
    <body>
    
    <div id="wrapper"></div>
    
    </body>
    </html>

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I was trying something new and it was definitely feeling like the wrong way to go. I got it fixed up now

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Cool. It may not matter here, but as a general rule, it's worth adding overflow: hidden to those containers, to prevent scaled up text from hanging out:

    Code:
    .container {
    width: 1170px;
    overflow: hidden;
    }


Bookmarks

Posting Permissions

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