HTML - Aligning Issues

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

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!

hey Guys!

Happy new years to all!

I need a little bit of help with something that is quite simple (I think).

I have a full website set up in three frames header, body and footer.
The site is set to have both the header and footer at a fixed position and size. and the body scrolls when needed. The problem is that when the scroll bar appears it moves the page on the body frame and the site doesn't align as it should. It moves to the left the amount of pixels the scroll bar has.

How can I maintain the alignment of the body frame, even when the scroll bar appears?

I hope that is, in fact, a simple thing and I'll appreciate the help on this!

Thanks!
Cheers

Hi guys,

I need help with IE7. If I open my webpage in Firefox it looks like screenshot1.png but when I open it in IE7 it displays like screenshot2.jpg.

A live preview @ http://www.rawox.webege.com/home.php.

Does anyone know how to fix this? I'm trying for 2 hours now and I can't get it

Thanks in advance,
Rawox

Hey guys, i have 3 tables that I want to align like
1 2 3
at the moment they are
1
2
3
any ideas, here is the code i have

HTML Code:

<form action="process.php" method="POST" class="style1">
<table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>Xbox 360 GT:</td>

</tr>
<tr>
   <td><input type="text" name="x360gt" value="x360" /></td>
   <td></td>
</tr>

<tr><td colspan="2" align="right">
<input type="hidden" name="subedit1" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>

<br>
<form action="process.php" method="POST" class="style1">

<table  width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>PS3 GT:</td>
</tr>
<tr>
   <td><input type="text" name="ps3gt" value="ps3" /></td>
   <td></td>
</tr>

<tr><td colspan="2" align="right">
<input type="hidden" name="subedit2" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>
<br>
<form action="process.php" method="POST" class="style1">
<table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>PC GT:</td>
</tr>
<tr>
   <td><input type="text" name="pcgt" value="pc" /></td>
   <td></td>

</tr>
<tr><td colspan="2" align="right">
<input type="hidden" name="subedit3" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>

Could anyone help me out please

Gah, I've been sitting here trying to do this for hours and my head is utterly boggled!

This is the kind of thing I want, I've tried aligning the text within the table to the bottom and then wrapping it around the image but obviously I'm just a huge, epic failure. Eck.

(I don't know if you can catch the longshore-drift of my beautiful art--oh, how I kid you --but the black box represents an image and the lines are text!)

Any help would be much appreciated! Thanks lovelies.

Hi All,

I Though i had all this figured out,

But unfortunatly thats not the case im actually beginning to pull my hair out now

All i want is three buttons in a line with a margin about seperating them from the web form.

But i get the attached

Heres my HTML

HTML Code:

        <div class="leftColumn">
            <asp:Label ID="lblUserRef" runat="server" CssClass="StandardLabel" Text="User Ref"
                Style="margin-left: -7px; margin-right: 7px;"></asp:Label>
            <asp:TextBox ID="txtUserReference" Style="margin-left: 2px" runat="server" ToolTip="Please enter a User reference"
                CssClass="ShortTextBox"></asp:TextBox>
        </div>
        <div class="SmallSpace">
        </div>
    </div>
    <div class="ButtonContainerDiv">
        <div class="ButtonHolder">
            <a href="#" class="CancelButton">Cancel</a> <a href="#" class="RaiseButton">Raise</a>
            <a href="#" class="SaveButton">Save</a>
        </div>
    </div>
</asp:Content>

The small space has a pixel height of about 3.

My Css for the buttons.

HTML Code:

.ButtonContainerDiv
{
 margin-top:30px;
 width:760px;
 height: 100px;
 margin-left:auto;
 margin-right: auto; 
}

.ButtonHolder
{
 margin-left:auto;
 margin-right: auto;
 margin-bottom:auto;
 margin-top:auto;   
}

/* CANCEL BUTTON */

.CancelButton 
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad0034), color-stop(1, #db0042) );
	background:-moz-linear-gradient( center top, #ad0034 5%, #db0042 100% );
	background-color:#ad0034;
	-moz-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;
	float: left;

}
.CancelButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db0042), color-stop(1, #ad0034) );
	background:-moz-linear-gradient( center top, #db0042 5%, #ad0034 100% );
	background-color:#db0042;
}
.CancelButton:active 
{
	position:relative;

}

/* SAVE BUTTON */

.SaveButton
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1b214), color-stop(1, #d19602) );
	background:-moz-linear-gradient( center top, #f1b214 5%, #d19602 100% );
	background-color:#f1b214;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;

	}

.SaveButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d19602), color-stop(1, #f1b214) );
	background:-moz-linear-gradient( center top, #d19602 5%, #f1b214 100% );
	background-color:#d19602;
}

.SaveButton:active 
{
	position:relative;

}

/* RAISE BUTTON */

.RaiseButton
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #549228), color-stop(1, #377508) );
	background:-moz-linear-gradient( center top, #549228 5%, #377508 100% );
	background-color:#549228;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;
	float:right;

}

.RaiseButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #377508), color-stop(1, #549228) );
	background:-moz-linear-gradient( center top, #377508 5%, #549228 100% );
	background-color:#377508;
}
.RaiseButton:active 
{
	position:relative;

}

Please someone help me

Hi,

I want to align some text but not with the center or something but i want it to aling to a
square on my background image and i also want to make it so that is looks the same on widescreens.
at the moment i do it like this

<BODY leftmargin="150%" topmargin="220%">
f
</BODY>

But when i enter window mode the text also moves.
can someone help me with tihs ?

Hi, I was wondering if there is a way to make things align with IE and Firefox without making completely separate pages for both?

This is the page I'm referring to:

http://www.andytrus.com/resume.html

In Firefox, its nicely aligned, but in IE, its all off.

The HTML for each header is this:

<div id="content_resume">

<h2>Objective</h2>

<p>To obtain a full-time design position where my creativity, people skills, and leadership will make significant contributions towards implementing innovative solutions which fulfill user needs.</p><br>

The css for this part is:

#content_resume {
padding-top:125px;
padding-left:68px;
width:815px;
color:#bd92b2;
font-size:13px;
line-height:20px;
}

I'd really appreciate some help. Thanks!

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>

hi all,

i have set a page up using iframes as it was originally created using authoring software to allow me to create a menu (this menu did not function correctly with regular frames)

I have adapted the code to make the frames appear ALMOST as i want but there is a gap between the lower two frames. This only occurs in firefox but is very annoying and i need help to remove it. The section of code i am using to create the frames is as follows.

Code:

<html>

<iframe name="TopFrame" id="InlineFrame1" left="0%" top="0%" width="95%" height="15%" style="z-index:1" src="./top.html" scrolling="no" frameborder="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<iframeset border="0" frameborder="0" framespacing="0">
<iframe name="LeftFrame" id="InlineFrame2" width="15%" height="80%" style="z-index:2" src="./left.html" scrolling="no" frameborder="0" framespacing="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<iframe name="MainFrame" id="InlineFrame3" width="80%" height="80%" style="z-index:3" src="./main.html" scrolling="no" frameborder="0" framespacing="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
</iframeset>

</html>

Any help would be greatly appreciated.

Thanks
Dave

<div align="center">
<table height="117" cellspacing="0" cellpadding="0" border="0" class="btn1 boxbtn1">
<tr>
<td>
<a href="images/gymfu.png" rel="lightbox[roadtrip]" title="Gym Fu - Branding">image #1</a></td>
</tr>
</table>
</div>

-----

I've tried 'valign="middle" ' in the html code, and also 'vertical-align:center' in the css. no joy. Can anyone help?

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.

Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong?

<table>
<tr>
<td align="left">
<p>Im suppose to be on the left side of the screen</p>
</td>
<td align="right">
<p>Im suppose to be on the right side of the screen</p>
</td>
</tr>
</table>

I want to align a image in the center in html how do i do that. and could i do that i css aligning images.