html - Footer problem - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #17215 @ 27.11.12 23:26

Hejsa

Nu har jeg søgt herinde, og på google og prøvet jeg ved ikke hvor mange forskellige løsninger uden at få det til at virke, så nu kommer der (desværre) endnu et footer-spørgsmål.
Måske i kan se hvilken dum fejl jeg har lavet og overset?

Jeg fandt et andet eksempel herinde som jeg har brugt som grundlag for den: http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Jeg har lavet en jsfiddle i kan arbejde på for kan ikke uploade min kode så det er testeksempel til brug.
JSFIDDLE: http://jsfiddle.net/ewL4u/4/

19 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 28.11.12 13:28

4.283

Du siger du at du har søgt og søgt og søgt, og det ikke er de metoder der er forslået:

Med lidt søgning kan man finde:

http://www.udvikleren.dk/forum/35632/footer-og-css/

Fundet via: https://www.google.dk/search?hl=da&tbo=d&q=site%3Audvikleren.dk+footer+css&oq=site%3Audvikleren.dk+footer+css&gs_l=serp.3...1661.3110.0.5120.5.5.0.0.0.0.118.297.4j1.5.0...0.0...1c.1.xtmYTuw1Dsc

Det giver nøgleordne sticky og footer:

https://www.google.dk/search?q=sticky+footer&oq=sticky+footer&aqs=chrome.0.57j5j0l2j61j60.2839&sugexp=chrome,mod=3&sourceid=chrome&ie=UTF-8

resultatet er:

http://ryanfait.com/sticky-footer/ og http://www.cssstickyfooter.com/

Indlæg senest redigeret d. 28.11.2012 13:29 af Bruger #10216

Bruger #17215 @ 28.11.12 15:18

408

Du siger du at du har søgt og søgt og søgt, og det ikke er de metoder der er forslået:

Med lidt søgning kan man finde:

http://www.udvikleren.dk/forum/35632/footer-og-css/

Fundet via: https://www.google.dk/search?hl=da&tbo=d&q=site%3Audvikleren.dk+footer+css&oq=site%3Audvikleren.dk+footer+css&gs_l=serp.3...1661.3110.0.5120.5.5.0.0.0.0.118.297.4j1.5.0...0.0...1c.1.xtmYTuw1Dsc

Det giver nøgleordne sticky og footer:

https://www.google.dk/search?q=sticky+footer&oq=sticky+footer&aqs=chrome.0.57j5j0l2j61j60.2839&sugexp=chrome,mod=3&sourceid=chrome&ie=UTF-8

resultatet er:

http://ryanfait.com/sticky-footer/ og http://www.cssstickyfooter.com/

Sjovt nok HAR jeg prøvet de to sider også. Men stadig uden det virker, og derfor jeg kommer herind.

Du kan prøve at se hvad det hjalp at tilføje alt fra ryanfait som ender med at henvise til: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Det blev til: http://jsfiddle.net/ewL4u/14/ (som også er forkert)

Hvis det er så simpelt så vis mig det gerne for jeg er ved at blive sindsyg af at have lavet 4-5 forskellige løsninger alle der ikke virker.
Så rod med min fiddle og få den til at sidde som den skal, for jeg HAR faktisk søgt og søgt og prøvet og prøvet. Det har fejlet og derfor jeg kommer her fordi jeg kan ikke få det til at virke.

Indlæg senest redigeret d. 28.11.2012 15:22 af Bruger #17215

Bruger #10216 @ 28.11.12 20:11

4.283

Hvis du fjerner alle de mange linjer indhold bliver footeren da i bunden af siden?

http://jsfiddle.net/ewL4u/16/

Eller er det ?

CSS kode

 body #footer { position: fixed; bottom: 0px; width; 100%; height: 100px; background: #ccc; }
 body #wrapper { margin-bottom: 100px; }

HTML kode

 <body>
      <div id="wrapper">indhold</div>
      <div id="footer">footer</div>
 </body>

Indlæg senest redigeret d. 28.11.2012 20:12 af Bruger #10216

Bruger #17215 @ 28.11.12 21:27

408

Hvis du fjerner alle de mange linjer indhold bliver footeren da i bunden af siden?

http://jsfiddle.net/ewL4u/16/

Eller er det ?

CSS kode
 body #footer { position: fixed; bottom: 0px; width; 100%; height: 100px; background: #ccc; }
 body #wrapper { margin-bottom: 100px; }
HTML kode
 <body>
      <div id="wrapper">indhold</div>
      <div id="footer">footer</div>
 </body>

Hvis jeg ser på din fiddle nu så står footeren midt på siden.

Hvis jeg indsætter din css til min fiddle virker det desværre heller ikke.
Der får jeg automatisk scroll uden indhold: http://jsfiddle.net/ewL4u/17/

Indlæg senest redigeret d. 28.11.2012 21:33 af Bruger #17215

Bruger #10216 @ 29.11.12 00:03

4.283

Dette virker som sticky footer i Chrome

Kode

<style>
	body { padding: 0px; margin: 0px; }
	body #footer { position: fixed; bottom: 0px; width: 100%; height: 100px; background: #ccc; }
	body #wrapper { background: #a00; min-height: 100%; padding-bottom: -105px; }
</style>
<body>
      <div id="wrapper">
      	<div style="height: 1000px;">indhold</div>
      </div>
      <div id="footer">footer</div>
</body>

Virker ovenstående ikke efter hensigten, må vi have nogle screenshots, browser info plus en nøjagtige beskrivelse af hvad det er du ønsker

Bruger #17215 @ 29.11.12 00:13

408

Dette virker som sticky footer i Chrome
Kode
<style>
	body { padding: 0px; margin: 0px; }
	body #footer { position: fixed; bottom: 0px; width: 100%; height: 100px; background: #ccc; }
	body #wrapper { background: #a00; min-height: 100%; padding-bottom: -105px; }
</style>
<body>
      <div id="wrapper">
      	<div style="height: 1000px;">indhold</div>
      </div>
      <div id="footer">footer</div>
</body>
Virker ovenstående ikke efter hensigten, må vi have nogle screenshots, browser info plus en nøjagtige beskrivelse af hvad det er du ønsker

Når jeg ser på fiddleren i FF 16.0.2 så kommmer der automatisk scroll på.

Bruger #4784 @ 29.11.12 01:32

der var fuck up i divs på fiddle - nu er koden korrekt

Bruger #17215 @ 29.11.12 07:17

408

Dette er ren copy paste: http://jsfiddle.net/ewL4u/21/ fra http://ryanfait.com/sticky-footer/

Virker fint i Chrome og Firefox

Og hvis jeg så prøver med lidt indhold så ser det desværre ikke ud til at virke så fint. Prøv at se på http://jsfiddle.net/ewL4u/22/ og du kan se at indholdet ikke skubber footeren ned så den ligger pænt nederst på siden.

Bruger #17215 @ 29.11.12 13:18

408

Slet højden på .content, som jeg skrev i koden:

http://jsfiddle.net/ewL4u/23/

Sorry jeg kan nu se hvad min fejl har været fra starten af.
.push har ligget inde i content, men skulle den ikke.
Så med mine klasser inde over så virker det stadig, og grunden til det ikke virkede før var at push lå ikke udenfor content, men som det sidste element i content.
http://jsfiddle.net/ewL4u/24/

Selv med mange data og lidt margen's forskel
http://jsfiddle.net/ewL4u/28/
Ej hvor er jeg dog glad over at jeg endelig kan få det crap til at virke! Tak endnu engang det var virkelig RART!

Indlæg senest redigeret d. 29.11.2012 13:33 af Bruger #17215

<< < 1 2 > >>

Footer problem

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler