Solved: html table

jenny_smith188 · 02-20-2009

i want to arrange cells like the attached file. everytime i try to set the cells like that it moves the 3rd cell even with the bottom of the 2nd cell and i would like the 3rd cell directly under the 1st cell which is shorter than the 1st. I would also like to know if any of my coding is outdated according to html5. im pretty new at html coding so im not so sure how to do it this is what ive tried so far...

<table class="center" border="0" cellspacing="10">
<tr valign="top">
<td hieght="20"><img src="****.jpg" alt="*****">
</td>
<td valign="top"><img src="****.jpg" alt="*****">
</td>
</tr>
<tr valign="top">
<td bgcolor="A0A0A0">
<span style="color:cc0033">
**************</br>
**************</br>
**************</br>
</span>
</td>
</tr>
</table>

upgrader · 02-20-2009

Hi jenny smith

Could you attach the images used with the code so I can replicate the issue, or the dimensions of the images would do.

I noticed you have one typo on line 3:

<td hieght="20"><img src="http://www.pchelpforum.com/web-design/****.jpg" alt="*****">

I haven't studied the specification for HTML5, but I think you should be using CSS to style the table (border etc). Also you shouldn't be using tables for page layout if you are, that should be done with divs and css.

jenny_smith188 · 02-26-2009

Ok so i guess i left out the part of my css file that has to do with aligning the table it goes something like this:

table.center {margin-left:auto; margin-right:auto; position:relative;}

and about the typo i meant to leave the height deal out of it so this is what i have:

<table class="center" border="0" cellspacing="10">
<tr valign="top">
<td><img src="****.jpg" alt="*****">
</td>
<td valign="top"><img src="****.jpg" alt="*****">
</td>
</tr>
<tr valign="top">
<td bgcolor="A0A0A0">
<span style="color:cc0033">
**************</br>
**************</br>
**************</br>
</span>
</td>
</tr>
</table>

and yes i am using a table as a page layout as i said im new to html coding so how would i either fix this or use divs and css to achieve the same thing

the size of the image in cell 1 is 300x225px and the image in cell 2 is 375x281px in cell 3 i actually have text so its the same width as cell 1 (300px) but i don't know how long the text will be

also my css table centering wont work on ie7 but does work on firefox3 and safari so i guess i need help with this

any help would be greatly appreciated

upgrader · 02-27-2009

You can change it to divs and css by learning through a few tutorials. Try these tutorials:

CSS in general
Replace tables with DIVs and CSS
A List Apart: Articles: Practical CSS Layout Tips, Tricks, & Techniques

There are lots more tutorials out there if you search for terms like creating a website with css divs etc

I hope that helps

jenny_smith188 · 03-04-2009

ok i have a new problem i am making a horizontal drop down menu and i cannot get it centered could u help me?

Here is my css code:

Code:

ul.dropdown, ul.dropdown li, ul.dropdown ul {list-style: none; margin: 0; padding: 0;}

ul.dropdown { position: relative; z-index: 597; float: left;}

ul.dropdown li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1;}

ul.dropdown li.hover, ul.dropdown li:hover {position: relative; z-index: 599; cursor: default;}

ul.dropdown ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}

ul.dropdown ul li {float: none;}

ul.dropdown ul ul {top: 1px; left: 99%;}

ul.dropdown li:hover > ul {visibility: visible;}

/*--------------------------------------------THeme----------------------------------------------------*/


ul.dropdown {font-weight: bold;}

ul.dropdown li {padding-left: 5px; padding-right: 5px; padding-bottom: 0px; background-color: #000000; color: #ffffff;}

ul.dropdown li.hover, ul.dropdown li:hover {background-color: #000000; color: #ffffff;}

ul.dropdown a:link, ul.dropdown a:visited {color: #ffffff; text-decoration: none;}
ul.dropdown a:hover { color: #A8A8A8; text-decoration: none;}
ul.dropdown a:active { color: #ffa500; text-decoration: none;}

ul.dropdown ul { width: 150px; margin-top: 0px; padding-bottom:0px;}
ul.dropdown ul li { font-weight: normal;}

and here is my html code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href=".css"/>

</head>

<body>

<ul id="nav" class="dropdown dropdown-horizontal">
<li class="dir">abcdefghijk
<ul><li><a href="./">History</a></li>
<li><a href="./">Our Vision</a></li>
<li class="dir"><a href="./">The Team</a>
<ul><li><a href="./">Brigita</a></li>
<li><a href="./">John</a></li>
<li><a href="./">Michael</a></li>
<li><a href="./">Peter</a></li>
<li><a href="./">Sarah</a></li>
</ul></li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul></li>

<li class="dir">abcdefghijk
<ul><li><a href="./">Product Development</a></li>
<li><a href="./">Delivery</a></li>
<li><a href="./">Shop Online</a></li>
<li><a href="./">Support</a></li>
<li><a href="./">Training &amp; Consulting</a></li>
</ul></li>

<li class="dir">Products
<ul><li class="dir"><a href="./">New</a>
<ul><li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul></li>
<li class="dir"><a href="./">Used</a>
<ul><li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul></li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul></li>

<li class="dir"><a href="./">Contact Us</a>
<ul><li><a href="./">Enquiry Form</a></li>
<li><a href="./">Map &amp; Driving Directions</a></li>
<li><a href="./">Your Feedback</a></li>
</ul></li>
</ul>

</body>
</html>

please help!

jenny_smith188 · 03-04-2009

if it helps i took the coding from this site:
Simple Horizontal CSS Drop-Down Menu Demo

upgrader · 03-06-2009

Hi jenny, sorry for taking a little while to respond to you.

Please look at the code I have posted below, this should center the menu.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div id="content">
			<div id="navbar">
				<ul id="nav" class="dropdown">
					<li class="dir">abcdefghijk
						<ul>
							<li><a href="./">History</a></li>
							<li><a href="./">Our Vision</a></li>
							<li class="dir">
								<a href="./">The Team</a>
									<ul>
										<li><a href="./">Brigita</a></li>
										<li><a href="./">John</a></li>
										<li><a href="./">Michael</a></li>
										<li><a href="./">Peter</a></li>
										<li><a href="./">Sarah</a></li>
									</ul>
							</li>
							<li><a href="./">Clients</a></li>
							<li><a href="./">Testimonials</a></li>
							<li><a href="./">Press</a></li>
							<li><a href="./">FAQs</a></li>
						</ul>
					</li>
					<li class="dir">abcdefghijk
						<ul>
							<li><a href="./">Product Development</a></li>
							<li><a href="./">Delivery</a></li>
							<li><a href="./">Shop Online</a></li>
							<li><a href="./">Support</a></li>
							<li><a href="./">Training &amp; Consulting</a></li>
						</ul>
					</li>
					<li class="dir">Products
						<ul>
							<li class="dir"><a href="./">New</a>
								<ul>
									<li><a href="./">Corporate Use</a></li>
									<li><a href="./">Private Use</a></li>
								</ul>
							</li>
							<li class="dir"><a href="./">Used</a>
								<ul>
									<li><a href="./">Corporate Use</a></li>
									<li><a href="./">Private Use</a></li>
								</ul>
							</li>
							<li><a href="./">Featured</a></li>
							<li><a href="./">Top Rated</a></li>
							<li><a href="./">Prices</a></li>
						</ul>
					</li>
					<li class="dir"><a href="./">Contact Us</a>
						<ul>
							<li><a href="./">Enquiry Form</a></li>
							<li><a href="./">Map &amp; Driving Directions</a></li>
							<li><a href="./">Your Feedback</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Code:

#content { width:326px; margin:0px auto; }
#navbar { width:100%; }

ul.dropdown,
ul.dropdown li,
ul.dropdown ul { list-style: none; margin: 0; padding: 0; }

ul.dropdown { position: relative; z-index: 597; float: left; }

ul.dropdown li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; }

ul.dropdown li.hover,
ul.dropdown li:hover { position: relative; z-index: 599; cursor: default; }

ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; }

ul.dropdown ul li { float: none; }

ul.dropdown ul ul { top: 1px; left: 99%; }

ul.dropdown li:hover > ul { visibility: visible; }

/*--------------------------------------------THeme----------------------------------------------------*/

ul.dropdown { font-weight: bold; }

ul.dropdown li { padding-left: 5px; padding-right: 5px; padding-bottom: 0px; background-color: #000000; color: #ffffff; }

ul.dropdown li.hover,
ul.dropdown li:hover { background-color: #000000; color: #ffffff; }

ul.dropdown a:link,
ul.dropdown a:visited { color: #ffffff; text-decoration: none; }
ul.dropdown a:hover { color: #A8A8A8; text-decoration: none; }
ul.dropdown a:active { color: #ffa500; text-decoration: none; }

ul.dropdown ul { width: 150px; margin-top: 0px; padding-bottom:0px; }
ul.dropdown ul li { font-weight: normal; }

02-20-2009	#2
upgrader Tech Support Team Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,313 PC Experience: Some Experience	Re: html table Hi jenny smith Could you attach the images used with the code so I can replicate the issue, or the dimensions of the images would do. I noticed you have one typo on line 3: <td hieght="20"><img src="http://www.pchelpforum.com/web-design/**.jpg" alt="*"> I haven't studied the specification for HTML5, but I think you should be using CSS to style the table (border etc). Also you shouldn't be using tables for page layout if you are, that should be done with divs and css. __________________ PCHF Rules--PCHF Prework--PCHF Downloads**

02-26-2009	#3
jenny_smith188 Bronze Member Join Date: Dec 2008 Posts: 16 PC Experience: Very Experienced	Re: html table Ok so i guess i left out the part of my css file that has to do with aligning the table it goes something like this: table.center {margin-left:auto; margin-right:auto; position:relative;} and about the typo i meant to leave the height deal out of it so this is what i have: <table class="center" border="0" cellspacing="10"> <tr valign="top"> <td><img src="**.jpg" alt="*"> </td> <td valign="top"><img src=".jpg" alt="*"> </td> </tr> <tr valign="top"> <td bgcolor="A0A0A0"> <span style="color:cc0033"> **********</br> **********</br> ***********</br> </span> </td> </tr> </table> and yes i am using a table as a page layout as i said im new to html coding so how would i either fix this or use divs and css to achieve the same thing the size of the image in cell 1 is 300x225px and the image in cell 2 is 375x281px in cell 3 i actually have text so its the same width as cell 1 (300px) but i don't know how long the text will be also my css table centering wont work on ie7 but does work on firefox3 and safari so i guess i need help with this any help would be greatly appreciated Last edited by jenny_smith188; 02-26-2009 at 10:37 PM.*

02-27-2009	#4
upgrader Tech Support Team Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,313 PC Experience: Some Experience	Re: html table You can change it to divs and css by learning through a few tutorials. Try these tutorials: CSS in general Replace tables with DIVs and CSS A List Apart: Articles: Practical CSS Layout Tips, Tricks, & Techniques There are lots more tutorials out there if you search for terms like creating a website with css divs etc I hope that helps __________________ PCHF Rules--PCHF Prework--PCHF Downloads

03-04-2009	#6
jenny_smith188 Bronze Member Join Date: Dec 2008 Posts: 16 PC Experience: Very Experienced	Re: html table if it helps i took the coding from this site: Simple Horizontal CSS Drop-Down Menu Demo

Similar discussions...
Thread	Thread Starter	Forum	Replies	Last Post
Pending: An Issue with my Master File table?	Scyris	Windows XP/2000	4	02-16-2009 03:28 AM
Pending: Invalid Partition Table	herodom	Hard Drives	5	01-20-2009 03:27 PM
WAP's MAC filter table	th13f	Wireless Help	5	01-04-2009 06:46 PM
Solved: Text into a Table	redders	Office Software	3	06-23-2008 11:40 PM
fetch array in a 3x3 table	spellbyte	Web Design	2	01-07-2007 12:52 PM

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode