Trenger hjelp til footer!

V

Variance

New Member
sånn ser CSS kodingen min ut atm:

body {
margin:0;
padding:0;
background: url('pap1.jpg') repeat-x;
text-align: center;
}
#main {
width: 1000px;
height: 600px;
background: #FFFFFF repeat-x;
margin: 80px auto;
padding: 10px;
border: solid 2px #B0E0E6;
}
#header {
height: 30px;
width: auto;
background: #FFFFFF repeat-x;
border: solid 2px #B0E0E6;
}


noen som kan gi meg et svar på hvordan jeg får inn en "sticky footer" ?
har prøvd en god del men får det ikke til. Noen tips?
jeg er ganske så ny med webutvikling :)
 
pmb

pmb

Webutvikler
Glemte en # foran footer der; altså #footer. Kanskje det som var forskjellen?

Hvis du vil bruke HTML5 så kan du droppe ID-tagen (#).
 
V

Variance

New Member
nei :( funker ikke. jeg har prøvd de meste. leste noe om at jeg måtte resette CSS documentet eller noe. skjønte ikke helt hva de mente med det.
 
Tonny Kluften

Tonny Kluften

Administrator
Du kan lime inn dette øverst i CSS fila (under infoen om CSS fila) for å resette CSS:

Kode: 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
V

Variance

New Member
ja det har jeg spikre :) funker fortsatt ikke. skjønner ikke hva som er gale. CSS documentet mitt ser slik ut:
body {
margin:0;
padding:0;
background: url('pap1.jpg') repeat-x;
text-align: center;
}

#main {
width: 1000px;
height: 600px;
background: #FFFFFF repeat-x;
margin: 80px auto;
padding: 10px;
border: solid 2px #B0E0E6;
}
#header {
height: 30px;
width: auto;
background: #FFFFFF repeat-x;
border: solid 2px #B0E0E6;
}

#footer {
clear: both;
background-color: #D1C0A7;
border: #FFFFFF ;
margin: 500px;
}





.mblinks {
position: relative;
height: 40px;
text-align: center;
}
.mblinks li {
display: inline;
}

.mblinks li a {
padding: 16px 30px;
color: #white;
text-decoration: none;
}

.mblinks li a:hover {
background-color:#000000;
text-decoration: underline;
}


h1 {
text-align: center;
font-family:"Times New Roman";
font: 24pt;
color: #8A2BE2
}
hr {
height: 2px;
color: #ff3819;
}
p {
font-family:"calibri";
font-size: 12pt;
text-align: left;
text-indent: 48px;
color: #2f2d2d;
}
Klikk for å utvide...
 
S

selbekk

Medlem
Et enkelt eksempel på en sticky footer:

JSFiddle (live eksempel): Edit this Fiddle - jsFiddle

CSS:
Kode: 
body {
    background-color: #ddd;
    margin: 0px; 
    padding: 0px;
    font-family: sans-serif;
    overflow: auto;
}

.container {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

#content {
    background: white;
    color: #333;
    padding: 10px 10px 30px;
}

.footer {
    background-color: #666;
    color: white;
    width: 100%;
    padding: 10px 0;
}

.footer.sticky {
    position: fixed;
    bottom: 0px;
}

HTML sample
Kode: 
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div class="container">
    <div id="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi molestiae magnam praesentium beatae molestias libero cumque sed recusandae nesciunt ex repellendus vel consequatur accusantium eligendi aliquid laboriosam provident! Ad hic.
        </p>
    </div>
</div>
<div class="footer sticky">
    <div class="container">
        Her er en sticky footer som er nederst på siden!
    </div>
</div>
 
Du må logge inn eller registrere deg for å svare her.
Topp