php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 24-07-2008, 20:26
Mathis
 Registrierter Benutzer
Links : Onlinestatus : Mathis ist offline
Registriert seit: Nov 2006
Beiträge: 119
Mathis ist zur Zeit noch ein unbeschriebenes Blatt
Standard 2 Ebenen in einem DIV

Hallo,

ich formuliere zunächst ersteinmal mein Ziel, bevor ich das Problem erläutere. Ich habe eine Seite mit folgendem Aufbau:
PHP-Code:
<div id="header" class="header"></div>
<
div id="content" class="content"></div>
<
div id="footer" class="footer"></div
Soweit so gut, bis hierhin alles kein Problem. Nun möchte ich in jedes dieser DIV's 2 weitere DIV's unterbringen, die genau übereinander liegen. In einem (dem "unteren" der beiden) soll der Hintergrund liegen, in dem anderen der Vordergrund (der Text). Der Sinn dessen ist, dass ich das Hintergrund-DIV mithilfe von style="opacity:0.80; -moz-opacity:0.80; filter:alpha(opacity:80);" (diese Variante soll angeblich cross-browser-save sein) leicht durchscheinend machen möchte, damit der Seitenhintergrund etwas durchscheint, der Text hingegen, der besseren Lesbarkeit halber, nicht durchsichtig ist. Mit PNG's möchte ich nicht arbeiten, um das ganze ohne Browser-Hack (ich bin kein Fan von denen) auch im IE lauffähig zu machen.

Im Prinzip soll das ganze also so aussehen:
PHP-Code:
<div id="header" class="header">
 <
div class="bg"></div>
 <
div class="text">Headertext</div>
</
div>
<
div id="content" class="content">
 <
div class="bg"></div>
 <
div class="text">Content</div>
</
div>
<
div id="footer" class="footer">
 <
div class="bg"></div>
 <
div class="text">Footertext</div>
</
div>
<
style type="text/css">
.
bg {
  
opacity:0.80;
  -
moz-opacity:0.80;
  
filter:alpha(opacity:80); 
  ?:?;
}
.
text {
  ?:?;
}
</
style
Wie bekomm ich jetzt die DIV's .bg und .text so formatiert, dass sie übereinander liegen UND zusätzlich die Höhe des "Eltern-DIV" (.header | .content | . footer) annehmen? Letztendlich soll die Höhe des "Eltern-DIV" sich automatisch an die Höhe des Inhalts des jeweiligen .text-DIV's anpassen (sprich: wenn man mehr in das .text-DIV reinschreibt verändert sich die Höhe des Eltern-DIV's und damit auch automatisch die des Hintergrund-DIV's.

Ich würd ich über Hilfestellung freuen, da ich hier gerade echt nicht weiterkomme...
Mit Zitat antworten
  #2 (permalink)  
Alt 24-07-2008, 20:36
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

wenn ich dich richtig verstanden habe, wird das etwas komplizierter. du musst dann mit position: relativ/absolute und z-index arbeiten. und zwar für alle betroffenen divs. spiel mal damit herum.

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #3 (permalink)  
Alt 24-07-2008, 21:23
Mathis
 Registrierter Benutzer
Links : Onlinestatus : Mathis ist offline
Registriert seit: Nov 2006
Beiträge: 119
Mathis ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ok, vielen Dank für den Hinweis. Folgendermaßen scheint es zu gehen:
PHP-Code:
<div id="header" class="header">
 <
div class="bg"></div>
 <
div class="text">Headertext</div>
</
div>
<
div id="content" class="content">
 <
div class="bg"></div>
 <
div class="text">Content</div>
</
div>
<
div id="footer" class="footer">
 <
div class="bg"></div>
 <
div class="text">Footertext</div>
</
div>
<
style type="text/css">
.
bg {
  
opacity:0.80;
  -
moz-opacity:0.80;
  
filter:alpha(opacity:80); 
  
position:absolute;
  
width:inherit;
  
height:inherit;
}
.
text {
  
position:absolute;
  
width:inherit;
  
height:inherit;
}
.
header, .content, .footer {
  
position:relative;
}
</
style
Mit Zitat antworten
  #4 (permalink)  
Alt 24-07-2008, 21:26
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Folgendermaßen scheint es zu gehen:
scheint es zu gehen, oder funktioniert es tatsächlich?

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #5 (permalink)  
Alt 24-07-2008, 23:53
Mathis
 Registrierter Benutzer
Links : Onlinestatus : Mathis ist offline
Registriert seit: Nov 2006
Beiträge: 119
Mathis ist zur Zeit noch ein unbeschriebenes Blatt
Standard

OK, inzwischen habe ich das ganze auf der "Zielseite" implementiert und leider scheint es eben nur zu gehen. Und zwar geht es genau unter der Voraussetzung, dass ich den Eltern-DIV's (.header, .content, .footer) eine feste Höhe und Breite zuordne. Ansonsten liegen sie alle aufeinander. Wobei die Breite nur für den Hintergrund von Bedeutung ist, da dieser sonst nicht angezeigt wird, da er eben 0px breit ist...

Mein Problem liegt also momentan noch darin, dass die Elternelement nicht die Ausmaße des größten Kindelements annehmen. Ihre Größe müsste aber durch die des Textelements bestimmt werden, damit erstens das Hintergrundelement die entsprechende Größe annimmt (height:inherit; width:inherit;) und zweitens sich das nachfolgende Elternelement entsprechend ausrichtet und nicht mehr über dem Element davor liegt...
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 04:02 Uhr.