|
HTML - Web Page Shifts Up And Loses Top Part Of Header
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. Similar TutorialsHere is my website: http://yourcarthings In the top heading, there is an unwanted red horizontal band. How can I get rid of this. Hello, Trying to put together a portfolio site for an assignment. I've managed to hammer out most of the kinks (aside from some css formatting), but for some reason when the page reaches a length that requires vertical scrolling the entire site shifts slightly to the left. Here's the site right now as it is: http://kool-factor.com/index2.php I've added a few repeat posts on the Home page to get the desired effect (can also be seen on Curriculum Vitae). The Contact page is shorter, and shifts back to the right. Strangely, when the Home page only has one post, it is also shifted to the right. I don't think it's a PHP problem (though it could be, and I just don't know about it), so I've been trying to go through the HTML and CSS, but am coming up short. Anyway, here's the index2.php code: PHP Code: <?PHP $default = 'home.php'; $page_Title = $page_Content = ''; $page=$_GET['id']; function loadInclude($file, $default, $dir='') { global $page_Title, $page_Content; if(empty($file) || !$file) $file = $default; if(!file_exists($dir . $file . '.php')) $file = $default; /* echo 'Including: ' . $dir . $file . '.php<br />'; */ include($dir . $file . '.php'); } if(isset($_GET['id'])) loadInclude($_GET['id'], 'home', ''); else include $default; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Curtis Winger<?php echo $page_Title;?></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <table border="0" cellpadding="0" cellspacing="0" id="headertable"> <tr> <td class="titleleft"><img src="head.png" alt="" /></td> <td class="titleright"> <div id="navmenu"> <a <? if( ($page == 'home') || ($page == '')): ?> class="current" <? endif ?> class="navlink" href="index2.php">Home</a> <a <? if($page == 'projects'): ?> class="current" <? endif ?> class="navlink" href="index2.php?id=projects">Projects</a> <a <? if($page == 'cv'): ?> class="current" <? endif ?> class="navlink" href="index2.php?id=cv">Curriculum Vitae</a> <a <? if($page == 'contact'): ?> class="current" <? endif ?> class="navlink" href="index2.php?id=contact">Contact</a> </div> </td> </tr> </table> <?php echo $page_Content;?> <table border="0" cellpadding="0" cellspacing="0" id="footertable"> <tr> <td>© 2009 Curtis Winger</td> </tr> </table> </div> </body> </html> The CSS: Code: @charset "utf-8";
/* Layout Design */
body {
background-color: #E6E6E6;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#main {
background-color: #FFFFFF;
display: block;
width: 800px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
left: auto;
right: auto;
}
#headertable {
width: 100%;
text-align: center;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 13px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#footertable {
width: 100%;
text-align: right;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
padding-top: 7px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.titleleft {
width: 80%;
}
.titleright {
width: 20%;
}
.align-right {
float:right; margin: 0 0 5px 5px;
}
.align-left {
float:left; margin: 0 5px 5px 0;
}
/* Text */
.h1 {
font-size: 17px;
font-weight: bold;
color: #5e89ae;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.titletext {
text-align: center;
}
.contenttext {
display: inline-block;
width: 92%;
clear: both;
float: right;
right: 0px;
}
.contenttext2 {
display: inline-block;
width: 84%;
clear: both;
float: right;
right: 0px;
}
/* Links */
a {
color: #000000;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
#navmenu a {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border: none;
height: auto;
width: auto;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
text-align: left;
background-position: right;
font-weight: bold;
background-image: url(bullet.png);
background-repeat: no-repeat;
}
#navmenu a.navlink:link, a.navlink:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
font-weight: bold;
background-position: right;
}
#navmenu a.navlink:hover, a.navlink:active {
background-color: #E6E6E6;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
font-weight: bold;
background-position: right;
}
#navmenu a.current {
background-color: #E6E6E6; !important
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border: none;
height: auto;
width: auto;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
text-align: left;
background-position: right;
font-weight: bold;
background-image: url(bullet.png);
background-repeat: no-repeat;
text-decoration: none;
}
And a sample page, home.php: PHP Code: <?PHP $page_Title .= ''; $page_Content .= ' <img src="images/home_image.jpg" class="align-left" alt="" /> Hello, and welcome to the launch of my new website. <br /><br /> I\'m an aspiring graphic designer and filmmaker, and you\'ll find a collection of my work here, as well as information regarding my education, work experience, and technological experience with various applications. <br /><br /> Relevant news and updates concerning myself, or my work, will be posted on this page, so keep an eye out. <br /><br /> If there\'s anything I can do for you don\'t hesistate to contact me. <br /><br /> Enjoy. <br /><br /> <strong>Posted by Curtis | November 16, 2009</strong> <br /><br /> <img src="images/home_image.jpg" class="align-left" alt="" /> Hello, and welcome to the launch of my new website. <br /><br /> I\'m an aspiring graphic designer and filmmaker, and you\'ll find a collection of my work here, as well as information regarding my education, work experience, and technological experience with various applications. <br /><br /> Relevant news and updates concerning myself, or my work, will be posted on this page, so keep an eye out. <br /><br /> If there\'s anything I can do for you don\'t hesistate to contact me. <br /><br /> Enjoy. <br /><br /> <strong>Posted by Curtis | November 16, 2009</strong> <br /><br /> <img src="images/home_image.jpg" class="align-left" alt="" /> Hello, and welcome to the launch of my new website. <br /><br /> I\'m an aspiring graphic designer and filmmaker, and you\'ll find a collection of my work here, as well as information regarding my education, work experience, and technological experience with various applications. <br /><br /> Relevant news and updates concerning myself, or my work, will be posted on this page, so keep an eye out. <br /><br /> If there\'s anything I can do for you don\'t hesistate to contact me. <br /><br /> Enjoy. <br /><br /> <strong>Posted by Curtis | November 16, 2009</strong> '; ?> If you have any ideas, or need anything else, let me know. Thanks guys. The highlighted section of PHP is displaying in the website, as you can see. It all happens after the "($_message) > " for some reason. Quick fix? http://img810.imageshack.us/img810/161/unled1kh.jpg Hey I have a site that has a weekly newsletter; people sign up through an opt in box... What I want to do is after they sign up and hit submit, I want them redirected to the same page right under the opt in box so that they can start right where they left off. Does anyone know how to redirect to a certain point on a web page? Thanks. i have a trivia site, so far with 500 or so questions and answers. the answers each have a separate html page, but i am looking for a way to put them all on about 5 pages, and just have one section display in a frame when the question is answered. i have figured out how to display a certain part of a page, but the problem is, i don't want anything else from the page displayed, because they are all embedded youtube videos and they would all start at once. am i just stuck with having an html page for each answer? if you can help god bless you i'm really stuck on this. this is basically what the page will look like, even though there's much work to be done so all the links aren't working, etc... http://trilogy.awardspace.com/iframe.html I want to link to a specific part of another page. The url below is the page I am trying to link to and I want it to start at my div layer with id 'section'. <div id="section"> If I use this link it works fine, but it does not scroll to my div layer 'section' Code: http://localhost/ME/Programming/ProgrammingTemplate.php?page=Truss_Optimizater&cat=Programming&tab=1 If I use this link it only shows my div layer 'section'?? Code: http://localhost/ME/Programming/ProgrammingTemplate.php?page=Truss_Optimizater&cat=Programming&tab=1#comments-wrap Calypso I'm using an iframe to show an external page. I want the iframe to open to a certain part of that page. Problem is, it's like 2 pages down on the external page. How can I make it scroll down and show only that part? I am trying to integrate a clients two websites, and when I go to insert the lower part/table it shifts about 10 pixels to the right. I normally work in css, and have tried everything I know of to adjust and have suceeded by about 1/2 but am still at a loss as it hangs over to the right causing a glitch in my page. Please help! has anyone ever seen anything like this before? the table can be seen here http://www.balloonlady.net/ thanks in advance! J111 Hi Everyone! On two of my pages, about us and Products... My webpage will briefly shift to the left. The code looks the same so I am not sure why it is doing this. I will attach my page if anyone wants to have a look. Happy Friday! M 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! 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 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
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 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 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. 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've had problems in the past trying to get IE6 to display DIVs the same way as FF and IE7 displays them. So I recently decided to make a "skeleton" page just for the header section as a fresh start and I still can't figure out how to appease ol' IE6. I want the two DIVs to be side by side. But they aren't See what I mean: http://www.innotechnutrition.com/seeessess.php The CSS Code: body {
text-align: center;
}
#container { /* does IE6 not like the line breaks? */
width: 770px;
margin: 0px;
padding: 0px;
}
#header {
width: 770px;
margin: 0px;
padding: 0px;
}
#headerLeft {
width: 50%;
float: left;
margin: 0px;
padding: 0px;
border: 1px solid #000; /* this won't show in IE6 for some reason */
background: #ccc; /* this won't work either */
}
#headerRight {
width: 50%;
float: left;
display: inline;
margin: 0px;
padding: 0px;
border: 1px dotted #000; /* this don't show in IE6 for some reason */
background: #333; /* this won't work either */
}
The HTML (doctype: DTD XHTML 1.0 Transitional) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div id="container"> <div id="header"> <div id="headerLeft"> LEFT div </div> <div id="headerRight"> RIGHT div </div> </div> </div> </body> </html> i have an image & i don't want to slice it to many images & i want to make just a part of it appear..for example, i want to use it's left corner in a place, then use it's right corner in another place can this be done?? i remeber i saw it somewhere here but can't remember where Hi. Im trying to use the background style of: http://www.freelayouts.com/templates...-Blue#download I looked through the .HTML for almost an hour, but I cant find ANY mention of the background. Heres the text: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Bright Blue by christopher robinson http://www.edg3.co.uk/ hope you enjoy it and find it usefull :) --> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>edg3.co.uk | Bright Blue</title> <link rel="shortcut icon" href="image/favicon.ico" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="en-gb" /> <meta http-equiv="imagetoolbar" content="false" /> <meta name="author" content="Christopher Robinson" /> <meta name="copyright" content="Copyright (c) Christopher Robinson 2005 - 2007" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="last-modified" content="Sat, 01 Jan 2007 00:00:00 GMT" /> <meta name="mssmarttagspreventparsing" content="true" /> <meta name="robots" content="index, follow, noarchive" /> <meta name="revisit-after" content="7 days" /> </head> <body> <div id="header"> <h1>Bright <span>Blue</span></h1> </div> <div id="content"> <div id="main"> <h1>Important</h1> <p>Licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. I have left the actual text design style very basic for you to add your own text / header / quotes / list etc. styles yourself.</p> <h1>About</h1> <p>Designed by Christopher Robinson of <a href="http://www.edg3.co.uk/">EDG3</a>.</p> <p>This template would be great as a simple personal site which only needs little content and a few pages, you are free to use this design for whatever purpose you wish as long as you do <strong>NOT</strong> sell it or claim it as your own and you leave the link back to my site at the bottom of your pages.</p> <h1>Filler Text</h1> <p>Donec sodales tempor neque. Vivamus faucibus interdum ante. Suspendisse tincidunt nibh. Sed quis libero sit amet dui faucibus egestas. Quisque varius dapibus risus. Cras tincidunt malesuada velit. Vestibulum vel turpis eu sem vehicula eleifend. Sed tristique, lacus ut tempus lobortis, tellus lorem cursus nunc, vel convallis dui magna nec massa. Phasellus sed est. Phasellus purus sem, sodales sit amet, iaculis sed, lobortis eget, metus. Proin ut mi. Praesent accumsan commodo nisi. Aliquam erat volutpat. Vestibulum urna. Ut in quam sit amet dui pharetra pellentesque. Suspendisse id ipsum. Nulla urna leo, ultricies sit amet, posuere ut, elementum et, magna. Mauris tempus mi ut metus. </p> <p>Phasellus viverra sapien non nunc. Integer est enim, nonummy eu, tempus convallis, mollis ut, lorem. Morbi ornare mattis nulla. Pellentesque in risus at ligula scelerisque malesuada. Morbi elementum nisl sit amet purus. Cras erat quam, suscipit id, tincidunt in, dignissim ac, risus. Aliquam nunc. Donec tristique, felis sit amet bibendum blandit, arcu libero congue nibh, in bibendum nisl arcu at enim. Quisque varius velit vel dolor. Curabitur arcu tortor, lacinia ac, consectetuer nec, imperdiet nec, quam. Sed sed magna. Integer eget sem. In rhoncus eleifend orci. Morbi pharetra, justo at cursus nonummy, metus lectus ullamcorper est, sit amet consequat justo mauris sit amet augue. Aenean vel libero. Proin vehicula. Integer sollicitudin. Duis varius consequat leo. Fusce ultricies purus eu est.</p> </div> <div id="sidebar"> <ul class="navigation"> <li><a href="http://www.edg3.co.uk/about/" class="active">About</a></li> <li><a href="http://www.edg3.co.uk/">Blog</a></li> <li><a href="http://www.edg3.co.uk/contact/">Contact</a></li> </ul> <h1>Sponsered Links</h1> <ul> <li><a href="http://www.4templates.com/?aff=christopher">4Templates</a></li> <li><a href="http://www.edg3.co.uk">Christopher Robinson</a></li> <li><a href="http://www.evohosting.co.uk/affiliate/idevaffiliate.php?id=133">EVO Hosting</a></li> <li><a href="http://www.openwebdesign.org/userinfo.phtml?user=christopher">Open Web Design</a></li> <li><a href="http://www.opendesigns.org/profile/?user=christopher">Open Web Design</a></li> <li><a href="http://www.text-link-ads.com/?ref=31171">Text Link Ads</a></li> <li><a href="http://www.w3csites.com/profile.asp?u=christopher">W3C Sites</a></li> </ul> <h1>Blogroll</h1> <ul> <li><a href="#">Person's Name Here</a></li> <li><a href="#">Person's Name Here</a></li> <li><a href="#">Person's Name Here</a></li> <li><a href="#">Person's Name Here</a></li> <li><a href="#">Person's Name Here</a></li> </ul> </div> </div> <div id="footer"> <p>Copyright © <a href="#">Bright Blue</a> 2007 | Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a><br /> Sponsored by <a href="http://www.opendesigns.org/">Open Designs</a> | Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> & <a href="http://validator.w3.org/">XHTML</a></p> </div> </body> Can one of you induviduals that acctualy know how it workes please point me in the corect direction? Thanks.. |
|||||||