Question Layout issues. ( SitePoint Forums Just Starting Your Design )
Updated: 2008-08-12 05:51:18 (9) |
|
Layout issues.
For some reason when i add alot of text to the center of my site http://the.rateage.com/ it streaches and distortes the left orange navbar. If you look at the navbar all the text and seperators are all off. Please look into view source and help me sort this out
Another thing when i typ text into a paragraph while using dreamweaver it wont let me make more then one space with the space bar. How do i do this useing dreamweaver
example
test test test test <---space--------------------->click here
I am editing this site in dreamweaver mx.
|
|
| Answers: Layout issues. ( SitePoint Forums Just Starting Your Design ) |
|
Layout issues.
When adding text, are you typing without any spaces in the text. Not sure what you mean by 'all off'. I can't see anything obviously off using FFox.
As for spacing between words, there is only one space, you are thinking of using a typewriter :-) you can't have more than one space using html unless you use a non breaking space character, but I would not suggest doing this, it could break your layout cross browser.
Copying your code into DW, shows a lot of empty cells, lots of col and row spans which make for a very fragile layout.
Nadia
Nadia P
|
|
Layout issues.
Quote:
|
Originally Posted by Nadia P
When adding text, are you typing without any spaces in the text. Not sure what you mean by 'all off'. I can't see anything obviously off using FFox.
As for spacing between words, there is only one space, you are thinking of using a typewriter :-) you can't have more than one space using html unless you use a non breaking space character, but I would not suggest doing this, it could break your layout cross browser.
Copying your code into DW, shows a lot of empty cells, lots of col and row spans which make for a very fragile layout.
Nadia
|
I think what he means is the fact that he has a lot of spacing above it's blogs in the menu, this has to do with the fact that when you type in DW and you press enter to go to the next line he DW makes a new paragraph.
if you would hit enter with shift pressed you go one line down without you go a whole paragraph down.
Galo
|
|
Layout issues.
Quote:
|
Originally Posted by a1nerd
Another thing when i typ text into a paragraph while using dreamweaver it wont let me make more then one space with the space bar. How do i do this useing dreamweaver
example
test test test test <---space--------------------->click here
I am editing this site in dreamweaver mx.
|
Quote:
|
Originally Posted by Nadia
As for spacing between words, there is only one space, you are thinking of using a typewriter :-) you can't have more than one space using html unless you use a non breaking space character, but I would not suggest doing this, it could break your layout cross browser.
|
Multiple spacing is possible with <pre></pre> (I think you can select it in the properties/inspector pallete also).
Egor
|
|
Layout issues.
Is there anyway to not have the large spaces in my left side menu?
a1nerd
|
|
Layout issues.
Hey bud,
I fixed it up for you. Try this code:
Code:
<html><head><title>index2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!-- ImageReady Preload Script (index2.psd) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
advice_over = newImage("images/advice-over.jpg");
financial_over = newImage("images/financial-over.jpg");
scholarship_over = newImage("images/scholarship-over.jpg");
compare_over = newImage("images/compare-over.jpg");
resources_over = newImage("images/resources-over.jpg");
preloadFlag = true;
}
}
// -->
</script><!-- End Preload Script -->
<link href="style.css" rel="stylesheet" type="text/css"></head>
<body leftmargin="0" topmargin="0" onload="preloadImages();" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="762">
<tbody><tr>
<td colspan="3">
<table border="0" cellpadding="0" cellspacing="0" height="202" width="762">
<tbody><tr>
<td>
<img src="index_files/top.jpg" alt="" height="46" width="762"></td>
</tr>
<tr>
<td>
<img src="index_files/header.jpg" alt="" height="156" width="762"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3">
<table id="Table_07" border="0" cellpadding="0" cellspacing="0" height="31" width="762">
<tbody><tr>
<td>
<a href="#" onmouseover="changeImages('advice', 'images/advice-over.jpg'); return true;" onmouseout="changeImages('advice', 'images/advice.jpg'); return true;" onmousedown="changeImages('advice', 'images/advice-over.jpg'); return true;" onmouseup="changeImages('advice', 'images/advice-over.jpg'); return true;">
<img name="advice" src="index_files/advice.jpg" alt="" border="0" height="31" width="89"></a></td>
<td>
<a href="#" onmouseover="changeImages('financial', 'images/financial-over.jpg'); return true;" onmouseout="changeImages('financial', 'images/financial.jpg'); return true;" onmousedown="changeImages('financial', 'images/financial-over.jpg'); return true;" onmouseup="changeImages('financial', 'images/financial-over.jpg'); return true;">
<img name="financial" src="index_files/financial.jpg" alt="" border="0" height="31" width="89"></a></td>
<td>
<a href="#" onmouseover="changeImages('scholarship', 'images/scholarship-over.jpg'); return true;" onmouseout="changeImages('scholarship', 'images/scholarship.jpg'); return true;" onmousedown="changeImages('scholarship', 'images/scholarship-over.jpg'); return true;" onmouseup="changeImages('scholarship', 'images/scholarship-over.jpg'); return true;">
<img name="scholarship" src="index_files/scholarship.jpg" alt="" border="0" height="31" width="89"></a></td>
<td>
<a href="#" onmouseover="changeImages('compare', 'images/compare-over.jpg'); return true;" onmouseout="changeImages('compare', 'images/compare.jpg'); return true;" onmousedown="changeImages('compare', 'images/compare-over.jpg'); return true;" onmouseup="changeImages('compare', 'images/compare-over.jpg'); return true;">
<img name="compare" src="index_files/compare.jpg" alt="" border="0" height="31" width="89"></a></td>
<td>
<a href="#" onmouseover="changeImages('resources', 'images/resources-over.jpg'); return true;" onmouseout="changeImages('resources', 'images/resources.jpg'); return true;" onmousedown="changeImages('resources', 'images/resources-over.jpg'); return true;" onmouseup="changeImages('resources', 'images/resources-over.jpg'); return true;">
<img name="resources" src="index_files/resources.jpg" alt="" border="0" height="31" width="89"></a></td>
<td>
<img src="index_files/callnow.jpg" alt="" height="31" width="317"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3">
<table id="Table_06" border="0" cellpadding="0" cellspacing="0" height="28" width="762">
<tbody><tr>
<td>
<img src="index_files/textbar.jpg" alt="" height="28" width="762"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td valign="top" class="leftbg"><table width="140" border="0" cellpadding="0" cellspacing="0" class="leftbg">
<tbody><tr>
<td valign="top"> <img src="index_files/left_01.gif" alt="" height="18" width="139"></td>
</tr>
<tr>
<td width="140" valign="top" class="edLoans"> <ul>
<li><a href="#">Consideration Loans</a></li>
<li><a href="#">Stafford Loans</a></li>
<li><a href="#">Federal PLUS Loans</a></li>
<li><a href="#">Private Loans</a></li>
<li><a href="#">FAFSA Online</a></li>
</ul></td>
</tr>
<tr>
<td align="center" valign="top"> <p class="pImage"><img src="index_files/seperate.gif" class="hr" border="0" height="8" width="126"></p>
<img src="index_files/left_03.gif" alt="" height="24" width="139"></td>
</tr>
<tr>
<td align="center" height="30" valign="top" width="140"> <select name="select" class="applyLoan"><option>Select A Loan</option></select> <p class="pImage"><img src="index_files/seperate.gif" class="hr" border="0" height="8" width="126"></p></td>
</tr>
<tr><td align="center" valign="top"> <img src="index_files/left_05.gif" alt="" height="18" width="139"></td>
</tr>
<tr>
<td class="edLoans" valign="top" width="140"> <ul>
<li><a href="#">Consideration Loans</a></li>
<li><a href="#">Stafford Loans</a></li>
<li><a href="#">Federal PLUS Loans</a></li>
<li><a href="#">Private Loans</a></li>
<li><a href="#">FAFSA Online</a></li>
</ul>
<p class="pImage"><img src="index_files/seperate.gif" class="hr" border="0" height="8" width="126"></p></td>
</tr>
<tr>
<td class="padding-left" valign="top" width="140"><p class="emailsubs">get
DEANdirect, our customized message service with financial aid
news and deadlines.<br>
<span class="emailtitle">Just enter your email:</span>
<input name="text2" class="emailform" type="text">
<input name="imageField" class="imageSignUp" src="index_files/signup.gif" border="0" height="20" type="image" width="84">
<br>
<img src="index_files/seperate.gif" class="hr" border="0" height="8" width="126"></p>
<ul>
<li>Lower your student loan payments by up to 60%</li>
<li>Contact a Dean's List Representative</li>
<li>Tell a friend about Dean's List</li>
</ul></td>
</tr>
</tbody></table> </td>
<td>
<table border="0" cellpadding="0" cellspacing="0" height="50%" width="468">
<tbody><tr>
<td class="body" height="100%" valign="top" width="468"> <img src="index_files/deanlist.jpg">
<div class="email"><img src="index_files/subscribe.jpg">
<input name="text" class="emailform2" type="text">
<input name="imageField2" src="index_files/signup.gif" border="0" height="20" type="image" width="84">
</div>
<table border="0" height="544" width="427">
<tbody><tr>
<td colspan="2" height="31"><img src="index_files/gradstudents.jpg" height="23" width="378"></td>
<td width="35"> </td>
</tr>
<tr>
<td height="84" valign="top" width="372"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2">At
long last, here's the Fastest, Easiest, and Most<br>
Intelligent Scholarship-Finder ever created - Period! The
Unique<br>
Scholarship & Grant Guide is the only resource in the
WORLD<br>
to give you DIRECT access to over 20 of the Web's Top Scholarship
databases </font> <font face="Arial, Helvetica, sans-serif" size="2">.........<a href="http://the.rateage.com/info.html">.Click
here for more info</a></font><a href="http://the.rateage.com/info.html"><br>
</a> </div></td>
<td width="6"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="36"><img src="index_files/parents.jpg" height="23" width="378"></td>
<td> </td>
</tr>
<tr>
<td height="36" valign="top"><font face="Arial, Helvetica, sans-serif" size="2">Will
teach students secrets of how to be successful in college!
A must acquire by students and Great gift from parents to
their children…………..<a href="http://the.rateage.com/info.html">Click
here for more info</a><br>
</font></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="39"><img src="index_files/highstudent.jpg" height="23" width="378"></td>
<td> </td>
</tr>
<tr>
<td height="32" valign="top"><font face="Arial, Helvetica, sans-serif" size="2">This
highly proprietary report is like nothing you have seen, its
personalized for you and provides you with incredible amount
of data that could save you thousands of $$$ and endless work....................<a href="http://the.rateage.com/info.html">Click
here for more info</a></font><br></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="35" valign="middle"><img src="index_files/highstudent.jpg" height="23" width="378"></td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="20" valign="top"><font face="Arial, Helvetica, sans-serif" size="2">Will
teach students secrets of how to be successful in college!
A must acquire by students and Great gift from parents to
their children…………..<a href="http://the.rateage.com/info.html">Click
here for more info</a></font></td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="35"><img src="index_files/highstudent.jpg" height="23" width="378"></td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="46" valign="top"><font face="Arial, Helvetica, sans-serif" size="2">This
highly proprietary report is like nothing you have seen, its
personalized for you and provides you with incredible amount
of data that could save you thousands of $$$ and endless work…………….
Click here to find out</font></td>
<td> </td>
</tr>
<tr>
<td colspan="2" height="46"> </td>
<td> </td>
</tr>
</tbody></table>
<p class="contentMrg"><br>
</p></td>
</tr>
</tbody></table></td>
<td valign="top">
<table background="index_files/right_bg.jpg" border="0" cellpadding="0" cellspacing="0" height="100%" width="154">
<tbody><tr>
<td valign="top">
<img src="index_files/return_user.jpg" height="51" width="153"><br>
<img src="index_files/lender.jpg"><br><img src="index_files/reduce_payment.jpg"><br>
<br>
<img src="index_files/help_advisor.jpg" height="87" width="153">
</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td colspan="3">
<table background="index_files/footer_bg.jpg" border="0" cellpadding="0" cellspacing="0" height="22" width="762">
<tbody><tr>
<td class="footerbg" height="22" width="760"><a href="#">About Dean's List</a> | <a href="#">Privacy</a> | <a href="#">Terms of Use</a> | <a href="#">Site Map</a> | <a href="#">Contact</a> | <a href="#">Opportunities</a> | <a href="#">Press Room</a> <em> 800-717-1920</em></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
</center>
</body></html>
conradical
|
|
Layout issues.
The issue was that you had a nested table within a <td> and you gave the height of that table 100% and assigned it a class which controlled the background image, when you do that the text within that table got totally whacked out.
If you have a nested table within a <td> it is better to give that <td> the background. THats what i did, i gave the <td> the bg image and removed the 100% height from the nested table.
You might have a tighter text, but you can space it out with some CSS for the <ul>.
conradical
|
|
Layout issues.
Thank you that helps alot. On the left panel there still is some issues with the alignment as well on the right side panel. I uploaded the edited up to date version of the site so you can see what i mean. The site is uploaded at http://the.rateage.com
Quote:
|
Originally Posted by conradical
The issue was that you had a nested table within a <td> and you gave the height of that table 100% and assigned it a class which controlled the background image, when you do that the text within that table got totally whacked out.
If you have a nested table within a <td> it is better to give that <td> the background. THats what i did, i gave the <td> the bg image and removed the 100% height from the nested table.
You might have a tighter text, but you can space it out with some CSS for the <ul>. |
a1nerd
|
|
Layout issues.
I did not look at the source yet but i know that i did not remove the class for the nested table in the left panel. I just added the same class to the container <td>. I'm guessing if you removed the class for the nested table it should be ok....
I'll take a look at the source a bit later and play with it
conradical
|
|
Layout issues.
conradical, you are my hero! That you are going to have the time to look that coding nightmare (even with dreamweaver) makes you the star of the day...
a1nerd, don't want to ofend you, but you do have a coding nightmare... apart from the wowing number of... 9 tables!! in just one document.
It is normal that you have issues that are hard to solve. Whatever change you do is bound to effect the rest of the document.
It also makes me wonder if you have considered things like bandwidth and accessibility or, even more important, future updates.
About the left hand menu space, I imagine that you are talking about the space at the bottom? Not much that you can do about it, really, unless you add up more content, more pics, or create slightly bigger spaces between the options in the menu.
molona
|
|
- Source:
- Previous Question: SitePoint Forums Just Starting Your Design
- Next Question: AVForums Freeview |
|
|
