HTML - Best Way To Layout A Html Page?

Hi,

I'm in the middle of developing a infosite to work alongside our retail site. The infosite is going to maintain the basic layout of our current site (www.muddypuddles.com) with Header, footer, left menus and right buttons, which move with the size of the page. However the primary content in the middle of the page is going to become articles, etc. On our front page I'm going with a single horizantal box around 250px in height and I want the size of the box to expand depending on the resoultion of the page. Below that I am placing 2 vertical boxes side by side which I also want to expand depending on resolution. I think this is most likely CSS related, but can someone please advise me on how to float these boxes into position first of all, and then what is required to make these boxes expand with the screen size.

Thanks in advance

I'm quite new to the world of HTML and actually know very little about this stuff. I'm trying to do a web page for my friends company but I'm stuck.
I have made my body and "menu" parts to expand according to the text I enter but it screws my layout up Maybe some one could take a look and say what I have done wrong. For me it looks like body and menus are dependent from each other, if I enter text to menu1, body and menu2 also rescale themselves...

Here is the link to the problem, you can see what I want by clicking on the link "Picture of the design I want"

I'm trying to make a layout that takes up 100% of the page, but isn't fixed. So it moves whenever the browser is resized.

However I can't get the code to work for the footer and the two inner divs.



Is how I want it to look like.

The white and light gray and the two content boxes.
The black are the header and footer which need to be at the absolute top and bottom, respectively.
The dark gray are both static images. The bottom dark gray one needs to be positioned at the same place as the footer background.
The red are both content boxes that need to be centered in the middle of the light gray div and the white div.
And lastly the blue is an image that needs to stay static right next to the light gray div.




Anyone know how I would go about coding it? Or if anyone is willing to code me a simple block template I'd really appreciate it.

Thanks =]

hey guys!
I have a strange problem and I have no idea even what to ask google to find a solution... I'm writeing a simple html page. I have one outside div and everithing must be inside of it. I created some green and yellow borders just to see if layout works fine...

The problem: There is some text in the main section. You can see it HERE.
But if I add some text to that same middle div inside the table, than the table jums outside of its containing div. Check out HERE.

The main(middle) div has overflow property set to "-moz-scrollbars-vertical;". So it should not make bigger div, but just bigger vertical scroll. The table height property is set to 100%.

Any ideas???
_________________________________________________________________
You can also download the whole page via this LINK.

I was wondering how I can go about making a single HTML page that all my pages reference to place menus and pictures. The only thing I want to change is content in the middle portion of the page but I don't want to use frames.

I have a css already made and that works wonderfully it's just a bit tedious to go through and edit each html document individually every time I change something on the menu's or pictures. As far as I can tell I can't do that in the CSS (place the HTML code directly I mean for divs and such). Any help is greatly appreciated.

I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please?

Please tell me how I can get the login to sit directly under the menu on the following site:
http://www.smilescanning.com/default.asp
By the way, I am using ssi so I can't put the login into the menu div because the menu shows up on all pages and I just want the login to show up on the default page.

Thanks~

got a very basic page as this stuff is super new to me, not sure where to put or ask about this ...

when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know

-->loaded page up temporarily

http://www.legendofthegknight.com/test/index.html

I recently updated my homepage to include more text, and moved some of the image buttons around. I noticed however, that if I view the site and increase the size of the font (control+mouse wheel) it also increases the amount of spacing between the buttons, enough to move one of the images to the next row.

Is there any way to stop these images from moving?

The site is he http://www.bacchanalpromotions.com

The current code is written like this, I think the margin tags are what gets increased when the font size goes up, but I don't know for sure... I tested on Firefox 3.6, at 1400x900 resolution.

Code:

<a href="booking.php?page=thss"><img height="100px" width="123px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a>
<a style="margin-left:13px" href="booking.php?page=fire"><img height="100px" width="123px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a>
<a style="margin-left:13px" href="booking.php?page=sideshow"><img height="100px" width="123px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'"alt="" /></a>
<a style="margin-left:13px" href="booking.php?page=stilts"><img height="100px" width="123px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'" alt="" /></a>

While I was searching for an HTML forum to join, I came across a statement in another forum that said using tables to layout a web page is incorrect -- even stupid. Is this true? I have been reading a book entitled "HTML, XHTML, and CSS Bible" which devotes an entire chapter (chapter 11) to "Page Layout with Tables" and continually refers to page layout within Tables and Nested Tables. This is the method that I have been using to create my first web pages. Do I need to re-think this and change the way I layout my pages? Please enlighten me...

Thanks,
JFB

I need to find all erors in this page, it is for a school teacher and it needs to work properly, the title and stuff will be posted here, all and any corenctions are welcome : )



Code:

<!--
start border and main background
-->
<HTML>
<div style="border-left:120px solid #000000;border-right:120px solid #000000;with:100%;height:100%;">
<title>Mr. Rodgers Website</title>
<BODY background="BG.jpg" style="margin:0px;">
<!--
end border and main background
-->
<!--
Static BG image
-->
<head>
<style type="text/css">
body 
{
background-image: 
url('BG.jpg');
background-repeat: 
no-repeat;
background-attachment: 
fixed
}
</style>
</head>
<!--
done static images
-->
<!--
nav bar and head
-->
<style type="text/css">
h2 {background-color: black}
</style>
<h2 align="center"><font size="4" face="times" color="white">
<font size="6">Welcome To Mr Rodgers Website</Font>
<BR>
| <A HREF="index.html">Home</A> | <A HREF="Projects.html">Projects</A> | <A HREF="skdl.html">
schedule</A> | <A HREF="Extracredit.html">Extra Credit</A> | <A HREF="wksts.html">Worksheets
</A> | <A HREF="links.html">Links</A><BR></H2><BR>
<BR>
<!--
end navbar and head
-->

Man, I am trying to continue to work in divs instead of tables and it just keeps getting more frustrating. IE6, IE7, Firefox, different screen sizes, different screen resolutions. Can someone please help me write code that is as cross-browser/resolution/screen size capable as possible?

Much appreciated~

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