HTML - 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

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

Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions.

Example script:
<div style="text-align: left; position: absolute;">
<!-- Begin BidVertiser code -->
<script language="JavaScript1.1"
src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&amp;bid=341700"
type="text/javascript"></script>
<noscript><a
href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet
advertising</a></noscript>
<!-- End BidVertiser code --> </div>
<div style="text-align: center;"><a
href="http://pinkkittens.org/"><img alt="Banner"
src="http://pinkkittens.org/images/pinkkittenbannernew.png"
style="border: 0px solid ; width: 815px; height: 121px;"
align="top"></a></div>
<div id="flashcontent" style="text-align: center;"></div>
<script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script>

I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers?
Web address for better viewing pleasure is http://www.pinkkittens.org/

How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side?

Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc

I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left?
And then there is a random box that appears in the top, how do I remov this? Thank you

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <input>
</head>
<body>
<form id="form1"
 action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&amp;type=1&amp;ar=30178"
 method="post" name="form1">
  <script type="text/javascript">// <![CDATA[
function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; }
// ]]></script>
  <div id="seller_opt" class="optin"
 style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial">
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Name:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard_ownerName"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >E-mail
Address:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerEmail"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px;
 font-size-adjust: none; font-stretch:
 normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Zip
Code:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerZip"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust:
 none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Mobile
Phone*:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerMobilePhone"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust: none;
 font-stretch: normal"
 onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25">
&nbsp;
  </div>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input
 id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton"
 class="submit" style="MARGIN: 0pt 0pt 0pt 25px"
 onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))'
 name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton"
 value="Finish"
 src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg"
 type="image"><br>
*Optional
  </div>
  </div>
</form>
<br>
</body>
</html>

You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help!

So I'm working on a <dl> and using this bit of code as an example:


<style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; }
</style>

<dl>

<dt>first item</dt>
<dd>definition for first item in list</dd>
<dt>second item</dt>
<dd>definition for second item in list<br>
extending across more than one line</dd>
<dt>third item</dt>

<dd>definition for third item in list</dd>
</dl>

That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page:

http://site.outletpccomputerrepair.c...opups/test.htm

whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help!

I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot:

http://img80.imageshack.us/img80/6827/screenshotjs.png

Have a look. The lines are two pictures, they are split close to the middle.

Hi all, im sure this is an easy one for alot of you in here but here goes....

Ive got a table which is say 40 pxls high, ive split it into 2 columns and on the left I have text links and on the right im trying to put an H1 tag. Anyway when I convert my text into an H1 tag its like its been top aligned in the table and obviously I want it to sit vertically in the centre.

Ive tried changing alignment options in dreamweaver with no effect. The text links in the left hand column display normally also.

Thanks!

Hi I am new to this site and very new to html. I just know the basics. My problem is, is there a way to make 1 line of text be split for example have 1 part of the line be aligned to the left and the other to the right.

Here is an example, the first part is what is actually happening and the second part is the way i want it to look.

This is an example.This is an example

This is an example. This is an example.

I just realized that my second part of the example didnt come out the way i wanted. So i want the second part to have the first part aligned to the left and the second part aligned to the right.

Please help. Its probably really easy but like i said i just know the basics. Thanks in advance for any help that is given

Mike

Okay, I dont want to align text or an image. I want to align my whole page. My page is all the way to left and I want to center it to the middle.