mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 00:28 Benutzername: Passwort: Auto-Login

Thema: DIV-Container am bottom und trotzdem soll er oben anstoßen.. vom 10.12.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> DIV-Container am bottom und trotzdem soll er oben anstoßen..
Seite: Zurück  1, 2
Autor Nachricht
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 10.12.2009 15:30
Titel

Antworten mit Zitat Zum Seitenanfang

Klingt nach folgendem:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
   margin: 0;
   padding: 0;
   }

html {
   height: 100%;
   width: 100%;
   display: table;
   }

body {
   display: table-cell;
   vertical-align: bottom;
   }

div {
   background: red;
   height: 200px;
   }

</style>
</head>

<body>

<div>Text</div>

</body>

</html>


Wenn ja, kommt natürlich noch eine Extra-Lösung für IE < 8 dazu, der die table-Eigenschaften nicht kennt.


Zuletzt bearbeitet von heiko_rs am Do 10.12.2009 15:34, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Do 10.12.2009 15:34
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn ich ihn richtig verstehe, will er seine Seite wie einen Footer am unteren Bildschirmrand ausrichten. Bei niedrigen Auflösungen hängt ihm dann aber die Seite unerreichbar nach oben aus dem Sichtfeld heraus...
  View user's profile Private Nachricht senden
Anzeige
Anzeige
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 10.12.2009 15:37
Titel

Antworten mit Zitat Zum Seitenanfang

Genau, das passiert bei pos. abs. (wie er es momentan macht), aber nicht bei bottom-Ausrichtung per CSS-Tabelle (wie in meinem Code-Beispiel).
  View user's profile Private Nachricht senden
Impigra

Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht: Männlich
Verfasst Do 10.12.2009 17:20
Titel

Antworten mit Zitat Zum Seitenanfang

Der Manuel Bieh hat mal vor laaanger Zeit eine nette Erklärung zu feststehenden footer Divs mit "beweglichem" Abstand geschrieben...

Wenn ich Dich richtig verstanden habe richtest Du ein Element unten aus und wunderst Dich warum es oben aus dem Viewport rausgeschoben wird wenn der Browser verkleinert wird...

Evtl kann Dir das hier helfen...
http://www.manuel-bieh.de/blog/einmal-erdgeschoss-bitte

Ansonsten würd ich mich über einen Layoutentwurf von Dir freuen...
Da kann man das gewünschte immer noch am Besten beurteilen...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 10.12.2009 18:07
Titel

Antworten mit Zitat Zum Seitenanfang

Das ist die alte (und nicht optimale) Variante der Footer-bottom-Positionierung, die man natürlich auch (in abgewandelter) Form verwenden kann. Im Gegensatz zu meinem ersten Vorschlag ist es hierbei allerdings nicht möglich, auf eine height-Deklaration des divs zu verzichten - die Höhe darf also nicht variabel sein (d.h. vom Inhalt bestimmt), sondern muss bekannt sein, in px oder em (wobei das im konkreten Falle ja okay wäre).

Einen IE-Hack braucht man hierbei auch noch, allerdings nicht mehr für < 8, sondern nur noch für < 7 *zwinker* (da diese Versionen min-height nicht kennen.)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
   margin: 0;
   padding: 0;
   }

html,
body {
   height: 100%;
   }

body {
   min-height: 200px;
   position: relative;
   }

div {
   background: red;
   width: 100%;
   height: 200px;
   position: absolute;
   bottom: 0;
   left: 0;
   }

</style>
</head>

<body>

<div>Text</div>

</body>

</html>
  View user's profile Private Nachricht senden
 
Ähnliche Themen DIV-Container soll anderen DIV-Container verdrängen
DIV Container bei Mouseover über DIV Container anzeigen
Variabler Div-Container bis zum mittigen Div-Container
CSS: Container im Container Vertikal zentrieren
[CSS] Div bottom anordnen
css-prob mit border-bottom im ie 6
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.