SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style class, backckground images...

    Hello,

    I have this class defined

    HTML Code:
    <head>
    <style>
    
    .navibgs
    {
    
    background-image: url('image/bg_01.gif'), url('image/bg_02.gif'), url('image/bg_03.gif');
    background-position: top right, top right, bottom right;
    background-repeat: no-repeat, repeat-y, no-repeat;
    }
    </style>
    </head>
    Ok let me tell you what exactly I'm trying to do here. In a website I am working on I have a side bar which is graphic intense, it shows affiliates, links and polls. Here there are mainly three parts

    1) the top area of the side bar graphics - its about 175 pixels in height. However it does have elements over it, as we know its plain silly to insert image of a height 175 and then begin links and elements on it... not only silly it looks awkward that way.

    2) The middle section extends thought the sidebar vertically. It continues after the top section.

    3) the bottom which is around 200 px in height. That too can accommodate elements over it the graphic is designed that way.

    Another thing to note that the table with the background images is 100% height of a visitors screen.

    I tried assigning the class I defined above - with no success

    Is such a layering of background images in a table not possible?

    Thanks in advance, tips and solutions greatly appreciated!

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry only one 1 background image per container (or use the latest Safari)

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ow! so all4nerds, I figure this is only CSS3 compatiple style definition? ...

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    CSS 3 , I think so , but did not check the syntax of the code

    a header
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
    <
    title>12345 12345 12345 12345 12345</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <
    style type="text/css">
        * {
    padding:0;margin:0;}

        .
    he{backgroundurl('xx.gif'no-repeat bottom right;height:300px;}
        .
    he h1{backgroundurl('xx.gif'no-repeat; }
        .
    he h1 a{height:110px;backgroundurl('xx.gif'no-repeat top right;display:block;text-indent:-1000em;text-decoration:none;}

        </
    style>
    </
    head>
    <
    body>

    <
    div class="he">
    <
    h1>
    <
    a href="##">seo</a>
    </
    h1>
    </
    div>

    </
    body>
    </
    html

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *sigh* silly concepts and browser compatibilities! And to think I was up the last two days to make this work.

    okay all4nerds, thanks for your answers!


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
  •