HTML - Aligning Labels, Lists, Fields, Etc. In Tables

Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks.

<form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"></div>
<div class="AccordionPanelContent"><form action="file.php" method="post">
<table border="3" width="600">
<tr>
<td><strong>First One</strong>
</td>
</tr>
<input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td>
</tr>
</table>
<table border="3" width="600">
<tr>
<td><strong>Second One
</strong>
</td>
</tr>
<input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td>
</tr>
</table>
<p></p>
<input type="submit" value="Submit" name="submit"><br/></form><br/>

Could somebody help me out in trying to put a separate image beside a table? Every time I try it the image ends up below the table rather than next to it.

The table is surrounding a song lyric box. I want to put an image (of Ellla Fitgerald) beside the table. The image has a border that looks like the table.

The combinded width of table and image is around 520px and I want about a 20px space between the two. That's a total width of 540px. It's to go on my LJ profile page. I fairly sure that's not too wide for the page.

The code for the table and a screenshot of table/lyric box is below.



The image that I'm trying to put next to it is:



The outcome that I'm looking for is:



Thanks in advance.

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

http://www.miamiknight.com/table.htm

How do I get the text in all 3 columns to align at the top?
I had to add breaks or rows in column 3 at the bottom to bring the text higher and then column 2 had the text drop lower.

Is there an easy way to always have text align at the tops of each column?

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

this is a noob question

how can i align input fields?

like

Code:

<html>
<body>

<form>
username:<input type="text" name="user" />
password:<input type="password" name="pass" />
</form>
</body>
</html>

take this in this by default the text and password fields will come on left hand side but i want it in right . so how can i do that ?

Hi, I'm a newbie. I would like to know how do I display 2 labels and both inputs in the same row as shown in the attachment like state followed by input field followed by label for zip and followed by input within the same row of table in a form.


Thanks in advance
yls

Hi All,

im trying to align some Labels and text fields evenly through my page,

Iv been trying to tweek it here and there and im just wondering have i missed a vital step to do some a thing.......
the attached is what i have at the moment "image called Layout"

and what i want to achieve is also attached the one with the Green Header

my Css for this is here

for the label

HTML Code:

.StandardLabel
{
 width: 100px;
 text-align: left;
 padding-right:3px;
 font: verdana;
 font-family: Verdana;
 letter-spacing: normal;
 font-size: 15px;  
}

for the text box

HTML Code:

.LongTextBox
{
 width:170px;       
}

and the HTML

HTML Code:

  <div style="padding-top: 10px;">
                    <asp:Label ID="lblEmail" runat="server" Style="padding-right: 42px;" CssClass="StandardLabel"
                        Text="*Email"></asp:Label>
                    <asp:TextBox ID="txtEmail" runat="server" CssClass="LongTextBox"></asp:TextBox>
                </div>
                <div style="padding-top: 10px;">
                    <asp:Label ID="lblConNum" runat="server" CssClass="StandardLabel" Text="*Contact Number"></asp:Label>
                    <asp:TextBox ID="txtContactNum" runat="server" CssClass="LongTextBox"></asp:TextBox>
                </div>

I havent attached all the HTML but the code is identical to what i have added above.

Hi,

I need some clarification regarding HTML editors and how to display the data that is stored through HTML editors.
This is the HTML editor we are using and the following image is the data (uploaded by the HTML editor) displayed in a PHP file.

Editor:



Displayed label:



Please tell me how I can avoid displaying the HTML code in the labels and display the special characters instead.

Thanks in advance,

Ravi.

hello !
I have a text fields and i want to display there a record of my database.

the problem is that my sql record is not plain text,but has html formating.

So when i display the data to the text field, it changes the appearance of my web page!!
i have to find a way to display that html text as plain text and not as html code!
can anybody help me please?

thanks!!

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?

Hello, I've been working on my website recently and I've found a problem that I have no idea how to fix.
I have an unordered list that serves as the menu on the left of the site. I've been trying to remove the black dots that come with the unordered list. They only show up on the first one and they blemish the site. I want to keep it with a list because it allows for pleasing aesthetics in combination with my CSS (link hover changes the color).

Is there a way I can keep the same look and get rid of the dots?

Code:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>Bob's Page</title>
</head>

<body>
<center>
<img class="center" src="img/banner.jpg"></center>
<div class="left">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="mailto:robert.t.adams5@gmail.com">Contact Me</a></li>
</ul>
</div>

<div class="right">
<p>Text goes here.
</div>

</body>

</html>

look at it he http://eco-heater.bobadams.x10hosting.com

Hi, i want to add a horizontal overflow to the div element that holds the UL. each LI is displayed along side each other using Float:left. however, when they reach the end of the page it starts a new line. how can i get it so it doesnt start a newline, but carrys on in a line and can be scroll-able? thankyou

Code:

bodywrapper {
    width:930px;
    margin:auto;
    margin-top:20px;
    background:url(../images/layout/main_body_bg.jpg) repeat;
}

/*Image Gallery*/

#gallery ul {
    margin-left:-30px;
    margin-bottom:0;
    margin-top:-10px;
}

#gallery ul li {
    display:block;
    float:left;
    height:100px;
    width:100px;
    padding-top:10px;
    padding-right:10px;
}


.thumbnails {
    outline:none;
    border:none;
}

.thumbnails_link {
    outline:none;
}