473,473 Members | 1,758 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Align Text With Table 2

53 New Member
hi

i have tried to take up the advice of yoda and harshmaul for aligning text with the table however i have not succeeded. the funny thing is that they both come in line when i set to table align right however when i try moving the table back to the center the links slip back down. can anyone help me please. i have used the table to create a form. if there is another way to create the form so that everything is aligned neatly without the use of tables i would appreciate any suggestions.

for further insight i have copied the code below for the css file if it helps and also a print screened image of my webpage.

code:

[HTML]body{background-image:url(http://www.nigelfrench.com/psunmasked/brown_texture.jpg)}
h1{font-family:Creaminal; font-size:large; text-align:center; color:#FF0000}
h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
img{border:none}
p{vertical-align:top}
[/HTML]
Mar 19 '08 #1
6 2112
ronverdonk
4,258 Recognized Expert Specialist
You should make your 'tables' using CSS only and without the use of html table. See the following tutorial on webpages without tables

Ronald
Mar 20 '08 #2
ashraf02
53 New Member
thanks alot ronald u've been a great help. i have managed to make the forms look how i wanted without the annoying tables. however i'm still have problems with aligning my html links with the form. i have used vertical align on the form but my links still end up at the bottom of the page.

any suggestions?

Ashraf
Mar 20 '08 #3
ronverdonk
4,258 Recognized Expert Specialist
I cannot see from nothing how your links are rendered on the page. So better show some code, within the appropriate code tags, of course!

Ronald
Mar 20 '08 #4
ashraf02
53 New Member
here's the html code:

[HTML]<body>
<h1><img src="Web Images/Banners/SuitFormTitle1.jpg"></img></h1>
<h4>
<a href="Suit_Form.html"><img src="Web Images/Buttons/Smart.jpg"></img></a><br />
<a href="Casual_Form.html"><img src="Web Images/Buttons/Casual.jpg"></img></a><br />
<a href="Suit_Form.html"><img src="Web Images/Buttons/Urban.jpg"></img></a><br />
</h4>
<div>
<form action="Insert_Suit.php" method="post">
<div class="row">
<span class="item"><h2>ID</h2></span>
<span class="formw"><input type="text" name="SuitID" size="5" /></span>
</div>
<div class="row">
<span class="item"><h2>Suit Brand</h2></span>
<span class="formw"><input type="text" name="SuitBrand" size="20"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Type</h2></span>
<span class="formw"><input type="text" name="SuitType" size="20"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Colour</h2></span>
<span class="formw"><input type="text" name="SuitColour" size="20"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Price</h2></span>
<span class="formw"><input type="text" name="SuitPrice" size="10"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Description</h2></span>
<span class="formw"><textarea name="SuitDesc" rows="5" cols="20"></textarea></span>
</div>
<div class="row">
<span class="item"></span>
<span class="formw"><input type="image" name="submit" src="Web Images/Buttons/Submit.jpg"/></span>
</div>
</form>
</body>[/HTML]

here's the CSS code:
[HTML]
body{background-image:url(http://www.nigelfrench.com/psunmasked/brown_texture.jpg)}
h1{font-family:Creaminal; font-size:large; text-align:center; color:#FF0000}
h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
img{border:none}
h3{text-align:center}
div.row {clear: both; padding-top: 5px;}
div.row span.item {float: left; width: 100px; text-align: right;}
div.row span.formw {float: right;width: 235px; text-align: left;}
div {width:360px; border: 1px groove #FF0000; padding:5 px; margin:0px auto; vertical-align:top}[/HTML]

thanks

ashraf
Mar 20 '08 #5
ronverdonk
4,258 Recognized Expert Specialist
On my screen the 3 links are all three in the left upper corner, stacked.
I noticed that your 'table' is centered in FF but not in IE. So I changed the CSS a bit and your first div and positioned the last </div> behind the </form> and now it also centers in IE. Here it is:[html]<style>body{background-image:url(http://www.nigelfrench.com/psunmasked/brown_texture.jpg);
text-align:center;}
h1{font-family:Creaminal; font-size:large; text-align:center; color:#FF0000}
h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
img{border:none}
h3{text-align:center}
div.row {clear: both; padding-top: 5px;}
div.row span.item {float: left; width: 100px; text-align: right;}
div.row span.formw {float: right;width: 235px; text-align: left;}
div {width:360px; border: 1px groove #FF0000; padding:5 px; margin:0px auto; vertical-align:top}
</style>
<body>
<h1><img src="Web Images/Banners/SuitFormTitle1.jpg"></img></h1>
<h4>
<a href="Suit_Form.html"><img src="Web Images/Buttons/Smart.jpg"></img></a><br />
<a href="Casual_Form.html"><img src="Web Images/Buttons/Casual.jpg"></img></a><br />
<a href="Suit_Form.html"><img src="Web Images/Buttons/Urban.jpg"></img></a><br />
</h4>
<div style='margin:0 auto;width:800px;'>
<form action="Insert_Suit.php" method="post">
<div class="row">
<span class="item"><h2>ID</h2></span>
<span class="formw"><input type="text" name="SuitID" size="5" /></span>
</div>
<div class="row">
<span class="item"><h2>Suit Brand</h2></span>
<span class="formw"><input type="text" name="SuitBrand" size="20"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Type</h2></span>
<span class="formw"><input type="text" name="SuitType" size="20"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Colour</h2></span>
<span class="formw"><input type="text" name="SuitColour" size="20"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Price</h2></span>
<span class="formw"><input type="text" name="SuitPrice" size="10"/></span>
</div>
<div class="row">
<span class="item"><h2>Suit Description</h2></span>
<span class="formw"><textarea name="SuitDesc" rows="5" cols="20"></textarea></span>
</div>
<div class="row">
<span class="item"></span>
<span class="formw"><input type="image" name="submit" src="Web Images/Buttons/Submit.jpg"/></span>
</form>
</div>
</body>
[/html]Ronald
Mar 20 '08 #6
ashraf02
53 New Member
hi ronald thanks for ur time but when i used ur code it aligned the links and the table in the middle of the page with the links being on top and not the links and table aligned on the same row.

i am trying to do the same with my insert html page. i will post the code below along with the stylesheet code if u can help i would really appreciate it.

HTML Code:

[HTML]<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Insert_Forms/NobleForms.css"/>
<title>Suit Form</title>
</head>

<body>
<h1><img src="Web Images/Banners/SmartFormTitle.jpg"></img></h1>

<h3 align="center">
<A href="Suit_Form.html"
onmouseover="document.Suits_But.src='Web Images/Web Page/SuitsOn.jpg'"
onmouseout="document.Suits_But.src='Web Images/Web Page/SuitsOff.jpg'" >
<img src="Web Images/Web Page/SuitsOff.jpg" border="0"
ALT="Suits Sand" NAME="Suits_But" />
</A>

<A href="Shirt_Form.html"
onmouseover="document.Shirts_But.src='Web Images/Web Page/ShirtOn.jpg'"
onmouseout="document.Shirts_But.src='Web Images/Web Page/ShirtOff.jpg'" >
<img src="Web Images/Web Page/ShirtOff.jpg" border="0"
ALT="Shirts Sand" NAME="Shirts_But" />
</A>

<A href="Trouser_Form.html"
onmouseover="document.Trousers_But.src='Web Images/Web Page/TrousersOn.jpg'"
onmouseout="document.Trousers_But.src='Web Images/Web Page/TrousersOff.jpg'" >
<img src="Web Images/Web Page/TrousersOff.jpg" border="0"
ALT="Trouser Sand" NAME="Trousers_But" />
</A>
</h3>
<p>
<a href="Smart_Form.html"><img src="Web Images/Buttons/Smart.jpg"></img></a><br />
<a href="Casual_Form.html"><img src="Web Images/Buttons/Casual.jpg"></img></a><br />
<a href="Urban_Form.html"><img src="Web Images/Buttons/Urban.jpg"></img></a><br />
</p>

</body>
</html>[/HTML]

CSS code:
Expand|Select|Wrap|Line Numbers
  1. body{background-image:url(http://www.nigelfrench.com/psunmasked/brown_texture.jpg)}
  2. h1{font-family:Creaminal; font-size:large; text-align:center; color:#FF0000}
  3. h2{font-family:"Goudy Old Style"; font-size:18px; color:#FFFFFF}
  4. img{border:none}
  5. div.row {clear: both; padding-top: 5px;}
  6. div.row span.item {float: left; width: 100px; text-align: right;}
  7. div.row span.formw {float: right;width: 235px; text-align: left;}
  8. div {width:360px; border: 1px groove #FF0000; padding:5 px; vertical-align:top}
  9. p {vertical-align:top}
Mar 25 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics
3
vertical-align on span that resides inside a table cell
by: kAldam | last post by:
I am currently using IE 6.0 and 5.5 and the scenario is the following. I have a span that contains text, and the span is beign contained by a table cell (this is the way thing need to be in my...
Latest Bytes
6
align batch of spans with float:left to a new block
by: TJ | last post by:
I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...
Latest Bytes
8
text-align: right in Firefox
by: André Hänsel | last post by:
Hi! When I put a table into a table and try to align it right, it works in IE but not in Firefox. Simplest code to reproduce: <html> <body> <table style="width: 100%"> <tr>
Latest Bytes
2
Align to bottom
by: Thomas Scheiderich | last post by:
Is there a way to make a section of a <td> tag to go to the bottom of the cell? Below is a portion of my page. The <td class="BodyText"> tag has a "vertical-align:top" in the css file to move...
Latest Bytes
6
Align right increasing height of cell
by: tshad | last post by:
I have a cell with 2 items in it: a textbox and a link. The link is actually a button (image), but for the example I am using a link, which is doing the same thing. Here is the stripped down...
Latest Bytes
3
vertical align with not specified height
by: acunnon | last post by:
I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page. CSS html{ height:100%;...
Latest Bytes
2
FireFox CSS - overflow:hidden with vertical-align
by: esteuart | last post by:
I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has...
Latest Bytes
13
Which elements should be affected by text-align:center
by: Stevo | last post by:
I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. ...
Latest Bytes
3
How to right or centre align the text box
by: happyse27 | last post by:
Hi All, I wanted to align the text box for user registration but the code just wont budge... Kindly advise what is wrong? Cheers... Andrew <HTML>
Latest Bytes
1
Text doesnt align in IE but works with Mozilla and Chrome
by: panos100m | last post by:
I cant put the text (register,members,find) in the center of the three buttons using Internet explorer... Any help will be much appreciated (html code below) <td class="ct"> <!-- menu...
Latest Bytes
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Latest Bytes
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
Latest Bytes
1
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Latest Bytes
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
Latest Bytes
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Latest Bytes
1
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Latest Bytes
0
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Latest Bytes
0
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
Latest Bytes
0
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
Latest Bytes

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us