Verschiedenes: Footer, Hintergrund, Auflösung

Tinchen · 2 Dezember 2011

Hallo zusammen,

Ich poste mal hier im html Forum, wenngleich ich nicht sicher bin, ob das alles reine html Lösungen sein werden...

Ich arbeite gerade an dieser website: click
Wie man sieht ist sie ja noch lange nicht perfekt.

Ich möchte daher noch folgende Dinge verbessern, wollte aber erstmal hier nachfragen, bevor ich loslege.

der Footer soll immer am unteren Bildschirmrand fixiert sein. Zusätzlich möchte ich erreichen, dass auch das Hintergrundbild immer unten, direkt oberhalb des Footers ausgerichtet ist. Ist dies prinzipiell möglich?
Ich möchte die Seite von 1024 x 768 px auf dynamische Auflösung anpassen. Was muss ich denn diesbezüglich in Richtung meines Logos und Hintergrundbildes beachten? Mein Logo ist im Moment 998 x 140 px groß. Was passiert mit dem Bild, wenn ich die website auf dynamische Auflösung einstelle, also z.B. jemand 1280 x 1024 px Auflösung eingestellt hat? Verzerrt sich dann das Bild? Sollte ich es vorher vergrößern? Die gleiche Frage stelle ich mir für das Hintergrundbild. Wird dieses sich verzerren?
Wenn ich die Auflösung auf dynamische Größe verändere, sollte ich dann die Größe für das Logo auch anpassen? Andernfalls würde ich vermuten, dass es auf der fixierten Größe stehenbleibt. Oder kann ich diesen Teil des Codes prinzipiell entfernen?

HTML:

<tbody>        <tr>        <td colspan="2"><img src="plogo.gif" alt="" border="0" height="140" width="998"></td>        </tr>            </tbody>

Ich glaube, das wärs fürs erste. Freue mich über jeden Tipp. Vielen lieben Dank!!

Degers · 2 Dezember 2011

Zum Footer einfach mal anschauen:
http://aktuell.de.selfhtml.org/artikel/css/footer/

Das Logo setzt du mit eine relativen Breite fest, dann kann sich die Höhe anpassen. Oder eben andersrum. Dann noch ein absoluter Maximalwert für die sich frei anpassende Länge und das Logo ist sicher.

Tinchen · 4 Dezember 2011

Vielen Dank schonmal für die Tipps. Bräuchte da aber nochmal Hilfe, bitte.
Ich habe jetzt meinen Footer fixiert. Wobei fixiert das falsche Wort ist, ich möchte ihn am Seitenende ausrichten. Ich habe dafür diese Seite zu Hilfe genommen:
Footer immer unten anordnen

Ich scheine aber irgendwo einen Fehler zu haben, denn der Footer erscheint jetzt bei mir scheinbar fixiert irgendwo in der Mitte der Seite.

Dies ist mein html-code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Agrarservice Bernd Schich</title>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <meta http-equiv="expires" content="0">
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="keywords" content="" lang="">
  <meta name="generator" content="Web2Date BASIC">
  <link rel="stylesheet" type="text/css" href="s.css">
  <link rel="stylesheet" type="text/css" href="ssb.css">
  <link rel="stylesheet" type="text/css"
 href="Footer.css">
  <script language="JavaScript">
agent = navigator.userAgent;
yes = 0;
if(agent.substring(0,7) == "Mozilla")
{
if( parseInt(agent.substring(8,9)) >= 3)
{
yes = 1;
}
}
if(yes)
{
p1n = new Image();
p1n.src = "./images/pmth1.gif";
p1h = new Image();
p1h.src = "./images/pmths1.gif";
p2n = new Image();
p2n.src = "./images/pmth2.gif";
p2h = new Image();
p2h.src = "./images/pmths2.gif";
p3n = new Image();
p3n.src = "./images/pmth3.gif";
p3h = new Image();
p3h.src = "./images/pmths3.gif";
p0n = new Image();
p0n.src = "./images/pmth0.gif";
p0h = new Image();
p0h.src = "./images/pmths0.gif";
}
function CI(imgNum,imgName) {
if(yes)
{
document.images[imgNum].src = eval(imgName + ".src")
}
}
  </script>
  <div id="wrapper">
  <div id="content"></div>
  </div>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(/..//images/background_800pxheight.gif); background-repeat: no-repeat;"
 topmargin="10" leftmargin="10" bottommargin="10"
 rightmargin="10" alink="#ffffff" link="#ffffff"
 marginheight="10" marginwidth="10" vlink="#ffffff">
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="2"><img src="plogo.gif" alt=""
 border="0" height="140" width="998"></td>
    </tr>
  </tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td> <img src="pnd.gif" alt="" border="0"
 height="52" width="160"> <br>
      <br>
      </td>
    </tr>
    <tr>
      <td valign="top">
      <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td colspan="3"><a href="./index.html"><img
 src="pmths0.gif" alt="" border="0" height="29"
 width="155"></a></td>
            <td></td>
          </tr>
          <tr>
            <td colspan="3"><a
 href="./ueberuns/index.html"
 onmouseover="CI('p1','p1h');return true"
 onmouseout="CI('p1','p1n');return true"><img
 src="pmth1.gif" name="p1" alt="" border="0"
 height="29" width="155"></a></td>
            <td> </td>
          </tr>
          <tr>
            <td colspan="3"><a
 href="./leistungen/index.html"
 onmouseover="CI('p2','p2h');return true"
 onmouseout="CI('p2','p2n');return true"><img
 src="pmth2.gif" name="p2" alt="" border="0"
 height="29" width="155"></a></td>
            <td> </td>
          </tr>
          <tr>
            <td colspan="3"><a
 href="./galerie/index.html"
 onmouseover="CI('p3','p3h');return true"
 onmouseout="CI('p3','p3n');return true"><img
 src="pmth3.gif" name="p3" alt="" border="0"
 height="29" width="155"></a></td>
            <td> </td>
          </tr>
        </tbody>
      </table>
      </td>
      <td><img src="pcp.gif" alt="" border="0"
 height="1" width="15"></td>
      <td valign="top">
      <table border="0" cellpadding="0" cellspacing="0"
 width="520">
        <tbody>
          <tr>
            <td><img src="pcp.gif" alt=""
 border="0" height="1" width="635"></td>
            <td><img src="pcp.gif" alt=""
 border="0" height="1" width="15"></td>
            <td><img src="pcp.gif" alt=""
 border="0" height="1" width="160"></td>
          </tr>
          <tr>
            <td colspan="3"> <a
 name="00000092ff0cf7501"></a>
            <h2 style="font-family: Times New Roman,Times,serif;">Herzlich
willkommen!</h2>
            </td>
          </tr>
          <tr>
            <td colspan="3"> <a
 name="5112829fa713bed01"></a>
            <h2></h2>
            </td>
          </tr>
          <tr>
            <td colspan="3" valign="top"><span
 style="font-family: Times New Roman,Times,serif;" class="normal">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p></p>
            <p><span
 style="font-family: Times New Roman,Times,serif;" class="normal">Lorem
ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</span></p>
            <p><span
 style="font-family: Times New Roman,Times,serif;" class="normal">Lorem
ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</span></p>
            </span><br>
            <br>
            <br>
            <br>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<!--Ende #content-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
[COLOR=#ff0000]<div id="footer">
<table border="0" cellpadding="0" cellspacing="0"
 width="998">
  <tbody>
    <tr>
      <td bgcolor="#417dc1"><img src="pcp.gif"
 alt="" border="0" height="1" width="1"></td>
    </tr>
    <tr>
      <td align="center"> <img src="pdot.gif"
 alt="" border="0" height="10" width="8"><a
 class="navnormal" href="./kontakt.html">Kontakt</a>
      <img src="pdot.gif" alt="" border="0"
 height="10" width="8"><a class="navnormal"
 href="./impressum.html">Impressum</a> <img
 src="pdot.gif" alt="" border="0" height="10"
 width="8"><a class="navnormal" href="./agb.html">AGB</a>
      </td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>
[/COLOR]

Dies ist meine Footer.css

Code:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p, h1 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
}

#content {
padding: 1em 1em 2.5em 1em;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
}
* html #wrapper {
height: 100%;
}

Wahrscheinlich seh ich grad den Wald vor lauter Bäumen nicht :-/

Kann mir jemand sagen, wo mein Fehler liegt? Vielen Dank!

Degers · 4 Dezember 2011

Dafür sorgt derzeit die absolute Positionierung des Footers. Nimmst du diese raus ordnet sich der Footer automatisch unten ein, siehe auch hier:
Verschiedenes: Footer, Hintergrund, Auflsung

Noch der obligatorische Hinweis: Tabellen sind nicht für Layouts gedacht. Inhalt hat im Head nichts zu suchen, also zB. die Divs content und wrapper.

Tinchen · 5 Dezember 2011

Degers schrieb:
Dafür sorgt derzeit die absolute Positionierung des Footers. Nimmst du diese raus ordnet sich der Footer automatisch unten ein, siehe auch hier:
Verschiedenes: Footer, Hintergrund, Auflsung

Ähm das macht natürlich Sinn

Änder ich gleich heute abend ab, hätt ich natürlich auch von selbst drauf kommen können :-?

Degers schrieb:
Noch der obligatorische Hinweis: Tabellen sind nicht für Layouts gedacht. Inhalt hat im Head nichts zu suchen, also zB. die Divs content und wrapper.

Danke für den Hinweis, ich werd das noch entsprechend überarbeiten. Bin eh noch nicht durch mit dem Layout.
Wollt das ganze auch noch mal durch den html validator laufen lassen.

Auf jeden Fall danke schonmal für deine Hilfe!

toney · 5 Dezember 2011

Das meiner Meinung nach beste Tutorial für einen Footer, der immer ganz unten ist: A CSS Sticky Footer
Ich würde mit dynamischer Größe bei dir aufpassen. Die Bilder sind eh schon nicht die schärfsten (also etwas verpixelt). Wenn die dann noch gestreckt werden sieht es vll. nicht mehr so gut aus...

Tinchen · 5 Dezember 2011

Was für eine Auflösung für die Bilder wäre denn am idealsten für dynamische Auflösung?
Ich hab noch die Originalfotos unbearbeitet auf dem Rechner.

Im Original hat der Header 2481 x 788 px
und der Hintergrund 2481 x 1392 px

Ich hatte die fürs erste nur verkleinert, weil ich dachte das wäre besser.
Meinst du mit den unbearbeiteten Originalen würde das besser funktionieren?

mermshaus · 5 Dezember 2011

Das ist schwer pauschal zu beantworten. Das ist eine Abwägung zwischen visuellem Eindruck und Bildgröße. Zu große Bilder laden vielleicht zu lange (und werden in kleinen Viewports ohnehin nicht benötigt), zu kleine Bilder sehen in großen Viewports vielleicht nicht mehr gut aus.

Ich würde es aber mit der Bildgröße nicht übertreiben. Es ist schließlich nur ein dezentes Hintergrundbild. Du solltest das Bild aber nach JPEG umwandeln. GIF ist Platzverschwendung.

toney · 5 Dezember 2011

Naja, 2481px ist dann doch etwas groß. Dann dauert das Laden bei langsamen Verbindungen etwas zu lange.
Ich würde die wohl auf 1440px skalieren, größere Auflösungen sind doch recht selten, denk ich...

Tinchen · 9 Dezember 2011

Ok danke, dann werd ich das so machen

Eine Frage hab ich noch...ich habe das Hintergrundbild jetzt so positioniert:

Code:

BODY, HTML {
	font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	background: url(../images/background_800pxheight.gif); 
	background-repeat: no-repeat;
 background-position: 0px 70px;

Eigentlich hätte ich es am liebsten, wenn der Footer sich am Hintergrundbild unten ausrichtet, abr ich bekomm's nicht hin.
Die .css sieht so aus:

Code:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p, h1 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
}

#content {
padding: 1em 1em 2.5em 1em;
}

#footer {
bottom: 0;
position:relative;
width: 100%;
line-height: 1.5em;
text-align: left;
}
* html #wrapper {
height: 100%;
}

Wo hab ich denn hier noch einen Denkfehler?

mermshaus · 10 Dezember 2011

Die interessantere Frage ist, was du machst, wenn der Content einmal länger als <Höhe des Hintergrundbilds> wird.

Vielleicht ist diese Technik nützlich für dich:

- The Man in Blue > Experiments > footerStickAlt

Tinchen · 10 Dezember 2011

Vielen Dank für die Tipps. Hab's jetzt erstmal so gemacht:

Code:

#footer {
bottom: 10px;
position: absolute;
left: 0px; top: 850px; width: 998px; 
line-height: 1.5em;
text-align: left;

Verschiedenes: Footer, Hintergrund, Auflösung

Tinchen

Neues Mitglied

Degers

Mitglied

Tinchen

Neues Mitglied

Degers

Mitglied

Tinchen

Neues Mitglied

toney

Guest

Tinchen

Neues Mitglied

mermshaus

Senior HTML'ler

toney

Guest

Tinchen

Neues Mitglied

mermshaus

Senior HTML'ler

Tinchen

Neues Mitglied

Neueste Beiträge