HTML - Html Layout File

In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites.

I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell.

which idea is better and which is better design that allows future extensibility?

cheers

I'm having so much trouble with this. I have a site (from photoshop) that will have have fluid layout (100% width) but I want the footer to "stick" to the bottom of the window (unless content goes longer).

Here is content part of the html (which is a bit messed up now from trying many things)


<div id=container>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr></tr>
<tr>
<td height="235" bgcolor="#FFFFFF">&nbsp;</td>
<td width="1000" rowspan="5" valign="top"><!-- ImageReady Slices (screencapture3.psd) -->
<table width="1002" height="400" border="0" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td height="58" colspan="9"><img src="images/rightthere_01.jpg" width="417" height="58" alt="" /></td>
<td colspan="10"><img src="images/screencapture2_01.jpg" width="583" height="58" alt="" /></td>
</tr>
<tr>
<td colspan="9"><img src="images/rightthere_logo.jpg" alt="" width="417" height="76" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/seniors.jpg" alt="" width="140" height="177" border="0" /></td>
<td width="139" rowspan="2"><img src="images/caregivers.jpg" alt="" width="139" height="177" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/physicians.jpg" alt="" width="142" height="177" border="0" /></td>
<td colspan="3" rowspan="2"><img src="images/disabilities.jpg" alt="" width="162" height="177" border="0" align="top" /></td>
</tr>
<tr>
<td height="101" colspan="9"><img src="images/inhome_tagline.jpg" alt="" width="417" height="101" border="0" /></td>
</tr>
<tr>
<td colspan="19" bgcolor="#69781B"><img src="images/nav_top.jpg" width="1000" height="51" alt="" /></td>
</tr>
<div id:navigation></div>
<td width="59"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image44','','images/about_ro.jpg',1)"><img src="images/about.jpg" name="Image44" border="0" id="Image44" /></a></td>
<td width="15"><img src="images/div1.jpg" width="15" height="17" alt="" /></td>
<td width="144"><a href="why.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image45','','images/why_ro.jpg',1)"><img src="images/why.jpg" name="Image45" width="144" height="17" border="0" id="Image45" /></a></td>
<td width="17"><img src="images/div2.jpg" width="17" height="17" alt="" /></td>
<td width="114"><a href="what.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image46','','images/what.jpg',1)"><img src="images/what.jpg" name="Image46" width="114" height="17" border="0" id="Image46" /></a></td>
<td width="17"><img src="images/div3.jpg" width="17" height="17" alt="" /></td>
<td colspan="4" bgcolor="#8B9849"><a href="who.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/who_ro.jpg',1)"><img src="images/who.jpg" name="Image43" width="127" height="17" border="0" id="Image43" /></a></td>
<td width="16"><img src="images/div4.jpg" alt="" width="16" height="17" align="left" /></td>
<td colspan="3"><a href="consider.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image47','','images/consider_ro.jpg',1)"><img src="images/consider.jpg" name="Image47" width="195" height="17" border="0" id="Image47" /></a></td>
<td width="19"><img src="images/div5.jpg" width="19" height="17" alt="" /></td>
<td colspan="2"><a href="careers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image48','','images/careers_ro.jpg',1)"><img src="images/careers.jpg" name="Image48" width="188" height="17" border="0" id="Image48" /></a></td>
<td width="19"><img src="images/div6.jpg" width="19" height="17" alt="" /></td>
<td width="70"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image49','','images/contact_ro.jpg',1)"><img src="images/contact.jpg" name="Image49" width="70" height="17" border="0" id="Image49" /></a></td>
</tr>
<tr>
<td colspan="19" bgcolor="#6A791C"><img src="images/nav_bot.jpg" width="1000" height="42" alt="" /></td>
</tr>
<tr></tr>
<tr>
<td colspan="7"><div id=leftcontent>&nbsp;
<h4>Left Content</h4>
</div></td>
<td width="4">&nbsp;</td>
<div id=maincontent>
<td colspan="11"><h1>Main Content</h1></td>
</div>
</tr>
<tr>
<td><img src="images/spacer.gif" width="59" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="15" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="144" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="114" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td width="42"><img src="images/spacer.gif" width="42" height="1" alt="" /></td>
<td width="76"><img src="images/spacer.gif" width="76" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="16" height="1" alt="" /></td>
<td width="48"><img src="images/spacer.gif" width="48" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="139" height="1" alt="" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td width="115"><img src="images/spacer.gif" width="115" height="1" alt="" /></td>
<td width="73"><img src="images/spacer.gif" width="73" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="70" height="1" alt="" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="110" bgcolor="#869343">&nbsp;</td>
<td height="110" bgcolor="#6A791C">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</tr>
</div>
<div id= "footer">

<td width="100%" height="79" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<td width="0%" bgcolor="#859242">&nbsp;</td>
<td width="1000" bgcolor="#697819"><img src="images/footer.jpg" alt="" height="79" /></td>
<td width="26%" bgcolor="#697819">&nbsp;</td>
</tr></table>
</div></tr></tr></body>
</html>


and my css

p { color: #6a6a6a; font-size: 15px; line-height: 20px; font-family: georgia, "Lucida Grande", Verdana, Arial ; top: 0; margin-top: 0; }
h1 { color: #667824; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; }
h4 { color: #4d4f53; font-size: 30px; font-family: verdana ; font-weight: bold; line-height: 30px; top: 0; margin-top: 0; }
h2 { color: #667824; font-size: 20px; font-family: Arial, Verdana }
h3 { color: #fff; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; }
ul { color: #667824; font-weight: bold; font-size: 12px; font-family: verdana, Arial ; line-height: 14px; }
h5 { color: #4d4f53; font-size: 10px; font-family: "Lucida Grande", Verdana, Arial ; font-weight: normal; font-style: normal; }
A:link {text-decoration: none; color: 667824}
A:visited {text-decoration: none; color: B71234}
A:active {text-decoration: none}
A:hover {
color: B7CEC4;
text-decoration: none;
}


html, body {
margin:0;
height: 100%;
width: 100%
}

body >#container {
margin:0;
padding:0;
height:auto;
min-height:100%;
position:relative;

}


#clearfooter {overflow:auto;
padding-bottom: 79px;}


#maincontent {
float:left;
min-width: 100px;
}

#leftcontent {
min-width: 50px;
}
#left{
left: -1;
right: 0;
min-width: 100px;
max-width: 200px;
min-height: 235px;
}

#centerleft{
left: -1;
right: 0;
min-width: 172px;
max-width: 200px;
min-height:100px;
}

#right {
position:relative;/*ie needs this to show float */
min-width:1px;
max-width:200px;
float:right;
}
#footer {
width:100%;
text-align:center;
position:relative;
margin:0;
height:79px;
clear:both;

}
#navigation {
max-width: 1000px;
vertical-align; top;
text-align: left;
}


table {
border-collapse: collapse;
}




please help.

Hello,

My website needs a fresh-over, so I decided to fix everything up to the XHTML 1.0 Standard. While doing that, I've also been trashing some of the old layouts and trying to make my website more clear & surmountable, both for the search engines & the surfing user.

When working on the links page, I ran into problems though. The table and images simply didn't do the same I wanted them to do, and I've been trying several re-designs to make things alright again. Here is what I've got until now (Image Removed):

(A) The content on the website, is not taking 100% width & height. If I use 100% & 100% height on the page, I'll just get this.

(B] The table needs the same width as the body (100%). But I am still unable to use neither width or height, as it looks like they don't really do any matters in this case.

There must be a bug somewhere inside the HTML or CSS Code, that makes this page very hard to give layout. I just cannot find it myself, so I am asking for your help. It can be because I am using a wrong attribute or tag to create the layout of my website, but I am sure that you got more knowledge on that area, than I.

You can see the webpage yourself by clicking on the below URL:
Link Removed

Thank you,

Urnemanden

I just finished writting an HTML email. All looked fine when it was in the browser then I tested it in my email client and all the layout is wrong.

my </BR> dont seem to have any affect also im not sure why only some of the &nbsp are being shown and not displayed as spaces (??)

Heres the code :

Code:

Content-Type: text/html; charset=us-ascii
Content-Transfer-Encoding: 7bit
MIME-Version: 1.0

<html>
<style type="text/css">
  body {
    font-family:verdana;
    font-size:90%;
    line-height:160%;
    }

  table.mainsection  {
          background-color:#838B8B;
          width:50%;
          color:white;
          text-align:left;
          font-size:99%;
          padding:1px;
          margin-top:5px;
           }

  table.subsection {
          background-color:#B7C3D0;
           color:white;
          width:49%;
          color:white;
          text-align:left;
          font-size:88%;
          margin-left:14px;
          margin-top:5px;
          padding:1px;
          }
</style>

<body>
<img src="http://graphics.adaptec.com/us/templates/head_logo.gif" />
<p>
<table class=mainsection >
</tr>
<th>Logical device information</th>
<tr>
</table>
Logical device number 0</br>
&nbsp&nbsp&nbspLogical device name                      : RAID1Mirror</br>
&nbsp&nbsp&nbspRAID level                               : 1</br>
&nbsp&nbsp&nbspStatus of logical device                 : Optimal</br>
&nbsp&nbsp&nbspSize                                     : 476150 MB</br>
&nbsp&nbsp&nbspRead-cache mode                          : Enabled</br>
&nbsp&nbsp&nbspWrite-cache mode                         : Enabled (write-back)</br>
&nbsp&nbsp&nbspWrite-cache setting                      : Enabled (write-back)</br>
&nbsp&nbsp&nbspPartitioned                              : No</br>
&nbsp&nbsp&nbspProtected by Hot-Spare                   : No</br>
&nbsp&nbsp&nbspBootable                                 : Yes</br>
&nbsp&nbsp&nbspFailed stripes                           : No</br>
<table class=subsection >
</tr>
<th>Logical device segment information</th>
<tr>
</table>
&nbsp&nbsp&nbspSegment 0                                : Present (0,0) </br>
&nbsp&nbsp&nbspSegment 1                                : Present (0,1) </br>
<table class=mainsection >
</tr>
<th>Physical Device information</th>
<tr>
</table>
&nbsp&nbsp&nbspChannel #0:</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTransfer Speed                        : SATA 3.0 Gb/s</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice #0</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice is a Hard drive</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspState                              : Online</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSupported                          : Yes</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTransfer Speed                     : SATA 3.0 Gb/s</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspReported Channel,Device            : 0,0</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVendor                             : ST350032</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspModel                              : 0A</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFirmware                           : SD15</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSize                               : 476940 MB</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspWrite Cache                        : Enabled (write-back)</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFRU                                : None</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspS.M.A.R.T.                         : No</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice #1</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspDevice is a Hard drive</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspState                              : Online</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSupported                          : Yes</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTransfer Speed                     : SATA 3.0 Gb/s</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspReported Channel,Device            : 0,1</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVendor                             : ST350032</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspModel                              : 0A</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFirmware                           : SD15</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSize                               : 476940 MB</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspWrite Cache                        : Enabled (write-back)</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFRU                                : None</br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspS.M.A.R.T.                         : No</br>
<table class=mainsection >
</tr>
<th>Controller information</th>
<tr>
</table>
&nbsp&nbsp&nbspController Status                        : Optimal</br>
&nbsp&nbsp&nbspChannel description                      : SATA</br>
&nbsp&nbsp&nbspController Model                         : Adaptec 2420SA</br>
&nbsp&nbsp&nbspController Serial Number                 : CCEE20</br>
&nbsp&nbsp&nbspPhysical Slot                            : 2</br>
&nbsp&nbsp&nbspInstalled memory                         : 128 MB</br>
&nbsp&nbsp&nbspCopyback                                 : Disabled</br>
&nbsp&nbsp&nbspBackground consistency check             : Disabled</br>
&nbsp&nbsp&nbspAutomatic Failover                       : Enabled</br>
&nbsp&nbsp&nbspDefunct disk drive count                 : 0</br>
&nbsp&nbsp&nbspLogical devices/Failed/Degraded          : 1/0/0</br>
<table class=subsection >
</tr>
<th>Controller Version Information</th>
<tr>
</table>
&nbsp&nbsp&nbspBIOS                                     : 5.2-0 (15611)</br>
&nbsp&nbsp&nbspFirmware                                 : 5.2-0 (15611)</br>
&nbsp&nbsp&nbspDriver                                   : 1.1-5 (2459)</br>
&nbsp&nbsp&nbspBoot Flash                               : 5.2-0 (15611)</br>
<table class=subsection >
</tr>
<th>Controller Battery Information</th>
<tr>
</table>
&nbsp&nbsp&nbspStatus                                   : Not Installed</br>
</p>
</html>

Thanks,

Hi ,I am new in html.Hope you can guide me step-by-step on this.
I want to import my .txt file into the html form and the html form can add new item then to be add in to that particular .txt file too as well. can this be done?
For example:
(fruits.txt)
1.apple
2.banana
3.orange
Can this fruit.txt be impoted to fruit.html page and show it at fruit.html page, at the same time, the fruit html page allow to add in new fruit, and once user add in new fruit, the fruit.txt file will be updated as well.

Thanks for your guidiance and help. :-)

Hey all,

I'm new here, and I love the layout of this website! I like the bright colors!

Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border?

Thank You,
Justin

Hi all, I love the design of this forum.

I have a very annoying HTML problem and really need help. Would REALLY appreciate it.

On some of the pages there's too much space between the table cells. I've tried EVERYTHING and couldn't find the source of the problem. Take it as a challenge and please help... Try this: http://www.canaseed.com/Search.aspx?search=csdc

I've attached a gif file that describes the problem.

Thank you so much for your help...

I have a website where I want to make a drop down menu that will bring you to different pages. It is a very basic, sort of old-fashioned website that relies entirely on html. What I'm trying to do is make a drop-down menu that will be used as navigation for a section of a website and I want to have it in each internally linked page in that section, but I'm going to be adding more pages to it over time so I want to be able to put the drop-down menu code in a separate text file and then substitute it into the pages that I make that the options in the menu link to and then just edit the code in the text file when I add another page so that I don't have to go back and edit the code every single individual page whenever I add a new one among them.

Basically all I'm asking is how I can put html code in a text file and then substitute that code into an html page by referring to the file. Thanks in advance for any help.

Hi guys

I want to add some php files into my frontpage html files, please let me know how to do this. I tried many things but fail. Please guide me.

Thank you

GCS

Hi all!

I've got a very strange problem with a webpage:
If you type http://www.varbanovsoft.com/ images are not correctly displayed but if you type http://www.varbanovsoft.com/index.html they appear!!

Any idea? I'm completely lost ...

Thanks!!
T

Hi all,

I'm working on a project to make my job a little easier. A brief description is that I have to write up case notes and when I am finished with the notes I submit them. What I am looking for is a code so when I hit the submit button on the tool I created, it will create a log file and save my case notes to that log file.

The tool that I created is html based and it's on my local computer. I would also like for it to create the log file on my local computer. Is this possible?

A good example is like a messenger service like msn or yahoo IM. When you are done talking to someone it creates a log file of the conversation. Im looking for something like that but that creates a log when I hit the submit button.

Any ideas?

Best regards,
Kris

How to run a batch file in HTML page?

here is what im trying to do
$File = $subject.html;
but all it is doing is adding what i type in as the subject and then it adds "html" to the end of it... so if the subject was "pizza" it would come out as "pizzahtml" instead of "pizza.html" what am i doing wrong?

I'd like to have a html file where i can pass over the variables from another html file

i.e.
title = "Image 01"
Image = image.jpg
description = "image 01 description test"

then with a link open the html file with this variables.

thanks.