Solved

CSS equivalent to this html table

Posted on 2004-08-07
21
691 Views
Last Modified: 2013-11-19
Hi!

Since a few of the CSS experts on this site say I would be better off without html tables, I would like to see how this html table should look in CSS code.

Thank you in advance.

<style type="text/css">
td.special1 {background: url(web/images/header_r1_c2.gif) repeat-x; width:100%;}
</style>

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table1">
  <tr>
   <td>
   <div style="position: absolute; width: 539px; height: 45px; z-index: 3; left: 0px; top: 9px; padding: 4px" id="layer3">
     <font color="#FFFFFF" face="Times New Roman">
     <span style="letter-spacing: 4px; font-weight: 400"><i>&nbsp;<font size="5"><b>Company Name.</b><br>
     </font><font size="1">&nbsp;</font></i></span>
     <i><font size="3"><span style="letter-spacing: 4px; font-weight: 700">&quot;Company Slogan?&quot;</span></font>
     <span style="letter-spacing: 4px; font-weight: 700"><br>&nbsp;</span></i></font>
   </div>
   <img name="header_r1_c1" src="Web/images/header_r1_c1.gif" width="735" height="100" border="0" alt=""></td>
   <td class="special1">
   <img name="header_r1_c2" src="Web/images/header_r1_c2.gif" width="12" height="100" border="0" alt=""></td>
   <td>
   <img name="header_r1_c3" src="Web/images/header_r1_c3.gif" width="13" height="100" border="0" alt=""></td>
   <td>
   <img src="Web/images/spacer.gif" width="1" height="100" border="0" alt=""></td>
  </tr>
</table>
0
Comment
Question by:TrueBlue
  • 11
  • 5
  • 5
21 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
I would think something along these lines:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

body
{
      margin:0;
      padding:0;
      background: url(http://www.topsecurityinc.com/_themes/ltmod-corp-colorful/bk1.gif) repeat top left;
}

#header
{
      height:100px;
      background: url(http://www.topsecurityinc.com/web/images/header_r1_c1.gif) repeat top left;
      letter-spacing: 4px;
      color:#ffffff;
}

#header h1
{
      margin: 12px 0 0 12px;
      font: italic 700 24px "times new roman", times, serif;

}

#header p
{
      margin:0;
      padding: 2px 0 0 12px;
      font: italic 700 16px "times new roman", times, serif;
}

</style>
</head>
<body>

<div id="header">
      <h1>Top Security, Inc.</h1>
      <p>&quot;Why settle for less than Top Security?&quot;</p>
</div>

</body>
</html>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 450 total points
Comment Utility
And referring to an earlier comment I made about FP's amazingly complex javascript for generating the top navigation bar, this is what it should look like.

Note: Just save the body code, and insert it as an Include Page Component so it automatically gets added to all the pages in the site.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

body
{
      margin:0;
      padding:0;
}

#topnav
{
      position: absolute;
      width: 679px;
      left:50%;
      margin-left:-339px;
      height: 44px;
      top: 67px;
}

#topnav img
{
      float:left;
}

ul#topmenu
{
      margin:0;
      padding:0;
      background: url(http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c2.gif) repeat top left;
      list-style:none;
}

ul#topmenu li
{
      display: inline;


}

ul#topmenu li a
{
      background: url(http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c2.gif) repeat top left;
      float: left;
      font: bold 12px verdana, sans-serif;
      color:#000000;
      padding:14px 6px 14px 4px;
      border-right: 1px solid #016394;
      border-left: 1px solid #5FABE7;
}

ul#topmenu li a:hover
{
      text-decoration:none;
      color:#ffffff;
}

img
{
      border:none;
}

</style>
</head>
<body>

<div id="topnav">

      <img name="global_bar_bk_r1_c1" src="http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c1.gif" width="15" height="42" alt="">
      <ul id="topmenu">
            <li><a href="monitoring.htm">Security Monitoring</a></li>
            <li><a href="systems.htm">Security Systems</a></li>
            <li><a href="featured-products.htm">Security Products</a></li>
            <li><a href="cctv.htm">CCTV Systems</a></li>
            <li><a href="intercoms.htm">Intercom Systems</a></li>
      </ul>
      <img name="global_bar_bk_r1_c3" src="http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c3.gif" width="14" height="42" alt="">

</div>

</body>
</html>
0
 
LVL 7

Assisted Solution

by:zac_charles
zac_charles earned 50 total points
Comment Utility
Here you go, i think this is what you want:
<html>

<head>
<style type="text/css">
SPAN#nameSlogan
{
  position: absolute;
  width: 539px;
  height: 45px;
  z-index: 3;
  left: 0px;
  top: 9px;
  padding:4px;
  color:#FFFFFF;
  font-family:times new roman;
}
SPAN.name
{
  letter-spacing: 4px;
  font-weight: bold;
  font-style: italic;
  padding-left: 10px;
  font-size:18pt;
}
SPAN.slogan
{
  letter-spacing: 4px;
  font-weight: bold;
  font-style: italic;
  padding-left: 10px;
  font-size:12pt;
}
IMG.header_r1_c1
{
  border-width: 0px;
  width:735;
  height:100;
}
IMG.header_r1_c2
{
  border-width: 0px;
  width: 12px;
  height: 100px;
}
IMG.header_r1_c3
{
  border-width: 0px;
  width: 13px;
  height: 100px;
}
IMG.header_spacer
{
  border-width: 0px;
  width:1px;
  height: 100px;
}
</style>
</head>

<body>
<span id="nameSlogan">
  <span class="name">Company Name.<br></span>
  <span class="slogan">&quot;Company Slogan?&quot;</span>
</span>
<img src="Web/images/header_r1_c1.gif" alt="" class="header_r1_c1">
<img src="Web/images/header_r1_c2.gif" alt="" class="header_r1_c2">
<img src="Web/images/header_r1_c3.gif" alt="" class="header_r1_c3">
<img src="Web/images/spacer.gif" alt="" class="header_spacer">
</body>

</html>

Zac Charles
0
 
LVL 7

Expert Comment

by:zac_charles
Comment Utility
hehe, pretty freaky when you are writting something large like that and you submit it and someone has written something equally large :P
0
 
LVL 7

Expert Comment

by:zac_charles
Comment Utility
(while your writting that is :P)
but anyway, being as how yours isnt actually to do with this persons site and i know your really good at css do you wanna edit mine and make "header_r1_c2" stretch to whatever size like in their version? i dont have much time at the moment and thats all i could do, though it feels right :)

Zac Charles
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>being as how yours isnt actually to do with this persons site

Actually, it is this persons site...

>>written something equally large
not by a long shot actually - you have quite a bit of unecessary code in there, with some illegal syntax as well :-)
0
 
LVL 7

Expert Comment

by:zac_charles
Comment Utility
lol, way to put me down sean :P

i didnt even mean to write qually large, i was just trying to say that yea, there isnt anything there, you start writting something and you submit it to find that someone else has written something big and got it in before you.

i didnt check it out but i remember that code you wrote from another thread i think, i guess i am right because i cant think of any other way you found out their website :S lol

Oh well, im to tired to concentrate..
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Didn't mean too ;-)

I've been dealing with TrueBlue on a number of issues lately, so I'm just a little more familiar with what's going on, that's all :-)
0
 
LVL 7

Expert Comment

by:zac_charles
Comment Utility
same, well once (http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21085623.html). You have more experience with this person and css so i'll leave you to it ;)
0
 

Author Comment

by:TrueBlue
Comment Utility
Hi Sean:

Wow.

Would the second posting of CSS replace this section of html?

<div style="position: absolute; width: 100%; height: 44px; z-index: 2; top: 67px" id="layer1">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" id="table2">
  <tr>
   <td>
   <img name="global_bar_bk_r1_c1" src="Web/images/global_bar_bk_r1_c1.gif" width="15" height="42" border="0" alt=""></td>
   <td class="special2">
   <img border="0" src="Web/images/splitter.gif" width="2" height="42" align="left" alt=""><!--webbot bot="Navigation" S-Orientation="horizontal" S-Rendering="graphics" S-Type="global" B-Include-Home="FALSE" B-Include-Up="FALSE" --></td>
   <td>
   <img name="global_bar_bk_r1_c3" src="Web/images/global_bar_bk_r1_c3.gif" width="14" height="42" border="0" alt=""></td>
   <td>
      <img src="Web/images/spacer.gif" width="1" height="42" border="0" alt=""></td>
  </tr>
</table>
</div>
</div>

Since I have another table lower on the page that uses the unordered list element and bullets would it be affected by the CSS for the top navigation bar?

Thank you in advance.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>>Would the second posting of CSS replace this section of html?

Yes, completely.

>>Since I have another table lower on the page that uses the unordered list element and bullets would it be affected by the CSS for the top navigation bar?

No, the nav list I used is referenced with an id:

<ul id="topmenu">

So, now we can have the CSS for the navigation match "only" that list, by including the id in the defined classes, as noted above:

ul#topmenu
ul#topmenu li
ul#topmenu li a

Any other ul on the page (assuming you don't use <ul id="topmenu">, which would be illegal syntax) will not be affected in any way :-)
0
 

Author Comment

by:TrueBlue
Comment Utility
Hi Sean:

Sorry for the confusion.

I copied the body statements into a file named topnavigation.inc and uploaded it to our site.

I then added this include in place of original html code for the navigation bar.

<!--#include virtual="topnavigationbar.inc" -->

I must be missing something though as the buttons are not appearing on the home page.

Thank you in advance.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Well, I don't see the code on the home page - is that where I should be looking?
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
<!--#include virtual="topnavigationbar.inc" -->

Sorry - I thought you were using FrontPage. Is your host set up to use that type of include?
0
 

Author Comment

by:TrueBlue
Comment Utility
Hi Sean:

I am using FP 2003.

I have never used the web component feature before.

Here is what it generated.

      <!--webbot bot="Include" U-Include="topnavigationbar.htm" TAG="BODY" -->

I had to change the extension of the include file to htm due to FP will not browse a non-html or non-asp file.

I placed it in the same place as the original table.

The buttons show on the preview mode, but they are behind the highest layer and when uploaded to our site do not show at all.

Any ideas?


0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
No, it hasn't been included properly... hold on a sec...
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Okay...

1. Create a page called topnavigationbar.htm

2. This is the entire contents of that page:

<html>
<head>
<title></title>
</head>
<body>
<div id="topnav">
<img name="global_bar_bk_r1_c1" src="http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c1.gif" width="15" height="42" alt="">
<ul id="topmenu">
    <li><a href="monitoring.htm">Security Monitoring</a></li>
    <li><a href="systems.htm">Security Systems</a></li>
    <li><a href="featured-products.htm">Security Products</a></li>
    <li><a href="cctv.htm">CCTV Systems</a></li>
    <li><a href="intercoms.htm">Intercom Systems</a></li>
</ul>
<img name="global_bar_bk_r1_c3" src="http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c3.gif" width="14" height="42" alt="">
</div>
</body>
</html>

3. Open your main page. Go to code view and position the cursor after the header div, i.e., here:

<div id="header">
     <h2>Top Security, Inc.</h2>
     <p>&quot;Why settle for less than Top Security?&quot;</p>
</div>
<!-- CLICK CURSOR HERE -->

Switch back to page view and go to Insert Include Page Component (I forget FP2003's exact toolbar structure for this).

4. Browse to the newly created page and insert it.

If it all went well, when you broswe to the page "with your browser", not through FP, you should see this:


<!--webbot bot="Include" U-Include="topnavigationbar.htm" TAG="BODY" startspan -->
<div id="topnav">

     <img name="global_bar_bk_r1_c1" src="http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c1.gif" width="15" height="42" alt="">
     <ul id="topmenu">
          <li><a href="monitoring.htm">Security Monitoring</a></li>
          <li><a href="systems.htm">Security Systems</a></li>
          <li><a href="featured-products.htm">Security Products</a></li>
          <li><a href="cctv.htm">CCTV Systems</a></li>
          <li><a href="intercoms.htm">Intercom Systems</a></li>
     </ul>
     <img name="global_bar_bk_r1_c3" src="http://www.topsecurityinc.com/web/images/global_bar_bk_r1_c3.gif" width="14" height="42" alt="">

</div>
<!--webbot bot="Include" endspan i-checksum="17167" -->
0
 

Author Comment

by:TrueBlue
Comment Utility
Hi Sean:

I followed your instructions to the letter.

The only difference I see is the value of i-checksum is different on my site.

The buttons are displaying now but they appear to be below the top layer.

If you look at one of my other pages versus the home page.

Here is the original code again.

<div style="position: absolute; width: 100%; height: 44px; z-index: 2; top: 67px" id="layer1">
   <div align="center">
      <table border="0" cellpadding="0" cellspacing="0" id="table2">
         <tr>
      <td>
           <img name="global_bar_bk_r1_c1" src="web/images/global_bar_bk_r1_c1.gif" width="15" height="42" border="0" alt=""></td>
            <td class="special2">
                           <img border="0" src="web/images/splitter.gif" width="2" height="42" align="left"><!-- #BeginEditable "Global%20Nav" --><!--webbot bot="Navigation" s-orientation="horizontal" s-rendering="graphics" s-type="siblings" b-include-home="TRUE" b-include-up="FALSE" S-Theme="ltmod-corp-colorful 0110" --><!-- #EndEditable --></td>
           <td>
                         <img name="global_bar_bk_r1_c3" src="web/images/global_bar_bk_r1_c3.gif" width="14" height="42" border="0" alt=""></td>
           <td>
              <img src="web/images/spacer.gif" width="1" height="42" border="0" alt=""></td>
      </tr>
      </table>
      </div>
                </div>

Is it possible that I still need the id=layer1 or does the spltter.gif  or spacer.gif need to be somewhere in the CSS?

I appreciate your help.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Ah, okay - we're getting there.

We just need to add a z-index to the style:

#topnav
{
     /* Add this line */
     z-index:10;

     position: absolute;
     width: 679px;
     left:50%;
     margin-left:-339px;
     height: 44px;
     top: 67px;
}
0
 

Author Comment

by:TrueBlue
Comment Utility
Hi Sean:

That fixed the buttons so that they are displayed on the top layer for the browser.

I especially like that I customize the title's and now the buttons are big enough for the phrases I am using.

The only thing I notice is in the design mode that the buttons for the top navigation bar look like a stair case.

I mean the first one is the correct position, but the following buttons each are a little lower than the next and finally disappear behind the main table's layer.

Is this a FP bug?

Thank you in advance.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
A bug, not really... FP's design mode is only for basic layout when you're setting up the page.
It doesn't use CSS positioning, so most CSS will look rather terrible in that screen. The browser is the only reliable interface to use...
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Specific format 21 140
Centering a div in html5 5 46
Ninja Form Reformat Bold Subheader for Wordpress site 5 26
Adding a menu section 13 34
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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