|
HTML - Closing A Gap Between The Content And The Header
I understand that external CSS is great and a better choice, however, I am using a script that has many functions I need and is written this way. So I just want to finish up with what I have , instead of re-write this script.
An "in-line css" suggestion worked fairly well except that I have a gap between the white background and the Header, and the white background and the Footer. Can someone help me eliminate this gap so the white background extends all the way to the Header and Footer, please? Here is the code, and I've attached an image for visual aid. Thanks! Code: <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:200%"> <td align="left" valign="top"><font face="Arial" color="#000000" size="4"><b>text text text text text text text </b><br><font face="Arial" color="#990000" size="4"><b>TEXT TEXT TEXT TEXT TEXT TEXT TEXT </b></font><br> <font color="#FF9900">______________________________</font><br> <font face="Arial" color="#6B6B6B" size="3">Text Text Text text.<br><font face="Arial" color="#000000" size="3">TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT</font><br> </td></tr> </table> Similar TutorialsI have a web page that has a gap between the main content page (lower) and the header piece(upper) and I can't figure out how to close this gap. If you're interested in taking a look at it. Here's the code and i've attached an image for a visual aid. Thanks. Code: <table width='770' border='0' cellpadding='0' cellspacing='0' id='maintable' align='center' table valign='top' align='left' cellpadding='0' width='770' height='500' table style='background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:'770' height:'500'></td>
<link href='custom.css' rel='stylesheet' type='text/css'>
<td id='menu' align='left' valign='top' rowspan='500' width='165'>
<br> <img src='images/bullet.gif' alt='' width='10' height='10'><a href='index.php'><font color='#DDCEA2'><font face='Arial' size='2'>Home</a></font><br>
<img src='images/bullet.gif' alt='' width='10' height='10'><A href='index.php?command=signup_page'><font color='DDCEA2'><font face='Arial' size='2'>Sign Up</font></A>
<br>
<img src='images/bullet.gif' alt='' width='10' height='10'><a href='faq.html'><font color='DDCEA2'><font face='Arial' size='2'>FAQ</a><br>
<img src='images/bullet.gif' alt='' width='10' height='10'><a href='legal.html'><font color='DDCEA2'><font face='Arial' size='2'>Terms of Use<br></a>
<form method='POST' action='index.php'>
<input class='field' type='hidden' name='command' value='account'>
<input class='field' type='hidden' name='param' value='signup'>
</form>
<tr><td> </td></tr>
<td valign=top colspan='2' class='pageTitle'><div class='hLine'><b> <font face='Arial' color='#EE7600' size='3'>Select The Payment Button Below To Continue</b></font></div></td></tr>
<td class='fieldLabel' width='30%'> <font face='Arial' color='#A30100' size='2'><b>Transaction Type:</b></font></td>
<td align='left' class='text' ><b>[account_type_title]</b></td>
</tr>
<tr>
<td class='fieldLabel' width='30%'> <font face='Arial' color='#A30100' size='2'><b>Price:</b></font></td>
<td align='left' class='text' ><b>$ [price]</b></td>
</tr>
<tr>
<td class='fieldLabel' width='30%'> <font face='Arial' color='#A30100' size='2'><b>Subscription Period:</b></font></td>
<td align='left' class='text' ><b><font face='Arial' color='#000000' size='2'>[period]</b> (month)</font></td></tr>
<tr valign='top' height='55px' '>
<td valign='top' class='fieldLabel' width='30%'> </td>
<td valign='top'> <p><font face='Arial' color='#000000' size='2'>[payment_code]</font></p></td>
</tr>
<tr><td> </td></tr><tr><font face='Arial' color='#000000' size='2'></font>
<tr height='30%' ><td colspan='2'><div class='hLine'> </div></td></tr>
</table
Okay, so. Im completely new here! But I really need help fixing a tumblr theme code. The content/images is scrolling over/infront of the fixed header image, so what would be the code to fix that up? There is no CSS for the header as the original style didnt really include one. The HTML for the header is: <body> <head> <div style="width: 488px; height: 288px; margin: 0 auto; background: url(http://i56.tinypic.com/mwto2t.png) no-repeat top center fixed;"></div> <div id="yes"> <div id="center"> <div id="info"> <a href="/"></a><br><br> Thank you for any help Hello- I'm having a problem with my header. When I first started building this dumb thing, it was in IE7. Everything was looking fine with that, and then I tried to switch to Firefox, and nothing was where it should have been. My doctype wasn't valid, which is now fixed. Anyway, the problem. When I put the header content into the page's html, it displays like it should, but when the header is in a separate file, it leaks down into the main page. HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="Header"> <!--#include virtual="/includes/header.txt" --> <br> </div> <div id="Menu"> <!--#include virtual="/includes/menu.txt" --> </div> <div id="Content"> <h1>Hello!</h1> <p style="text-indent:30px">Welcome </p> <br> <p><b>Jan 14</b></p> <p>The calendar, links, contact us, and 'what to bring' pages are up.</p> <br> </div> <div id=footer> <!--#include virtual="/includes/footer.txt" --> <br> <!--#config timefmt="%B %d, %Y"--> Last Modified: <!--#echo var="LAST_MODIFIED"--> </div> </body> </html> Header: Code: <a href="index.shtml"><img src="cricket_edited.jpg" alt="Home" style="border:none;"></a>    Title CSS: Code: body {
font:15px/20px verdana, arial, helvetica, sans-serif;
color:#336600;
background-color:#FFFFCC;
}
* {
margin:0px;
padding:0px;
}
h1 {
margin:0px 0px 15px 0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#999966;
}
h2 {
font-size:26px;
line-height:0px;
font-weight:700;
color:#999966;
margin:0px 0px 15px 15px;
}
p {
margin:0px 0px 16px 0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
font-size:15px;
text-decoration:none;
font-weight:600;
}
a:link {color:#CC3333;}
a:visited {color:purple;}
a:hover {background-color:white;}
a:active {border:solid 1px #CC3333;}
ul {
list-style-type: circle;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 6px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:30px;
font-size:30px;
font-weight:bold;
border-color:black;
border-style:solid;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#CC9933;
}
#Content {
margin:0px 230px 50px 10px;
padding:10px;
background: #FFFFCC;
}
#Menu {
float:right;
padding:10px;
background-color:#eee;
border:3px dotted #336600;
width:150px;
}
.hmenu {
font-size:15px;
font-weight:bold;
text-indent:6px;
}
.sub {
font-size:13px;
text-indent:20px;
}
#Footer {
margin:50px 0px 10px 0px;
padding:17px 0px 6px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px;
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#CC9933;
}
Can anyone help? Thanks, Kate must be a dumb question but my book dont say how when you want to simply have a link to say "close this window" ie for dummies that dont know to goto the big X up top, what it the code?? I have a small window that shows site logins by ip address. I open it with window.open and get exactly the proper display in the proper position. But, I'm stuck with the browser page that called window.open(). Is there a way to close that browser? I've tried things like window.opener.close() with no luck. Remember, I want t close the browser, not just a window. Thanks, Mac Hi. I am wondering if there is any way of opening/closing an object in HTML or CSS or Javascript? For example, I have a Chat Box that is floating on the bottom left of the screen, I want to be able to close it if I don't want to see it, and if i want to open it up again, I would do so. If anyone can help, it would be greatly appreciated! Thanks, Chris Hi. I know this is fairly simple but havn't found a fix elsewhere. I created this form but can't close it. I'm guessing its to do with the table? Everytime i but a </form> tag in it either wont submit the form or screws up formatting. Any ideas. Thanks. Code: <table width="681" border="0" class="style26">
<tr>
<td colspan="5" valign="middle"><p>My name is:<br>
</p> </td>
</tr>
<tr>
<td width="8" valign="middle"> </td>
<td width="90" valign="middle"><span class="style30">given name(s)<br>
</span></td>
<td width="170" valign="middle">
<form action="lostform.php" method="post" name="form1">
<span id="sprytextfield1">
<label>
<input type="text" name="gname" id="fname">
</label>
</span>
</form> </td>
<td width="67" valign="middle" class="style30">surname</td>
<td width="324" valign="middle"><span class="style30" id="sprytextfield2">
<label>
<input type="text" name="sname" id="sname">
</label>
</span><br></td>
</tr>
<tr>
<td valign="middle"> </td>
<td valign="middle">My email is:</td>
<td colspan="3" valign="middle"><span id="sprytextfield3">
<label>
<input type="text" name="email" id="email">
</label>
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br>
<br></td>
</tr>
<tr>
<td colspan="3" valign="middle">My date of purchase was:</td>
<td colspan="2" valign="middle"><span id="spryselect1">
<label>
<select name="day" size="1" id="day">
<option selected>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</label>
<span class="selectRequiredMsg">*</span></span> <span id="spryselect2">
<label>
<select name="month2" size="1" id="month">
<option>JAN</option>
<option>FEB</option>
<option>MAR</option>
<option>APR</option>
<option>MAY</option>
<option>JUN</option>
<option>JUL</option>
<option>AUG</option>
<option>SEP</option>
<option>OCT</option>
<option>NOV</option>
<option>DEC</option>
</select>
</label>
<span class="selectRequiredMsg">*</span></span> <span id="spryselect3">
<label>
<select name="year" size="1" id="year">
<option>1998</option>
<option selected>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
</select>
*</label><span class="selectInvalidMsg"></span> </span><br></td>
</tr>
<tr>
<td colspan="3" valign="middle">My Receipt Number was:</td>
<td colspan="2" valign="middle"><span id="sprytextfield4">
<label>
<input name="rcpt" type="text" id="rcpt" size="10" maxlength="8">
</label>
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg style32 style32">Invalid: Please check your receipt number</span><span class="textfieldMaxCharsMsg style32 style32">Invalid: Please check your receipt number.</span></span><br></td>
</tr>
<tr>
<td colspan="3" valign="middle"><br>
Other Comments:</td>
<td colspan="2" valign="middle"> </td>
</tr>
<tr>
<td valign="middle"> </td>
<td colspan="4" valign="middle"><span id="sprytextarea1">
<label></label>
<span class="textareaRequiredMsg">A value is required.</span></span> <div align="center">
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div></td>
</tr>
<tr>
<td> </td>
<td colspan="4"><label>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<div align="center"></div>
</label></td>
</tr>
</table>
I am currently running this code. This web page has 3 things on it, when viewed: Choose A Transaction Transction Type and the button: Next And these things all have over an inch of space between them. Can you please help me close the gaps between the lines Choose A Transaction and Transaction Type. And can you please help me close the gap between Tansaction Type and "next" icon? Thank you. Code: <table width='770' border='0' cellpadding='0' cellspacing='0' id='maintable' align='center' valign='top' align='left' margin=0 padding=0 width='770' height='500' table style='background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:'770' height:'500'></td> <link href='custom.css' rel='stylesheet' type='text/css'> <td id='menu' align='left' valign='top' rowspan='500' width='164'> <br> <img src='images/bullet.gif' alt='' width='10' height='10'><a href='index.php'><font color='#DDCEA2'><font face='Arial' size='2'>Home</a></font><br></a> <form method="POST" action="index.php"> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='renew'> <input class='field' type='hidden' name='account_id' value='[account_id]'> <td colspan='2' class='pageTitle'><div class='hLine' display:inline;><font face="Arial" color="#EE7600" size="3"> Choose a Transaction</font></div></td> <tr><td class='fieldLabel' width="30%"><font face="Arial" color=#000000" size="3" Style="padding: 5px;"> <font face="Arial" color="#000000" size="3"> Transaction Type:</font><!--</td>--> <td align="left"><font face="Arial" color="#EE7600" size="2">[account_type_panel]</font></td> <tr><td align="center"></td> <td align="left"><input name="submit" type='submit' class='button' value='Next' /></td> </tr> </form> <tr height='30%' ><div class='hLine'display:inline;></div></td></tr> </table> For as long as I've been validating web pages, I never realized that the closing </head> tag was optional in HTML. I feel as if I've missed the boat at times. While I'm all for trimming excess code, I just cannot for the life of me strip out closing tags because they are optional in HTML. I'd be concerned that something, somewhere would not parse the document correctly if I removed the closing </head> element. Are my concerns unfounded? For as long as I've been validating web pages, I never realized that the closing </head> tag was optional in HTML. I feel as if I've missed the boat at times. While I'm all for trimming excess code, I just cannot for the life of me strip out closing tags because they are optional in HTML. I'd be concerned that something, somewhere would not parse the document correctly if I removed the closing </head> element. Are my concerns unfounded? For as long as I've been validating web pages, I never realized that the closing </head> tag was optional in HTML. I feel as if I've missed the boat at times. While I'm all for trimming excess code, I just cannot for the life of me strip out closing tags because they are optional in HTML. I'd be concerned that something, somewhere would not parse the document correctly if I removed the closing </head> element. Are my concerns unfounded? For some reason, on my homepage (http://www.projectdisobey.com/disobeyclothing/) an extra '</div> <!-- content #end -->' is being created in the page source, AFTER the closing 'body' and 'html' tags. There is no mention of '</div> <!-- content #end -->' in my 'footer.php' file, so why does this show up in the page source? Please see the attachment. If anybody could point me in the right direction as to why this might be occurring, and how I might fix it, I would be eternally grateful! Thanks! Ok, I'm working on a website and I need to put in a text field where someone can effectively leave "updates" and little notes. The site will be saved on a network and used by multiple computers so I'm hoping it can be done without have to make multiple CSS files. So far so good. Essentially I want one computer to be able to type in text and close the window. Then I want to be able to open it up on another computer and still see that text. So far all that's happened is the text resets to a blank field after it's closed, which I expected, I just don't know how to fix it lol I'm using IE and not Firefox. Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same. the address is www.themonsterbox.com thanks in advance for any help. I have a question about this new: HTML Code: <meta charset="UTF-8"> thing, introduced in HTML 5. Why it's not self-closing tag? I don't understand it, I think it should be: HTML Code: <meta charset="UTF-8" /> Can anyone explain it to me? Hi all. Working on some php program, i tried to get the things tidy in my HTML code. So what I did is something like this : Code: <div id="something"> ... some php code and stuff ... </div id="something"> It seems to work, not even a warning with the firefox extension to validate HTML. So I'm wondering. Are closing tags not parsed farther than the word following the '/' ? As I have not tested it on other browsers, do you think it's safe to keep it like this ? I browsed the HTML 4.01 reference, not found a line about the way closing tags may be treated. I still think it's a very good way for me to debug/find my toes in a long HTML file, only need a regexp to have my whole <div> element, no more eye killing research counting the </div>s. But I'm afraid some browsers reject these closing tags. Any advice ? Thanks. Guillaume Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. hi, when i open web in internet explorer i see web without header and footer. then open with firefox i see web without header but i see footer. How to fix this problem and then i open web with every explorer i can see good web. sorry for english language. web url is www.xxlpramogos.lt |
|||||||