HTML - Problems With Aligning Tables ...

Hi!

I downloaded this script off the net: http://www.htmlforums.com/attachment...1&d=1178321623 (or download attachment) and modded it to my needs.

The only problem is that the orange blob on the top left breaks up (I think due to the way the tables are set up... i'm not sure i'm a BIG NOOB at HTML). This happens ONLY when I have large amounts of content...

To see a live preview of this problem... please visit my website: http://www.netsafehouse.com/

http://www.netsafehouse.com/index.html << This is what the script should look like... it looks fine...

BUT

http://www.netsafehouse.com/Radio.html << It breaks up here.


Please tell me what to do (I'm using dreamweaver)... thanks!!

Hey there,

I have some text in a table that i want to vertically align center, however nothing i try with html or css seems to work. This is my current code atm;

Code:

<table cellpadding="0">
<tr>
<td width="150" height="100" style="vertical-align:middle">
  <img src='portals/default.jpg' >  </td><td style="vertical-align:middle">

    <h3><b><a href="/games/node/2">Welcome to the Halo Portal</a></b></h3><i><div style='font-size:0.9em; line-height: 0.3em;'>Posted by NightFox, on 15/03/09</div></i><br /><div style='line-height: 0.2em'><p>Welcome to the Halo Portal</p>
</div>Halo	<td></tr>
	</table>

I want it all to vertically aligned centrally so that the text will line up with the center of the thumbnail - attached is wat it looks like atm.

If anyone has any ideas please let me know (html, css, or php i don't mind)

Regards

NightFox

Hi,

I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage.

It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7.

I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me.

The website is www.ritzphoto.net/newsite/

css
Code:

body {
	margin: 0px;
	padding: 0px;
	background: #242323;
	text-align: justify;
	font: 13px Arial, Helvetica, sans-serif;
	color: #444444;
}

h1, h2, h3 {
	margin-top: 0px;
	font-weight: normal;
	color: #FFFFFF;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
}

p, ol, ul {
	margin-bottom: 1.8em;
	line-height: 160%;
}

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a img {
	border: none;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	border: 10px solid #FFFFFF;
}

/* Header */

#header {
	width: 900px;
	height: 150px;
	margin: 0px auto;

}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Logo */

#logo {
	float: left;
	padding-left: 20px;
}

#logo h1, #logo p {
	margin: 0px;
	line-height: normal;
	font-weight: normal;
	color: #FFFFFF;
}

#logo h1 {
	padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
	float: right;
}

#menu ul {
	margin: 0px;
	padding: 49px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	margin: 0px;
}

#menu a {
	display: block;
	width: auto;
	padding: 6px 20px;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .active {
	background: #404040;
}

#menu .active a {
	background: url(images/img02.gif) no-repeat 100% -40px;
}

/* AWM */

#awmAnchor-menu {
	width: 900px;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
	margin: 0px auto;

}
/* Page */

#page {
	width: 900px;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
}

#header-pic {
	background: url(images/img05.jpg) no-repeat left top;
	width: 900px;
	height: 210px;
}

/* Content */

#content {
	float: right;
	width: 570px;
}

.post {
	margin: 0px 0px 30px 0px;
}

.post .title {
	margin: 0px;
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
	padding: 0 20px;
}

.post .meta {
	font-weight: bold;
	padding-left: 20px;
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 300px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
	background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
	background: url(images/img01.jpg) repeat-y left top;
}

#sidebar ul {
	padding: 0px 0 5px 0;
	margin: 0px;
	list-style: none;
}

#sidebar li li {
	margin-left: 20px;
	margin-right: 20px;
	line-height: 30px;
	padding-left: 15px;
	border-bottom: 1px dashed #BDBDBD;
	background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
	margin-bottom: 1.8em;
	list-style: none;
}

#sidebar h2 {
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Search */

#search {
}

#search form {
	margin-bottom: 1.8em;
	padding: 0px;
}

#search fieldset {
	margin-left: 20px;
	padding: 0px;
	border: none;
}

#search #s {
	width: 160px;
}

/* Footer */

#footer {
	clear: both;
	width: 900px;
	height: 50px;
	margin: 0px auto 30px auto;
	color: #FFFFFF;
}

#footer p {
	margin: 0px;
	padding: 19px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	font-size: smaller;
}

#footer a {
	color: #FFFFFF;
}

Cheers,

Dave

Hi all, what is the best method to align sets of labels, drop down lists, text input fields, images, and buttons with html? The file I attached is how I would like it to be formatted. I achieved this using tables, but had to play around with alignments and pixel adjustment for a really long time before they were just right.

For reference, here is how I coded it:
Code:

	<table style="width:768" cellpadding="0" cellspacing="0">
		<td style="width:142" align="right">
			<label for="county">* County :&nbsp;</label>
		</td>
		<td style="width:192" align="left">
			<select name="county" id="county" class="ListBox">
				<option selected>BEAUFORT</option>
				<option>HYDE</option>	
				<option>MARTIN</option>
				<option>TYRELL</option>
				<option>WASHINGTON</option>
			</select>
		</td>
		<td style="width:40"></td>
		<td style="width:100" align="right">
			<label for="caseOpened">* Case Opened :&nbsp;</label>
		</td>
		<td style="width:172" align="left">
			<input type="text" size="10" maxlength="10" name="caseOpened" id="caseOpened"> mm/dd/yyyy&nbsp;
		</td>
		<td style="width:22" align="left">
			&nbsp;&nbsp;<a href="#"><img src="images/calendar.gif" width="16" height="16" vspace="0" border="0" alt="Calender"></a>
		</td>
		<td style="width:100">
			<input type="button" class="button" name="today" value="Today" onClick="setTodaysDate(caseOpened)">
		</td>
	</table><br>
<table style="width:768" cellpadding="0" cellspacing="0">
	<td style="width:142" align="right">
		<label for="localNumber">Local Number :&nbsp;</label>
	</td>
	<td style="width:192" align="left">
		<input type="text" size="20" maxlength="15" name="localNumber" id="localNumber">
	</td>
	<td style="width:40"></td>
	<td style="width:100" align="right">
		<label for="caseNumber">* Case Number :&nbsp;</label>
	</td>
	<td style="width:294" align="left">
		<input type="text" size="11" maxlength="11" name="caseNumber" id="caseNumber">
	</td>
</table><br>

I'm definitely new to html, and had heaps of trouble getting the tables to display properly. Surely there must be an easier method. Also, is there a way to make static html pages resize themselves accordingly in respect to your browser size? Appreciate all the help in advance

Hello there i have just created a simple website using div tags as layers to position link elements on the page. I have 2 pages the first page has an image link that takes the user to the second page and the image link has been aligned in a div tag to position it onto the screen. When i test the first page in most browsers the aligning seems to be perfect and is aligning well in all browsers.

The problem im facing is on the second page, i have done exactly the same procedure to align a form element and an image link but when published and previewed in safari it is aligned perfectly but in most other browsers the div aligning for the form and the image link are not aligned at all. i cant figure out this problem because the first page is done exactly the same way and that works in all browsers, could someone please please have a look for me its probably something really simple but i cant see it. Below is the source code for both page 1 with the aligning in all browsers image link, and the second page the one that needs to be positioned correctly in all browsers:

(PAGE 1 THE IMAGE LINK ON THIS PAGE ALIGNS CORRECTLY IN ALL BROWSERS AND IS FIN)

<HTML>
<HEAD>
<TITLE>HARMONIC WEBSITE p1guides</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

</HEAD>

<BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >

<div align="center">


<div style="background-image:url('Background.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;">



<div style="z-index: 1; align: right; padding-top: 517px; padding-left: 273px;>

<a href="index.html></a> <a href="page2.html"><IMG SRC="images/index_19.jpg" BORDER=0 WIDTH=219 HEIGHT=44 ALT=""></a>

</div>



</div>


</div>


</BODY>
</HTML>



(PAGE 2 THE FORM AND IMAGE LINKS ARE POSITIONED EXACTLY THE SAME AS PAGE 1 BUT APPEAR TO BE OUT OF POSITION IN DIFFERENT BROWSERS?)



<HTML>
<HEAD>
<TITLE>HARMONIC WEBSITE p2guides</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (HARMONIC WEBSITE p2guides.psd) -->

<BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >

<div align="center">


<div style="background-image:url('Backgroundp2.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;">






<div style="z-index: 1; padding-top: 260px; padding-left: 700px;>




<TABLE WIDTH=328 BORDER=0 CELLPADDING=0 CELLSPACING=0 >

<TD IMG SRC="form background.jpg" WIDTH=328 HEIGHT=248 BORDER=1 ALIGN="LEFT">



<form action="mailto:YOUR EMAIL ADDRESS" method="post" enctype="text/plain" border=0 >
<br>
<input type="text" name="name"
value="" size="30">
<br><br>


<input type="text" name="Position/primary specialty"
value="" size="30">
<br><br>
<input type="text" name="Number of patients treated"
value="" size="5">
<br><br>

<input type="text" name="Hospital"
value="" size="30">
<br><br>

<input type="text" name="Email address"
value="" size="25">
<br><br>

<a href="page3.html">
<input type="submit" value="Send">
<a>
<input type="reset" value="Reset">

</form>

</TD>


</div>
<div style="z-index:2; padding-top: 66px; padding-left: 520px; margin-top: 0px;>

<a href="index.html></a> <A HREF="http://www.harmonic.com">

<IMG SRC="p2-click_15.jpg" BORDER="0" WIDTH=46 HEIGHT=21 ALT=""></A>
</div>
</div>
</BODY>
</HTML>

I'm trying to make a navigation bar that has the buttons taking up the full height of the container it is in, and have a width with just a few pixels padding on each side.

Full height problem: I added this code: Code:

ul#nav li { height: 100%; }

but it only takes up as much as the padding takes up.

Padding problem: When I add padding/margin on the top, instead of bumping the actual navigation button down, it overflows on the top and so there is a little green square sticking out. I want it to be perfectly centered inside the container.


Please help!

Thanks.

hey,
simple question here i just cant get it to work though.
i want to align some text to the bottom and to the right of a table

<table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%">
<tr>

<td bgcolor="000000" width="10%">
<img src="graphics/spacer.gif" width="100" height="1">
</td>

<td bgcolor="ffffff" width="90%" valign="top">
<h2>Welcome to the Darwin Soccer Clubs Official Website</h2>
<hr color="black">

<p>Here we strive to bring you all the latest news from the club by
keeping you updated on the results from all our games throught out
the season, the roster so you will never forget when your teams, where
your teams playing and who there playing.
<br><br>
Also check out the new <a href="p4potw.html">Player of the week</a>
page to see if you have made
it to number one!</p>

<p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p>
</td>

</tr>

i dont no why.. and try not to think about the other writing in the table this is for
my studies i am doing.

cheers
</table>

Hello,

I am making this site on a Mac and having no problems with it, untill I look at it in Explorer on Windows PC, where it shows strange gaps in the layout of the tables. Sometimes I solve these problems by changing the background colour or moving an element to the top, but I think Im just busy covering up the main problem and not really solving it. So my question is: Does anybody have an idea what causes this problem, aside from the fact that these are different types of computers, and how to solve it, if there is a common solution to it?

http://dixdesign.net/dixdesign/pentecost/index.html

If anyone could have a look at it, would be much appreciated.
Thanks in advance,

Dix

Hi Everyone,

hoping someone can help me here, i'm totally new to html. i work in digital advertising and project manage web development, but i don't know how to troubleshoot html problems, particularly across browsers.

The website in question is
www.forbetterorpurse.com
I built it using the sitebuilder provided by the hosting company.

I have two problems (that i know of anyway haha!)
1. The table to the left has somehow increased in width. I don't think I altered anything but no doubt it's something small
2. if you compare the site from IE to Firefox, the background of part of the content area is yellow compared with grey. It's supposed to be grey.

if anyone has any ideas or can point me in the right direction, it'd be greatly appreciated!

Thanks

Hi guys,

I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html

Anyway, I've got three problems, and appreciate any help anyone can offer on any of them:

1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all.

So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for.


2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas?


3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now:

<script type="text/javascript">
function goToPage(dd) {
var ind = dd.selectedIndex;
if (ind == 0) { return; }
var url = dd.options[ind].value
document.location=url;
}
</script>


<form>
<select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY:
arial; FONT-SIZE: 15px; font-weight: bold;">
<option value="">Bowl Events</option>

<option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option>

<option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option>

<option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option>

<option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option>

<option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option>

<option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option>

<option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option>

<option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option>

<option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option>

</select></form>

I cannot work out why my google ads on the left hand side of my pages appear vertically centred, and not aligned to the top.

The site is here

My code looks like this:

<td valign="top">
<p align="center">
{include file="$tpl_dir/ads_left_two.sec.html"}
<img src="images/120-pixel-spacer.gif" alt="richmond upon thames" width="120" height="20" /></p></td>

and the code for {include file="$tpl_dir/ads_left_two.sec.html"} looks like this:

{literal}
<script type="text/javascript"><!--
google_ad_client = "pub-2556340643393239";
google_alternate_color = "598527";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="6678563867";
google_color_border = "CCCCCC";
google_color_bg = "FFFFFF";
google_color_link = "790000";
google_color_text = "333333";
google_color_url = "598527";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<script type="text/javascript"><!--
google_ad_client = "pub-2556340643393239";
google_alternate_color = "598527";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="7752161831";
google_color_border = "CCCCCC";
google_color_bg = "FFFFFF";
google_color_link = "790000";
google_color_text = "333333";
google_color_url = "598527";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/literal}


Hopefully i'm doing something dumb and you can tell me!!! I've been trying to work this out for ages....

thanks
Bugs1012

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

Hello,

I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it?

I started with code something like

<div align="center">

<ul type="disc">
<li>Wine</li>
<li>Women</li>
<li>Song</li>
</ul>

</div>

This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed.

I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way?

Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code.

How I want it to look:


How it looks now:


I want the tables to line up at the top and re-size according to each other so they're always aligned at the top.

Code: coming in next 2 posts

this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html

there are several things I would like to happen.
1. the right collumn background to be where the right collumn should be(so other links in navbar)
2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see)
3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does.
4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle.
5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns?
don't worry about the colors I will be changing them soon