|
HTML - Keeping The Footer At The Bottom?
Hi there everyone. First time post here.
I am trying to keep a footer at the bottom of my page. The problem is if I don't have enough content to fill up the whole page, the footer is not at the bottom of the screen. I am using tables for my format. My site: http://www.keystonestatistics.com/zzz.php Check the source. Thanks in advance for the help! Similar TutorialsHi Guys, How can i make my footer stay at the bottom of the page so when the user holds down ctrl and zooms out i want to the footer to stick to the bottom of the screen, i have done this before but i cant remember for the life of me and its actually killing me know can someone put me out of my misery please. heres the HTML and CSS its called BottomBanner HTML Code: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!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 runat="server">
<title>Vodafone One Net Express</title>
<style type="text/css">
body{background: none repeat scroll 0 0 #F4F4F4; margin:0px !important; padding:0px !important;}
.PageSetter{margin-left:auto; margin-right:auto; margin-top:-2.3%; background: none repeat scroll 0 0 #F4F4F4; position:relative; }
.TopBanner{background-color:#C51906; width:100%;height:80px;}
.TopBanner h1{font-size:2.7em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;}
.BottomBanner{background-color:#C51906; width:100%;height:80px; margin-bottom:-0.1% !IMPORTANT}
.BottomBanner h1{font-size:2.3em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;}
.IframeContiner{width:980px; margin-left:auto; margin-right:auto; margin-top:10px}
.IframeStyle{Width:982px; height:1000px; border:0px}
</style>
</head>
<body>
<div class="PageSetter">
<div class="TopBanner">
<h1>
Vodafone One Net Express
</h1>
</div>
<div class="IframeContiner">
<iframe scrolling="auto" class="IframeStyle" src="http://www.telegraph.co.uk/finance/yourbusiness/businesstechnology/9209385/Review-Vodafone-One-Net-Express.html">
</iframe>
</div>
</div>
<div class="BottomBanner">
<h1>
Call Now 0800 1980 000
</h1>
</div>
</body>
</html>
Hi, I have a template in the making but i have got to a point now where the footer isnt working. I want the footer to stick to the bottom of the browser and for it to work when there is a small amount of content which doesnt require scrolling and also when scrolling is required. At the moment it works when scrolling isnt required but as you will see on my example below when scrolling happens the footer doesnt stay stuck to the bottom of the browser it just moves up with the rest of the site. Any ideas how to fix this? I have been testing in FF2 but i need it working in IE 6 + 7 + FF 2. The site is here any ideas or help would be great Cheers Hi all, I would like to create a fairly basic site where there are three areas. 1) The Banner which is pinned to the top of the screen. 2) The Main Body which will enlarge dependant on different screen sizes (Both width and depth) 3) The footer which is pinned to the bottom of the screen. The top banner is OK, and the enlarging widthways is OK, but I can't figure out how pin the footer to the bpottom of the screen and enlarge the main body to fill the gap. Any help you can offer is muich appreciated. My site is www.movehumanityforward.com On the bottom is a banner. I need to push it to the right a little bit, to align it to the content above it, specifically the corner of the edge next where it says HOME. I appreciate You! Usually when people place a footer at the bottom of a page they do it outside of the wrapper, so the footer is a first generation child of the body. However, I'm helping with a site that has shadow bars running down the sides of the wrapper div, and we want the footer to stick to the bottom, but inside of the wrapper. Currently any content that extends to where the footer is begins to overlap it. Here is my code: HTML Code: <html>
<head>
<title>Closeout Boat Sales</title>
<link rel="stylesheet" type="text/css" href="style/styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/styles2.css" />
<![endif]-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="scripts.js"> </script>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('header.php'); ?>
</div>
<div id="navcontainer">
<?php include('nav.html'); ?>
</div>
<br />
<div id="sidebar">
<p><img src="images/latest_sidebaroff.png" id="toggle1" /></p>
<p><img src="images/bulk_sidebaroff.png" id="toggle2" /></p>
</div>
<div id="main">
<br /><br />
<div id="latest">
<table style="width: 100%"> <tr>
<p><?php echo $dynamicList; ?></p>
</tr></table>
</div>
</div>
<div id="footer">
<?php include('footer.php');?>
</div>
</div>
</body>
</html>
HTML Code: body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height:1.5em;
margin: 0;
}
body {
background-color: #fff;
}
#header h1 {
font-size: 32px;
display: inline;
}
#header a {
font-size: 32px;
color: #06C;
text-decoration: none;
}
#cartBar
{
/*float:right;
background-color: gray; */
width: 1003px;
text-align: right;
margin-left: -2px;
}
#wrapper
{
margin-left: 100px;
height: 100%;
width:1050px;
padding-left: 40px;
padding-top: 10px;
background-color: #fff;
background-image: url('../images/shadow-bar.png');
background-repeat: repeat-y;
}
#header
{
width: 1002px;
margin-left: -19px;
margin-top: -10px;
padding: 3px;
background-image: url('../images/headerBar.png');
}
#sidebar
{
width: 250px;
float: left;
}
#main
{
width: 800px;
float: left;
}
#main a
{
font-weight: bold;
color: #06c;
}
#main a:hover
{
color: #999;
}
#main a:visited
{
color: #06c;
}
#navcontainer
{
width: 100%;
text-align: center;
}
#navcontainer li
{
/*float:left;*/
display:inline-block;
list-style-type:none;
position:relative;
margin:0 10px;
overflow:hidden;
}
#navcontainer li:hover {
overflow:visible;
}
#navcontainer li ul {
position:absolute;
display:block;
left:0px;
top:20px;
margin:0;
width:110px;
padding:0;
background-color:#CCC;
padding:0 10px 10px;
}
#navcontainer li ul li {
float:none;
margin:0;
display:block;
}
#footer
{
margin-left: -19px;
margin-bottom: -10px;
height: 125px;
width: 1009px;
color: black;
position: absolute;
bottom: 0;
font-size: 10pt;
background-image: url('../images/footer.png');
}
#footer a
{
color: #333;
font-weight: bold;
text-decoration: none;
padding: 5px;
}
#bulk
{
display: none;
}
Any ideas? I'm attempting to insert a image map menu at the bottom of each page, however for some reason there is a 2-4 pixel gap between the menu and the bottom of the table and I can't figure out why. Here is the URL: http://www.knockoutwebsites4u.com/LSC/index.html Thanks for your help in this matter. Hi I just creating a website skin I have upload he http://autismnetwork.jatos.co.uk/skin/skin.html I need to get rid of that irritating little gap between the bottom of the logo image and the bottom of the logo DIV. if anyone could show me some code thats does that, it'd be much appreciated. Thanks, Jamie ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> Hi everyone! I want to include Google ads in My forums But I want them to to stay on the right of the page So, apart from the Google ads code, anyone knows the code which I put so that the banner stays at the right (I will put it in the Header file, I know that) I just need the code to make it expand on the irght with the page _______________________ Academy of Security I know this is technically a javascript question, but I am trying to create a javascript popup window, but everything I find and try doesn't seem to work for what I want to do. I want a pop-up window to open when I click a certain image button on my site, and not automatically when the site loads. I want the pop-up to be positioned at top left and for it to always stay above the parent window. I've tried the alwaysRaised functionas well as focus ones but no luck! Ta! Some example code would be much appreciated. hi guys i have 5 identical pages all same as the index except one div box in each that contains all the different content of each page. my question is how do i make a change to the index and the others update the same way?? i was thinking of somehing like frames? I don't understand in the html table below, when I increase the resolution higher than 1024 by 768, what suppose to be another image on my top left corner, that entire column widens, why is that? How can I keep it still where it doesn't move when increase the resolution, this is driving me crazzzzzzzy, can someone help me? Thanks... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0056)http://www.sharepointsample.com/stk/...nce/index.html --> <HTML><HEAD><TITLE>Home</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252" FP_GENERATED="TRUE"> <SCRIPT language=JavaScript FP_GENERATED="TRUE"> document.write('<ows:HTMLBase/>'); var strBinUrl="_vti_bin/"; </SCRIPT> <META http-equiv=Content-Language content=en-us> <META content="MSHTML 6.00.2900.2180" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <META content="sharepoint-insurance 1110, default" name="Microsoft Theme"> <META content=none name="Microsoft Border"> <SCRIPT src="Home_files/owsredir.js" FP_GENERATED="TRUE"></SCRIPT> <SCRIPT language=JavaScript FP_GENERATED="TRUE"> RedirectToFrame("index%2ehtml","_vti_bin/owssvr.dll"); </SCRIPT> <SCRIPT src="Home_files/ows.js" FP_GENERATED="TRUE"></SCRIPT> <style type="text/css"> .style1 { border-collapse: collapse; font-family: "Century Gothic"; font-size: x-small; } .style3 { background-color: #2D1C84; } .style4 { background-color: #C0C0C0; } .style5 { background-color: #0066FF; } .style6 { background-color: #FFCC01; } .style8 { font-size: xx-small; text-align: right; font-family: Calibri; background-color: #8CBAFF; } BODY { FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif } .section { FONT-WEIGHT: bold; FONT-SIZE: 0.8em; COLOR: #ffcc00; FONT-FAMILY: Arial, Helvetica, sans-serif } .LinksLight { FONT-SIZE: 10pt; COLOR: #ffffff; TEXT-DECORATION: none } A { TEXT-DECORATION: underline } .style12 { border: 1px solid #000000; border-collapse: collapse; font-family: "Californian FB"; font-size: x-small; color: #A0949A; } .style13 { background-image: url('ReadyVoice%20Site/images/bg_pg_blue.gif'); } .style14 { margin-top: 0px; } .style16 { color: #2D1C84; } .style17 { background-color: #000000; } </style> </HEAD> <BODY leftMargin=0 topMargin=0> <TABLE id=AutoNumber2 style="height: 99%;" cellSpacing=0 cellPadding=0 width="100%" class="style12"> <TBODY> <TR> <TD class="style17" style="height: 19px"></TD> <TD vAlign=top rowspan="3" style="width: 84%"><!--column 2--> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" class="style17"> </td> </tr> <tr> <td style="width: 494px"> <img alt="" src="Home2_files/IS-Main.gif" width="500" height="70"></td> <td class="style5"> </td> </tr> <tr> <td style="width: 494px" class="style4"> </td> <td class="style8"> </td> </tr> <tr> <td style="width: 494px" class="style6"> </td> <td class="style6"> </td> </tr> <tr> <td style="width: 494px"> </td> <td> </td> </tr> </table> <img alt="" src="Eldon%20-%20Global%20Site_files/footer.jpg" width="767" height="90"><br> <br> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td style="height: 3px; width: 38px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 386px; height: 3px"><strong>Top 5 Questions of the Month</strong></td> <td style="height: 3px"></td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td style="width: 38px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> </td> <td style="width: 38px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 376px"> </td> <td style="width: 38px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> </table> <br> <br> <table style="width: 100%" cellspacing="0" cellpadding="0"> <tr> <td style="width: 23px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 364px"><strong>Weekly Maintenance </strong><span class="style1"><strong>Announcements</strong></span></td> <td style="width: 22px"> <img alt="" src="Home_files/arrow.gif" width="25" height="24"></td> <td class="style16" style="width: 386px"><strong>What's New</strong></td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td style="width: 22px"> </td> <td style="width: 386px"> <img alt="" src="Eldon%20-%20Global%20Site_files/footer_bg.jpg" width="325" height="0"></td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> </td> <td style="width: 22px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> <tr> <td style="width: 23px"> </td> <td style="width: 364px"> </td> <td style="width: 22px"> </td> <td style="width: 386px"> </td> <td> </td> </tr> </table> <br> <TD vAlign=top bgColor=#65aeef style="width: 35%" rowspan="3" class="style13"> </TD> <TR> <TD vAlign=top class="style4"> <img alt="" src="IS%20TEST/ISMain-Image.jpg" width="150" height="209" class="style14"></TD> <TR> <TD vAlign=top class="style3" style="width: 14%; height: 20%"><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </TD> <TR> <TD bgColor=#000000 colSpan=3> </TD></TR></TBODY></TABLE></BODY></HTML> When I browse between pages on my website (well, and almost every website), the scrollbar goes to the top of the page by default. How can I make it so that it stays in the same place when switching pages? This is probably really simple but I can't seem to figure out how to do it. Im new to HTML and web design, although I know a little bit about it, Ive never tried to make a website before. Ive been working on this for a little bit, taking several different ways of achieving the same goal. Ive nearly perfected the design, except for one major flaw, immediately obvious when you view the site. http://www.imagesbyjan.com/Images%20...jantables.html The error lies in the text. When you resize the window, the text changes shape to stay all there. Thats the exact opposite of what I want. When it resizes, it gets longer, and goes off the bottom of the white area of the portfolio. I want it to never change size like that, but rather stay just like an image, never changing size, only getting closer to the edges of the screen as to try and stay there. If it gets to the edge of the screen and cant adjust any farther without changing the text size, it should just stop changing and allow itself to go offscreen. If you have any explanations on how to do this short of making the text into an image, you can stop reading here, but if you want, you can continue reading for the code explanation. Its not a very clean code, so Ill try my best to make it easy to understand. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Images By Jan - Template</title>
<link href="style.css" rel="stylesheet"
type="text/css">
<style type="text/css">
.text { font-family: Bitstream Vera Serif;
font-size: medium;
line-height: normal;
color: rgb(0, 0, 0);
font-weight: normal;
font-style: normal;
text-align: left;
}
</style>
</head>
Basic setup of the page Code: <body style="background-image: url(images/background1.jpg);">
<div align="left">
<table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 140px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 140px;">
<td style="width: 30%;"></td>
<td style="width: 520px;">
<img style="position: relative; left: 2px; top: 0px;"
src="images/layout/logo.png"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This is the first table. It holds the logo at the top of the screen. To keep the logo centered, there are 3 cells to the table. The left and right ones keep 30% of the distance of the edges of the window and the logo between them. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 40px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 110px;" about.blank=""><img
style="border: 0px solid ; width: 110px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/about.png">
</td>
<td style="width: 100px;"><a href="about.blank"><img
style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/gallery.png"></a>
</td>
<td style="width: 100px;"><img
style="border: 0px solid ; width: 100px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/buttons_middle.png">
</td>
<td style="width: 94px;"><a href="about.blank"><img
style="border: 0px solid ; width: 94px; height: 40px; z-index: 3; position: relative; top: -2px; left: 0px;"
src="images/layout/bio.png"></a>
</td>
<td style="width: 116px;"><a href="about.blank"><img
style="border: 0px solid ; width: 116px; height: 40px; z-index: 3; position: relative; left: 0px;"
src="images/layout/contact.png">
</a></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This is the second table. It holds the links bar. It works the same as the logo, but with 7 cells instead. (30% on left, "About" button, "Gallery" button, blank spot, "Bio" button, "Contact" button) Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 1px;">
<td style="width: 30%;"></td>
<td style="width: 532px;">
<img
style="width: 500px; height: 1px; z-index: 4; position: relative; left: 0px; top: -6px;"
src="images/layout/black_line.png"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
This puts a small black line under the link bar. Just for style. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 260px;" about.blank=""><img
style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/white_left.png">
</td>
<td style="width: 260px;"><a href="about.blank"><img
style="border: 0px solid ; width: 260px; height: 800px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/white_right.png"></a>
</td>
<td style="width: 30%;">
</td>
</tr>
</tbody>
</table>
This table holds the main area of the white part of the page. I have no idea why the '" about.blank=""' is there. Code: <table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; left: 0px; height: 100px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="">
<td style="width: 30%;">
</td>
<td style="width: 260px;" about.blank=""><img
style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/bottom_left.png">
</td>
<td style="width: 260px;"><a href="about.blank"><img
style="border: 0px solid ; width: 260px; height: 100px; z-index: 3; position: relative; top: -6px; left: 0px;"
src="images/layout/bottom_right.png"></a>
</td>
<td style="width: 30%;">
</td>
</tr>
</tbody>
</table>
The bottom part of the white area. Code: <br>
<div
style="position: relative; left: 0px; width: 100%; top: -881px; height: 851px; z-index: 5;">
<table
style="border: 0pt none ; text-align: left; position: relative; top: -11px; height: 800px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 800px;">
<td style="width: 30%;"></td>
<td style="width: 480px; position: relative; left: 30%;">
Jan
is one best known
portrait photographers in the
northern virginia area been
a professional photographer since
1976 for 30 years her
popular style of portraiture
has beautified numerous homes
offices she works extensivley
with business professionals families
children and pets.<br>
<br>
<br>
She is known for investing time with her
clients to understand their personal situation and their individual
style. She then structures the session to capture them in a
way that reflects their true self. This includes the use of
indoor and outdoor settings, formal and informal environments, and many
studio related props. She is gifted at bringing out the
unique inner beauty and personality of her client and capturing it for
all to enjoy.<br>
<br>
In her 30 year career Jan has seen the
technology change significantly and she continues to invest a great
deal of time and energy in being a leader in technology and photo
trends. It is important to remain abreast of how to combine
the latest technology with artistic mastery to create a photograph
people will want to look at for years to come.<br>
<br>
Jan's sensitive and unique style has won
her many awards and loyal clients. In addition to being a
talented photographer, she uses her profits and talents to support
several charities including:<br>
- Loudoun Symphony<br>
- Operation Smile<br>
- Time to Fly<br>
- and El Hogar Orphanage Hondouras<br>
According to her daughter who herself is a succsessful business owner,
"My mother sets a shining example for the business community in her
ethical business practices, commitment to quality products and service,
combined with a strong belief in suppoting the community through
charity.
</td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This holds the text. Hi Again, On the website i am currently coding url= www.ycn-hosting.eu/newsite i have enabled the highlight of bottons. So when i drag over each button its changes color / effect. Well i am just wondering how to keep the highlight on the first navi when browsing on the second navi so people can see where they are. Could you also give ideas of improvments Much Thanks ! I am having a real problem with keeping the text located at the top of the page right below the navigation. for some reason the text and photos just drop down the page in IE. No problem in Safari though. This seems to only be happening with images on the page. http://www.musicbridgesinternational.com please help I have no idea what the problem is here. thank you! Hello. I have a question. In order to put an applet in my web page, I have to link to my applet. This works great for normal people viewing my page, and they can use my applet just fine. However, I don't like the idea of people being able to look at the source code, get the link to the applet location, enter it into their browser, and then download my jar file because then they can hack into the jar, decompile, and steal my code (not that it is worth stealing, but still). How can I keep people from being able to download my jar file? My guess is to have the applet some kind of folder options that only allow web-server be able to access it if that is possible. I tried messing with the folder security settings but either the jar was still able to downloaded by entering the link in the browser, or the jar file wasn't able to be read by the web-server. Please help me out. Thank you. Hello, I have this code: (The important part is in bold) Code:
<html>
<head>
<style type="text/css">
.navlink a:link {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
background-color: white;
text-decoration : none;
margin: 5px;
padding: 5px;
border : 1px outset black;
display: block;
width: 150px;
text-align: center;
width: 142px
}
.navlink a:visited {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px outset gray;
display: block;
width: 142px;
}
.navlink a:hover {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px inset black;
display: block;
background-color : #99ccff;
width: 142px;
}
.center{text-align: center}
body{font-family: Verdana, Geneva;}
h1{font-weight: bold}
</style>
</head>
<body bgcolor="#4d4d4d">
<table style="position: absolute; top: 0px; width: 850px; margin: auto; border: 3px solid #000000; background-color: white">
<tr><td class="center">
<img src="logo.png"><img src="smiley.png" style="position:absolute; left:838px; top:6px"><hr>
<p style="position:absolute; left:842px; top:118px; font-size: x-small"> First time here? Click the smiley!</p>
<table width="150" border="0" bgcolor="white" class="navlink" style="border-type: solid">
<td class="center"><a href="index.htm">Home</a></td>
<td class="center"><a href="link1.htm">Cartoons</a></td>
<td class="center"><a href="link2.htm">Guestbook</a></td>
<td class="center"><a href="link2.htm">Contact Me</a></td>
</table>
<table style="margin: 6px; border: 1px; border-style: solid"><tr><td width="650px">
<h1>Site Released
</td></tr></table>
</tr></td>
</table>
</body>
</html>
Does anyone know how to keep the smiley face and the words "First time here? Click the smiley!" In one place while the window is resized. (Preferably without having to put them in the table.) I have a painting company and just recently took on the task of learning a little web design in order to try creating my own site. I initially thought I could just learn a little html and be off and working. After months and months of free time I'm still having trouble with something that to me should be basic... it probably is... the positioning of my elements. I've completed the home page and have trouble with the position of nearly all my elements changing when the browser window is resized. The function of my page is dependent on these elements staying put. There are a couple elements that do stay put when the window is resized, which really throws me for a loop because as far as I can tell they are all positioned the same (css absolute). I designed the site using mozilla firefox, and this positioning problem seems so particular that even when another tab is opened the position of elements change (certain images). I don't see this happening in any other sites similar to mine, and is really nerve racking. Feel free to take a look at the code. To see the problem just resize the window to anything other than maximized. Making it even smaller will accentuate the problematic effects. Any suggestions are welcome, not on just the said problem, but anything about the site in general. The link is jduffpainting.com Thanks, and I hope this isn't something for the css forum! Hey all ! I'm looking to make some simple feature but i don't know how. What I'm trying to do is, making my button to preform some action and stay in the same URL. I'll explain: Suppose i have "main.html". In there i have a button, which is defined something like: <input type="submit" value="send"> and this button is under a form with action like: <Form action:"localhost:10000/SomeService/SomeMethod"> The problem is, that by clicking on Send, the URL changes to "localhost:10000/SomeService/SomeMethod" and i would like to see the result on main.html. The method "SomeMethod" returns a new "main.html" HTML generated page with its results and i get this page great, but i would like to keep it under the source URL. I hope i explained my self well Anyone knows about it? I don't know how to use JS (the code is in JAVA) so please try to help me in different ways (if there is any)... Thank you all! |
|||||||