...

View Full Version : Tables Tables Tables



194673
12-29-2006, 08:46 AM
Just got a question. I'm trying to make a decent looking background for a content area so I'm trying to use tables to accomplish it (because my coach doesn't know any coding and uses microsoft word to edit). So basically I'm having problems getting rid of the space inbetween cells. I have already set the cellspacing to 0, but it still leaves a tiny bit of space. Also, for some reason the background image of one cell runes over for another pixel (all dimensions are set though).
Here's the code:

<table style="width:350; border:none;" cellspacing="0">
<tr>
<td><img src="images/content1_top.png" /></td>
</tr>
<tr>
<td style="background-image:url(images/content1_bg.png); width:350" width="350">';
echo '
<br><br><br><br><br><br><br><br><br></td>
</tr>
<tr>
<td><img src="images/content1_bottom.png" /></td>
</tr>
</table>

Also, is there a way to align an edge of a table with another table?



Edit:
Just spent about 20 minutes recoding in CSS:

<style type="text/css">#content-top {
width: 350px;
height: 6;
position: relative;
}
#content-mid {
background:url(images/content1_bg.png);
width: 338px;
position: relative;
padding-left:6px;
padding-right:6px;
}
#content-bot {
width: 350px;
height: 6px;
position:relative;
}
</style>
<div id="content-bot">
<img src="images/content1_top.png" />
</div>
<div id="content-mid">
test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<div id="content-bot">
<img src="images/content1_bottom.png" />
</div>
Now my only question is how can I get this to align centered in the screen.
The overall layout should look like...
[Banner]
[ Nav ]
[1 ][ 2 ]
[ ][ ]
but centered in the screen

194673
12-29-2006, 09:51 AM
Hmmm. I played with it for a bit and figured some stuff out. If I centered the three parts of the content bg, then offset it -210px then it will align. The question I have though, is where in the world did 210 come from? The original size is 350px and I first assumed it would need a -175px because ....
Oh wait, I think I just figured it out. Hmmm 768 / 2 - 150 . It still doesn't make sense after all XD.

Here's my CSS file

body {
font-family: Arial, Helvetica, sans-serif;
}

td {
font-family: Arial, Helvetica, sans-serif;
}

th {
font-family: Arial, Helvetica, sans-serif;
}
#banner {
border: none;
width: 768px;
height: 150px;
position: relative;
top: 0;
left: 0;
}
#navigation {
width: 768px;
height: 50px;
position: relative;
top: 5px;
}
#content-top {
width: 350px;
height: 6;
position: relative;
border: none;
left: -210px;
top: -10px;
}
#content-mid {
background:url(images/content1_bg.png);
width: 338px;
position: relative;
padding-left:6px;
padding-right:6px;
left: -210px;
text-align: left;
top: -10px;
}
#content-bot {
width: 350px;
height: 6px;
position:relative;
border: none;
left: -210px;
top: -10px;
}

and here's my php file:

<?php
function generate_header() {
echo '<link rel="stylesheet" type="text/css" href="xttx.css" />
<center>
<div id="banner">
<a href="index.php"><img src="images/banner.png" alt="Home" border="0" /></a>
</div>
<div id="navigation">
<img src="images/nav_whole.png" border="0" usemap="#Nav" />
<map name="Nav" id="Nav"><area shape="rect" coords="150,3,206,24" href="index.php" target="" />
<area shape="rect" coords="220,3,385,24" href="#" />
<area shape="rect" coords="399,3,484,24" href="#" />
<area shape="rect" coords="498,3,571,24" href="#" />
<area shape="rect" coords="588,3,666,24" href="#" />
<area shape="rect" coords="72,26,322,46" href="#" /><area shape="rect" coords="342,26,399,46" href="#" />
<area shape="rect" coords="419,26,494,46" href="#" /><area shape="rect" coords="513,26,594,46" href="#" /><area shape="rect" coords="613,26,751,46" href="#" />
<area shape="rect" coords="1,0,50,50" href="index.php" />
</map>
</div>
</center>';
}
function generate_content($page) {
echo '<center>
<div id="content-top">
<img src="images/content1_top.png" />
</div>
<div id="content-mid">
test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<div id="content-bot">
<img src="images/content1_bottom.png" />
</div>
</center>';
}
?>

I'm satisfied for tonight. I guess I'll continue tomorrow.

Edit: Ahhhh. It looks great in Firefox, but IE is just really messed up. Here's a link to the uploaded page:
http://nvtrackandfield.net/

_Aerospace_Eng_
12-29-2006, 10:25 AM
You are on the right track. No need for the center tags though. IE6 doesn't support transparent 24bit pngs. Its better to make the background color of the pngs match the background color of the page. IE also gets the png colors incorrect causing them to be darker than they should be so you may have to make a png background to match the desired color. Also your banner image is WAY too large. Its coming in at about 200kb. Use the save for web option in Photoshop to optimize your images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>NVHS Men's Track and Field :: Home</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
padding:5px;
background:#006;
}
#container {
width:768px;
margin:auto;
}
#banner {
height: 150px;
margin-bottom:5px;
}
#navigation {
height: 50px;
margin-bottom:5px;
}
#content {
width:350px;
}
#content-top, #content-bot {
display:block;
}
#content-mid {
background:url(images/content1_bg.png);
padding:0 6px;
}
#content p {
padding:5px 0;
text-align:justify;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"> <a href="index.php"><img src="images/banner.png" alt="Home" border="0" /></a> </div>
<div id="navigation"> <img src="images/nav_whole.png" usemap="#Nav" />
<map name="Nav" id="Nav">
<area shape="rect" coords="150,3,206,24" href="index.php" target="" />
<area shape="rect" coords="220,3,385,24" href="#" />
<area shape="rect" coords="399,3,484,24" href="#" />
<area shape="rect" coords="498,3,571,24" href="#" />
<area shape="rect" coords="588,3,666,24" href="#" />
<area shape="rect" coords="72,26,322,46" href="#" />
<area shape="rect" coords="342,26,399,46" href="#" />
<area shape="rect" coords="419,26,494,46" href="#" />
<area shape="rect" coords="513,26,594,46" href="#" />
<area shape="rect" coords="613,26,751,46" href="#" />
<area shape="rect" coords="1,0,50,50" href="index.php" />
</map>
</div>
<div id="content"> <img id="content-top" src="images/content1_top.png" alt="" />
<div id="content-mid">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum enim eget sapien. In molestie mollis ipsum. Curabitur rhoncus nonummy ligula. Morbi dignissim. Mauris sagittis, turpis in blandit nonummy, sapien neque lacinia mi, eget ultricies libero ante in magna. Curabitur turpis sapien, tempor et, pulvinar eget, mollis ut, orci. Cras aliquet mattis pede. Suspendisse blandit. Sed gravida, odio eu euismod fermentum, leo quam vestibulum justo, in dictum tellus dolor vitae augue. Cras fringilla tortor et sem. Etiam mauris. Quisque turpis. </p>
</div>
<img id="content-bot" src="images/content1_bottom.png" alt="" /> </div>
</div>
</body>
</html>

194673
12-29-2006, 11:04 AM
Wow. Very neat code and thanks for the tips. Just a few questions.
1. What part of the code centered everything (is it the margin:auto; )?
2. What's the 'content p { }' for
3. How are you so good:thumbsup:

Arbitrator
12-29-2006, 01:11 PM
1. What part of the code centered everything (is it the margin:auto; )?Together, margin-left: auto and margin-right: auto are used to center block‐level elements such as divs and paragraphs. Since setting the top and bottom margins to auto doesn’t do anything, he simply set all of the margin properties at once to get the same effect.

Note that your page must have a document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html) for it to work in Internet Explorer. This (http://hsivonen.iki.fi/doctype/) explains why. But then you should already have one for proper coding anyway.

2. What's the 'content p { }' forHe used a decendent selector (http://www.w3.org/TR/CSS21/selector.html#descendant-selectors) (a space) to select all paragraph elements that are descendents of (i.e., inside of) the *#content element.

_Aerospace_Eng_
12-29-2006, 06:08 PM
Hmm in your page you have your <link> tag in your body. It should go within your head tags. Also no need for bgcolor on the body tag. Its set in the stylesheet. I also noticed you used a <br> tag here

</map>
</div><br>
<div id="content">
Why? If you want more space below the navigation then increase the bottom margin here

#navigation {
height: 50px;
margin-bottom:5px; /*increase this margin*/
}
Get rid of that <br> tag, its uneccessary.

194673
12-30-2006, 12:53 AM
Thanks a lot guys. I just tried putting in a second content box, but to no avail. Just can't figure out how to place this unless I use absolute positioning. It's supposed to be 5 px to the right of the first content box.
CSS

* {
margin:0;
padding:0;
border:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
padding:6px;
background:#006;
}
#container {
width:768px;
margin:auto;
}
#banner {
height: 150px;
margin-bottom:5px;
}
#navigation {
height: 50px;
margin-bottom:5px;
}
#content {
width: 750px;
display: block;
}
#content1 {
width:350px;
}
#content1-top, #content1-bot {
display:block;
}
#content1-mid {
background:url(images/content1_bg.jpg);
padding:0 6px;
}
#content1 p {
padding:6px 0;
text-align:justify;
}
#content2 {
width:413px;
left: 5px;
position: relative;
left: 355px;
top: 0;
}
#content2-top, #content2-bot {
display:block;
left: 5px;
}
#content2-mid {
background:url(images/content2_bg.jpg);
padding:0 6px;
left: 5px;
}
#content2 p {
padding:6px 0;
text-align:justify;
}
HTML:

<div id="container">

<div id="banner">
<a href="index.php"><img src="images/banner.jpg" alt="Home" border="0" /></a>
</div>
<div id="navigation"> <img src="images/nav_whole.jpg" usemap="#Nav" />
<map name="Nav" id="Nav">
<area shape="rect" coords="150,3,206,24" href="index.php" />
<area shape="rect" coords="220,3,385,24" href="#" />
<area shape="rect" coords="399,3,484,24" href="#" />
<area shape="rect" coords="498,3,571,24" href="#" />

<area shape="rect" coords="588,3,666,24" href="#" />
<area shape="rect" coords="72,26,322,46" href="#" />
<area shape="rect" coords="342,26,399,46" href="#" />
<area shape="rect" coords="419,26,494,46" href="#" />
<area shape="rect" coords="513,26,594,46" href="#" />
<area shape="rect" coords="613,26,751,46" href="#" />
<area shape="rect" coords="1,0,50,50" href="index.php" />
</map>
</div>

<div id="content">
<div id="content1">
<img id="content1-top" src="images/content1_top.jpg" alt="" />
<div id="content1-mid">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum enim eget sapien. In molestie mollis ipsum. Curabitur rhoncus nonummy ligula. Morbi dignissim. Mauris sagittis, turpis in blandit nonummy, sapien neque lacinia mi, eget ultricies libero ante in magna. Curabitur turpis sapien, tempor et, pulvinar eget, mollis ut, orci. Cras aliquet mattis pede. Suspendisse blandit. Sed gravida, odio eu euismod fermentum, leo quam vestibulum justo, in dictum tellus dolor vitae augue. Cras fringilla tortor et sem. Etiam mauris. Quisque turpis. </p>
</div>
<img id="content1-bot" src="images/content1_bot.jpg" alt="" /> </div>
</div>

<div id="content2">
<img id="content2-top" src="images/content2_top.jpg" alt="" />
<div id="content2-mid">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum enim eget sapien. In molestie mollis ipsum. Curabitur rhoncus nonummy ligula. Morbi dignissim. Mauris sagittis, turpis in blandit nonummy, sapien neque lacinia mi, eget ultricies libero ante in magna. Curabitur turpis sapien, tempor et, pulvinar eget, mollis ut, orci. Cras aliquet mattis pede. Suspendisse blandit. Sed gravida, odio eu euismod fermentum, leo quam vestibulum justo, in dictum tellus dolor vitae augue. Cras fringilla tortor et sem. Etiam mauris. Quisque turpis. </p>
</div>
<img id="content2-bot" src="images/content2_bot.jpg" alt="" /> </div>
</div>
</div>

Also, while I'm at it, does anybody know a good way to use PHP to grab HTML formatted text from another file and display it in one of these content boxes?

_Aerospace_Eng_
12-30-2006, 03:13 AM
You need to use the CSS float property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>NVHS Men's Track and Field :: Home</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
padding:6px;
background:#006;
}
#container {
width:768px;
margin:auto;
}
#banner {
height: 150px;
margin-bottom:5px;
}
#navigation {
height: 50px;
margin-bottom:5px;
}
#content {
width:350px;
float:left;
}
.content-image {
display:block;
}
#content-mid {
background:url(images/content1_bg.jpg);
padding:0 6px;
}
#content p {
padding:5px 0;
text-align:justify;
}
#content2 {
width:413px;
float:left;
margin-left:5px;
display:inline; /* this fixes an IE6 double margin bug*/
}
#content2-mid {
background:url(images/content2_bg.jpg);
padding:0 6px;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"> <a href="index.php"><img src="images/banner.jpg" alt="Home" border="0" /></a> </div>
<div id="navigation"> <img src="images/nav_whole.jpg" usemap="#Nav" />
<map name="Nav" id="Nav">
<area shape="rect" coords="150,3,206,24" href="index.php" />
<area shape="rect" coords="220,3,385,24" href="#" />
<area shape="rect" coords="399,3,484,24" href="#" />
<area shape="rect" coords="498,3,571,24" href="#" />
<area shape="rect" coords="588,3,666,24" href="#" />
<area shape="rect" coords="72,26,322,46" href="#" />
<area shape="rect" coords="342,26,399,46" href="#" />
<area shape="rect" coords="419,26,494,46" href="#" />
<area shape="rect" coords="513,26,594,46" href="#" />
<area shape="rect" coords="613,26,751,46" href="#" />
<area shape="rect" coords="1,0,50,50" href="index.php" />
</map>
</div>
<div id="content"> <img class="content-image" src="images/content1_top.jpg" alt="" />
<div id="content-mid">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum enim eget sapien. In molestie mollis ipsum. Curabitur rhoncus nonummy ligula. Morbi dignissim. Mauris sagittis, turpis in blandit nonummy, sapien neque lacinia mi, eget ultricies libero ante in magna. Curabitur turpis sapien, tempor et, pulvinar eget, mollis ut, orci. Cras aliquet mattis pede. Suspendisse blandit. Sed gravida, odio eu euismod fermentum, leo quam vestibulum justo, in dictum tellus dolor vitae augue. Cras fringilla tortor et sem. Etiam mauris. Quisque turpis. </p>
</div>
<img class="content-image" src="images/content1_bot.jpg" alt="" /> </div>
<div id="content2"> <img class="content-image" src="images/content2_top.jpg" alt="" />
<div id="content2-mid">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dictum enim eget sapien. In molestie mollis ipsum. Curabitur rhoncus nonummy ligula. Morbi dignissim. Mauris sagittis, turpis in blandit nonummy, sapien neque lacinia mi, eget ultricies libero ante in magna. Curabitur turpis sapien, tempor et, pulvinar eget, mollis ut, orci. Cras aliquet mattis pede. Suspendisse blandit. Sed gravida, odio eu euismod fermentum, leo quam vestibulum justo, in dictum tellus dolor vitae augue. Cras fringilla tortor et sem. Etiam mauris. Quisque turpis. </p>
</div>
<img class="content-image" src="images/content2_bot.jpg" alt="" /> </div>
<div class="clear">&nbsp;</div> <!-- because we floated the content we need to clear it telling the browser that there still is content-->
</div>
</body>
</html>

As for including html formatted text, just use php includes like you've been doing. php can be used anywhere in a document unless you are sending headers, those need to be done before any output to the browser. I've been wonding why you've been calling functions that generate html. Why not just make a seperate html or php file and use the php include() function?

194673
12-30-2006, 03:36 AM
Once again, thanks a great deal. I suppose I'll have to relearn PHP and CSS (haven't used them in a long long time.) Didn't realize until about 1 hour ago, that I could use include() to call up an HTML file; however, I was planning on needing to use PHP because I am going to have to input what page they selected and then output the correct data. Now I just have to figure out how to code a content management script.

Also, just another question. My coach is going to use word to edit the called html files, but word adds A LOT of unnecessary tags and such. Is there a way to get rid of their tags automatically? I'm thinking string manipulation, but it could be really annoying figuring out all of the tags used.

_Aerospace_Eng_
12-30-2006, 03:40 AM
Seems like you'll be needing tinyMCE. I don't recommend allowing your coach to edit the content in word. Have him use the cms. Give him a WYSIWYG editor.
http://tinymce.moxiecode.com/ should do the job.

194673
12-30-2006, 05:08 AM
I installed tinyMCE and it seems to be useful. The only problem I see is that it is editable to anybody. Do you think I should create a password inquiry?
Edit: It also left a big white textarea in my content box XD. This might be more work than it's worth.

_Aerospace_Eng_
12-30-2006, 09:44 PM
Its not a full cms you will still need to make the password protected area. You didn't setup it up correctly. You are supposed to make a password protected page with TinyMCE on it. Have the information there submit to a text file and include that text file where your content is at.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum