Databases
StackOverflow2013
Postsdbo
POProblems with sticky footer html css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblems with sticky footer html css
    primarykey
    data
    text
    <p>I'm having trouble making a sticky footer, whatever I do the code completely messes up and re-arranged positioning of other elements. I'm using multiple div elements. I have tried pretty much most tutorials on stickying footers online like <a href="http://www.cssstickyfooter.com/using-sticky-footer-code.html" rel="nofollow">http://www.cssstickyfooter.com/using-sticky-footer-code.html</a> Help would be much appreciated. Thanks a lot!</p> <p>html:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org"&gt; &lt;title&gt;Southend-on-Sea Independant Tourist Guide&lt;/title&gt; &lt;!--Attached CSS to keep constant throughout site--&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;meta name="description" content="An independant tourist guide on Southend-on-Sea"&gt; &lt;meta name="keywords" content="southend, southend-on-sea, tourist guide, tourist, independant"&gt; &lt;meta name="author" content="Callum Stevens"&gt; &lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"&gt;&lt;!--[if !IE 7]&gt; &lt;style type="text/css"&gt; #wrap {display:table;height:100%} &lt;/style&gt; &lt;![endif]--&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;link rel="stylesheet" type="text/css" href="navigation.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="content"&gt; &lt;div id="header"&gt; &lt;table width="200" border="0" align="center" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td&gt;&lt;img src="southendpiersept2006edit.jpg" width="700" height="389" alt="southend pier site logo"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="navigation"&gt; &lt;ul&gt; &lt;li class="home"&gt;&lt;a href="index.htm"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="places"&gt;&lt;a href="places.htm"&gt;Places to go&lt;/a&gt;&lt;/li&gt; &lt;li class="things"&gt;&lt;a href="things.htm"&gt;Things to do&lt;/a&gt;&lt;/li&gt; &lt;li class="where"&gt;&lt;a href="where.htm"&gt;Where to stay&lt;/a&gt;&lt;/li&gt; &lt;li class="getting"&gt;&lt;a href="getting.htm"&gt;Getting&amp;lt; here/a&amp;gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="about"&gt;&lt;a href="getting.htm"&gt;&lt;/a&gt;&lt;a href="getting.htm"&gt;&lt;/a&gt;&lt;a href="about.htm"&gt;About the town&lt;/a&gt;&lt;/li&gt; &lt;li class="contact"&gt;&lt;a href="contact.htm"&gt;Contact us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;table width="700" border="0" align="center" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;br&gt; &lt;br&gt; &lt;h1&gt;Southend-On-Sea&lt;/h1&gt; &lt;br&gt; &lt;h2&gt;Welcome to Southend-On-Sea Tourist Information Site. You're #1 stop for finding out about Southend!&lt;/h2&gt; &lt;br&gt; &lt;h3&gt;This site aims to help you in getting here, finding accomodation, and letting you know whats going on.&lt;/h3&gt; &lt;p&gt;paragraph&lt;/p&gt; &lt;p id="p2"&gt;paragraph2&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>style.css:</p> <pre><code>html, body { margin: 0px; padding: 0px; text-align:center } body{ background: url(bg.jpg) repeat-x;} #content { text-align:center width:67%; } h2 { text-transform: capitalize;} </code></pre> <p>navigation.css</p> <pre><code>#navigation ul { width: 700px; height: 50px; position: absolute; /** Places image at the top of the page **/ top: 389px; /** Determines the height from the top of the page **/ left: 15.3%; /** Determines the width from the left of the page **/ background: url(menu.jpg) no-repeat 0 0; list-style: none; margin: 0; padding: 0; } #navigation li { display: inline; } #navigation li a:link, #navigation li a:visited { border: none; width: 100px; height: 50px; display: block; position: absolute; top: 0; text-indent: -7000px; outline: none; } #navigation li.home a:link, #navigation li.home a:visited { left: 0; } #navigation li.places a:link, #navigation li.places a:visited { left: 100px } #navigation li.things a:link, #navigation li.things a:visited { left: 200px } #navigation li.where a:link, #navigation li.where a:visited { left: 300px } #navigation li.getting a:link, #navigation li.getting a:visited { left: 400px } #navigation li.about a:link, #navigation li.about a:visited { left: 500px } #navigation li.contact a:link, #navigation li.contact a:visited { left: 600px } #navigation li.home a:hover { background: url(menu.jpg) no-repeat 0 -50px; } #navigation li.places a:hover { background: url(menu.jpg) no-repeat -100px -50px; } #navigation li.things a:hover { background: url(menu.jpg) no-repeat -200px -50px; } #navigation li.where a:hover { background: url(menu.jpg) no-repeat -300px -50px; } #navigation li.getting a:hover { background: url(menu.jpg) no-repeat -400px -50px; } #navigation li.about a:hover { background: url(menu.jpg) no-repeat -500px -50px; } #navigation li.contact a:hover { background: url(menu.jpg) no-repeat -600px -50px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCJava
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIs there any way you can temporarily upload this to a web server (non-publicly) so we can inspect the result of this code more easily?
      singulars
      1. POProblems with sticky footer html css
      1. USTrent Bing
    2. COOr can you just make a [fiddle](http://jsfiddle.net/) of the same?
      singulars
      1. POProblems with sticky footer html css
      1. USPraveen Kumar Purushothaman
    3. COsorry i'm not familiar with fiddle, you can just copy the code?
      singulars
      1. POProblems with sticky footer html css
      1. USCJava
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload