Search the Community

Showing results for tags 'footer'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 21 results

  1. Hey everyone, the site I made was https://rustops.com/ using the template http://www.free-css.com/free-css-templates/page212/leslie-deniels and once I was done I scrolled to the bottom and the website continues after the footer ends. Does anyone know how to fix it? Any help is much appreciated (I'm very new to html/css)
  2. Hello... I have a footer that won't stick to the bottom of the page. On laptops it looks like it is on the bottom but when I check the site on bigger screens it shows higher. I have uploaded a pic with the problem. Thank you in advance.
  3. Hello guys! I have an issue on my website. As you can see on the inclosed picture, I have white borders on my footer. But they appear only on phone screens and I can't see where they are located in the CSS... Any idea please? Thank you in advance!
  4. Hi everyone! On my web photo gallery, as I assign the "go to next page" link, I mysteriously loose the "go to previous page" link. This happens to "footer" links only. In this example ( http://robertostephenson.com/samp/04.html ) both links work, while in the two other pages (http://robertostephenson.com/samp/03.html and page http://robertostephenson.com/samp/02b.html ), where links are set as footers, the left link is broken. If anyone want to get a closer look, here is a link to download the sample files: http://robertostephenson.com/samp.zip Thank you!
  5. Hi guys i am trying to work out my footer in html, i have two images for the footer how ever the to images don't line up also i an having a bit of trouble as you can see on my website http://stormsearchers.net76.net the images dont load am i doing any think wrong mike
  6. Hello everyone, I have been developing a site for fun lately (using Wampserver v. 2.5 on windows 8), and yesterday I was happy to realize that I have finished it! For the next logical step, I decided to check the site on other browsers (I was working with Chrome all the time), i.e. on Firefox and IE for the start. Everything works great except that my bottom div is not appearing at all at the two browsers. Even worse, on firefox only, the div does appear on a single page (contact.php) but it does not appear at any other of the almost 40 pages. I did check for differences between this certain page and any other and as far as I can see there is none! Also, on IE the footer is absent even in contact.php. I searched online and found that adblock plugin maybe causing the block, depending on the div's name, but my div is called "footer"! The stylesheet is common for every page, thus I do not believe it is a CSS related problem, but I do not know for sure. I would love some help and it would be very much appreciated. Thank you all, Georgia PS: Here is the basic html page and the related CSS (of course there is more CSS (for the other divs) but I think it is not relevant. I can post it if you like but not all pages have the same divs, so there is some styling for each page. The code I post is a basis that exists in all pages): <!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" /><link rel="stylesheet" type="text/css" href="style.css"><title>Something</title></head> <body> <div id="holderDiv" style="min-width: 1200px; margin: 0 auto;"> <div id="headerDiv"> <!--some things and more divs here--> </div> <!--end of headerDiv --> <div id="navigationDiv"> <!--a navigation menu here--> </div> <!--end of navigationDiv--> <div id="contentDiv" align="center"> <!--some content and more divs here--> </div><!--end of contentDiv--> <div id="footerDiv"> <p class="footerLinks"> <a href="terms.php">Terms of use</a> <a href="help.php">Help</a> <a href="contact.php">Contact</a></p> <p style="font-size:12px; color: #000000"><br /><br />Copyright 2014 Something</p> </div> <!--end of footerDiv--> </div> <!--end of holderDiv--> </body></html> //CSS: body { background-image: url("back.png"); background-repeat: repeat; background-position: left top; height: 100%; margin: 0; padding: 0; font-family:"Courier New", Courier, monospace; } #holderDiv { min-height: 100%; width: 100%; position: relative; } #footerDiv { clear: both; position: absolute; bottom: 0; width: 80%; height: 100px; margin-left: 10%; margin-right: 10%; margin-bottom: 5%; margin-top: 0%; padding-bottom: 3%; background-color: #99cccc; display: inline-block; overflow: hidden; text-align: center;} .footerLinks>a { color: #000000; font-size: 14px; } .footerLinks>a:hover { color: #000000; font-size: 14px; } .footerLinks>a:visited { color: #000000; font-size: 14px; }
  7. Hello I'm making a site in Wordpress with the following theme: http://wordpress.org/themes/rambo This is my site: http://leitmotif.cl/maximise/ How can i delete the dots in the titles of the footer widget and how can i make the columns smaller so i can put 4 of them there? I used firebug and i learned that the section is "footer widget", but i just can't find the dotted line section nor the size. It just let change the color of the line and size of the text, but nothing else.Could you help?
  8. Hello I'm making a site in Wordpress with the following theme: http://wordpress.org/themes/rambo This is my site: http://leitmotif.cl/maximise/ How can i delete the dots in the titles of the footer widget and how can i make the columns smaller so i can put 4 of them there? I used firebug and i learned that the section is "footer widget", but i just can't find the dotted line section nor the size. It just let change the color of the line and size of the text, but nothing else.Could you help?
  9. I want to overlap one div on another using css as shown in image below and i have following html and code <div id="div1">This is div 1</div><div id="div2">This is div 2</div> div1{width:800x;height:200px;background-color:#292929;color:#FFFFFF;}div2{width:800x;height:50px;background-color:#333333;color:#FFFFFF;} I want my footer to be like the image shown below, how can i do it ? I have uploaded the image, but if you are enable to see it then you can view the image easily at this URL http://imageart.webs.com/footer.png
  10. Hi, I have a problem with my footer; Before I applied the new theme to my application, the footer was in the bottom of the page normally but when I changed the theme and I did some modifications but not for the footer, it came in the middle of the page with the main content (not in the middle but always under the main content of the page) If I add position: absolute; to the footer it comes over the main content; This is my footer code: .footer.style2 { padding: 74px 0 38px; background: #000;}.footer.style2 .widget-container .widget-title{ font-size:18px; font-style: normal; color: #fff; text-transform: uppercase; margin-top: 10px; margin-bottom:16px;}.footer.style2 .widget-container li{margin-bottom: 10px;}.footer.style2 .widget-container li span, .footer .widget-container li a span{color:#797e80;}.footer.style2 .widget-container li a:hover span{color:#e87352;}.footer .map{ width: 194px; height: 194px; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); border-radius: 50%;}.footer .map .gmnoprint{display: none;} To solve the problem I added :"margin-top: 900px;" to the .footer.style2 but actually it's not practical because when I have a page longer I have to increase the margin-top. I don't know what I did wrong so please if anyone had faced this issue before or have an idea how to solve it tell me. Thanks in advance:)
  11. Hi guys. I'm having the strangest problem right now, and I really need you help to figure it out. The footer stays nicely at the bottom of the page, but the content is not maxing out all the way down to the footer. The content of the left floater decides the height. If there is little content, it stays high on the page, and if I fill it up, it causes the whole page to overflow (scroll), not just the left floater. Here's what I wish to achieve: 1. Navbar on top. 2. Content with no margin to the navbar. 3. Footer just below the content, no margin. 4. Show the whole page on the screen without the need to scroll. 5. No change in the navbar-content-footer connection when zooming. 6. Keep the footer to the bottom, and keeping content from bleeding into the footer. Thanks for your time! HTML <!DOCTYPE html><html><head> <title>NAME</title> <link href="css/Style3.css" medio="screen" rel="stylesheet" type="text/css"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <!-- check if screen is no more than 480: if( screen.width <= 480 ) { location.href = '/mobile.html';}--> </style></head><style> body { background-color: blue; background-repeat: no-repeat; background-attachment: fixed; background-position: left; background-size: cover; } li#nameofmine a p{ border-bottom: 1px solid white; font-weight: 700;} li#nameofmine:hover > a p{ color: black; border-bottom: 1px solid black;}</style><body> <div id="wrap"> <div id="main"> <nav> <ul> <li id="nameofmine"><a href="#"><p>NAME</p></a></li> <li><a href="#"><p>Read</p></a></li> <li><a href="#"><p>Listen</p></a> <ul> <li><a href="#"><p>Videos</p></a></li> <li><a href="#"><p>Recordings</p></a></li> </ul></li> <li><a href="#"><p>Look</p></a></li> <li><a href="#"><p>Contact</p></a></li> </ul> </nav> <div id="flags"> <a href="index2.html"><div id="flag1"><h4 style="margin-top: 10%;">1</h4></div></a> <a href="index.html"><div id="flag2"><h4 style="margin-top: 10%;">2</h4></div></a> </div><div id="leftbar"> <div id="news"><h3>NEWS</h3><p>Website is under construction. More will follow. Soon.</p></div> </div> </div></div> <footer> <p>© Copyright 2014 NAME. All rights reserved.</p> </footer> </body></html> CSS html {height: 100%}body{ font-family: 'open sans', 'courier'; font-size: 16px; color: white; text-align: center; margin: 0; font-weight: 100; height: 100%;}body a{ color: white; text-decoration: none;}h1{ font-size: 5em; line-height: 0.2em; color: white;}h3{ font-size: 18px; font-weight: 100; color: white; text-align: center; text-decoration: underline;}h2{ font-size: 20px; font-weight: 100; color: white;}#wrap{ min-height: 100%;}#main{ overflow: auto; padding-bottom: 3em; }#flags{ height: 2em; width: 6em; position: absolute; right: 0%; top: 0%; font-size: 16px;}#flag1{ height: 2em; width: 49%; float: right; border-left: 1px solid white; background-size: cover; background-position: center; background-color: red;}#flag2{ height: 2em; width: 49%; float: left; background-size: cover; background-position: center; background-color: green;}#flag1:hover{ opacity: 0.5;}#flag2:hover{ opacity: 0.5;}nav ul { position: relative; width: 100%; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; color: white; font-family: 'Open Sans'; font-size: 16; background-color: rgba(255, 255, 255, 0.3); }nav ul li{ text-align: center; display: inline-block; position: relative;}nav ul a{ display: inline-block; float: none; padding: 1em 3em; letter-spacing: 1px; color: #eaebed;}nav ul li:hover > a{ color: black;}li#nameofmine{ text-align: center; display: inline-block; }li#nameofmine a p{ display: inline-block; float: none; font-weight: 700; color: white;}li#nameofmine:hover > a p{ color: black;}*html nav ul li a:hover/* IE6 */{ color: #000;}nav ul li:hover > ul { display: block;}/* Sub-menu */nav ul ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 99;}nav ul ul li { float: none; margin: 0; display: block;}nav ul ul li:last-child { box-shadow: none;}nav ul ul a { padding: 0.2em 1em; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;}*html nav ul ul a { /* IE6 */ height: 10px; width: 150px;}*:first-child+html nav ul ul a { /* IE7 */ height: 10px; width: 150px;}nav ul ul a:hover { }nav ul ul li:first-child a { }nav ul ul li:first-child a:after{ content: ''; position: absolute; left: 45%; top: -10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid white;}nav ul ul li:first-child a:hover:after { border-bottom-color: black; }nav ul ul li:last-child a { }/* Clear floated elements */nav ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */#leftbar{ float: left; left: 0; top: 0; width: 20%; height: 100%;}#news{ height: 100%; width: 98%; margin-left: 2%; border-left: 0px; border-top: 0px; border-right: 1px; border-bottom: 0px; border-color: white; border-style: solid; font-weight: 100; text-align: left; overflow: auto;}footer{ height: 3em; width: 100%; background-color: rgba(255, 255, 255, 0.3); text-align: center; clear: both; position: relative; margin-top: -4em;}
  12. hey everyone, i have been sitting and trying to figure out my "footer" but without succes, what i want is my class "bund" to stay at bottom of the class "siden" i use siden to have all the other article in it, i dont want it to stay at bottom if theres no text on site, i just want it to float to bottom of the content. right now its like 10 px above the bottom, and i cant get it down so its margin 0. so thats why i asking in here. hope some can help fast. how its look with the code http://www.miltons.dk/nya/ Temi this my "php" <!DOCTYPE html><html lang="da"> <head> <meta charset="ISO-8859-1" /> <title>Miltons Trimning</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body class="siden"> <article class="alt"> <article class="hoved"> <?php include("hoved.php"); ?> </article> <article class="link"> <?php include("link.php"); ?> </article> <article class="indhold"> <p>bare en tdfest se selv æøå jhsfdjkfhsdjkhfjks dhjkfhsdkjfh jksdhf jkhsdjkfh jksnjkhfdsjhf jsdhf jshdjk fhjksh fjksdhjkfh jhewbjks dbfjsdkhfj sdhjfkhsdjkfh sjdkhfjkshdjkfh jskdhfjshf jkhebjkdsbjkfhsdjk hfjkshfjk sdhjkfhjk weubfjk fjhdsjfhsdkhfjks dhfjksdh jkfhsdjkfh kjsdhfjks dhj</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> </article> <article class="bund"> <?php include("bund.php"); ?> </article> </article> </body></html> this my css: .siden{margin-top: 5px;margin-left: auto;margin-right: auto;margin-bottom: 5px;width: 1200px;border: 1px solid green;}p{ margin-left: 5px; margin-right: 5px; margin-top: 0px;}.alt{ background-color: gray; height: 100%;}.hoved{ height: 240px;}.link{ margin-top: 20px;height: 40px;text-align: center;margin-bottom: 10px;}.indhold{ background-color: gray;}.bund{ background-color: gray; margin-bottom: 0px;}.menulinksvenstre { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; border-bottom-left-radius:20px; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinksmidt { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinkshjre { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -webkit-border-top-right-radius:20px; -moz-border-radius-topright:20px; border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; border-bottom-right-radius:20px; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinksvenstre:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinksvenstre:active { position:relative; top:1px;}.menulinkshjre:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinkshjre:active { position:relative; top:1px;}.menulinksmidt:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinksmidt:active { position:relative; top:1px;}
  13. Hey w3s again, im currently trying to make a foot div for a green webshop (for fun). Anyhow, im using this code: #foot { width:950px; height:20px; color:#FFF; background-color:#90CA77; bottom: 0px;} what i am trying to, is go take the whole foot div down to the bottom, but it will not do it. Any ideas? Oo...it is working so far, but wont go down, and that is all i need it to. here is the rest of my CSS: img {border: none;}a img { border: none;}html, body {height: 100%; /*to fill it out with no white borders or weird remain space...*/margin: 0em;padding: 0em;background-color: #D0D6B8;}#wrapper {width: 950px;margin: 0 auto;background-color: #ECEEE1; top: 0px;bottom: 0px;height: 100%;}#logo_holder { width: 950px; /*or 100%*/ height: 85px; background-color:#595959;} #menu_holder { width: 940px; /*Original: 950px, minus 10 for 5px at left and right (padding)...*/ height: 20px; background-color:#90CA77; padding-left: 5px; padding-right: 5px; border: none;} /* unvisited link */ #menu_holder a:link { color:#FFF; text-decoration:none; } /* visited link */ #menu_holder a:visited { color:#FFF; text-decoration:none; } /* mouse over link */ #menu_holder a:hover { color:#FFF; text-decoration:none; } /* selected link (clicking on it with mouse)... */ #menu_holder a:active { color:#FFF; text-decoration:none; }#foot { width:950px; height:20px; color:#FFF; background-color:#90CA77; bottom: 0px;}
  14. Hello, I'v tried to let the footer stick to the buttom of the page but it won't work.And now I don't know what I did but I can't see the whole footer image and can scroll down. Can sombody please help my with this problem. http://promotiefilm.....net/footer.jpg http://promotiefilm.net16.net/ Thanks
  15. Hi, can anyone help me solve this puzzle? I'm working on a design that uses full-width headers and footers but has fixed width content in the central framework, but it's behaving a little badly. See example: http://wildflowerpr.net/services On the surface, all seems to work fine, but when you reduce the browser window to, say, 50% of the width, there is an unwanted effect: i.e. you can scroll across to the right, and you'll see that the header and footer have been artificially 'cropped' giving a messy effect of a white space margin running down the right of the page. Not pretty! I don't want this cropping. I can kind of see what's happening, in that I'm effectively asking the browser to match the header / footer width (100%) to the width of the window, but by keeping my main content central and fixed width (1100px) it's confusing things. However, I'm not sure the best way around this. As you can see, my design has many layers and collumns, which I want to keep. Should I change my design radically? I've been reading a little about responsive / collumn based designs and wondered if I should change it. It's hard to do this with all the layers and the effects I've designed though. If it's of any relevance I'm working in Thesis 2.0 in WordPress. Appreciate any help - thanks in advance!
  16. So im here again, with another problem now. Look at the site http://mbdbygg.zxq.net/. The grey area in the middle is a div id called content and it is 800px height. Now i want to reduce the height to 400px, cause i dont need such wide space between the pictures and the footer as you see. The content div should end where the div class "center" ends. It has a border color to see where it ends. The problem now is that when i change the height to 400px the box only goes upand leaving a WHITE space under it.Meaning the footer does not follow up to the content div! What am i missing? I attach the css: *{ margin: 0px; padding: 0px;}body { margin-left: 0px; margin-top: 0px;}img { border: none;}#wrapper { min-width: 1347px; border: 1px solid #727272;font-family:Verdana, Arial, Helvetica, sans-serif;color:#cccccc;}#header { height: 180px;background-color:#FFFFFF;background-repeat:repeat-x;background-image:url(mbdbygg.gif);background-position:center;background-repeat:no-repeat;} #content { height: 800px;background-color:#2A2727;background-repeat:repeat-x;}.lefttext {position:relative;float:left;top:50px;left:40px;width:250px;height:400px;border: 1px solid #727272;}.righttext {position:relative;float:right;top:50px;right:40px;width:250px;height:400px;border: 1px solid #727272;}#center {position:relative;top:50px;left:297px;width:750px;height:500px;border: 1px solid #727272;}.meny {position:relative;font-family:Verdana, Arial, Helvetica, sans-serif;left:73px; top:12px;float:left;}.meny li{ display:inline; }.meny ul li a{ text-decoration: underline; color:#cccccc; font-weight: bold; }.meny ul li a:hover{ text-decoration: none; } .bilder { position:relative; float:left; left:1px; top:-360px; } .bilder img{ display: inline; border: 1px solid #7F7D7D; } .thumbnail { width:170px; height:130px; margin:5px; }#footer {background-color:#2A2727;background-repeat:repeat-x;border-top: 1px solid #727272;margin:0 auto; height: 60px; clear: both;}div#footer p {font-size:0.6em;font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;margin:0;padding:25px;}
  17. Okay im having this problem on my footer that it wont stick bottom of the div element. So im having code like above. So in style css i have tried everything in footer footer {bottom:0px; <-- Doesnt workmargin-bottom:0px; <-- Doesnt work}<div><footer>Copyright YEAR ...</footer></div>
  18. How do I make something appear at the bottom most parts of the page? What I mean is if I wanted to add a footer, I would want it to be at the bottom at all times no matter how the page is changing. I was wondering how I would align something in the center. Like if I wanted to align a div or table in the center, but not the text itself. I know I can use text-align:center, but that just seems weird and I tried align:center, but I am not sure if that is right.
  19. Hi. I have a website using a PHP require_once template that I created myself. I required the template file in my head, and it has functions to include the header, top navigation, and footer (which includes a smaller navigation menu as well). The whole website works like a charm, except for the footer navigation on the contact page. It works perfectly fine on all other pages, as well as when I comment out the textarea on the form. I have been studying and experimenting with HTML and CSS for some time now, and have never run into this problem. If I put a link immediately after the submit button, it works fine. But the navigation in the footer is rendered as text rather than links when my form has the textarea. Here is my HTML, pulled from View Source so as to show what each PHP function is doing, rather than having to post the PHP template file as well: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!-- Title --><title>Brink Roofing Division</title> <!-- Meta Information --><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="author" content="Mark" /> <!-- Stylesheets --><link rel="stylesheet" type="text/css" href="css/style.css" /><link rel="stylesheet" type="text/css" href="css/formStyle.css" /> <!-- !IE7 Fix --> <!--[if !IE7]> <style type="text/css"> #container { display: table; height: 100%; } </style> <![endif]--></head><body><div id="container"> <div id="header"> <div class="content"> <a href='index.php'><img src='images/brinklogo.jpg' alt='Brink General Contractors' /></a> <ul id='header_nav' class='menu'> <li><a href='index.php'>Home</a></li> <li><a href='about.php'>About</a></li> <li><a href='services.php'>Services</a></li> <li><span class='current_page'>Contact</span></li> </ul> </div> </div> <div id="main"> <div class="content"> <!-- Form --> <form method="post" action=""> <!-- Name --> <div class="line"> <div class="label"> <label for="name"> Name: </label> </div> <div class="input"> <input type="text" id="name" name="name" tabindex="1" /> </div> </div> <!-- E-Mail --> <div class="line"> <div class="label"> <label for="email"> E-Mail: </label> </div> <div class="input"> <input type="text" id="email" name="email" tabindex="2" /> </div> </div> <!-- Subject --> <div class="line"> <div class="label"> <label for="subject"> Subject: </label> </div> <div class="input"> <input type="text" id="subject" name="subject" tabindex="3" /> </div> </div> <!-- Message --> <div class="line"> <div class="label"> <label for="message"> Message: </label> </div> <div class="input"> <textarea id="message" name="message" tabindex="4"></textarea> </div> </div> <!-- Submit --> <div class="line"> <div id="submit"> <input type="submit" id="send" name="send" tabindex="5" value="Send" /> </div> </div> </form> </div> </div></div> <div id="footer"> <div class="content"> <span class='left'>© Brink General Contractors <br />Website by Mark Little</span> <span class='right'> <ul id='bottom_nav' class='menu'> <li><a href='index.php'>Home</a></li> <li>|</li> <li><a href='about.php'>About</a></li> <li>|</li> <li><a href='services.php'>Services</a></li> <li>|</li> <li><a href='contact.php'>Contact</a></li> </ul> </span> </div></div></body></html> And my main CSS file: @charset "UTF-8";*{ margin: 0; padding: 0;} html, body{ margin: 0; padding: 0; height: 100%; background-color: #ffffff; font-family: Tahoma, sans-serif;}/* Div */#container{ position: relative; display: block; margin: 0 auto; min-height: 100%; width: 100%;} #header{ position: relative; display: block; margin: 0 0 -136px 0; height: 136px; border-bottom: 2px solid #0c71b7; background-color: #ffffff; z-index: 2;} #main{ position: relative; display: block; padding: 150px 0 80px 0; z-index: 1;} #footer{ position: relative; display: block; margin: -60px auto 0; height: 60px; width: 100%; background-color: #0c71b7;} .content{ position: relative; display: block; margin: 0 auto; width: 970px; overflow: auto; padding: 0 5px; height: 100%;} #footer .content div { position: relative; display: inline-block; width: 250px; height: auto; margin: 10px 0 0 0; } #footer .left { float: left; } #footer .right { float: right; } /* Navigation */ul.menu{ position: relative; display: inline; margin: 0; padding: 0; float: right; list-style-type: none;} ul.menu li{ position: relative; display: inline; margin: 0 5px 0 0; padding: 0; float: left;} ul.menu li:last-child{ margin: 0;} ul.menu li a{ position: relative; display: block; margin: 0; padding: 0; width: 100%; text-decoration: none; color: black;} /* Header Nav */ul#header_nav { position: absolute; bottom: 0; right: 5px; } ul#header_nav li, ul#header_nav li a, ul#header_nav li span { width: 100px; background-color: #0c71b7; border-top-right-radius: 5px; border-top-left-radius: 5px; } ul#header_nav li span { display: block; background-color: #000000; } img{ border: none;} /* Text */ul#header_nav li, ul#header_nav li a, ul#header_nav span{ text-align: center; text-decoration: none; color: #ffffff; font-weight: bold;} #footer, #footer a{ font-size: 12px; color: #ffffff;} #footer a:hover{ text-decoration: underline;} And my form CSS file: @charset "UTF-8";form{ position: relative; display: inline; float: left; width: 490px; height: auto;}/* Div */.line{ position: relative; display: block; width: 490px; height: auto; overflow: auto; margin: 0; padding: 15px 0 0 0;} .line:first-child{ padding: 0;} .line .label{ position: relative; display: inline; margin: 0; padding: 0; width: 60px; height: auto; float: left; clear: left; text-align: right;} .line .input{ position: relative; display: inline; margin: 0; padding: 0 0 0 10px; width: 420px; height: auto; float: left; clear: right;}/* Input */input[type="text"]{ position: relative; display: block; width: 200px; height: 20px; border: solid 2px #0c71b7; border-radius: 5px; -moz-border-radius: 5px;} textarea{ position: relative; display: block; min-width: 400px; max-width: 400px; width: 400px; min-height: 250px; max-height: 250px; height: 250px; border: solid 2px #0c71b7; border-radius: 5px; -moz-border-radius: 5px;} /* Text */label{ font-size: 14px;} input[type="text"], textarea{ font-size: 12px; font-family: Tahoma, Geneva, "sans-serif"; padding: 3px 5px 3px 5px;} input[type="text"]:focus, textarea:focus{ border: solid 2px #999999;} input[type="submit"]{ position: relative; display: block; width: 90px; height: 30px; float: right; margin: 0 5px 0 0; font-weight: bold; background-color: #0c71b7; color: #ffffff; border: 1px solid #0c71b7; border-radius: 5px; -moz-border-radius: 5px;} input[type="submit"]:hover{ background-color: #000000;} input[type="submit"]:active{ background-color: #999999;} Any help would be greatly appreciated! I have tried putting a line break after the textarea. That was the only kind of answer I found on Google. I have also tried to put the form in a fieldset, thinking that may work. Nothing seems to work except for eliminating the textarea, which isn't exactly logical. Thanks,Mark
  20. Hi everyone! This is my second post on this forum, and my first thread! I am a semi experienced coder in both (X)HTML, and CSS having done many web pages for simply learning purposes, and for my local Zeitgeist Chapter http://www.zeitgeist-toronto.com. In simple; I won't be needing so much in-depth explanation; simply code will do. So let me get started. If you visit http://www.beta.zeit...oronto.com/test (note this will be updated constantly, and possibly with the solution. feel free to take my code and use it for yourself ) you will notice that there is no real space between my 'contentWrapper' and the 'footer'. Now logically I would figure I need to add a 'margin' to create the space. Well that would work if I did not have two columns in the 'contentWrapper', and needed to use 'clear: left;' which negates my 'margin'. Now I already know the normal solution is to add a 'div' between the 'contentWrapper' and the 'footer' right? Well I don't want to do that. Maybe I have to, but I am challenging the community to find a way to do it without that additional 'div' and to possibly explain why 'margins' can't work when I use 'clear: left;'. My opinion, you mite as well prevent 'padding' and 'boarders' working then if you stop 'margins'. Anyway hope to hear some ideas. PeaceMichael Snape (zip of all the necessary files; no images) betazeittortest.zip
  21. Ok, I found a way to force the footer to the bottom of a page if the content is to short. I used the information found on this page: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ The issue is when the page is shorter than the content, such as if you were to re-size the window, the footer ends up in the middle of the content. Does any one know how i can adjust the code to keep it at the bottom of the content at all times?