Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Tables Tables Tables

    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:
    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:
    Code:
    <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
    Last edited by 194673; 12-29-2006 at 09:26 AM.

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    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
    Code:
    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:
    Code:
    <?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/
    Last edited by 194673; 12-29-2006 at 09:57 AM.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    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

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by 194673 View Post
    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 for it to work in Internet Explorer. This explains why. But then you should already have one for proper coding anyway.
    Quote Originally Posted by 194673 View Post
    2. What's the 'content p { }' for
    He used a decendent selector (a space) to select all paragraph elements that are descendents of (i.e., inside of) the *#content element.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    				</map>
    			</div><br>
    		<div id="content">
    Why? If you want more space below the navigation then increase the bottom margin here
    Code:
    #navigation {
    height: 50px;
    margin-bottom:5px; /*increase this margin*/
    }
    Get rid of that <br> tag, its uneccessary.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    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
    Code:
    * {
    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:
    Code:
    		<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?

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to use the CSS float property.
    Code:
    <!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?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    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.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    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.
    Last edited by 194673; 12-30-2006 at 05:31 AM.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •