www.webdeveloper.com
Results 1 to 13 of 13

Thread: Background Images

Hybrid View

  1. #1
    Join Date
    Apr 2003
    Location
    Florida
    Posts
    47

    Background Images

    Hello all. I am very new to CSS and have found myself in a bind.

    I am trying to insert a background image, that is in the right margin. The image appears fine in the editor, but when it is viewed, it is cut off. Also, I would like for the text that will be placed there to have some space between the borders of the image.

    Here is the code I used for the image:

    .quicklink {background-image: url(images/bor_beige.gif);
    background-repeat: no-repeat;
    MARGIN-TOP: 0px; FONT-SIZE: 12px; WIDTH: 200px; HEIGHT: 245px; FLOAT: right; MARGIN-BOTTOM: 1.5em; MARGIN-LEFT: 1.5em; WIDTH: 25%; COLOR: #1e56a0; TEXT-INDENT: -0.33em; LINE-HEIGHT: 1.5em; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Geneva, Helvetica, sans-serif; BACKGROUND-COLOR: #f3f0cd}

    .quicklink P {PADDING-RIGHT: 1em; PADDING-LEFT: 2em; PADDING-BOTTOM: 1.33em; PADDING-TOP: 0.5em}

    The url is: http://iwdtestsite.com/Premier/home.htm. Here is a link to the CSS: http://iwdtestsite.com/Premier/main.txt.

    Thanks in advance for any and all your help.

    Magikey

    [moderator's note: edited to correct links]
    Last edited by DaveSW; 04-01-2004 at 11:05 AM.

  2. #2
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    Can you send us a screenshot, and annotate what should be where? In IE6 I'm not sure what the problem is.
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Remove that width:25% and change the width:200px to width:166px and you should be good to go. That second width is what's getting you.

  4. #4
    Join Date
    Apr 2003
    Location
    Florida
    Posts
    47

    Background Images

    Thank you Ray. That solved the first part of my problem. Now I would like to know how to make sure the text is within the the borders of that image. As you can see, the words, "Quick Links" is right on the border. The url is: http://iwdtestsite.com/Premier/home.htm. Here is a link to the CSS: http://iwdtestsite.com/Premier/main.txt.

    Thank you again for your help.

    Peggy

  5. #5
    Join Date
    Aug 2003
    Posts
    1,576
    page not found...

  6. #6
    Join Date
    Apr 2003
    Location
    Florida
    Posts
    47

    Background Images


  7. #7
    Join Date
    Aug 2003
    Posts
    1,576
    it looks fine here, but if you want to increase the space, just increase your padding-top, unless there's something I'm missing

  8. #8
    Join Date
    Apr 2003
    Location
    Florida
    Posts
    47

    Background Images

    Thank you Sam. Since you influenced me to use CSS in the first place, how do you think I did for my first try at an all CSS page? I still have a lot to learn. But I would like to send a big THANK YOU for your assistance.

    Magikey

  9. #9
    Join Date
    Aug 2003
    Posts
    1,576
    a few things i noticed:
    the image on the top, with all the people, repeats at higher resolutions
    the padding on the top of quick links is a bit to much in firefox

  10. #10
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Looks nice. From a symantic standpoint you might consider replacing that into para with an h2 and consider using an h2 for the quick links heading followed by a ul of links.

  11. #11
    Join Date
    Apr 2003
    Location
    Florida
    Posts
    47
    Hello Ray and Sam.

    I've been consistently working to improve that same page with CSS. I have run into what I hope is the final two problems.

    1. The top navigation (which now has a list style)- I have text decoration set at none, yet it is still underlining the links. the stylel is as follows:

    #nav {font-size: 95%; line-spacing: 2em; border-bottom: 1px solid #1a46a0; background-color: #ece7aa; width: 120px; padding-left: 2em; margin-top: 3px;}
    #nav ul {list-style-image: url(image/arrow_top) inside none; margin-left: -1em; padding-left: 0; width: 12em; margin-top: .5em;}
    #nav ul li a:link: {color: #1a46a0; text-decoration: none; }
    #nav ul li a:visited: {color: #1a46a0; text-decoration: none; }
    #nav ul li a:hover: {color: #CC0000; text-decoration: none; }


    2. I still can't get the quick link to work, meaning, the text is too close to the margins. That style is:

    #quicklink {background-image: url(images/bor_beige.gif); background-repeat: no-repeat; MARGIN-TOP: 10px; FONT-SIZE: 11px; WIDTH: 166px; HEIGHT: 245px; FLOAT: right; MARGIN-BOTTOM: 1.5em; MARGIN-LEFT: 1.5em; COLOR: #1e56a0; TEXT-INDENT: -0.33em; LINE-HEIGHT: 1.5em; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Geneva, Helvetica, sans-serif; BACKGROUND-COLOR: #f3f0cd}
    #quick {padding: 20px 5px 20px 5px; width: 176;}
    #quicklink P {PADDING: 3px;}
    #quicklink p a:link {color: CC0000; text-decoration: underline;}
    #quicklink p a:visited {color: CC0000; text-decoration: underline;}
    #quicklink p a:hover {color: #1a46a0; text-decoration: underline;}
    #quicklink th {color: CC0000; font-weight: bold; font-size: 85%;}

    the page is found at: http://iwdtestsite.com/Premier/index3.htm.

    Thank you.

    Magikey

  12. #12
    Join Date
    Apr 2003
    Location
    Florida
    Posts
    47
    I'm sorry, the link isn't working correctly:

    http://iwdtestsite.com/Premier/index3.htm

  13. #13
    Join Date
    Aug 2003
    Posts
    1,576
    you do realize you're in quirks mode, correct? This may be part of the problem. perhaps this list of valid doctypes will help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles