SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    two background images

    Hello again!

    I am trying to update my church's website to CSS from tables.

    The site is at http://www.unitarianchurchofmontpelier.org. I have the church image as jpg and the left side of the page image as a gif.

    I was thinking of

    1. using divs to isolate and name the left side of the page, and then using the gif repeated vertically.

    2. doing the same thing to the area where I want the church image.

    3. putting the navigation link names in yet a third set of divs.

    and then hopefully lining everything up using pixels.

    Does this sound like a good approach?

    Also, I would like the little chalice image to match whatever link you're on, but right now it is stuck on "Home."

    That's enough for one post!

    TIA!

    Polly

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Be wary of over-divving it. I.e., don't contract divitis. Otherwise it's almost as bad as nesting and abusing tables.

    In the future, multiple background images for a single HTML element will be possible (when CSS3 gains widespread adoption). What I would do is this:
    Code CSS:
    * {
      margin:0;
      padding:0;
    }
    html {
      background:url(xbg.gif) repeat-y;
    }
    body {
      background:url(bldg1.jpg) center 10em no-repeat;
    }
    That will put the strip at the side and the church image in the middle, 10em from the top. Change that as you see fit.
    For your list of navigation links, you just need to use a UL. Then put the main content in a DIV alongside it. To achieve this, you will need a "two-column layout". Look at the top of this forum for examples how to achieve this. Your left column can be the UL (nav links). The right column the DIV containing the main content.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for answering!

    When I tried to combine your markup with what I did before, problems ensued [sigh!].

    Here is the combined result in the CSS:

    * {
    margin:0;
    padding:0;
    }
    html {
    background:url(graphics/xbg.gif) repeat-y;
    }

    /* This rule applies to all pages. */
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background:url(graphics/screenedchurch.jpg) center 10em no-repeat;
    }

    /* This rule overrides the preceding one for the index page only. */
    body#start {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background:url(graphics/church.jpg) center 10em no-repeat;
    }

    But I need to have the church image on the index page only, the screened church image on all other pages, and the left border on all pages.

    Maybe I'm trying to do too much in CSS, and should just put the church image, screened or plain, in each page?

    I really am just learning.

    thanks!

    Polly

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I were you, I would assign the left border image to the body tag and repeat it vertically, then create a div that encompasses the entire page, and position the background image of the church into that div, and position it as needed. Make that div 100% wide and 100% high.

    You would just have to make two div classes. One for the homepage, and one for the rest of the pages, so you could put a different background image on the homepage div than the other pages.

    The side navigation should be done as an unordered list.

    Code:
    body {
            background: url('images/leftsideimage.gif') repeat-y;
            background-position: left top;
            margin: 0;
            padding: 0;
            }
    div.content {
            background: url('image/churchimage.jpg') no-repeat;
            background-position: /*add your position here*/;
            width: 100%;
            height: 100%;
            }
    div.navigation {
            padding-top: 100px; /* or whatever */
            padding-left: 40px; /*or whatever */
            float: left;
            }
    ul {
            list-style-type: none;
            }
    li {
            font: 12px Tahoma, sans-serif; /* or whatever */
            font-weight: bold;
            line-height: 30px; /* or whatever */
            }
    
    li a {
            color: blue;
            text-decoration: none;
            }
    li a:hover {
            color: purple;
            }
    div.copy {
            float: left;
            padding: 30px; /* or whatever */
            }
    Then the HTML would look something like this:

    Code:
    <html>
    <head>
    <title></title>
    </head>
    
    <body>
    <div class="content">
      <div class="navigation">
         <ul>
            <li>Nav Item Here</li>
            <li>Nav Item Here</li>
            <li>Nav Item Here</li>
         </ul>
      </div>
      <div class="copy">
          <h1>Unitarian Church</h1>
          <p>Blah Blah Blah etc.</p>
      </div>
    </div>
    </body>

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying, and I'm going to try it right now!

    Polly

  6. #6
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, cool... Let me know how it goes for ya.

  7. #7
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and PS: That chalice image could probably be done by adding a separate class to that one list item and assigning a bullet image to it, not 100% sure though.

    I have some code that will change bullet images when you hover over them, but I haven't tried actually implementing a selected state. In fact, I might try it just to see if it works.


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
  •