|
HTML - Help Closing The Gap Between Main Page & Header
I 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
Similar TutorialsI 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> 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 I'm getting rid of my index.html file, and replacing it with a brand new index.php file. But I have a problem... I have a forum which has an index.php file... If I rename my websites index.php file to homepage.php, am I able to have that page load up when someone visits my website, or does it have to be named index.php? I am attempting to use google analytics on a website someone else developed. I am now in charge of updating this site but am having a problem finding the home page so I may add a google meta tag which would verify me as site owner. The site is at http://www.vandam.com However when I look at the directory on my ftp site and open the file labeled main.html, it looks nothing like the source code I see via the web. What is going on with this. Which file should I be looking for? Hi, I am trying to figure out how to restrict users (guests) from browsing straight to a page within my site. I would like to ensure that all users must access the site via www.mysite.com Example: User- browses to www.mysite.com/pages/interestingpage.php (or .htm) I would prefer to force the "User" to click their manually via the links on my main page. I imagine some sort of session would be required for this. However I do not wish to require users to log in. I've heard that .htaccess or Apache's config file can be used but so far I have not been successful. I do have full access to the server/configuration. Hoping someone can assist. Examples would be most ideal. Thanks! I have wordpress installed at mydomain.com/blog and I want a simple splash page to show up at mydomain.com. I've created the page in html and it works the way I want it to but I can't get it to show up at mydomain.com. When I go to mydomain.com it shows up as INDEX OF and I can click the splash page file but I want the domain to point straight to the splash file. Thanks for any help you can offer. Where would i be able to learn how to make a script that goes like this: The person puts a script in the message box (eg. [.b]hello[/b] ), presses the button and on the main page it displays the code they put in. (hello) Thanks HI Im making a site at the mo and im looking to keep the menu and a picture stay in the same position constantly. So when then user moves the scoll wheel only the text are will scroll. I dont want there to be any border or scroll bars around the text, so the only visable scroll bar will be the browsers... any ideas? Hi Guys really hope you can help I have a site which runs off a couple of templates and what i need to do is add some code into one of the ditable regions so that it will pic up the Page title and drop it in the body off the page. e.g. the page title is 'Monkey23' and i require 'Monkey23' to automatically show up in the Body of the page. I have hundreds of pages all with different titles and therefore manual titling is not an option. Anyone got any awesome code to help me? Cheers Tom Ok, This might be a bit confusing but ill try my best. On my main website homepage i have a splash image which when clicked redirects to the main website, also in another folder i have a phpbb3 Forum. Below the image on my homepage i have a login box for the forum as well. What i would like to do is to hide that login box unless a keyword is entered before hand, and make the domain.com/forum URL inaccessible unless you login through this route. basically hiding the forum completely so people dont actually know its there. I could do this through .htaccess however i was hoping there was a "cleaner" way to do this. Many Thanks Rob Hi guys, Is there a way I can have a page of links sat in a directory which I can call from via other pages on the server? I think I'm thinking of something that can be done with PHP, but the idea is: On main page, for example, links: 1 2 3 All call to 'links.html' Which has a list of page URL's, each with their own ID. So the links on the main page call to the ID's, which extracts the link listed at that moment in time. So if I later want to change the link, I have only to change the link.html and not every related link on the site. I know I could maybe use inline frames, but the layout I have makes that not possible, and it's still not a great solution. I'm sure someone must know what I'm talking about. Sorry if it sounds confusing! Cheers! I want to update the header/footer on each page of the site I'm working on without having to manually edit every single page. So I've been told to use sitetools - in that folder is a file called "makesite" in which I input all the pages that I want these changes to be on. Then I login thru PuTTy, an SSH client, and type in these commands: "cd sitetools" and then "makesite." Except when I type in "makesite," it says "Command not found." I've never dealt with sitetools before - I just took over the webmaster job for my professor as a (VERY) part-time gig so all I ever do is edit, I don't know a whole lot beyond basic HTML. If anyone can offer me any guidance, I'd really appreciate it! HI I have a .htm file in which i dynmically insert the data. Now wht i want that i want to put header and footer in each print page of thta html file , dynmically thoroght VB.NET Code. The header and footer can contail , the company logo, Title of page and so on. can u big boss please tell me how can i do this. Thanks I have a web page that has a banner at the top. It is in a div. the main part of my page is also in a div. Using the Z-index parameters and the position parameters on each div, I have the main part of the page scroll underneath the banner. I have a link at the top of the page, <a href="#mondaymtgs">Meetings on Monday</a> Which points to a name anchor on the page. When the link is clicked, it goes to (or scrolls to) The named anchor: <a name="mondaymtgs">Meetings that are on Monday.</a> The problem is this, when it does scroll to the named anchor, It does it such that, the named anchor is at the top of the page, Underneath the banner. I suppose I could just keep moving the named anchor up a little at a time, each time when I move it up, testing the link to see if the page scrolls such that, the point I want I to scroll to appears just below the banner. I am going to have numerous links at the top of the page, pointing To various places on the page. I hate to have to do this for each link. I would rather just put the named anchor where I want it to page to, and have that line show just under the banner. Is there any way to do this? Thanks in advance. Laurence Ok, I've tried everything I can think of, and I'm still getting a 'jumping header':\ The header is jumping from the Homepage, to the SubPages. When navigating to other Subpages, everything is fine; So, the problem is with the Homepage. http://www.khaus.com/sites/Asongo/html/ (click on About Us, then back to Home, and you'll see the 'jump') It must be in the code of the Homepage, so I've tried: - attaching the javascript - all the code for the top parts of the page are the same - rebuilding the page, with one of the interior pages format. Any help or suggestions, would be greatly appreciated. Thank you Reply With Quote Hi, This is my site: http://www.theticketsguide.com I want to know how to add text, buttons, images, etc to my home page header without adding it to my header on all other pages of my site. So, something similar to this: http://www.coveractionpro.com I'm using Wordpress's Thesis theme. Thank you very much, Brandon When I view my main page, it looks fine. It is centered on the screen with some background space between the top of the screen and the top of the web page. And has background space to the left and right. But when I select the sign-up link which is basically: http://www.website.com/index.php?command=signup_page When the sign-up page is viewed, it has moved up to the top of the screen and loses the top part of the header border. How can I get it to view exactly like the home page? To experiment I went to the css file and changed the top margin from 50px to 500px. It only effected the home page, didn't effect the sign-up page at all. Code: body {
background-color: #6B6B6B;
text-align: left;
margin-top: 500px;
What do you suggest I do to keep the top of the sign-up page from being cut off? Thanks. I've seen (and cannot find again) a header piece of artwork that was justified a percentage distance from the left of the page. Another plain slither of header artwork was repeated seamlessly across the total width of the page. It went 'behind' the prime piece of artwork and reappeared. The 'joins' were invisible. The header seemed / appeared to be one piece of artwork that went across the page regardless of how wide the page was with the piece of artwork always remaining between the centre of the page and the left hand edge of the page. The distance of the piece of artwork got nearer to the left hand edge of the page the narrower the page got. How does one achieve that? Both images were hosted by ImageShack. I barely understand all that myself! My knowledgebase is a little above zero. Thanks in advance, MD. 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 |
|||||||