Forums

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

Home › Forums › CSS › CSS3 linear gradient to repeat on the y axis

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 21, 2011 at 6:07 pm #33215
    cmaccss
    Member

    Hello everybody, I’m new to this forum but have been following Chris and his tutorials for a while now.

    Dose anyone know how to get a linear gradient to repeat on the y axis?
    its the color #38a5d3 that I’m trying to get to repeat on the y axis

    background-image: -moz-linear-gradient(top, #164570,#38a5d3); background-image: -webkit-gradient(linear, top, bottom, color-stop(0 #164570)(0,#38a5d3));}

    thanks for your

    June 21, 2011 at 6:32 pm #82022
    chrisburton
    Participant

    @cmaccss: play around with this

    June 23, 2011 at 9:42 am #82191
    cmaccss
    Member

    Hello Mr.Burton, thanks for the input. I’ve tried for the last two days and still cant get it to work, I’m about to put my head through the monitor screen. I’m going to paste in the HTML & CSS code, if you don’t mind when you get a chance could you look at both and see it you can spot why the side bar won’t strength with the main content and meet the footer.

    thanks for your time.

    HTML – Sidebar & Main Content


    

    


    

    

    Welcome To Southport YMCA

    

    


    
is simply dummy text of the printing and typesetting industry.
    
Lorem Ipsum has been the industry's standard dummy text ever
    
since the 1500s, when an unknown printer took a galley of type and scrambled it to
    
make a type specimen book. It has survived
    
not only five centuries, but also the leap into electronic typesetting, remaining
    
essentially unchanged. It was popularised in
    
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    
software like Aldus PageMaker including versions of Lorem Ipsum.
    


    

    


    
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
    
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
    
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    
software like Aldus PageMaker including versions of Lorem Ipsum.
    


    

    

    


    

    


    

    

    

    

    
 
    

    

    

    

    

    
CSS - Sidebar & Main Content
    

    

    
@charset "utf-8";
    
/* CSS Document */
    

    

    

    

    
/* ---- html,body styles starts

    
*/
    

    
html,body { margin:0 0 0 0; padding: 0 0 0 0; min-height: 100%}
    
aside, footer, header, nav, { display: block;}
    

    
/* ---- html,body ends

    
*/
    

    

    

    

    

    

    

    
/* ---- main wrapper styles starts

    
*/
    

    
#main-wrap { width: 1020px; height:auto; -moz-box-shadow: 0 6px 12px #a9a9a9; -webkit-box-shadow: 0 6px 12px #a9a9a9; box-shadow: 0 6px 12px #a9a9a9; margin: 0 auto;}
    

    
p { font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-size: 14px; color: #063659; line-height: 1.5;}
    

    
h4 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; color: #FFF; margin: 201px 0 0 80px;}
    

    
h2 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 30px; color: #063659; border-bottom: solid 1px #063659;
    
padding: 0 0 8px 0;}
    

    
/* ---- main wrapper styles ends

    
*/
    

    

    

    

    
/* ---- side nav styles starts

    
*/
    

    
aside {
    
width:239px;
    
float:left;
    
background: -webkit-gradient(linear, left top, left bottom, from(#184672),   to(#38a4d3));
    
background: -moz-linear-gradient(top,  #184672,  #38a4d3);
    
}
    

    
/* ---- side nav styles ends

    
*/
    

    

    
/* ---- widget container styles starts

    
*/
    

    
widget-container { width:215px; background-color: #CCC; margin: 60px 5px 0 12px;}
    

    
/* ---- widget container styles ends

    
*/
    

    

    

    
/* ---- main content styles starts

    
*/
    

    
section#main-content { width:781px; float:right; margin: -16px 0 0 0;}
    

    
/* ---- main content styles ends

    
*/

    /* —- artical-wrap styles starts

    */

    #artical-wrap { width:756px; margin: 50px 0 50px 13px}

    /* —- artical-wrap styles ends

    */

    June 23, 2011 at 11:31 am #82197
    chrisburton
    Participant

    I need a link

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