|
HTML - Aligning In A Table
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. Similar TutorialsHi 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! I've been working in Flash for too long now or something, a little bit rusty with HTML. This recent website I've been working on for a friends restaurant is giving me some trouble. Im working without dreamweaver or imageready or anything like that, just code. And for some reason I cant get the table to fully line up. I know its probably going to end up being such a minor detail that Im missing, but ive spent a while now with no luck. Hoping someone can view this code and tell me what im not seeing: Http://www.lindesignz.com/mazzeh (p.s. I know I broke it up more than it needs to be. its for future graphic edits.) Hi, I'm needing to align an html table with x and y values. However, I've never done this before, where do I need to put the values in the code? Thank you! I am trying to get this table to align properly but to no avail so far. Also, I'd like to be able to put a form in the middle of the pictures. Here is the code for the section I am referring to: Code: <table border="10"><tr><td><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"></td><br></tr><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td align="left"><img src="bal.gif"><img src="bal.gif"></td> <td align="right"><img src="bal.gif"><img src="bal.gif"></td></tr><br><tr> <td><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"><img src="bal.gif"></td></tr> </table> Hi this is my first post. I am frustrated with how the bulleted "inspection" list is not aligned to the top. This is the code I'm working with: Code: <div id="table"> <table> <tr> <td><h4>Auto Repairs</h4> </td> <td><h4>Maintenance</h4></td> <td><h4>Inspections</h4></td> </tr> <tr> <!--Auto Repairs--> <td> <ul> <li><strong>Brake Repair & Brake Pads</strong></li> <li>Custom Exhaust</li> <li>Check Engine</li> <li>Battery</li> <li>Alternators</li> <li>Starters</li> <li>Timing Belt</li> <li>Waterpump</li> </ul> </td> <!--Maintenance--> <td> <ul> <li>30, 60, 90k-mile Service</li> <li>Oil Changes</li> <li>Tune Ups</li> <li>Transmission Service</li> <li>Power Steering Flush</li> <li>Antifreeze/Coolant Service</li> <li>Brake Fluid Flush</li> </ul> </td> <!--Inspections--> <td> <ul> <li>Free 30-Point Inspection</li> <li>MD State Inspections</li> <li>Emissions</li> <li>Diagnostics</li> </ul> </td> </tr> </table> Thanks for helping me. I created a layout in Photoshop CS3 and used the slice tool, which generated a table for me based on the slices. The problem is, I need the table to be aligned at the very top of the page without a space, without having to set the table height to 100%. Is there a way this can be done? Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes. Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> Hi, I am new to web design and am trying to design company website without using a site builder. I have built up my container with 3 boxes inside. In the largest I want text on the right and a 1 column 2 row table on the right - to be adjacent to each other but I can't get it to work. I don't want the text to wrap around the table. Please help. 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> Im hoping someone can help me out on this one im just getting back into coding so im a little rusty but i am somewhat stumped by this issue i have a table that the text refuses to align to top middle unless its divided up into a new cell. The best it will do is align middle left of the cell but refuses to go to the top. The site that it is on with the issue is www.gamersjoy.com the table in question is the center table with updates, as you can see everything is pushed halfway down and aligned to the left Any help would be greatly appreciated as it is slowing me down from finishing my project thanks in advance Tcanuth Hi, How do I get my table to be flush with the top and sides of the screen? Currently there is a spacing in automatic between. Thanks 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, 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&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/ 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. 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&type=1&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">
</div>
<div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
<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! 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 created a table with about 100 rows down in Dreamweaver. Anyways I want to align a few pictures to the left of the table. Everytime I add the picture it places it above the table. I tried using every code I can think of to align it to the left but it will not go to the left, any advice? 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 I am using FrontPage I have an image that I have created in Word and copied over into FrontPage as it was done using auto shapes. The shape is a star. I need it in the div to keep it aligned with stuff below. It works fine except the left hand corner of the star is cut off by about 3-4 pixels whilst the rest of the image is perfect? Any Ideas? Thanks as always |
|||||||