Trouble with aligning tables in Dreamweaver

Discussion in 'HTML & Website Design' started by Lectrice, Jul 9, 2008.

  1. #1
    Hi everyone, first time poster here because I need serious help! I have a website with nested tables, and in some of those nested tables I have tables that need to be both centered and at the top of the table it is in. I've tried everything, valign="top", td valign="top" in different places in the html code. I've used layout cells in Dreamweaver only to see that means it will align text inside the cells and not align the table itself...can anyone help me please? I really want to finish this website as soon as possible, and I have no one to physically ask for help. Thank you!

    Oh, here an example of what I want to do... http://www.deafphx.com/events_calender.html See, the calender grid needs to be on the top center of the table on the left side. Otherwise it just looks silly.
     
    Lectrice, Jul 9, 2008 IP
  2. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Does no one know how? I did think up a solution, but it might be very clunky. Right now I have a left-aligned table inside another table that is centered. The offending table I want to be at the top is now centered inside the left-aligned table. I could add another table that is narrow and aligned to the top and move the final centered table inside that...It would bring it to the top, though not to a true center. It would add more unneeded memory to the website...and it may not even stay in center at all...no it wouldn't...I suspect that the table would collapse to the left if I did that.

    I'll check back tomorrow and see if anyone could help. You would think that this would be an option in Dreamweaver...to vertically and horizontally align things!

    I'm almost entirely self-taught and I don't know how to hand-code beyond the basics, and doing an entire website by hand would make my brain explode. So, kudos to those who can!
     
    Lectrice, Jul 10, 2008 IP
  3. ctyler

    ctyler Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello Lectrice,
    Do you have some code I could look at. Also, if it isn't working in Dreamweaver it doesn't mean that it wont work on your web site. If it is on a web site throw me a URL and I will look at it that way.
     
    ctyler, Jul 10, 2008 IP
  4. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Whoot! A reply! Okay, here's the website... http://www.deafphx.com

    Sorry, apparently I'm too new to put in live links.

    All of the existing pages except the index have the same layout, so all of the pages have the same centered element that I'm trying to bring to the top-center. I would go ahead and add valign="top", but I'm not sure where to put it in the table code...does it matter as long as it is within the <tr> or <td> tags?
     
    Lectrice, Jul 10, 2008 IP
  5. ctyler

    ctyler Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I see that is an example that you want to do. I need to see what you are working on to trouble shoot.

    Sounds like you are confused by the alignment. If you have a table and you set the alignment to top or what ever, that is refering to the contents of that table or cell not the table itself. Also, you may have better luck with div's.

    I may be off base with what you are looking for. :D.
     
    ctyler, Jul 10, 2008 IP
  6. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hello, actually that is my website as it is now, and for example, this page... http://www.deafphx.com/events_calender.html

    See the calender grid? I don't want it that far down in the page, since it is dead centered there in the left-hand table. There is another table to the right that is earmarked for future advertising, but you can't see it right now since it is invisible.

    Tell me more about div tags...and yeah I think I am confusing text alignment with table alignments...I'm just not sure of the html code. This is my first time working with tables, actually.
     
    Lectrice, Jul 10, 2008 IP
  7. scubita

    scubita Peon

    Messages:
    5,550
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #7
    In Dreamweaver:

    - modify
    - convert
    - tables to layers

    Best advice i can give you. Get ride of those tables.
     
    scubita, Jul 10, 2008 IP
  8. ctyler

    ctyler Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Lectrice,
    Well the Dreamweaver templates are a pain! Your best bet is to use PHP includes. Give me a few and I will see what I can come up with. :eek:
     
    ctyler, Jul 10, 2008 IP
  9. ctyler

    ctyler Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Okay,
    he is a rough version.
    http://www.thebugledirect.com/deafphx/
    Now the header and navigation section are added in with PHP includes. Way better and easier than dreamweaver templates. To tell you the truth I would rather shoot myself in the face than use layout tables!

    This is done with css also.

    I am not sure how I can get these files to you but they are yours if you want them.:)
     
    ctyler, Jul 10, 2008 IP
  10. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Yeah I agree with you on Dreamweaver templates being a pain! I had the worst time with it in the last website I did...it looks good, but the source code is a huge mess. One of these days I'll have to go in and fix the source code for that site.

    As for this website, well I don't know any PHP at all, so I'll try what scubita up above says and try and convert everything to layers. Hopefully it will look exactly the same...otherwise I'll have to rebuild the website all over again...*shudders*
     
    Lectrice, Jul 10, 2008 IP
  11. ctyler

    ctyler Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Alright. I will delete that then. Sorry I could be of more help.
     
    ctyler, Jul 10, 2008 IP
  12. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Wait! I didn't see that reply with the php in my website! I want to see it first before you delete...
     
    Lectrice, Jul 10, 2008 IP
  13. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Nuts...it's gone. :( Thank you anyway for your help! I don't know why I didn't see your post about putting the PHP in my website...sorry for making you do all that work!
     
    Lectrice, Jul 10, 2008 IP
  14. ctyler

    ctyler Guest

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Sorry about that. I am kind of a neat freak when it comes to my directories. I put it back for you but if you are looking for the include codes you won't be able to see them from viewing source.

    Not much work. Don't sweat it. I like to tinker anyway. :p

    You do not need to know php to use php includes.

    Basicly you make a file like include_header.php in a file in your directory called includes. In this file you design your header. In your index.php you just type in <?php include('includes/include_header.php'); ?> where ever you want your header to be included. I usually take my index.php and do the basic layout and copy for my other pages. Then when I need to make a change to the header sight wide I just change the include_header.php file and is is taken care of site wide. The header is included on the server side before it is delivered to your browser so it just looks like it html-no php.
     
    ctyler, Jul 10, 2008 IP
  15. Lectrice

    Lectrice Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Heya, thanks for giving me the example! It helps, though I'm too nervous to try PHP code, even a little bit on the website since I just know I'll screw it up. I'm trying to see what the website looks like if I converted it to layers instead, but the trouble is no matter what I do, I cannot get the Convert button under Modify to become active, in order to convert, so I don't know what to do right now...
     
    Lectrice, Jul 10, 2008 IP
  16. debieb

    debieb Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    You can fix that problem with css:
    body {
    margin:0px;
    }
    This will align your table to the top of the page.
     
    debieb, Aug 23, 2008 IP
  17. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #17
    This is one of the worst coded sites I've seen since...last week.

    Throw Dreamweaver in the trash NOW before you abuse it and learn to code. This is such a simple layout, with NO real need for tables. Especially not for those freaking stupid rollover images, those menus could very easily be done in plain text.

    I'm recoding the site now, shall have it done by the end of tonight (sorry, I'm a little busy).

    Deathshadow, feel free to build on.
     
    blueparukia, Aug 23, 2008 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #18
    What BP said. There's nothing there to warrant tables, and with only 3.2k of content, most of it being flat text there's little reason for that to be a whopping 10k of html.

    It's really compounded by accessability issues, like the undersized menu text - done as images with no non-image equivalents at that.

    There's really little reason for the HTML for that to be more than this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=iso-8859-1"
    />
    
    <title>
    	Home - Deaf Phoenix
    </title>
    
    </head><body>
    
    <div id="container">
    	<h1><a href="\">Deaf Phoenix</a></h1>
    	<ul id="mainMenu">
    		<li><a href="#">Local Organizations</a></li>
    		<li><a href="#">Career Opportunities</a></li>
    		<li><a href="#">Education</a></li>
    		<li><a href="#">Services</a></li>
    		<li><a href="#">Entertainment</a></li>
    		<li><a href="#">Events</a></li>
    		<li><a href="#">DPHH</a></li>
    		<li><a href="#">Sponsors</a></li>
    	</ul>
    	<div id="content">
    		<p>
    			Hello, we are excited to announce a new website that we have 
    			initiated for the Phoenix Metro Area Deaf and Hard of Hearing
    			community. As you can see, the new website address is 
    			www.DeafPhx.com. Currently only a few buttons work, however
    			the other buttons will start to work once more information is 
    			added.
    		</p><p>
    			The main purpose of this website is to provide people with
    			invaluable resources that will provide them with information
    			about different local Deaf organizations (including religious
    			affiliates), services for the Deaf (interpreting, advocacy, 
    			Vocational Rehabilitation), education and career opportunities,
    			entertainment, special events and workshops. This is being 
    			implemented with the hope that this can become the website
    			that people will navigate to for information that they need
    			as there currently isn't a specific website that encompasses
    			ALL of the Deaf-related resources for the Phoenix Metro Area.
    		</p><p>
    			We would like to invite any Deaf-related organization, company,
    			or agency to become part of our website at no cost. This will 
    			allow us to create resource lists that includes your organization,
    			company, or agency with key contact information where with a 
    			few simple clicks, people can contact you. All it requires are
    			six simple steps:
    		</p>
    		<ol>
    			<li>The name of the organization, company or agency.</li>
    			<li>Address or location.</li>
    			<li>Phone number (can be a VideoPhone number)</li>
    			<li>E-mail contact</li>
    			<li>Website address</li>
    			<li>A brief explanation of what the organization, company, or agency does.</li>
    		</ol>
    		<p>
    			A false sample is given below to help give you an idea:
    		</p>
    		<div id="contactBox">
    			Deaf Contact<br />
    			1000 W. Palmer Ave. Phoenix, AZ, 85008<br />
    			(800) 555-1234<br />
    			info@deafcontact.com<br />
    			http://www.deafcontact.org<br />
    			<strong>About Deaf Contact:</strong> Our mission is to maximize the 
    			self-sufficiency of deaf adults needing special services by providing
    			Referral Education, advocacy, counseling and housing.
    		</div>
    		<p>
    			Also please let us know which category you feel your organization,
    			company or agency best fits in. The categories thus far are: Local
    			Organization (including religious affiliations), Service Providers
    			(examples are interpreting agency, advocacy agency), Education 
    			(from Elementary level to Post Graduate programs), Career 
    			Opportunities, and Entertainment.
    		</p><p>
    			Please send all of this information to DeafPhx@gmail.com and we
    			will be happy to add it to our website resource listings.
    		</p><p>
    			With this website, we are looking to work with every Deaf-related
    			organization, company, and business that wishes to add their 
    			information. I strongly believe that having a main website like
    			www.DeafPhx.com will make it a lot easier for people to find the
    			information they are looking for, especially for those who are new
    			to Phoenix, or considering on moving to Phoenix. Additionally, this
    			website has a strong potential to increase the number and services
    			provided to the Deaf and Hard of Hearing community. We also will be
    			expanding this website to include sponsors and advertisements in the
    			near future. We do hope that you will become part of this new and 
    			exciting website! If you have any questions, please do not hesitate
    			to contact us at DeafPhx@gmail.com
    		</p><p>
    			Have a great day,
    		</p><p>
    			Sean Furman, DeafPhx Website Coordinator
    		</p><p>
    			*Latest update was on 7/09/08
    		</p>
    	<!-- #contactBox --></div>
    <!-- #container --></div>
    
    </body></html>
    Code (markup):
    BP - you said you were working on CSS, so I'll leave that to you.
     
    deathshadow, Aug 23, 2008 IP
  19. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #19
    Well I was....but Lectrice hasn't posted since 11th of July, this is one big reason why you shouldn't bump posts debieb.

    *blueparukia goes back to real work.
     
    blueparukia, Aug 23, 2008 IP