Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Aug 2014
    Posts
    16
    Member #
    39998

    tables are messed up

    Hi everyone, I need help aligning(?) my tables. I got them straight as much as possible but its still a little messy. I'm not an expert with tables, obviously and prefer other layout designs but I wanted to keep this one with tables for various reasons.

    This is my index.html
    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>M I S C H I E V O U S X 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#82166f" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (table layout.psd) -->
    <table id="Table_01" align="center" width="1400" height="1500" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="7">
    			<img src="images/index_01.gif" width="1400" height="151" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="7">
    			<img src="images/index_02.gif" width="1400" height="149" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="7">
    			<img src="images/index_03.gif" width="1400" height="153" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="7">
    			<img src="images/index_04.gif" width="1400" height="148" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/index_05.gif" width="258" height="590" alt=""></td>
    			
    		<td id="nav1" width="190"  valign="top" style="background: url(images/index_06.gif) no-repeat;"> 
    	
    
    <!------- Begin Navigation ------->
    
    <div id="nav1">
    <h2>Navigation</h2>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
    <br>
    <br>
     <a href="#">Link here</a><br>						
    <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
    <a href="#">Link here</a><br>
    <br>
    <br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
    <br>
    </div>
    </td>
    
    <!------- End Navigation ------->
    
    
    		<td>
    			<img src="images/index_07.gif" width="12" height="590" alt=""></td>
    		
    			<td id="content" width="490" valign="top" style="background: url(images/index_08.gif) no-repeat;"> 
    
    <!------- Begin Content ------->
    
    <h1>Testing</h1>
    <p align="justify">
    testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing
    testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing
    testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing
    testing testing testingtesting testing testingtesting testing testingtesting testing testing<br>
    testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing<p>testing testing testingtesting testing testingtesting testing testingtesting testing testing
    <br><br>
    testing testing testingtesting testing testingtesting testing testingtesting testing testing
    testing testing testingtesting testing testingtesting testing testingtesting testing testingtesting testing testing
    testing testing testingtesting testing testingtesting testing testingtesting testing testing</p>
    
    </td>
    <!------- End Content ------->
    
    
    
    
    		<td>
    			<img src="images/index_09.gif" width="10" height="590" alt=""></td>
    		
    			<td id="nav1" width="190" valign="top" style="background: url(images/index_10.gif) no-repeat;"> 
    
    
    		<h2>Navigation</h2>
    		<div id="nav1">
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
    <br>
    <br>
     <a href="#">Link here</a><br>						
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
    <br>
    <br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
     <a href="#">Link here</a><br>
    <br>
    </div>
    		</TD>
    	
    		<td>
    			<img src="images/index_11.gif" width="247" height="590" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="7">
    			<img src="images/index_12.jpg" width="1400" height="309" alt=""></td>
    	</tr>
    
    </td>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>
    and this is my style.css
    HTML Code:
    BODY { 
    background-color: #82166f;
    background-image: url('image/bg.gif');
    background-repeat: repeat-y;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 10pt;
    margin : 0px ;
    letter-spacing: 1pt;  }
    
    b { color: #ffffff;
    font-family: Verdana;
    font-size: 10pt;
    letter-spacing: 1pt; }
    
    i { color: #ffffff;
    font-family: Verdana;
    font-size: 10pt;
    letter-spacing: 1pt; }
    
    a { color: #ffffff;
    font-weight: normal;
    text-decoration: none;
    letter-spacing: 1pt; }
    
    a:hover { color: #FFFFFF;
    font-weight: normal;
    font-style: italic;
    text-decoration: none;
    cursor: default;
    letter-spacing: 1pt; }
    
    td { color: #FFFFFF;
    font-family: Verdana;
    font-size: 11px;
    letter-spacing: 1pt; }
    
    #nav1
    { width: 190px; 
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 11px;
    letter-spacing: 1pt;}
    
    #content
    {width: 490px; 
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 11px;
    letter-spacing: 1pt;
    }
    Please excuse my noobyness, but any help would be greatly appreciated.Thank you.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Do you have it online that i can see it? On first sight I can tell you just to change divs ID. ID must be unique, and you have #nav1 on many places in code.

  4. #3
    Junior Member
    Join Date
    Aug 2014
    Posts
    16
    Member #
    39998
    Quote Originally Posted by sasha_bolcina View Post
    Do you have it online that i can see it? On first sight I can tell you just to change divs ID. ID must be unique, and you have #nav1 on many places in code.
    Yup its here mischievous-designs.net, sorry I forgot to mention on my op.

    So since i have 2 navigations, i should change the other ID to another?
    Last edited by mischievousx3; Sep 14th, 2014 at 08:08 AM.

  5. #4
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    You have many occurrences of id="nav1". But, in html, only one id may be named "nav1".

    However, online site is completely different from what you send here and online site looks ok. Table layout is removed, what is great decision!

  6. #5
    Junior Member
    Join Date
    Aug 2014
    Posts
    16
    Member #
    39998
    Quote Originally Posted by sasha_bolcina View Post
    You have many occurrences of id="nav1". But, in html, only one id may be named "nav1".

    However, online site is completely different from what you send here and online site looks ok. Table layout is removed, what is great decision!
    Okay let me try changing it then. The site looked completely different for a short time because I had to switch the domains according to its content since I have 2 other domains. But it should be back to where the tables were messed up.

  7. #6
    Junior Member
    Join Date
    Aug 2014
    Posts
    16
    Member #
    39998
    yeah I tried to name the other navigation on the right nav2 and it still look the same.

  8. #7
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    in css:
    change width
    Code:
    #nav1{
        color: #ffffff;
        font-family: Verdana;
        font-size: 11px;
        letter-spacing: 1pt;
        width: 194px;
    }
    #nav2 {
        color: #ffffff;
        font-family: Verdana;
        font-size: 11px;
        letter-spacing: 1pt;
        width: 186px;
    }

  9. #8
    Junior Member
    Join Date
    Aug 2014
    Posts
    16
    Member #
    39998
    Quote Originally Posted by sasha_bolcina View Post
    in css:
    change width
    Code:
    #nav1{
        color: #ffffff;
        font-family: Verdana;
        font-size: 11px;
        letter-spacing: 1pt;
        width: 194px;
    }
    #nav2 {
        color: #ffffff;
        font-family: Verdana;
        font-size: 11px;
        letter-spacing: 1pt;
        width: 186px;
    }
    Unfortunately, it didnt work =/
    I even tried decreasing the size of the content, it seem like that made it worse.
    I appreciate you helping me, thank you ^_^

    EDIT//
    What if made each as a table? Would that make a difference or it would make it worse?
    Last edited by mischievousx3; Sep 14th, 2014 at 01:21 PM.

  10. #9
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    I will try to explain you the problem in short.
    Tables cannot be fixed by width. They will always resize to fit content. Thats why you have to resize other elements in table to control its width.

    In row with image "index_0e4.gif" columns are spanned. This image has vertical lines which define column width in row bellow. So, you can solve problem in 3 ways:
    1. Make row with image in seven columns and divide image in 7 parts, every part for a column.
    2. Set width of "nav1" and "nav2" to align verticals with image verticals.
    3. - easiest: simply delete vertical lines from image "index_0e4.gif"

    One of this three solutions must work.

    Greetings.

  11. #10
    Junior Member
    Join Date
    Aug 2014
    Posts
    16
    Member #
    39998
    Thanks for replying..

    I dont see vertical lines from index_04.gif..but I tried the 2nd option, it still wont work. I've also removed the div ids with the same result.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:33 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com