Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   [CSS + HTML] Header, Footer und Mittelteil (https://www.delphipraxis.net/156753-%5Bcss-html%5D-header-footer-und-mittelteil.html)

Yheeky 13. Dez 2010 22:56
[CSS + HTML] Header, Footer und Mittelteil
 
Hi,

ich habe eine Frage bezüglich HTML und CSS. Ich möchte eine Seite erstellen, die einen Header, einen Footer und einen Mittelteil hat, welcher sich je nach Größe des Fensters anpasst. Irgendwie bekomme ich das nicht so ganz hin, dass der Header immer oben, der Footer immer unten am Rand und der Mittelteil den Rest ausfüllt. Hat jemand vielleicht ne Lösung für mich?

Wäre super, danke!

fkerber 13. Dez 2010 23:06
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Hi,

wie stellst du dir das Handling unterschiedlicher Auflösungen vor?
Bei jedem definiert sich "unten" ja anders.

Das ließe sich sicherlich irgendwie mit Javscript lösen, das fände ich persönlich aber nicht so toll.


Von daher würde ich den Footer einfach dort anfangen lassen, wo der Content endet.



LG, Frederic

s.h.a.r.k 13. Dez 2010 23:07
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Naja, sauber und schön wird das nicht ganz möglich sein, da sich der Mittelteil ja ändern kann. Ein "Workaround" wäre es, dass die vertikale Scrollbar in diesem sitzt, was aber eher pfui als hui ist. Manche Browser blenden die vertikale Scrollbar des Browser-Fensters nicht aus, d.h. du hättest dann unter Umständen zwei nebeneinander. Und dass man das will bezweifle ich mal dezent ;)

Du könntest aber auch position: fixed für den Footer nutzen. Wobei ich dazu sagen muss, dass das bei manchen Browsern/mobilen Systemen (wie das iPad oder das iPhone z.b.) nicht funktioniert.

Wie Frederic schon gesagt hat: lass den Footer einfach da anfangen, wo der Content aufhört. Oder musst du den Footer unbedingt dauerhaft im Sichtfeld haben?!

Yheeky 13. Dez 2010 23:27
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Mhhm okay, ich dachte da gäbe es eine Möglichkeit. Ich denke ich werde den Footer einfach unten belassen und den Content so groß wie er eben ist.
Shark: woher weisst du das mit dem iPad/iPhone? Steht das irgendwo oder hast du das selbst getestet?

s.h.a.r.k 14. Dez 2010 02:12
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Naja, man erfährt so einiges, wenn man was fürs Web programmiert :) Müsste glaub sogar was auf meinem Blog stehen, wenn ich mich recht entsinnen kann. Hab mal ein Overlay-Plugin für jQuery geschrieben und da kam mir position: fixed gerade recht. Für den IE6 brauchst halt einen Workaround, wobei das nicht das Hexenwerk ist. Eher die vielen mobilen Geräte mir ihren Browsern... Und das ist das iPhone und iPad eben sehr prominent.

Bernerbaer 14. Dez 2010 11:01
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Code:
<html>
<head>
.....
<style type="text/css" media="screen">
html, body { 
   background-color: #333333;
   margin: 0;
   padding: 0;
   height: 100%;
   } 


#wrapper {
   background-color: #FFFFFF;
   width: 80%;
   margin: auto;
   min-height: 100%;
   height:auto !important;
   height:100%;
   overflow: hidden !important;
}

#headerzeile {
   min-height:120px;
   height:auto !important;
   height:120px;
   background:lime;
   overflow: hidden !important;
}

#content {

        overflow: hidden !important;
   
}

#fusszeile {
   background:lime;
   width: 80%;
   position:absolute;
   bottom:0 
}

</style>

</head>

<body>
<div id="wrapper">
   <div id="headerzeile">Kopfzeile</div>
   <div id="content">Inhalt</div>
   <div id="fusszeile">Fusszeile</div>
</div>

</body>

</html>
ungetestet

Yheeky 14. Dez 2010 12:43
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hey,

danke, diese Art hatte ich auch schon bei mir umgesetzt, aber ich hätte es gerne gehabt, dass der Mittelteil "frei" ist. Habe mal ein Bild angehängt, damit du weisst, was ich meine...denke aber auch, dass es schwierig wird das zu realisieren...ist so eine Art "Anchor" in der OOP, die man in den GUIs setzen kann.

Namenloser 14. Dez 2010 12:54
AW: [CSS + HTML] Header, Footer und Mittelteil
 
Das geht mit CSS wenn überhaupt mehr schlecht als recht. Ich denke, dafür bräucht man JavaScript. Aber das lohnt sich imo nicht dafür...

Bernerbaer 14. Dez 2010 13:29
AW: [CSS + HTML] Header, Footer und Mittelteil
 
sieht ähnlich aus, aber empfehlenswert ist das nicht!
Code:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<style type="text/css" media="screen">
html, body { 
   background-color: #333333;
   margin: 0;
   padding: 0;
   height: 100%;
   } 


#wrapper {
   background-color: #FFFFFF;
   width: 80%;
   margin: auto;
   min-height: 100%;
   height:auto !important;
   height:100%;
   overflow: hidden !important;
}

#headerzeile {
   min-height:120px;
   height:auto !important;
   height:120px;
   background:lime;
   overflow: hidden !important;
}

#content {

       
        overflow:hidden !important;
       
}

#fusszeile {
   background:lime;
   width: 80%;
   position:absolute;
   bottom:0;
   border-top: 20px solid #333333; }
   
   
.trenner {
   height:20px;
   background: #333333;
   width:100%;
   
   }
}

</style>

</head>

<body>
<div id="wrapper">
   <div id="headerzeile">Kopfzeile</div>
   <div class="trenner"></div>
   <div id="content">Inhalt</div>
   <div id="fusszeile">Fusszeile</div>
</div>

</body>

</html>


Alle Zeitangaben in WEZ +1. Es ist jetzt 05:41 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz