# Website: Font forced bold, how to move images up



## Eclipse2003 (Apr 22, 2005)

Ok I had a couple of quick questions regarding our church's website that I am designing. I am very very new to website design and only know very basics so bear with me and you'll probably have to go slow in instructing me how to do things but here is my website http://www.ofbchurch.org

The two problems I am coming across are the following:

1. All the fonts are forced bold for some reason even though I didn't set any of the fonts to bold. Any idea what I did wrong in the code to make it this way? I am using Dreamweaver. Also, any suggestions on a good web friendly font to use as well as what size font is good?

2. At the bottom left of the page, you'll notice 3 images that serve as links. I'd love to move these up so they aren't forced to the bottom but unfortunately, I am not sure how to do this based on the tables I have set up. Is there an easy way to do this? Let me know.

Thanks for the help in advance guys. I love having a site to go to to ask questions from experts.


----------



## dm01 (Oct 10, 2006)

That's not bold, it's a heading. Replace <h2> with <p> to fix this.

As for the links, you will need to re-structure the page. This will have to be done manually in Notepad, as Dreamweaver will just try to screw everything up again.


----------



## Eclipse2003 (Apr 22, 2005)

Oh, is there a way to define the certain paragraphs to be have padding-right and such then? If so, how do I do that?

Also, unfortunately I don't know too much about website design. I just happen to be the only real computer literate person at our church (we are a small church). Can you give me more specific instructions on getting the links moved up? Sorry if I'm a pain for asking, I just don't really know what to do.


----------



## Eclipse2003 (Apr 22, 2005)

Ah ok I figured out how to do the padding-left with paragraphs. Now my only question is about moving those links up based on the tables I have set. Let me know if you have any suggestions. Thanks.


----------



## CrimsonShroud67 (Oct 31, 2008)

I would recommend reworking the tables or even better removing the tables and going with a CSS based layout. But both of these look like it would require a large reworking.

If you want a quick and dirty fix then try this...

First to you CSS add the following...
a.floatup {
display:relative; top:-400px;
}

Then alter the HTML in the following manner...

<tr>
<td colspan="2">
<a target="_self" href="OFBC1.html">
<img height="79" width="213" alt="" *class="floatup"* src="images/ofbc_07.gif"/>
</a>
</td>
<td rowspan="4" style="">
<img height="239" width="587" *class="floatup"* src="images/ofbc_08.gif"/>
</td>
</tr>
<tr>
<td colspan="2">
<a target="_self" href="OFBC2.html">
<img height="72" width="213" alt="" *class="floatup"* src="images/ofbc_09.gif"/>
</a>
</td>
</tr>

This will pull the images up however since these images also provide the brown design on the left hand side you will be left with a bare blue patch were these images used to be. You will need to fill this in possibly by adding it to ofbc_08.gif image.


----------



## Eclipse2003 (Apr 22, 2005)

Wow. Thanks so much. I am going to do this probably tomorrow and let you know how it goes. Thanks so much for being so specific. I really appreciate it!


----------



## Eclipse2003 (Apr 22, 2005)

It doesn't seem like it worked. Take a look at the link below. I put it on a test page. It looks like it moved them up some but not all the way up. Any ideas?
http://www.ofbchurch.org/index_test.html


----------



## CrimsonShroud67 (Oct 31, 2008)

Sorry, My bad.

Your code in the <style> should be...

img.floatup {
display:relative; top:-400px;
}

not...

a.floatup {
display:relative; top:-400px;
}


----------



## dm01 (Oct 10, 2006)

Wrap <p> around the whole issue and make the CSS relative to the <p>; otherwise, all of the image will try to display at the same location, which would really bork things up on older browsers.


```
p.floatup {
display:relative; top:-400px;
}
```


```
<p class="floatup">
<a target="_self" href="OFBC1.html">
<img height="79" width="213" alt="" src="images/ofbc_07.gif"/>
</a>
</td>
<td rowspan="4" style="">
<img height="239" width="587" src="images/ofbc_08.gif"/>
</td>
</tr>
<tr>
<td colspan="2">
<a target="_self" href="OFBC2.html">
<img height="72" width="213" alt="" src="images/ofbc_09.gif"/>
</a>
</p>
```


----------



## CrimsonShroud67 (Oct 31, 2008)

Sorry I have another error in that code 

display:relative should actually be position:relative.

Wrapping the pieces up in a <p> tag will give you an illegal nesting of tags. 

Putting the floatup on the images should be fine. The position:relative will allow the elements to float inside of it's parent the top:-400px will then move each image up 400px in relation to their actual position on the page. Hence moving each element up 400px still leaves them stacked in a column. I tested this out in Firebug and it works perfectly (other then the bare blue space I mentioned in my first response). Did not test in IE but there should not be any issues unless we are talking about an older version (4 or less I believe) which does not support display:relative.


----------



## Eclipse2003 (Apr 22, 2005)

So don't use the <p class="floatup">? Only change the css like you said? I tried that and it still doesn't work. I'm sure I'm doing something wrong. But what am I doing wrong?


----------



## CrimsonShroud67 (Oct 31, 2008)

I took a look at your site...
Don't put the class on this image (The picture of the church at the bottom)

<img height="239" width="587" src="images/ofbc_08.gif" class="floatup"/>

This is forcing this image up as well. I did not think you wanted that.


----------



## dm01 (Oct 10, 2006)

Not a nesting error, but a "looks like something the cat dragged in" error. Scratch what I said earlier. I didn't have time to adequately test the proposed change.


----------



## Eclipse2003 (Apr 22, 2005)

Ok I got the images to move up. Now how do I get rid of the random blue slice between the church picture and the text? Also, how do you recommend I fill in the blue space that is left by moving everything up? Thanks for the help so far. I appreciate it.


----------



## CrimsonShroud67 (Oct 31, 2008)

OK that was a little tougher then what I thought. Here is what you want to do...
First alter the CSS again like so, I know I can't make up my mind:grin:...

a.floatup {
display:block; margin:0; padding:0;
position:relative; top:-400px;
}

next I had to alter the table structure after the row with the text in it and move the Class attr from the Imgs to the A tags

for worship and thank you again for stopping by. <br><br>
In Christ Alone,<br><br>
Chris Hinckley <br>
Pastor/Teacher</p>
 
</td>
</tr>
*<tr>
<td colspan="2" style="background:url(index_test_files/ofbc_05.gif);">
<a target="_self" href="http://www.ofbchurch.org/OFBC1.html" class="floatup"><img alt="" src="images/ofbc_07.gif" width="213" height="79"></a>
<a target="_self" href="http://www.ofbchurch.org/OFBC2.html" class="floatup"><img alt="" src="images/ofbc_09.gif" width="213" height="72"></a>
<a target="_blank" href="http://www.ofbchurch.org/www.twowaystolive.com" class="floatup"><img alt="" src="images/ofbc_10.gif" width="213" height="78"></a>
</td>
<td><img alt="" src="images/ofbc_08.gif" width="587" height="239" style="vertical-align:top"></td>
</tr>*
<tr>
<td>
<img src="images/spacer.gif" alt="" width="169" height="1"></td>
<td>
<img src="images/spacer.gif" alt="" width="44" height="1"></td>
<td>
<img src="images/spacer.gif" alt="" width="587" height="1"></td>
</tr>
</tbody>
</table>

Anyway give it a try and let me know how it turns out.


----------



## Eclipse2003 (Apr 22, 2005)

Nice!! Works like a charm. Two things though. As the body of the web page gets longer, the three images move down the page. Is the only way to prevent this to change the position:relative; top:-400px; line to a larger negative number? For example, look at this link http://www.ofbchurch.org/beliefs_test.html

Also, hopefully I can explain this right. Those 3 links that we have moved up point to other pages on our site (with the exception of the last one, 2 ways to live). They are going to be changing to different pages here and there throughout the year. For example, now they are BSH and AWANA but maybe next week we'll change them to link to Events or something. So the only way I could think to do this so I didn't have to change every single page manually was to name the links OFBC1 and OFBC2 so that way all I have to do is create a page called OFBC1.html that is the link I want it to go to (for example, awana.html). Is there another way to do this so they don't go to OFBC1.html and instead go to the actual page (awana.html or whatever) and not have to manually change every single page to point to the new link? Know what I mean? 

Thanks so much for all the help so far. ray:


----------



## CrimsonShroud67 (Oct 31, 2008)

Sorry, didn't know about the varying page sizes. Yes all that really needs to be done is to have the TOP value greater on larger pages or less on smaller ones. Not the best as far as maintenance is concerned. 

I can rework the HTML one more time so that it is more dynamic and can handle varying page sizes. We are getting into even more of the table reworking that we were trying to avoid but I think this will work easier to maintain for you then changing the TOP value on every page you build.

As for your other problem...
Yes there other ways of doing it that make maintenance easier. I do not know what kind of Webserver you are using, so I do not know what kind of server technologies you have access to, but you could use something like JSP, or ASP to make the links more dynamic. Or you could use a Client side technology and write some JavaScript to do the same thing. I can send you a JS solution when I reformat the HTML if you like.


----------



## Eclipse2003 (Apr 22, 2005)

That'd be awesome. So are you a web developer because you're really good and really fast. Thanks again.


----------



## CrimsonShroud67 (Oct 31, 2008)

Thanx. Yes I am. Sr Software Eng for LexisNexis.

OK Let's try this again:smile:

You can remove the floatup class we added to the CSS. I have attached a zip file containing all the files I downloaded from your webpage. I have edited index_new.html and added a JS file called leftPaneLinks.js.

I added comments to help explain what I did at each point. The alterations to the HTML will need to be done to each of your pages. I would use it as a template as you create new pages. The JS file should be included on all pages with the AwanaClub and BSH links.

Let me know how it works out for you.


----------



## Eclipse2003 (Apr 22, 2005)

First of all, thanks so much yet again. You're awesome.

Second of all, I had a couple questions regarding the code:

1. So now all I have to do is edit the javascript file to reflect the new links and I'll be able to change it for every page, correct?

2. Can I change the names from awanaClub and bsh to topLink and middleLink as well as add a bottomLink and do the following code for that one?
<a target="_self" href="javascript:forwardTo('bottomLink');"><img alt="" src="index_test_files/ofbc_10.gif" width="213" height="78"></a>

and then add
leftPaneLinks["bottomLink"] = "http://www.www.twowaystolive.com";

Is there anything else I'd have to change?

3. What all do I need to change or copy/paste for my other pages? (Nevermind, I think I figured out what I need to change. All, I have to do is edit the code between New Content Row, correct?) I tried doing it on one page but I must have messed something up. heh. Look http://www.ofbchurch.org/beliefs_test.html


----------



## CrimsonShroud67 (Oct 31, 2008)

1. That is correct.
2. a. The name switching you mentioned should be fine.
b. I did not think you needed the bottom link dynamic. It can be however, that link had a TARGET set to _blank so that it opened in a new window. That will prevent the code from executing and then even if it executed it would not open in a new window.
To get this to work remove the target="_blank" from the <a> or set it to _self. and set the href to the JS call just like the other two.

Then if you still want it to open in a new window alter the JS function like so...
function forwardTo(sLinkId) {
if(sLinkId == "bottomLink") {
window.open(leftPaneLinks["bottomLink"],"_blank");
} else {
window.location.href = leftPaneLinks[sLinkId];
}
return;
}
3. This page in the link looks good. At least in Firefox. Did you get your issues corrected?


----------



## Eclipse2003 (Apr 22, 2005)

Most looks good but compare these two to see the difference in the body

Page 1

Page 2

I am guessing the color/size of the headings I can change easily but any idea why the other text (descriptions) are indented significantly to the right?


----------



## CrimsonShroud67 (Oct 31, 2008)

You didn't remove the padding from the <p> tags. I applied margins to the div with the class primaryContent and removed them from the individual <p> tags. This padding is now extra. and pushing your paragraphs to the right.

<div class="primaryContent">
<h2 align="center"><img src="images/beliefs_title.gif"/></h2>
<h2 align="left" class="style2">...</h2>

<span class="style2"><br/>
</span>
<h2 class="style3">The Scriptures</h2>
<p align="left" style="padding-left: 240px; padding-right: 15px;">


----------



## Eclipse2003 (Apr 22, 2005)

Perfect! Works like a charm. Man thanks so much. Mind if I ask if you if I run across any more questions, which I am guessing I will? Heh.


----------



## Eclipse2003 (Apr 22, 2005)

Ok I am going through changing all the pages to the new code and the ones I seem to be having a problem with are the sermon pages which have a table. Let me know how to get these to work properly. The first link is what it looks like now and the second is after I apply the new code. Thanks.

http://www.ofbchurch.org/aug_bsh.html

http://www.ofbchurch.org/testing_sermons.html


----------



## Eclipse2003 (Apr 22, 2005)

Nevermind. I figured it out. Thanks.


----------



## CrimsonShroud67 (Oct 31, 2008)

Excellent. Let me know if you need anything else.


----------

