Solved

How to make a extending horizontal bar line across a web page with Netobjects Fusion?

Posted on 2012-03-26
17
478 Views
Last Modified: 2013-10-04
Hello All.
I have Netobjects Fusion 11.
I have seen websites where a thin horizontal line runs across the part of the bottom of the page when you expand the width of the page, even though the web content is in the center and small amount of it is used , about 800px.
I could make the mast background do that for the top of the page but on the bottom of the page I want to do the same with a different image/color.  I only want it to be between 3-5 in height.  How do I go about doing this in Fusion?  I have tryied in tables, no borders, but nothing works. I tried with 100% width, but no success.  Here is a link for a page I saw it on:  http://coalitionforhemophiliab.org
On the bottom of the page the yellow line runs all the way across from left to right no matter how wide the window is.  The yellow line on the left and right is easy, I could just put it in a cell inside a table.  But how do I do the smae with the bottom line?  I will also have navigation on the bootom.
0
Comment
Question by:j_rameses
  • 11
  • 6
17 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37770037
All done in css

#footer {
    background: url("images/bg_footer.png") repeat-x scroll 0 0 #FFFFFF;
    border-top: 1px solid #FFFF66;
    clear: both;
    color: #939393;
    margin: 0 0 3em;
}
0
 

Author Comment

by:j_rameses
ID: 37771527
mplungjan, thank you.
So I insert this into the css style sheet then, correct?
Then, where on the body of the page do I put a reference to it and how?
Does the footer have to be a png file or can it be a jpg?
What does the margin: 0 0 3em; mean?
Waht does the border:-top: 1px solid #FFFF66; mean?
What you have listed above is it an example?
Can I use master border templates or should I use borderless layout?
Thanks.
Josh
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 37771690
1) use a png that can be stretched in the horizontal direction if you want a coloured background
2) the border top is to give a definition to the top border - in fact a thin line across the page
3) the margin is to give some space at the bottom:

Css margin: top right bottom left

and yes it is just the css from the site you gave me
0
 

Author Comment

by:j_rameses
ID: 37771815
I tried that days before and it did not work, was it because I was using a jpg instead of a png?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37771856
Not likely
0
 

Author Comment

by:j_rameses
ID: 37771950
Yesterday I did a page without borders.
I created the page with a 100% width.
3 tables, one for header, one for body and one for footer, all centered.
The table for the footer, I created it as a width of 100% with the image inside.
That took care of the problem.
All the tables need to be centered to the main table which they are inside.
That worked like a charm.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37772321
Try using divs as I suggested. Tables are not styling elements any more.
0
 

Author Comment

by:j_rameses
ID: 37772374
I am unfamiliar with 'divs'.
Does my page have to have master border default or must it be a page without borders?
I would like the page similar to the one stated.
I would like the bg image on top to run across, the side lines on the left and right side, and the horizonatal line running directly across the page as you widen the page.

How would I go about creating the div code?
0
Get up to 2TB FREE CLOUD per backup license!

An exclusive Black Friday offer just for Expert Exchange audience! Buy any of our top-rated backup solutions & get up to 2TB free cloud per system! Perform local & cloud backup in the same step, and restore instantly—anytime, anywhere. Grab this deal now before it disappears!

 

Author Comment

by:j_rameses
ID: 37772403
I placed the css code in the style sheet and on the end of the html page right before the closing of the body tage i entered the <div id=footer> but nothing happened.
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 37772494
Like this? (I borrowed the png from their site, please use your own)

<html>
<head>
<style>
#footer {
    background: url("http://coalitionforhemophiliab.org/images/bg_footer.png") repeat-x scroll 0 0 #FFFFFF;
    border-top: 1px solid #FFFF66;
    clear: both;
    color: #939393;
    margin: 0 0 3em;
}
</style>
</head>
<body>
<div classs="content">
Here be content
<br />
<br />
<br />
<br />
</div>
<div id="footer">
This is a footer
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:j_rameses
ID: 37772505
I was putting it inside the style.css file.  all it does is put a 4 inch line.
I will place it in the body of the html to see what happpens
0
 

Author Comment

by:j_rameses
ID: 37772517
wont let me put it in between the heads
0
 

Author Comment

by:j_rameses
ID: 37773106
I have been playing with this but does not work:
Where in this code would I make the entries?
Some places I am not allowed to ender code":
<!-- [BEGIN Custom1] -->
 
<!-- [END Custom1] -->
<!-- [BEGIN Page Start-of-File Script] -->
 
<!-- [END Page Start-of-File Script] -->
<!-- [BEGIN Master Start-of-File Script] -->
 
<!-- [END Master Start-of-File Script] -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- [BEGIN Custom2] -->
 
<!-- [END Custom2] -->
<head>
<title>
Home
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="NetObjects Fusion 11 for Windows">
<!-- [BEGIN Custom3] -->
<style>
#footer {
    background: url("http://coalitionforhemophiliab.org/images/bg_footer.png") repeat-x scroll 0 0 #FFFFFF;
    border-top: 1px solid #FFFF66;
    clear: both;
    color: #939393;
    margin: 0 0 3em;
}

</style>
<!-- [END Custom3] -->
<!-- [BEGIN Layout script] -->
 
<!-- [END Layout script] -->
<!-- [BEGIN Master script] -->
 
<!-- [END Master script] -->
<link rel="stylesheet" type="text/css" href="file:///C:/Program Files (x86)/NetObjects/NetObjects Fusion 11.0/NetObjects System/fusion.css">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/username/Documents/NetObjects Fusion 11.0/User Sites/ Facelift2/Preview/style.css">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/username/Documents/NetObjects Fusion 11.0/User Sites/ Facelift2/Preview/site.css">
<!-- [BEGIN Custom4] -->
 
<!-- [END Custom4] -->
</head>
<!-- [BEGIN Custom5] -->
 
<!-- [END Custom5] -->
<body 
 style="background-image: url('file:///C:/Users/username/Desktop/Website re-design/background.jpg'); margin: 0px;">
 <div align="center">
  <table border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td>
     <!-- [BEGIN Page Start-of-Body script] -->
      
     <!-- [END Page Start-of-Body script] -->
     <!-- [BEGIN Master Start-of-Body script] -->
     <div class="content">
     <!-- [END Master Start-of-Body script] -->
     <table border="0" cellspacing="0" cellpadding="0" width="555">
      <tr valign="top" align="left">
       <td width="364" height="320">
        <img src="file:///C:/Users/username/Documents/NetObjects Fusion 11.0/User Sites/ Facelift2/Preview/Autogen/clearpixel.gif" width="364" height="1" border="0" alt="">
       </td>
       <td width="18">
        <img src="file:///C:/Users/username/Documents/NetObjects Fusion 11.0/User Sites/Facelift2/Preview/Autogen/clearpixel.gif" width="18" height="1" border="0" alt="">
       </td>
       <td width="150">
        <img src="file:///C:/Users/rguerra/Documents/NetObjects Fusion 11.0/User Sites/Facelift2/Preview/Autogen/clearpixel.gif" width="150" height="1" border="0" alt="">
       </td>
       <td width="23">
        <img src="file:///C:/Users/rguerra/Documents/NetObjects Fusion 11.0/User Sites/Facelift2/Preview/Autogen/clearpixel.gif" width="23" height="1" border="0" alt="">
       </td>
      </tr>
      <tr valign="top" align="left">
       <td colspan="2">
       </td>
       <td width="150" class="TextObject">
        <!-- [BEGIN Text3] -->
         
        <!-- [END PRE-Text3] -->
        <p style="margin-bottom: 0px;">
         middle of page
        </p>
        <!-- [BEGIN POST-Text3] -->
         
        <!-- [END Text3] -->
       </td>
       <td>
       </td>
      </tr>
      <tr valign="top" align="left">
       <td colspan="4" height="204">
       </td>
      </tr>
      <tr valign="top" align="left">
       <td>
       </td>
       <td colspan="3" width="191" class="TextObject">
        <!-- [BEGIN Text4] -->
         
        <!-- [END PRE-Text4] -->
        <p style="margin-bottom: 0px;">
         bottom of page
        </p>
        <!-- [BEGIN POST-Text4] -->
         
        <!-- [END Text4] -->
       </td>
      </tr>
     </table>
     <!-- [BEGIN Page End-of-Body Script] -->
      
     <!-- [END Page End-of-Body Script] -->
     <!-- [BEGIN Master End-of-Body Script] -->
     
     <!-- [END Master End-of-Body Script] -->
    </td>
   </tr>
  </table>
 </div>
</body>
<!-- [BEGIN Custom6] -->
 
<!-- [END Custom6] -->
</html>
<!-- [BEGIN Custom7] -->
 
<!-- [END Custom7] -->
<!-- [BEGIN Page End-of-File Script] -->
 
<!-- [END Page End-of-File Script] -->
<!-- [BEGIN Master End-of-File Script] -->
 
<!-- [END Master End-of-File Script] -->

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37773467
Sorry I have no clue about master pages
0
 

Author Comment

by:j_rameses
ID: 37778320
Ok, I'll just stick to table sthen.
I do not know why Netobjects does not make that part of a feature oftherirs.
0
 

Author Comment

by:j_rameses
ID: 39543375
I've requested that this question be closed as follows:

Accepted answer: 300 points for mplungjan's comment #a37770037
Assisted answer: 0 points for j_rameses's comment #a37771950
Assisted answer: 50 points for mplungjan's comment #a37772321
Assisted answer: 150 points for mplungjan's comment #a37772494

for the following reason:

the tables does not work across multiple browser platforms, the divs work better
0
 

Author Closing Comment

by:j_rameses
ID: 39543376
the divs worked better than the tables in multiple browser platforms.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to successfully download and install the SARDU utility on Windows 7, without downloading adware.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now