This is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="monday_style.css" />
    </head>
    <body>
        <div id="header">
        </div>

        <div id="container">
            <div id="center" class="column">
                <a href="http://www.news-leader.com/article/20101014/BREAKING01/101014018/Carnahan-Blunt-trade-accusations-in-debate-No-1">Carnahan, Blunt trade accusations in debate No. 1</a>
            </div>

            <div id="left" class="column">
                <a href="http://www.news-leader.com/article/20101014/BREAKING01/101014013/Preliminary-report-sheds-some-light-on-fatal-plane-crash">Preliminary report sheds some light on fatal plane crash</a>
            </div>

            <div id="right" class="column">
                <a href="http://www.news-leader.com/article/20101014/BREAKING01/101014009/Cut-finger-leads-to-school-bus-crashing-through-fence">Cut finger leads to school bus crashing through fence</a>
            </div>
        </div>
    </body>
</html>

This is my CSS:

body
{
    font-family:"Georgia", serif;
}

#header {
    background:  url(file:///Users/smalone/Desktop/mondaybannerheader.jpg) no-repeat;
    position:absolute;
    float: left;
    right:0px;
    top:0px;
    height: 115px;
    margin: 0 0 0 0;
    width: 600px;
    border-style:solid;
    border-width:1px;
}

#body{
    overflow: hidden;
    margin-left: 0px;
    margin-right: 0px;   
    padding: 0px;
    height: 115px;
    width: 600px;
}

body {
    min-width: 600px;      /* 2x LC width + RC width */
    max-width: 600px;
    min-height: 115px;
    max-height: 115px;
}


#container {
    padding-left: 200px;   /* LC width */
    padding-right: 200px;  /* RC width */
}
a {
    text-decoration:none;
}

a:link {color:#732C0D;}

a:visited {
    color:#362F22;
}


#container .column {
    position: relative;
    float: left;
}
#center {
    width: 100%;
}
#left {
    width: 180px;        /* LC fullwidth - padding */
    padding: 0 10px;
    right: 200px;        /* LC fullwidth */
    margin-left: -100%;
}
#right {
    width: 200px;          /* RC width */
    margin-right: -200px;  /* RC width */
}

/*** IE6 Fix ***/
* html #left {
    left: 150px;           /* RC width */
}

This is my first CSS attempt, and I don't know what I'm doing. Is it possible to put a background image behind columns like this? Or, not necessarily like this, but more successfully? I also have no idea why some of this text is giant. My apologies. As this is, my container is fixed to the left of the screen, and my image is fixed to the right. Help please.

  • I'm going to try to fix some of the formatting of the code so that it isn't giant and bold. If I accidentally screw something up, feel free to fix it or let me know. Michael Martin-Smucker about 6 years ago
  • Okay, updated. For future reference, code automatically shows up as code if you give it a 4-space indent. Michael Martin-Smucker about 6 years ago

2 answers

0
points

In the style for #header, you refer to an image; is this the image that you want to display behind the #container div?

If so, the problem is probably in the way to are writing the url of the image. Right now, you have an absolute path to a file on your computer. If your website is on the Internet, it won't be able to access images on your computer, so you'll need to upload the image to your web server.

Once the images is on the server, you'll need to change the path to refer to the image. Instead of "file:///Users/smalone/Desktop/mondaybannerheader.jpg", you'll probably want to use a relative path (relative to the directory that the stylesheet is in).

If you put the image in the same directory as your stylesheet, you can replace that whole "file:///..." part with simply "mondaybannerheader.jpg". If the stylesheet is in your top directory and you put the image in an "images" folder on the web server, you'll probably do something like this: "images/mondaybannerheader.jpg".

The Motive Glossary seems to have a good guide to relative and absolute links. If this doesn't solve your problem (or if I misinterpreted the problem), let me know!

Answered about 6 years ago by Michael Martin-Smucker
  • I should have added the below "answer" as a comment here. Oops. Sarah about 6 years ago
Sarah 0
0
points

This is awesome information. I knew that I would have to upload this to the server before I actually used it, but I didn't know exactly how to do that or what and where to put the link, so thank you so much. I do have a problem with the actual code though, in that my image lines up on the right side of the screen, and my columns line up on the left, like I want them to. I wasn't sure if I could use this "holy grail" code I found for 3 columns and still put a background image behind all 3 of the columns. When I try to change it up and get the image fixed behind them, I break my columns. Do you know anything about that? Thanks so much!

Answered about 6 years ago by Sarah