Adjusting Table

Xup guys. Am new here and i need help.
Am designing a site inorder to improve my skills, as am kinda a newbie.
Uhmmm, i used to tables in the site, by placing them side by side. The left is the navigation, while the right side is the main body. My questions are:
*when i added some contents into the main body, a space appears above it, i tried adjusting the height, to no avail.
*the second is this, that in the same main body (i.e the table by the right) the table doesnt strech to the end of the screen. Plz i nid ur help.
Heres a snapshot of the site (its nt online yet)

TIA.

Welcome to Sitepoint. This is the right place to get some guidance and help improving your skills.

I can guarantee you will get numerous responses bemoaning the dangers of using Tables. And the reason for both problems you have described is that tables are very restrictive in the way they respond; having been designed to display a table of information.

My first suggestion is to ‘style’ the table so you can see visually where all the divisions lie. This helps you in understanding how the browser renders tables.

Ok. Thanks alot. Actually, i kinda dislike styling my page with tables, buh i couldnt get any alternative. If theres anyone, i’ll dump the table idea. Thanks again.

It’s pretty hard to give you any suggestions based just on your picture. :slight_smile:

Can you post the HTML and CSS code you’re using for the page? Wrap [noparse]


[/noparse] tags around it, to keep it formatted.

If the page is on a server somewhere and you can provide a live link, that’s even better, but if not, your code will do fine. :slight_smile:

Ok. I’ll do that when am on pc, am on mobile now.

HERE IS THE CSS CODE::::::::


ul.navlist{
	width:200px;/*
	width of menu*/
	overflow:auto;
	background:black/*
	background of menu*/
	margin:0;
	padding:0;
	padding-top:7px;/*
	top padding*/
	list-style-type:none;
}

ul.navlist{
	text-align:right;/*
	right align menu links*/
}

ul.navlist li a{
position:relative;
display:inline-block;
text-indent:5px;
overflow:hidden;
background:rgb(127, 201, 68);/*
initial background color of links*/
font: bold 16px Germand;
text-decoration:none;
padding:5px;
margin-bottom:7px;/*
spacing between links*/
color:black;
-moz-box-shadow:inset -7px 0 5px rgba(114,114,114,0.8);/*
shadow added to each link*/
-webkit-box-shadow:inset -7px 0 5px rgba(114,114,114,0.8);
box-shadow:inset -7px 0 5px rgba(114,114,114,0.8);
-moz-transition:all 0.2s ease-in-out;/*
CSS3 transition of hover properties*/
-webkit-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}

ul.navlist li a:hover{
padding-right:30px;/*
add right padding to expand link
horizontally to the left*/
color:black;
background:rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114,0.8);/*
contract inner right shadow*/
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114,0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114,0.8);
}

ul.navlist li a:before{/*
CSS generated content:slanted right edge*/
content:"";
position:absolute;
left:0;
top:0;
border-style:solid;
border-width:70px 0 0 20px;/*
Play around with 1st and 4th value to 
change slant degree*/
border-color:transparent transparent transparent black;/*
change black to match the background color of the menu UL*/
}

HERE IS THE HTML CODE FOR THE TABLE:::::::::


<!--MAIN TABLE(YOU CAN DEFINE PADDING ACCORDINGLY)-->
<div id="tables">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="20%">
<!--Table on the left side-->
<table width="20%" border="1" cellspacing="0" cellpadding="1" id="left-table">
<tr>
<td>
<div id="navbar">
<ul class="navlist">
<li>
<a href="index.html" class="navmenu" title="Naijageek">HOME</a>
</li>
<li>
<a href="tutorials/index.html" class="navmenu" title="Naijageek-Tutorials">TUTORIALS</a>
</li>
<li>
<a href="articles/index.html" class="navmenu" title="Naijageek-Articles">ARTICLES</a>
</li>
<li>
<a href="about_us/index.html" class="navmenu" title="Naijageek-About Us">ABOUT US</a>
</li>
<li>
<a href="privacy_policy/index.html" class="navmenu" title="Naijageek-Privacy Policy">PRIVACY POLICY</a>
</li>
<li>
<a href="terms_and_conditions/index.html" class="navmenu" title="Naijageek-Terms and Conditions">TERMS &amp; CONDITIONS</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
<!--THIS THE END OF RIGHT TABLE-->
</td>
<td width="100%">
<!--Table on right side-->
<div id="tables">
<table width="703" height="263" border="1" cellspacing="0" cellpadding="1" id="right-table">
<tr>
<td width="701" height="180">
<p>
It's a great priviledge, having you here today. We are sincerely glad you found time to visit us.</p>
<br />
<p>Uhmmmm, before you go further navigating through our site, we'll like to expalin some few things to you or rather gist you on somethings that would be benefitial to you</p>
<br />
<p>For those that do not know what the word <b id="keyword">GEEK</b> means, here is it:</p>
<dt>A <b id="keyword">GEEK</b> can be said to be a person who is interested in technology, especially computing and media.
<br /></dt>
<p><b id="keyword">GEEK</b> are adept with computers, and use the term hacker in a positive way, though not all are hackers themselves</p>
</td>
</tr>
</table>
<!--THIS THE END OF RIGHT TABLE-->
</div>
</td>
</tr>
</table>
<!--END OF MAIN TABLE-->

OK - you can start be removing all the code in RED, because you don’t need to use tables here at all. Also take out the line breaks - <br />. A new paragraph will automatically start on a new line, and if you want more spacing, you can add it with CSS. Finally, remove the <dt> tags, which can only be used inside a definition list <dl>.


[COLOR="#FF0000"]<!--MAIN TABLE(YOU CAN DEFINE PADDING ACCORDINGLY)-->
<div id="tables">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="20%">
<!--Table on the left side-->
<table width="20%" border="1" cellspacing="0" cellpadding="1" id="left-table">
<tr>
<td>[/COLOR]
<div id="navbar">
<ul class="navlist">
<li>
<a href="index.html" class="navmenu" title="Naijageek">HOME</a>
</li>
<li>
<a href="tutorials/index.html" class="navmenu" title="Naijageek-Tutorials">TUTORIALS</a>
</li>
<li>
<a href="articles/index.html" class="navmenu" title="Naijageek-Articles">ARTICLES</a>
</li>
<li>
<a href="about_us/index.html" class="navmenu" title="Naijageek-About Us">ABOUT US</a>
</li>
<li>
<a href="privacy_policy/index.html" class="navmenu" title="Naijageek-Privacy Policy">PRIVACY POLICY</a>
</li>
<li>
<a href="terms_and_conditions/index.html" class="navmenu" title="Naijageek-Terms and Conditions">TERMS & CONDITIONS</a>
</li>
</ul>
</div>
[COLOR="#FF0000"]</td>
</tr>
</table>
<!--THIS THE END OF RIGHT TABLE-->
</td>
<td width="100%">
<!--Table on right side-->[/COLOR]
<div id="tables">
[COLOR="#FF0000"]<table width="703" height="263" border="1" cellspacing="0" cellpadding="1" id="right-table">
<tr>
<td width="701" height="180">[/COLOR]
<p>
It's a great priviledge, having you here today. We are sincerely glad you found time to visit us.</p>
[COLOR="#FF0000"]<br />[/COLOR]
<p>Uhmmmm, before you go further navigating through our site, we'll like to expalin some few things to you or rather gist you on somethings that would be benefitial to you</p>
[COLOR="#FF0000"]<br />[/COLOR]
<p>For those that do not know what the word <b id="keyword">GEEK</b> means, here is it:</p>
[COLOR="#FF0000"]<dt>[/COLOR]A <b id="keyword">GEEK</b> can be said to be a person who is interested in technology, especially computing and media.
[COLOR="#FF0000"]<br /></dt>[/COLOR]
<p><b id="keyword">GEEK</b> are adept with computers, and use the term hacker in a positive way, though not all are hackers themselves</p>
[COLOR="#FF0000"]</td>
</tr>
</table>
<!--THIS THE END OF RIGHT TABLE-->[/COLOR]
</div>
[COLOR="#FF0000"]</td>
</tr>
</table>
<!--END OF MAIN TABLE-->[/COLOR]

Next, rename your right-hand div to <div id=“content”> (as you’re no longer using tables. :slight_smile: )

In your CSS, add

#navbar {float: left;
	padding-right: 2em;
	}

This will position your navigation on the left, leave a wee bit of space and let your content fill the rest of the width. You can adjust the amount of padding to suit.

To tidy things up a little more, change id=“keyword” to class=“keyword”. An id can only occur once on each page, whereas a class can appear multiple times. You have three instances of “keyword” here, so it needs to be a class. Also change the <b> tags to <span> tags, so you should end up with

<span class="keyword">GEEK</span>

The reason for this is that <b> is presentational - it tells the browser to display bold text. But supposing in the future you want keywords to be in italics - you would need to change all those <b> tags to <i>. This way, you can use the CSS to control appearance, by adding

.keyword {font-weight: bold;}

to your CSS.

See how you get on with this, and let us know if you need any further help. (You might also want to run your text through a spell-check. :slight_smile: )

Thank alot boss. I’ll do that asap and get back to you.

Great! It worked! You rock boss! Buh the only prob is that the text in the contents are kinda clumpsing to the navbar. Hope u get what i mean.

If you mean that you want a little more space between the navbar and the content, then just adjust the padding:

#navbar {float: left;
	padding-right: 2em;
	}

I used 2em, because I generally work in em. You can give it a px value if you prefer.

Ok. Thanks alot. Am highly grateful.

Glad I could help. :slight_smile: