HTML Help

sparkleplenty82 · Joined: 15 Nov 2008 Posts: 4

Hello,

This is my first time posting, and I'm hoping someone can help me with my problem. I've tried researching various websites on how to fix the problem, and everything I've tried hasn't worked. Perhaps my idea isn't possible, but I'm sure I've seen something similiar on other sites before.

To explain my problem, basically I want to have two "background" images for my website. I have a standard one set for the entire page, and then I have a second image that I want to repeat vertically underneath the content, "expanding" as the various content shows. My problem lies with getting the second image to repeat vertically. I'm able to get it to show in the right place, but it doesn't repeat.

An example of the site, and how it's working can be seen here: http://rickman-fans.net/Press/2004/Internet/01.php and my CSS for the basic structure of the layout can be seen below:

Code:
body
{
background-image: url(http://rickman-fans.net/Press/Images/bg_main.jpg);
font-family: verdana;
font-size:11px;
color: #000000;
height: 100%;
text-align:center;
margin: 0px;
}

#centered
{
background-image: url(http://rickman-fans.net/Press/Images/bg.jpg);
background-repeat: repeat-y;
background-position: center;
width:669px;
height:100%;
margin:0px auto; /* to center the div */
text-align:left; /* restore the body alignment */
position:relative; /* because of "relative/absolute" content inside the div */
}

#content {
position: absolute;
top:552px;
left:8px;
width: 652px; /* the width of our content column */
height: auto;
text-align: left;
}

Basically with the link above, the wood grain background (bg_main.jpg) is the "standard" background I've set. The "textured paper" background (bg.jpg) is the one I want repeated vertically down the page beneath the content.

Is there any way of doing this? Any help is greatly appreciated.[/code]

sticks464 · Joined: 31 Dec 2006 Posts: 1283

This will work. You weren't using enough divs and too many tables.
I only did enough of the content to show how it should be done. You will have to reinsert the keywords and put the css on your external stylesheet.

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rickman-Fans.net - Press Archive || Your Online Source for Alan Rickman News</title>
<meta name="keywords" content="">
<style type="text/css">
* {
margin:0;
padding:0;
border:none
}
body {
line-height: 1;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #000000;
text-align:center;
background: #fff url(http://rickman-fans.net/Press/Images/bg_main.jpg);
}
:focus {
outline: 0;
}
/* Links */
a:link, a:active, a:visited{
color: #628F2C;
text-decoration:none;
}
a:hover {
color: #4D6C24;
text-decoration:underline;
}
a.white:link, a.white:active, a.white:visited, a.white:hover{color: #FFFFFF;
}
#centered {
background: #fff url(http://rickman-fans.net/Press/Images/bg.jpg) repeat-y center;
width:669px;
margin:0px auto; /* to center the div */
text-align:left; /* restore the body alignment */
position:relative; /* because of "relative/absolute" content inside the div */
}
#head {
width:100%;
height: 552px;
background: #fff;
}
.title {
background-image: url(http://rickman-fans.net/Press/Images/Header.jpg);
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: 10px;
letter-spacing: 2px;
padding: 5px;
color: #FFFFFF;
white-space:nowrap;
}
.title span{float:left;width:5em;text-align:left;}
.first, .alan {padding-top:10px;}
.hbo{padding-top:20px;}
.first, .hbo, .alan {padding-left:20px; padding-right:20px;}
p span {font-weight:bold;}
.title1 {
background-image: url(http://rickman-fans.net/Press/Images/Header.jpg);
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
text-align:right;
letter-spacing: 2px;
padding: 5px;
color: #FFFFFF;
white-space:nowrap;
}
.title1 span{float:left;width:5em;text-align:left;}
</style>
</head>
<body>
<div id="centered">
<div id="head">
<IMG SRC="http://rickman-fans.net/Press/Images/Image01.jpg" USEMAP="#Image01.jpg" alt="" WIDTH="669" HEIGHT="552">

<MAP NAME="Image01.jpg">
<AREA SHAPE=RECT COORDS="239,424,327,448" HREF="/Press/Magazines.php" ALT="Magazines">
<AREA SHAPE=RECT COORDS="341,424,401,448" HREF="/Press/Internet.php" ALT="Internet">
<AREA SHAPE=RECT COORDS="415,424,500,448" HREF="/Press/Newspapers.php" ALT="Newspapers">
<AREA SHAPE=RECT COORDS="514,424,592,448" HREF="/Press/Transcripts.php" ALT="Transcripts">
<AREA SHAPE=RECT COORDS="606,424,654,448" HREF="/Press/index.php" ALT="Index">
</MAP>

</div>
2004 - Internet
Something The Lord Made 
2004 / <a href="http://www.hbo.com/">HBO</a>

HBO: When you play a man like Dr. Blalock, do you feel a certain responsibility in bringing his character to life because it's a part of history, and it's a story that most people probably will not know.

Alan: Well, I certainly knew nothing about this story. And I think we're all forgiven, in a sense, because I was talking to one of the doctors who is currently working at Johns Hopkins, and he says a lot of the staff there even today didn't know. And in a way I guess that's the point. You know, a black man is still not properly honored, even though he was given an honorary doctorate later on in his life. But I think it's still fresh news to a lot of people. So it's great to be part of a story that I knew nothing about. You feel very protective of somebody that you play. Because I've done it a couple of times, play somebody who actually lived. I mean, there is the technical aspect of who were they and what did they do and what were the details of their life. But, there is something else that happens, and you just become very protective of them as a person. I don't know, somehow or other they start to inhabit you. Or a spirit does.

HBO: I like the way you say you are a little protective of that person. Could you expound on that a little bit?

Alan: Well, inevitably, when you reduce a person's life down to an hour and a half, or two hours, there is dramatic license at certain points. And then when you put that together with my own research and my own reading, and talking to people who knew him and, and indeed talking to the director and producers, it's not that those conflict, but you know, different people maybe want different things. And so this protectiveness of Blalock as a human being, to me, as the kind of arbiter of the choices that are available to you. What kind of person was he? And therefore, how did he react in certain situations?

HBO: From what you've learned of him, what kind of person was he?
<a href="javascript:history.go(-1)" class="white"><< Back</a><a href="#" class="white">Top >></a>

</div>
</body>
</html>

sparkleplenty82 · Joined: 15 Nov 2008 Posts: 4

Well, I tried that, and it didn't work. The only thing I left out is all the stuff because I don't see the need, since I only asked how to get the image to repeat, not change the look of my text. (maybe there's reasons I don't know, if so please explain). And #content was left out in your suggestion all together. If anything, this made it worse, as now my "title" images aren't working. :?

Re-posting original code and setup, and seeing if it'll make a difference, since I didn't mention in my original post that I'm using a header and footer.

Header.php:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Rickman-Fans.net - Press Archive || Your Online Source for Alan Rickman News</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="keywords here">

<link href="http://rickman-fans.net/Press/style.css" rel="stylesheet" type="text/css">

</head>

<body>


<MAP NAME="Image01.jpg">
<AREA SHAPE=RECT COORDS="239,424,327,448" HREF="/Press/Magazines.php" ALT="Magazines">
<AREA SHAPE=RECT COORDS="341,424,401,448" HREF="/Press/Internet.php" ALT="Internet">
<AREA SHAPE=RECT COORDS="415,424,500,448" HREF="/Press/Newspapers.php" ALT="Newspapers">
<AREA SHAPE=RECT COORDS="514,424,592,448" HREF="/Press/Transcripts.php" ALT="Transcripts">
<AREA SHAPE=RECT COORDS="606,424,654,448" HREF="/Press/index.php" ALT="Index">
</MAP>


<div id="centered">

<table width="669" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<IMG SRC="/Press/Images/Image01.jpg" USEMAP="#Image01.jpg" alt="" WIDTH=669 HEIGHT=552 BORDER=0></td>
</tr>
</table>

Internet.php
Code:
<? include('/var/www/sites/rickman-fans.net/Press/header.php'); ?>

<div id="content">

<table width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>
<td class="header" width="100%">2004 - Internet</td>
</tr>
</table>

Something The Lord Made 
2004 / <a href="http://www.hbo.com/" target="_blank">HBO</a> 

HBO: When you play a man like Dr. Blalock, do you feel a certain responsibility in bringing his character to life because it's a part of history, and it's a story that most people probably will not know.

Alan: Well, I certainly knew nothing about this story. And I think we're all forgiven, in a sense, because I was talking to one of the doctors who is currently working at Johns Hopkins, and he says a lot of the staff there even today didn't know. And in a way I guess that's the point. You know, a black man is still not properly honored, even though he was given an honorary doctorate later on in his life. But I think it's still fresh news to a lot of people. So it's great to be part of a story that I knew nothing about. You feel very protective of somebody that you play. Because I've done it a couple of times, play somebody who actually lived. I mean, there is the technical aspect of who were they and what did they do and what were the details of their life. But, there is something else that happens, and you just become very protective of them as a person. I don't know, somehow or other they start to inhabit you. Or a spirit does.

HBO: I like the way you say you are a little protective of that person. Could you expound on that a little bit?

Alan: Well, inevitably, when you reduce a person's life down to an hour and a half, or two hours, there is dramatic license at certain points. And then when you put that together with my own research and my own reading, and talking to people who knew him and, and indeed talking to the director and producers, it's not that those conflict, but you know, different people maybe want different things. And so this protectiveness of Blalock as a human being, to me, as the kind of arbiter of the choices that are available to you. What kind of person was he? And therefore, how did he react in certain situations?

HBO: From what you've learned of him, what kind of person was he?

Alan: Like any great professional, I suppose, very, very focused on the job that, I guess, in a way, he was born to do. And in fact, that kind of over-focus on your work perhaps means that your home life gets affected, and your relationship with your wife and children takes a bit of a back seat when a career is involved.

HBO: How would we describe the relationship, between Vivien Thomas and Dr. Blalock?

Alan: Well, it's a relationship that starts out, if you like, as master and servant, in a way. And then it becomes teacher and pupil. And then they're pretty much joined at the hip on a practical level. You know, the one can't move without the other. But of course this is 1943, when at any other time, like now, Vivien would be trained to be a doctor, or he would be a qualified doctor. Then it was not possible for him economically, or in any way at the hospital, to become a black doctor. So he remained officially a surgical technician. But there is no way that Blalock could have accomplished the world's first heart operation without Vivien Thomas standing on a step stool, looking over his right shoulder and saying yes, fine, change this, do that, while Blalock did the operation. Because Vivien had done it so many times before in operations on dogs, which is the way they practiced it.

HBO: Were they friends, or because of the times it just was not a possibility?

Alan: Well, I think it's more complicated than that. They were so much people of their time. He was landed gentry from Georgia, Blalock. But, he took Vivien everywhere with him, to every new job. It started out in Nashville. And he wouldn't accept a job unless he was able to take Vivien with him. So, in that sense he fought for him. But he was so much a victim of the time that he thought it was perfectly OK to supplement Vivien's wages by offering him the opportunity to serve drinks at his parties. And he didn't see anything wrong with that. And in a way, neither did Vivien. So, it was more. I said it was almost like a love affair, but more accurately, it's more like a marriage. Which is, there's a difference.

HBO: Had you had a chance to meet any of the family members on either side?

Alan: I met Vivien's nephew, yeah. He's a doctor himself.

HBO: What is his feeling about their relationship?

Alan: We did an interview in Los Angeles recently, and according to him, he said, "when my uncle invented this procedure", and I said, "excuse me?" Let's get this right here. It's called the Blalock/Taussig procedure for good reason. It was their concept. It couldn't have happened without Vivien's skill, because he practiced all the suturing that made it possible. And he made all of the implements that up until that point hadn't been invented.

HBO: You mentioned Dr. Taussig. Talk about how she fits into the story.

Alan: Well, Helen Taussig was an MD in the hospital. And brilliant at diagnostics. Or diagnosing, anyway, what was wrong with these children. She was the first person who went to Blalock and said, "look, there is this problem with blue babies. And nobody has come up with a surgical solution". She was particularly brilliant at diagnosing, because she was actually quite deaf, so the stethoscope wasn't much use to her, so everything was done by touch with her. So it was a very subtle skill that she had. But it was very much to do with her diagnosing what the problem was and how it was happening. And then Blalock working out a surgical solution to it.

HBO: I love the title. Could you talk a little bit about it?

Alan: Well, the title refers to, I suppose, a kind of wonderment that Blalock has about the skill that Vivien had in suturing. You know, these stitches that he put in the arteries were so beautiful and small. Because we're talking about impossibilities here. They're operating in a space this big, and then you're talking about arteries the size of a piece of spaghetti, and somehow they're sewing the inside and the outside with two different stitching techniques to get them to join on to the pulmonary artery. So it's an extraordinary skill. So, he says, this looks like something the lord made.

HBO: In bringing the character of Blalock to life, did you find that you liked him as a person?

Alan: Well, whenever I play any character I never judge them, so it's important for me not to have those kind of opinions. It's not like I like him or dislike him. I just play him. And it's for other people to make those judgements. I'm on the inside looking out. It's for you to decide whether you like him or dislike him. But I think he's a complicated person. He was a brilliant teacher in later life, and he also was responsible for promoting the careers of many of the young doctors that worked with him. So, his eye was always on a kind of wider picture.

HBO: Which I suppose accounts for his working relationship with Vivien.

Alan: Absolutely, because he was completely color blind in that sense. This was somebody who he worked with. It was only outside pressures and the time that he lived in that made them walk in two different directions at the end of the day.

HBO: Had you met (director) Joseph Sargent before?

Alan: No, but I knew of him, because a great friend of mine Alfre Woodard had worked with him, famously.

HBO: What do you think of his style? How has he helped you as a director?

Alan: Well, first of all, you have to keep up with him. I mean, how is he still standing at midnight every day? It's jaw droppingly inspiring. And completely focused. In a way, you look at him and you think of Blalock, and you see these two men absolutely focused on what it is they're trying to achieve. So that's a huge part of what you want from a director, that they're absolutely glued to the project.

HBO: What was the appeal of this particular film for you?

Alan: I always find it appealing to play people who it's not easy to rubber stamp and put a label on their forehead and say who they are. I think you, as a viewer, you have to have a kind of conversation with yourself, and the character, and what you think and feel about them and what they're doing and how they're doing it and how they're going about it, and the time that they lived in. In other words, I'm a big fan of telling stories, and being part of a story telling process. And there's so little of it. Thank god for HBO. That you know you can switch it on and somebody will take you into a world, and then you'll bounce around inside it, and maybe come out thinking other things than you did at the beginning.

HBO: Is there a scene that you found yourself particularly fond of, or any particular part of the movie that you can set aside and say maybe touched you more than another?

Alan: The truthful answer is no because in the end, whether a scene is two lines or ninety-two, the effort is always to be present and alive in them. And hopefully original. You know, filming is such a complex process, and it's very different for those of us involved in it than it is for the people watching it. Of course that's the way it should be. But, the memory of it always is really a collaborative thing, it's not just a scene that I'm acting. It's also the incredible sense of support that one has felt from this crew. They only had a very short time to prepare the film, so everybody is hanging on to the story by their coattails really. It's very technical, because the subject matter, and it's period. And it goes across thirty years. So, really, the memory is going to be of the whole project and of a group of people working together to tell a story. And as an actor, you're very properly put in your place.

HBO: What would you like the audience to take away from this film?

Alan: I think as much as anything, they should have the same response that you had at the beginning before you even saw it. Why didn't I know about this? 

<table width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>
<td class="header" width="15%"><a href="javascript:history.go(-1)" class="white"><< Back</a></td>
<td class="header" width="70%"></td>
<td class="header" width="15%"><a href="#" class="white">Top >></a></td>
</tr>
</table>

</div>

<? include('/var/www/sites/rickman-fans.net/Press/footer.php'); ?>

</div>

Footer.php
Code:
</div>

</body>
</html>

Style.css
Code:
/* Body */

body
{
background-image: url(http://rickman-fans.net/Press/Images/bg_main.jpg);
font-family: verdana;
font-size:11px;
color: #000000;
height: 100%;
text-align:center;
margin: 0px;
}

#centered
{
background-image: url(http://rickman-fans.net/Press/Images/bg.jpg);
background-repeat: repeat-y;
background-position: center;
width:669px;
height:100%;
margin:0px auto; /* to center the div */
text-align:left; /* restore the body alignment */
position:relative; /* because of "relative/absolute" content inside the div */
}

#content {
position: absolute;
top:552px;
left:8px;
width: 652px; /* the width of our content column */
height: auto;
text-align: left;
}

/* Links */

a:link, a:active, a:visited
{
color: #628F2C;
text-decoration:none;
}

a:hover {
color: #4D6C24;
text-decoration:underline;
}

a.white:link, a.white:active, a.white:visited, a.white:hover
{
color: #FFFFFF;
}

/* Content */

.header {
background-image: url(http://rickman-fans.net/Press/Images/Header.jpg);
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: 10px;
font-family: verdana;
letter-spacing: 2px;
padding: 5px;
color: #FFFFFF;
margin: 0px;
}

#centertext {
text-align: center;
}

#disclaimer {
font-family:arial;
font-size:9px;
}

/* Forms */

input, textarea, option, select {
background-color: #E7F3D7;
font: 11px verdana;
color: #4D6C24;
border: 1px solid #4D6C24;
}

/* Tables */

.catalogheader {
background-color: #AAD573;
text-decoration: none;
text-transform: uppercase;
text-align: left;
font-weight: bold;
font-size: 10px;
font-family: verdana;
letter-spacing: 2px;
padding: 4px;
color: #FFFFFF;
margin: 0px;
}

.catalogheadermore {
background-color: #AAD573;
text-decoration: none;
text-transform: uppercase;
text-align: right;
font-weight: bold;
font-size: 10px;
font-family: verdana;
letter-spacing: 2px;
padding: 4px;
color: #FFFFFF;
margin: 0px;
}

.info{
padding: 2px;
font-family: verdana;
font-size:11px;
color: #3B2B5C;
padding: 2px;
width: 90%;
}

How it looks now with the suggestions above: http://rickman-fans.net/Press/2004/Internet/01.php

sparkleplenty82 · Joined: 15 Nov 2008 Posts: 4

Okay, sorry about above post, lol. I just copied and pasted everything from the suggestion post and it's working now, just need to customize it a bit more to my liking. Can someone explain though why the spans and p classes are needed? Was it the tables that were preventing the original problem? And would I be able to use a #content div to control all the content?

sticks464 · Joined: 31 Dec 2006 Posts: 1283

The spans and p tags aren't needed. I could have left it with the tags for bold and the to create space between the paragraphs. But what if you wanted to change some colors or text size? It would have to be done on each affected paragraph. With the classes and spans you can change one css rule and affect the entire page.
As far as the tables, they are meant for tabular data in which there was none. Everything the tables were being used for can be easily done using and span tags making for less markup, faster loading and less bandwidth usage.
You don't need a content div. Everything under the header is content. It is all contained within the main centered div. Why create another div to contain what is already contained?

sparkleplenty82 · Joined: 15 Nov 2008 Posts: 4

Thank you for the explanation, that makes much more sense now. I've never really used many and tags so I wasn't sure what their benefits would be.

Thank you again for all the help. :)