Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

What's the difference?!


  • Please log in to reply

#1
goddessxx

goddessxx

    New Member

  • Member
  • Pip
  • 5 posts
I really want to know the difference between the followings when it comes to layout:

Iframes
Tables
Div

Are there major coding differences too :) ? Any example sites would be welcome.

This is a current link to my page (click on About under Webmistress to see my problem). Current Site

Any help would be appreciated.

{EDIT}
Thanks guys you've been great. One more question :tazz: can I put the following code in a document that ends in css (it's the layout code)?

<table width=780 border=0 cellpadding=0 cellspacing=0 align="right">
<tr>
<td>
<img alt="" src="images/image_01.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_02.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_03.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_04.jpg" width=195 height=200></td>
</tr>
<tr>
<td>
<img alt="" src="images/image_05.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_06.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_07.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_08.jpg" width=195 height=200></td>
</tr>
<tr>
<td>
<img alt="" src="images/image_09.jpg" width=195 height=200></td>
<td>
<img alt="" src="images/image_10.jpg" width=195 height=200 border=0 usemap="#image_10_Map"></td>
<td>
<img alt="" src="images/image_11.jpg" width=195 height=200 border=0 usemap="#image_11_Map"></td>
<td>
<img alt="" src="images/image_12.jpg" width=195 height=200></td>
</tr>
</table>
<map name="image_10_Map">
<area shape="rect" alt="Design by Aethereality.net" coords="86,7,195,21" href="http://aethereality.net" target="_blank">
</map>
<map name="image_11_Map">
<area shape="rect" alt="Design by Aethereality.net" coords="0,7,104,21" href="http://aethereality.net" target="_blank">
</map>

Oh...sorry, one more thing, why do some people have multiple LINK REL links in the beginning of their code? I thought you could put everything in to one .css document?

Edited by goddessxx, 25 August 2005 - 12:55 PM.

  • 0

Advertisements


#2
lilhawk2892

lilhawk2892

    Member

  • Member
  • PipPipPip
  • 128 posts
ok well from wut i know iframe is like a shoutbox it never changes a table is something that u would usually use for imformation if im able to use html ill show you


<table border = 1><tr><td>this is a table i mean hello world</td></tr></table>




test that out and yull know and i never learned wut a div is sorry

ps why do i keep seeing these anime sites

Edited by lilhawk2892, 24 August 2005 - 11:18 PM.

  • 0

#3
NullWolf

NullWolf

    Member

  • Member
  • PipPipPip
  • 225 posts
If you're using the same format / colors etc for every page, set it in a CSS file.
the <div> is where you can call your CSS settings.
Lets say I want to set my main text area to have a blue background and red text thats bold... The CSS would look like this (this is in a CSS file)
#main
{
background-color: blue;
color: red;
font-style: bold;
}

Then in the HTML, I'd do:
<div id="main">
This area would have a blue background and all the text would be BOLD red.
</div>

Of course, some things are missing, I didn't specify WHERE #main is located or what size it is...

Heres a good place to start: W3C Schools CSS Reference

Link to my page is at the bottom, here's the CSS code (its a file called "index.css"):
body	{
	background: #000000;
	color: #ffffff;
	}
#header {
	position: absolute;
	width: 400;
	height: 100;
	top: 0;
	right: auto;
	left: 200;
	z-index: 1;
	}
#serv	{
	position: absolute;
	width: 100;
	height: auto;
	top: 40;
	right: auto;
	bottom: auto;
	left: 0;
	z-index: 2;
	}
#cost	{
	position: absolute;
	width: 100;
	height: auto;
	top: 40;
	right: auto;
	bottom: auto;
	left: 100;
	z-index: 2;
	}
#discl	{
	position: absolute;
	width: 200;
	height: auto;
	top: 345;
	right: auto;
	bottom: auto;
	left: 0;
	z-index: 2;
	}
#main	{
        position: absolute;
        width: 465;
        height: 415;
        top: 115;
        right: auto;
        bottom: auto;
        left: 200;
	z-index: 3;
	}
#mobi	{
	position: absolute;
	width: 465;
	height: auto;
	top: 470;
	right: auto;
	left: 200;
	word-wrap: break-word;
	color: orange;
	z-index:1;

And here's the index.html:
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
  <title>
   Robert Booth, Computer Technician
  </title>
 </head>
 <body>
  <div id="header">
   <img src="./images/rwb-header.png" id="banner" alt="Robert Booth" />
  </div>
  <div id="serv">
   <center><b><font color="orange">Services</font></b></center>
   <font color="lime">Computer</font>
   <ul>
    <li>Setup</li>
    <li>Upgrade</li>
    <li>Repair</li>
   </ul>
   <font color="yellow">Network</font>
   <ul>
    <li>Setup</li>
    <li>Troubleshoot</li>
   </ul>
   <font color="red">Virus</font>
   <ul>
    <li>Removal</li>
    <li>Protection<sup>***</sup></li>
   </ul>
  </div>
  <div id="cost">
   <center><b><font color="orange">Cost</font></b>*</center>
   <br />
   <ul>
    <li>$20</li>
    <li>$25</li>
    <li>$30</li>
   </ul>
   <br />
   <ul>
    <li>$25</li>
    <li>$35</li>
   </ul>
   <br />
   <ul>
    <li>$30</li>
    <li><font color="red"><b>FREE</b><sup>**</sup></font></li>
   </ul>
  </div>
  <div id="discl">
   <sup>
    * Cost does not include parts.<br />
    ** When included with another service.<br />
    *** Protection includes installation / setup of FREE antivirus / spyware programs including:
    <ul>
     <li><a href="http://www.grisoft.com/">AVG Antivirus</a></li>
     <li><a href="http://www.safer-networking.org/">Spybot Search &amp Destroy</a></li>
     <li><a href="http://www.lavasoftusa.com/software/adaware/">AdAware Personal SE</a></li>
     <li><a href="http://www.javacoolsoftware.com/spywareblaster.html">Spywareblaster</a></li>
     <li><a href="http://www.javacoolsoftware.com/spywareguard.html">Spyware Guard</a></li>
     <li><a href="http://www.zonelabs.com/">ZoneAlarm</a></li>
    </ul>
   </sup>
  </div>
  <div id="main">
   <img src="./images/map1.gif" border="0" alt="Map, Pottsboro, TX" id="map" />
  </div>
  <div id="mobi">
   If you live inside the <font color="lime">green</font> area on the map above, and need help with your computer, give me a call or send me an <a href="mailto:booth-comp@sbcglobal.net" id="mail">e-mail</a>.<br />
   I'll come to your home or business.<br />
   And remember: <b><font color="red">If I don't fix it, you don't pay!</font></b>
  </div>
 </body>
</html>

:tazz: Hope this helps a little...
Google: css reference
Google: css tutorial
  • 0

#4
Chexee

Chexee

    Member

  • Member
  • PipPip
  • 90 posts
You can only put CSS code into CSS files.

<link rel> calls the CSS file and inserts it above your HTML.

HTML and CSS are separate.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP