SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict mikeistyke's Avatar
    Join Date
    Dec 2004
    Location
    staunton
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tiled Background Image over Two Columns

    I have a fixed layout of 750px. It's a two column layout with header and footer. I want to color the two columns so they both stretch from the header to the footer, as opposed to one side being longer than the other. I'm repeating a 1px image set at the background to try to accomplish this.
    This is in the test phase only. After it works fluently, the other pages will use this layout as well.
    My question is: What size should the tiled image be? It's now 750px wide. Also, is this the right place for the tiled image to appear in the background element of the css? Lastly, when I add html to the blue side, left side sidebar, known as side-a in html, the colored image only appears below the added text. All text appears in white above the blue image. What changes need to be made in order to make side-a one fluid color even when text appears in the column?
    I've added the url in case it's needed. If the html is needed, I can post it as well.

    url:http://www.ittyke.com/testfiles/redo...vwdivtags.html
    ------------css below this line----------------------
    Code:
    body, html {
            margin: 0;
        padding: 0;
        background: #FFF url(../Images/2col1pxbluegrey750.jpg) repeat-y 130px 137px;
        
    }
    #h1 {
        color:#2B2B2B;
    }
    #h2 {
    
    }
    #h3 {
    
    }
    #h4 {
    
    }
    #h5 {
    
    }
    #h6 {
    
    }
    #wrapper {
        margin: 0 auto;
        border: 1px solid #2F1006;
        width: 750px;
    }
    
    #header {
        background: #9BAD92;
        font-family: Calibri, Verdana, Sans-Serif;
        font-variant: small-caps;
        font-size: 2em;
        font-weight: bolder;
        color: #2B2B2B;
        text-align: center;
    }
    #navbar {
        height: 33px;
            width: 750px;
            border-top: solid #000 1px;
            border-bottom: solid #000 1px;
            background-color: #E7E7E7;
    }
    
    div#navbar ul {
        margin: 0px;
        padding: 0px;
        font-family: Calibri, Verdana, sans-serif;
        font-size: 16px;
        font-variant:small-caps;
        font-weight:bolder;
        color: #000;
        line-height: 30px;
        white-space: nowrap;
        text-align:center;
    }
    
    div#navbar li {
        list-style-type: none;
        display: inline;
    }
    
    div#navbar li a {
        text-decoration: none;
        padding: 7px 10px;
        color: #FFF;
    }
    
    div#navbar li a:link {
        color: #FFF;
    }
    
    div#navbar li a:visited {
        color: #CCC;
    }
    
    div#navbar li a:hover {
        font-weight: bold;
        color: #FFF;
        background-color: #067E00;
    }
    
    #side-a {
        float: left;
        width: 210px;
        background-color: #FFF;
    
    }
    
    #side-b { 
        float: right;
        width: 500px;
    }
    
    div#footer {
        height: 130px;
        width: 100%;
        border-top: solid #000 1px;
        border-bottom: solid #000 1px;
        color: #FF0000;
        background-color: #444444;
    }
    
    div#footer ul {
        margin: 0;
        padding: 0;
        font-family: Calibri, Verdana, sans-serif;
        font-size: 16px;
        font-variant:small-caps;
        font-weight:bolder;
        color: #FF0000;
        line-height: 30px;
        white-space: nowrap;
        text-align:center;
    }
    
    div#footer li {
        list-style-type: none;
        display: inline;
    }
    
    div#footer li a {
        text-decoration: none;
        padding: 7px 10px;
        color: #FFF;
    }
    
    div#footer li a:link {
        color: #FFF;
    }
    
    div#footer li a:visited {
        color: #CCC;
    }
    
    div#footer li a:hover {
        font-weight: bold;
        color: #FFF;
        background-color: #6C2810;
    }
    
    #footer {
        clear: both;
        background: #ADADAD;
    }
    * html #footer {
      height:1px;
    }
    -------------no more css---------------

    thank you so much for your help!
    Last edited by Paul O'B; Sep 14, 2010 at 01:19. Reason: code tags added

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What size should the tiled image be? It's now 750px wide.
    Hi,
    The width is correct, although I like to make my repeating images at least 10px tall so the browser can paint it ten times faster and reduce it's work. You won't notice much of a difference in file sizes.
    Also, is this the right place for the tiled image to appear in the background element of the css?
    Yes, it is decoration so it belongs in the css as a BG image. It really needs to be moved from the body to the #wrapper div though.
    Code:
    #wrapper {
        margin: 0 auto;
        border: 1px solid #2F1006;
        width: 750px;
        background: #FFF url(../Images/2col1pxbluegrey750.jpg) repeat-y;
    }
    All text appears in white above the blue image. What changes need to be made in order to make side-a one fluid color even when text appears in the column?
    You shouldn't have any problems with text in the left column however I don't see any text in the html for the left column on your page.

    This Example should show you the basic set up for a two column layout.

  3. #3
    SitePoint Addict mikeistyke's Avatar
    Join Date
    Dec 2004
    Location
    staunton
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    The width is correct, although I like to make my repeating images at least 10px tall so the browser can paint it ten times faster and reduce it's work. You won't notice much of a difference in file sizes.

    Yes, it is decoration so it belongs in the css as a BG image. It really needs to be moved from the body to the #wrapper div though.
    Code:
    #wrapper {
        margin: 0 auto;
        border: 1px solid #2F1006;
        width: 750px;
        background: #FFF url(../Images/2col1pxbluegrey750.jpg) repeat-y;
    }


    You shouldn't have any problems with text in the left column however I don't see any text in the html for the left column on your page.

    This Example should show you the basic set up for a two column layout.
    Thanks, Rayzur:
    I made the image 10px in height to reduce the repeat function and removed the color in side-a so now the text appears correctly in the image color as intended. One last thing... .
    The font color of the navbar text, above the main content, will not change even when I modify the navbar color element. Any ideas how to fix this?
    Thanks so much!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You have defined it twice here:

    Code:
    div#navbar li a {
            text-decoration: none;
            padding: 7px 10px;
            color: #99FF99;
    }
    
    div#navbar li a:link {
            color: #FFF;
    }
    The white colour will win out as it is last in the cascade and has a pseudo class. Just remove that last rule unless you want to style the pseudo states differently.

    Or do something like this if you have previously defined the pseudo classes.
    Code:
    div#navbar li a,
    div#navbar li a:link,
    div#navbar li a:visited {
             color: red;
     }

  5. #5
    SitePoint Addict mikeistyke's Avatar
    Join Date
    Dec 2004
    Location
    staunton
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul. Really appreciate your eyes and talent!
    Problem resolved.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikeistyke View Post
    Thanks, Rayzur:
    I made the image 10px in height to reduce the repeat function and removed the color in side-a so now the text appears correctly in the image color as intended...
    Hi,
    You still need to move it to the #wrapper div as I explained above.

    It does not line up correctly when it is applied to the body element. You have the BG-position set at 130px left, which might make it look right on your browser but even then it will not line up when you reduce the viewport width.

    Hook it to the wrapper div and then no BG-positions are needed at all.

  7. #7
    SitePoint Addict mikeistyke's Avatar
    Join Date
    Dec 2004
    Location
    staunton
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur:
    Thank you, sir. Worked like a charm!
    Until next time... .


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
  •