mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:45 Benutzername: Passwort: Auto-Login

Thema: [CSS] Div 100% Höhe und BG-Bild - Problem vom 13.09.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Div 100% Höhe und BG-Bild - Problem
Seite: Zurück  1, 2
Autor Nachricht
13pixelchen
Account gelöscht


Ort: -

Verfasst Di 13.09.2005 21:05
Titel

Antworten mit Zitat Zum Seitenanfang

Er meint, dass wenn Du einem DIV und dem html,body 100% Höhe gibst, dann ist ja eigentlich der ganze Schirm gefüllt. Scrollt man aber nun runter, weil da noch was kommt, wird das DIV/der body/der html nicht an die Höhe angepasst. Das liegt daran, dass sich die 100% auf den Viewport beziehen.
 
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 13.09.2005 21:23
Titel

Antworten mit Zitat Zum Seitenanfang

Aha hört sich logisch an Au weia! Lächel

Aber das Problem mit dem Scrollen und dem Hintergrund
könnte man so faken:

Code:
html {
   height: 100%;
}
body {
   margin:0px;
   padding:0px;
}

#helpbackground {
   position:absolute;
   background-image: url(blub.jpg);
   height:100%;
   width: 250px;
   z-index:0;
}
#langertext {
   position:relative;
   height: auto;
   width: 250px;
   background-image: url(blub.jpg);
}


und als html

Code:
<body><div id="helpbackground">&nbsp;</div>
<div id="langertext"> text text .... </div>
</body>


Also quasi ein Hintergrundlayer mit bild für wenig Text (weil auto
ja sich am Text orientiert) und drüber den eigentlichen Layer mit
dem Text (wenn er lang genug ist scrollt der Hintergrund mit).

//edit: korrigiert


Zuletzt bearbeitet von Raumwurm am Mi 14.09.2005 08:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
13pixelchen
Account gelöscht


Ort: -

Verfasst Di 13.09.2005 21:41
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, doch, ich muss zugeben, unter bestimmten Bedingungen scheint dies eine Lösung zu sein. Aber dann war es wohl bei Bethys Projekt keine, sonst wär ich bestimmt draufgekommen *ha ha* Menno! * Ööhm... ja? *

Code korrigiert:

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
html {
   height: 100%;
}
body {
   margin:0px;
   padding:0px;
   background-color: #110000;
}

#helpbackground {
   position:absolute;
   background-color: #ff0000;
   height:100%;
   width: 250px;
   z-index:0;
}
#langertext {
   position:relative;
   height: auto;
   width: 250px;
   background-color: #dd0000;
   z-index:1;
}


-->
</style>
</head>

<body>
<div id="helpbackground">&nbsp;</div>
<div id="langertext"> text text .... text text ....text text ....text text ....text text ....
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
</div>
</body>
</html>



Zuletzt bearbeitet von am Di 13.09.2005 22:10, insgesamt 1-mal bearbeitet
 
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 13.09.2005 22:03
Titel

Antworten mit Zitat Zum Seitenanfang

ups - der <div id="helper">&nbsp;</div> ist
natürlich überflüssig - hatte ich vergessen rauszu-
kicken * Wo bin ich? *
  View user's profile Private Nachricht senden
 
Ähnliche Themen Anordnung von Bild auf rechter Seite auf ca. 3/4 der Höhe!
Bild skalieren, Höhe vorgegeben, Breite proportional
bild zuerst auf 100% höhe skalieren, danach repeat-x
[css] Problem mit div Höhe
Problem mit der Höhe
Problem mit DIV-Höhe
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.