CSS equivalent to this html table
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_c
</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> <font size="5"><b>Company Name.</b><br>
</font><font size="1"> </font></i>
<i><font size="3"><span style="letter-spacing: 4px; font-weight: 700">"Company Slogan?"</span></font
<span style="letter-spacing: 4px; font-weight: 700"><br> </span></i>
</div>
<img name="header_r1_c1" src="Web/images/header_r1_
<td class="special1">
<img name="header_r1_c2" src="Web/images/header_r1_
<td>
<img name="header_r1_c3" src="Web/images/header_r1_
<td>
<img src="Web/images/spacer.gif
</tr>
</table>
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_c
</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> <font size="5"><b>Company Name.</b><br>
</font><font size="1"> </font></i>
<i><font size="3"><span style="letter-spacing: 4px; font-weight: 700">"Company Slogan?"</span></font
<span style="letter-spacing: 4px; font-weight: 700"><br> </span></i>
</div>
<img name="header_r1_c1" src="Web/images/header_r1_
<td class="special1">
<img name="header_r1_c2" src="Web/images/header_r1_
<td>
<img name="header_r1_c3" src="Web/images/header_r1_
<td>
<img src="Web/images/spacer.gif
</tr>
</table>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hehe, pretty freaky when you are writting something large like that and you submit it and someone has written something equally large :P
(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
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
>>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 :-)
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 :-)
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..
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..
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 :-)
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 :-)
same, well once (https://www.experts-exchange.com/questions/21085623/CSS-equivalent-to-this-html-table.html). You have more experience with this person and css so i'll leave you to it ;)
ASKER
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"
<td class="special2">
<img border="0" src="Web/images/splitter.g
<td>
<img name="global_bar_bk_r1_c3"
<td>
<img src="Web/images/spacer.gif
</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.
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"
<td class="special2">
<img border="0" src="Web/images/splitter.g
<td>
<img name="global_bar_bk_r1_c3"
<td>
<img src="Web/images/spacer.gif
</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.
>>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 :-)
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 :-)
ASKER
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.
I must be missing something though as the buttons are not appearing on the home page.
Thank you in advance.
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.
I must be missing something though as the buttons are not appearing on the home page.
Thank you in advance.
Well, I don't see the code on the home page - is that where I should be looking?
<!--#include virtual="topnavigationbar.
Sorry - I thought you were using FrontPage. Is your host set up to use that type of include?
Sorry - I thought you were using FrontPage. Is your host set up to use that type of include?
ASKER
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="topnavigationba
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?
I am using FP 2003.
I have never used the web component feature before.
Here is what it generated.
<!--webbot bot="Include" U-Include="topnavigationba
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?
No, it hasn't been included properly... hold on a sec...
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"
<ul id="topmenu">
<li><a href="monitoring.htm">Secu
<li><a href="systems.htm">Securit
<li><a href="featured-products.ht
<li><a href="cctv.htm">CCTV Systems</a></li>
<li><a href="intercoms.htm">Inter
</ul>
<img name="global_bar_bk_r1_c3"
</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>"Why settle for less than Top Security?"</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="topnavigationba
<div id="topnav">
<img name="global_bar_bk_r1_c1"
<ul id="topmenu">
<li><a href="monitoring.htm">Secu
<li><a href="systems.htm">Securit
<li><a href="featured-products.ht
<li><a href="cctv.htm">CCTV Systems</a></li>
<li><a href="intercoms.htm">Inter
</ul>
<img name="global_bar_bk_r1_c3"
</div>
<!--webbot bot="Include" endspan i-checksum="17167" -->
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"
<ul id="topmenu">
<li><a href="monitoring.htm">Secu
<li><a href="systems.htm">Securit
<li><a href="featured-products.ht
<li><a href="cctv.htm">CCTV Systems</a></li>
<li><a href="intercoms.htm">Inter
</ul>
<img name="global_bar_bk_r1_c3"
</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>"Why settle for less than Top Security?"</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="topnavigationba
<div id="topnav">
<img name="global_bar_bk_r1_c1"
<ul id="topmenu">
<li><a href="monitoring.htm">Secu
<li><a href="systems.htm">Securit
<li><a href="featured-products.ht
<li><a href="cctv.htm">CCTV Systems</a></li>
<li><a href="intercoms.htm">Inter
</ul>
<img name="global_bar_bk_r1_c3"
</div>
<!--webbot bot="Include" endspan i-checksum="17167" -->
ASKER
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"
<td class="special2">
<img border="0" src="web/images/splitter.g
<td>
<img name="global_bar_bk_r1_c3"
<td>
<img src="web/images/spacer.gif
</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.
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"
<td class="special2">
<img border="0" src="web/images/splitter.g
<td>
<img name="global_bar_bk_r1_c3"
<td>
<img src="web/images/spacer.gif
</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.
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;
}
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;
}
ASKER
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.
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.
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...
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...
<!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>"Why settle for less than Top Security?"</p>
</div>
</body>
</html>