26.09.2011, 03:43
|
|||
|
|||
3 Zeilen DIV mit Höhen- /Hintergrund- Problem
Hallo,
habe eine Seite mit einem DIV als Hintergrundbild, welches fixed ist und korrekt skaliert wird (100% height und width). Über diesem Hintergrund-DIV ist der eigentliche Inhalt in drei Zeilen als DIVs unterteilt. Diese DIVs gehen über die ganze Breite, haben einen halbtransparenten Hintergrund (schwarzes PNG-Bild mit 70% Transparenz) und 1px Margin. Siehe unten angehängte Bilder. Nun soll der InhaltsDIV immer mindestens bis zum Seitenende reichen (auch wenn der Inhalt nicht soweit reicht) - bei längerem Inhalt wird natürlich gescrollt dabei soll das transparent Hintergrundbild von InhaltsDIV auch bis zum Seitenende reichen und nicht "mittendrin" aufhören, wie hier der Fall  Habe viel rumprobiert mit positions, height:auto und !important und Umstellen des Templates etc. werde einfach schlau, wie das geht. Hat hier jemand einen Tip? Hier mein Template: HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div id="background"><img src="alm_bild.jpg" /></div> <div id="page"> <div id="kopf"> ###LOGO### </div> <div id="navi"> ###NAVI### </div> <div id="inhalt"> ###INHALT### </div> </div> </body> </html> HTML-Code:
* {padding:0; margin:0;}
html, body {background: #b0b0b0 url(../images/body_bg.png) top left repeat-x; height:100%; font-family: Arial,Helvetica,sans-serif; text-align: center;}
* html #page { height: 100%;}
div#background { position:fixed; z-index:1000; width:100%; height:100%;}
#page { position:absolute; z-index: 2000; width: 100%; margin:auto;}
#kopf { height: 100px;}
#navi { height: 60px; margin-top: 1px;}
#inhalt { height:100%; margin-top: 1px; padding:0;}
 Hintergrund von DIV "Inhalt" scrollt falsch:  So soll es sein: 
|
| Sponsored Links |
|
26.09.2011, 08:06
|
|||
|
|||
Moin,
du brauchst kein position:absolute. Das ist glaube ich dein ganzes Problem. Das Hintergrundbild sollte auch wirklich als Hintergrund im CSS stehen. Ich würde das folgendermaßen lösen: body bekommt die Alm als Hintergrund und #page bekommt per rgba() und dem hier die Halbtransparenz (oder notfalls auch per png, wenns sein muss) - fertig. gruß, take
|
| Sponsored Links |
|
26.09.2011, 09:43
|
|||
|
|||
|
Moin take_a_7,
danke für deine Meldung. Das "Hintergrundbild" (die Alm) muss in'nem DIV stehen, da hier per TYPO3 und JS jedesmal andere Bilder kommen und ne "Slideshow" laufen wird... Zum Thema Transparenz: Wenn die 3 DIVs eine Halbtransparenz zugewiesen bekommen, dann sind die Child-Elemente, also was sich in den DIVs befindet ja auch halbtransparent (war zumindest so, als ich es mal mit opacity versucht habe... Aber mein wirklich großes Problem ist, wie gesagt, der "abgebrochene" Hintergrund des unteren DIVs. ClauSS
|
|
26.09.2011, 10:29
|
||||
|
||||
|
Poste einen Link. Mit dem bisschen, was du als Grundtemplate im TYPO3 verwendest kann hier keiner etwas anfangen.
Siehe Hinweise für Fragende und Antwortende. Meine Glaskugel sagt mir, dass das Element in der Höhe da halt aufhört weil die 100% des Viewportes vorbei sind, du vergessen hast zu clearen oder der Hintergrund nicht wiederholt wird.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! Geändert von Praktikant (26.09.2011 um 10:33 Uhr)
|
|
26.09.2011, 23:12
|
|||
|
|||
|
Hi Praktikant, vielen Dank für den praktischen Hinweis, der sehr einfühlsam und nett formuliert war.
 Zu sehr mit meinem "Problem" beschäftigt, vergaß ich ganz und gar mir erstmal die Forenregeln durchzulesen - bitte verzeih, ich bin nun geläutert und gelobe Besserung  Zum Thema: siehe z.B. => MK-Film - Kontakt Gecleart habe ich so ziemlich alles was ich für verdächtig hielt - leider ohne Erfolg. Das mit dem Viewport verstehe ich net ganz... Servus Claus
|
|
30.09.2011, 11:04
|
|||
|
|||
|
Bitte um Entschuldigung, dass ich dieses Thema pushen muss... aber ich komm hier echt nicht weiter:
Auf dieser Seite: MK-Film - New Site kann man das "Problem" noch deutlicher sehen. take_a_7 hatte die Idee, positions (absolute oder auch relative) zu entfernen - habe ich auch probiert. Dies hat auch net geklappt ist aber auch nicht weiter wichtig, da ich nicht mit einem body background arbeite sondern das Bild im Hintergrund in einem DIV sein muss wegen (siehe oben...) Nochmal zum Problem: - die dritte Zeile (Inhalts-DIV) soll mit ihrem transparenten Hintergrund bis zum Fensterende reichen - auch bei kurzem Inhalt. HTML-Code:
* { padding:0; margin:0; }
html, body { background-color: #fff; height:100%; color:#000;}
* html { height: 100%;}
body { height: 100%;}
.clear { clear:both;}
#page {position:absolute; z-index:2000; top:0; bottom:0; width: 100%; background: none; text-align: left;}
.breiter {clear:both; width: 980px; min-width: 980px; max-width:980px!important; margin: 0 auto;}
#head_balken, #titel_balken, #cont_balken {background: transparent url(../images/trans_66.png) top left repeat; width: 100%;}
#head_balken {height:150px;}
#titel_balken {margin-top:1px; height: 49px;}
#cont_balken {margin-top:1px; position:relative; bottom:0; } /* height: 100% hat auch nix gebracht - zeigt unnötig leeren Platz */
div#backstage { position:absolute; width:100%; height:100%; top:0; left:0; z-index:1000;}
HTML-Code:
<body> <div id="backstage">###BACKSTAGE###</div> <div id="page"> <div id="head_balken"> <div class="breiter">###LOGO######TOPNAVI###</div> </div> <div id="titel_balken"> <div class="breiter"><div id="teaser">###TEASER###</div></div> </div> <div id="cont_balken"> <div class="breiter">###INHALT###<div class="clear"></div></div> </div> </div> </body> ClauSS Geändert von ClauSS (30.09.2011 um 11:08 Uhr)
|
|
30.09.2011, 11:10
|
|||
|
|||
|
Zitat:
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
|
|
30.09.2011, 11:14
|
|||
|
|||
|
OK, Danke gato - aber es bringt mich nicht weiter...
Bitte schau dir mal den Link an... der Hintergrund reicht nur bis zum Ende des Inhalts und bei height: 100% geht der darüber unnötig hinaus (scrollbalken usw.)
|
|
30.09.2011, 11:56
|
|||
|
|||
|
Diesen Gedanken habe nicht weiterverfolgt, da gerade diese 1px-Streifen dieser seite den G'schmack geben (werden)...
aba es kann doch nicht sein, dass sowas nicht machbar ist... oder?!? Ich bin mehr als gespannt - eigentlich eher verzweifelt mittlerweile
|
| Sponsored Links |
 |
| Stichwörter |
| 100% höhe, div höhe, hintergrundbild, scrollbares div |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| DIV Höhe 100% | Daniel86 | CSS | 12 | 29.07.2011 12:40 |
| Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 19:29 |
| float Problem? Div "wächst" nicht mit inhalt mit. | Garlandt | CSS | 2 | 11.04.2011 15:02 |
| DIV Problem | darnia | CSS | 1 | 01.04.2011 11:54 |
| Div Layout Problem | Haniball01 | CSS | 1 | 23.05.2006 12:36 |
Linear-Darstellung
