CSS Header/Footer immer sichtbar IE

« Vorherige1Nächste »

Status: Gelöst | Ubuntu-Version: Ubuntu 10.10 (Maverick Meerkat)
Antworten |

Thomas131

Anmeldungsdatum:
10. August 2010

Beiträge: 248

Wohnort: Österreich

Zitieren

31. Dezember 2010 22:18

Ich möchte, dass der Header und der Footer immer am Bildschirm zu sehen sind. Ein Freund hat mir geholfen es zu schaffen. Das Problem ist der IE (Internetexplorer). Ich möchte, dass es auch mit dem IE aufgerufen werden kann.
Mein CSS-Code:

html, body, #wrapper {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

#buttonlist {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 5%;
border-bottom: 1px solid black;
background-color: red;
}

#buttonlist ul {
list-style-type: none;
}

#buttonlist ul li {
display: inline;
}

#content {
padding-top: 5%;
padding-bottom: 20px;
overflow: auto;
}

#footer {
position: fixed;
bottom: 0px;
left: 0px;
height: 20px;
width: 100%;
border-top: 1px solid black;
background-color: white;
}

Eine HTML-Datei:

<!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" />

<title>Login</title>

<link href="cakestyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">
<div id="buttonlist">

<!-- Header -->
</div>

<div id="main">    

<!--Main-Teil-->

</div>
<div id="footer">

<!-- Footer -->

</div>

</div>

</body>

</html>

agaida

Anmeldungsdatum:
24. Februar 2010

Beiträge: 3348

Wohnort: Bielefeld

Zitieren

31. Dezember 2010 22:50 (zuletzt bearbeitet: 31. Dezember 2010 22:51)

Nicht die beste Variante, ich empfehle hier den Einsatz eines Boxmodells. Das mag anfangs etwas umständlich erscheinen, passt dafür aber immer und in jedem Browser: http://www.ge-webdesign.de/blog/56_css3-mit-4-boxmodellen.html

Das Boxmodell von Gerd ist ungefähr das Beste und fundierteste, was ich je zu diesem Thema gelesen habe. Dabei hat es einen Vorteil. Es ist super simpel und gut erklärt. (Den Vorteil, dass es wirklich immer funktioniert hatte ich ja erwähnt 😉)

Thomas131

(Themenstarter)

Anmeldungsdatum:
10. August 2010

Beiträge: 248

Wohnort: Österreich

Zitieren

31. Dezember 2010 23:08

Danke für die schnelle Antwort. Ich habe es schnell mal überflogen und ferstehe es noch nicht ganz. Aber trozdem danke!

agaida

Anmeldungsdatum:
24. Februar 2010

Beiträge: 3348

Wohnort: Bielefeld

Zitieren

31. Dezember 2010 23:23

Da gehts Dir nicht anders als mir, ich hab auch eine Zeit gebraucht. die Idee dahinter ist, dass man etwas schafft, was unabhängig von der jeweiligen Browserimplementation und deren Fehlern ist. Du schachtelst einfach Boxen. Da die Dimensionierung von Objekten in den unterschiedlichen Browsern ein Grauen ist, nimmst Du halt 2. Ich versuchs mal mit pseudo-html

<body>
  <div class="page aussen>
    <div class="page innen>    

      <div class="kopf aussen>
        <div class="kopf innen>
          hier kann der Header rein
        </div> <!-- kopf innen -->
      </div> <!-- kopf aussen -->

      <div class="main aussen>
        <div class="main innen>
          hier kann der eigentliche Content rein
        </div> <!-- main innen -->
      </div> <!-- main aussen -->

      <div class="footer aussen>
        <div class="footer innen>
          hier kann der Footer rein
        </div> <!-- footer innen -->
      </div> <!-- footer aussen -->

    </div>
  </div>
</body>

Ungefähr so, die Syntax von mir ist natürlich grottig. Da ich das von CMSimple oder auch anderen CMS erzeugen lasse, brauche ich immer nur so ein Template erzeugen, geht natürlich auch per Hand.

Thomas131

(Themenstarter)

Anmeldungsdatum:
10. August 2010

Beiträge: 248

Wohnort: Österreich

Zitieren

1. Januar 2011 08:14

Warum braucht man immer so ein außen und innen?

Thomas131

(Themenstarter)

Anmeldungsdatum:
10. August 2010

Beiträge: 248