|
HTML - Template Shifts Slightly Depending On The Page
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. Similar TutorialsWhen 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 have to develop a page which have same frame and different content. Example http://www.dcu.org My page should have 3 columns where as DCU have 2. The content should look same across all browsers, The page may be used for 10inches to 30inches screens. What is the strategy to develop such page. The page must occupy 100% of screen ad should not have scrolebars. What is the strategy to display the content? I am using Tables but not sure how to make the content adjust according the screen. I am looking to develop a template and can be used to all the content. Please help me figure out the strategy. Regards, Swaroop Kunduru. Sorry if this has been posted before, I looked but couldn't find it. I am having serious problems with something I am trying to create. I am building a site which at the moment consists of 1 Page, namely my index.html page. I have put a lot of time and effort into the page and it looks fantastic, however, When the site goes live (school website) there will be a LOT of content pages. My dilema is, say for instance we want to add a new button on or change something on ALL the pages, it would take hours. I know in PHP you can do the index.php?page=departments....and I am sure I have seen it in HTML before. Therefore creating me a template which I only have to change 1 page and the rest will change automatically. This would help me SO Much. Thanks In advance If you want to include a template file how do you do that inside a html page? I want to include a footer.dwt file inside my html file...... I want to implement the footer.dwt file for all the pages of website....so i just want to call the footer.dwt file below my html page...... Help? Can someone please help? I've spent hours of time trying to fix this tiny problem. It's not online yet, so you'll have to use the text. I attached them to this thread. The CSS belongs in a folder called "css_js". The "index" should be renamed html, and the osrfd should be renamed css. In short, the bar at the bottom of the page is the issue. It works fine in IE, but not in Firefox. 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 Hi guys, I got a quick question. I can't for the life of me understand why the youtube, facebook and twitter images below absolutely insist on having a few pixels of space to the bottom of it's line. It makes it so the following link-text seem to be too low on the line in comparison to the image. If you see in the lower left corner of www.leveldance.com you can see what i mean. Any ideas? (I have no padding added in the css) Thanks a million in advance! HTML Code: <div class="left_col_container">
<div><img src="images/navigation/sociables_headline.png" alt="Join Our Community!"/></div>
<p style="margin-top: 5px; margin-bottom: 0px">Join the newsletter!</p>
<style type="text/css">.af-form {margin:0 !important;}</style>
<script type="text/javascript" src="http://forms.aweber.com/form/36/693624936.js"></script>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.facebook.com/leveldance" target="_blank"><img src="images/sociables/faceBook-icon.png" class="no_border" alt="Find us on Facebook!"/></a><a class="sidebutton" href="http://www.facebook.com/leveldance" target="_blank"> Find us on Facebook!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.twitter.com/leveldance" target="_blank"><img src="images/sociables/twitter-icon.png" class="no_border" alt="Follow us on Twitter!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> Follow us on Twitter!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.youtube.com/user/leveldancenyc" target="_blank"><img src="images/sociables/youtube-icon.png" class="no_border" alt="See us on YouTube!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> See us on YouTube!</a>
</div><br/>
</div> <!-- left_col_container end -->
Hi, I want my website to redirect depending on the last URL so if the last website was http://Abc.com/a it would redirect to http://google.co.uk but if the last URL was diffrent it would redict to anouther URL. Thanks. I wrote a code that I am assuming you guys should know exactly what I want my web page to do, however I can guarentee there are flaws in it since this is my first xhtml script ive written. I do know basic programming language making this code easier to read and uenderstand. So please review my code get an idea of what I am trying to do and help me write it to get it to work. \\common resolutions: 800x600, 1024x768, 1240x800 $resolution = "screen.width'x'screen.height"; \\This should detect the resolution correct? If switch ($resolution){ case "800x600": onLoad="ScreenGoToURL('Index1.php')"> \\I am assuming this will redirect to Index1.php if the resolution is 800x600 break; case "1024x768": onLoad="ScreenGoToURL('Index2.php')"> \\redirects to index2.php if 1024x768 break; case "1240x800": onLoad="ScreenGoToURL('Index3.php')"> \\redirects to index3.php if 1240x800 break; case "320x480": onLoad="ScreenGoToURL('Index4.php')"> \\redirects to iTouch page break; } else { onLoad"ScreenGoToURL('Index.php')'> \\This will redirect them to a uknown screen size? Thanks in advance Hi, Is there any script or way to view/hide a div or similar tag only if you're on windows/mac/linux? I want a div to show if you're on windows/linux and an other if you're on a mac. Thanks in advance! Hey everyone, is there a way that i can make the text under welcome stay where it is even when the screen isnt maximized? Because right now when you un-maximize the browser window, the text goes all weird and out of the box. http://wiseones.50webs.com/ Well okay it's me again. I'm making another template. How do I get this: Image To look like this: Image And then let me add text? Codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apateezer - Home</title>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
</head>
<body>
<div id="page">
<div id="Header">
</div>
<div id="linkbar">
<div id="page">
<p>test</p>
</div>
<div id="footer">
<p>Copyright (c) 2008 Apateezer.com <br/>
All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Code: body {
background-color:#000000;
margin:0;
padding:0;
text-align:center;
font-family:Trebuchet MS Bold;
font-size:16px;
color:#ffffff;
}
#page {
width:960px;
margin:auto;
padding:auto;
background-image:url(images/page.png);
text-align:center;
}
#header {
width:780px;
height:123px;
background-image:url(images/header.png);
clear:both;
}
#linkbar {
width:780px;
height:66px;
background-image:url(images/linkbar.png);
clear:both;
}
#footer {
width:780px;
height:51px;
background-image:url(images/footer.png);
clear:both;
}
PLease help. here is the template. it's coded badly since I used photoshop and dreamweaver since I dont really know how to code. the only thing I need to do is add a div tag in the body thats white and another div tag for the footer with that color. ive been messing with it but i cant get it. i end up messing the whole template up. could someone please help me with those 2 spots please? Hi, total newbie to website design and I need help in getting rid of a template. I think for now all i want is to go to cPanel, then right to a HTML editor, but every choice seems to leave me with some sort of forced template. I just switched from Sitebuilder to RVsitebuilder and was a little happier with the 'build your own' template... but still there is a template. I want to learn to design my own header, not have some preset thing.... Should I just keep messing with different builders? Try wordpress? (it's Not like i can ruin anything, there is no content up yet to worry about overwriting) Hoping someone feels like answering this tonight HI Guys, I am making a template using Web 2.0. Everything was alright but when I opened the html files in Dreamweaver again for work. One div in the middle it showed white space. When I viewed it in firefox, it viewed completely and there was no white space. The text was there , everything was there. I dont get it, where did the white space came from. Also, if I view the code view, that specific div is highlighted with yellow color. Also the yellow highlighted div is showing in the design view. I am attaching the screenshots. Kindly help with this Regards, a2usmani Hi guys.I have very little html experience so I decided to work from a template. Problem is, I didn't even know how to add some of the simple stuff. I was able to figure out how to add: a) the background b) the main header(banner) and c) a few normal pictures I have no idea however how to add the: sidebar, menubar (where about us, etc is), or the footer. I don't know where the programming for them starts or how to add so that the show up. In the following post I'll add my website name and code: Hey there. I have a blog. its called reign of uncertainty, and the url is www.confusedforeternity.blogspot.com i am using a zigmag remedy template. i am trying to put links in the bar, where it says "home, about me, art....". but the template automatically prefixes the blog url before the link. if i put www.deviantart.com in the xml code, it automatically becomes http://www.confusedforeternity.blogs...deviantart.com. i am not the good at coding and i dont know why its happening. the xml template is available he http://www.mediafire.com/?tz3mzcgntmt A solution will be appreciated. I'm trying to make a template for e-bay using Dreamweaver. When I use CSS, it applies everything to the whole auction, so even the e-bay things have the font as orange. I went in and changed everything to html and things look better, but I'm having a problem with the border around my images. I would like it to be the color in the background instead of black. Here is a screenshot of what I am talking about. http://s132.photobucket.com/albums/q...screenshot.jpg Here is the code I currently have: <img src="http://i132.photobucket.com/albums/q14/littlestinkerstore/SSTemplate/ssimagej.jpg" width="288" height="288" border="9"></p> <p align="center"> </p> <p align="center"><img src="http://i132.photobucket.com/albums/q14/littlestinkerstore/SSTemplate/ssdescriptionj.jpg" width="450" height="225" border="2"></p> What I would REALLY like is a border around the image that is another image, a pattern used in the background, but I will be happy with a color that matches!! Thanks! I have an older template that has a stylesheet and iframes.html I am wanting to put this into it and just havent had any luck. <!-- MLCALC BEGIN --> <script type="text/javascript"><!-- mlcalc_default_calculator = 'loan'; mlcalc_currency_code = 'usd'; mlcalc_amortization = 'year_nc'; //--></script> <script type="text/javascript" src="http://www.mlcalc.com/jquery.js"></script><div style="font-weight:normal;font-size:9px;font-family:Tahoma;padding:0;margin:0;border:0;background:transparent;color:#E5E5E5;width:300px;text-align:right;padding-right:10px;" id="mlcalcWidgetHolder"><script type="text/javascript" src="http://www.mlcalc.com/widget-wide.js"></script>Powered by <a href="http://www.mlcalc.com/" style="color:#E5E5E5;text-decoration:none">Mortgage Calculator</a></div> <!-- MLCALC END --> I have been able to muddle it into the page but get script error. I am sure I need to provide more information. The tables on the page are just to confusing for me to work this in. Just thought I would start off with the problem. Wasnt sure what forum to put this in either thanks in advance for any input. |
|||||||