zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Feststehenden Header durchsichtig machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.07.2015, 12:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2015
Beiträge: 10
imebro befindet sich auf einem aufstrebenden Ast
Standard Feststehenden Header durchsichtig machen

Hallo,

seit heute bin ich neu hier im Forum und möchte zunächst alle User begrüßen.

Natürlich habe ich auch gleich ein Problem, welches ich hier schildern möchte:

Ich habe einen Header (inkl. Logo + Menü) am oberen Rand fixiert und er bleibt beim scrollen des Textes oben stehen.

Nun habe ich auf einer anderen Internetseite gesehen, dass im gleichen Fall dieser oben fixierte Header halbtransparent ist.
Das heißt, dass beim scrollen des Textes aus dem Inhalt (contend), dieser Text durch den Header durch scheint.

Zum eigentlichen Aufbau der Seite:
Der Header besteht aus einem DIV-Container (container_oben), der wiederum einen zentrierten DIV-Container beinhaltet (container_oben_innen).

Darunter kommt dann ein weiterer DIV-Container (container_mitte) - ebenfalls mit einem weiteren zentrierten DIV-Container (header), der eine Grafik (headergrafik) beinhaltet.

Darunter dann nochmals ein DIV-Container (container_inhalt) mit einem zentrierten Container (inhalt), der dann den Text enthält.

Nun habe ich versucht, das wie folgt umzusetzen:

hier die "index.php":

Code:
<div id="container_oben">
	<div id="container_oben_innen">

                                     Logo und Menü
</div></div></div>


<div id="wrapper"> 

	<div id="container_mitte">
		<div id="container_header">
		  <div id="headergrafik"></div>
		</div>
	</div>
	
	<div id="container_inhalt">
  	       <div id="inhalt">
		        <?php page_content(1); ?>
		   </div>
	  </div>	
</div>
Hier die CSS-Datei:

Code:
#container_oben {
	width: 100%;
	height: 120px; 
	background-color: #fde803;
	/* background-color: rgba(253, 232, 3, 0.5);  */
	position: fixed;  
	top:0; 
	left:0;  
	z-index:1; 
}

#container_oben_innen{
	max-width: 1300px;
	height: 100%; 
	margin: 0 auto;
	background-color: rgba(253, 232, 3, 0.0);  
	color: #808080;
	z-index: 30;
}

#container_mitte {
	 width: 100%;
 	 height: 400px;
	 background-color: #808080;
}


#container_header {  
	 max-width: 1300px;
	 height: 100%;
 	 margin: 0 auto;
 	 background-color: #fde803;
}

#headergrafik {
	 max-width: 100%;
	 height: 100%;
	 margin: 0 auto;
	 background-color: #fde803;
	 background-repeat: no-repeat;
	 color: #808080;
}

#container_inhalt{
	 width: 100%;
	 height: 100%;
	 background-color: #fde803;
}

#inhalt{
	 max-width: 1270px;  
	 height: 100%; 
	 min-height: 384px; 
	 margin: 0 auto;
	 padding: 8px 15px 8px 15px;  
	 background-color: #f0f0f0;
	 color: #808080;
}
Ich habe schon mit "z-index" herum probiert, aber - wie ich gelesen habe - ist es so, dass der z-index nur Auswirkungen auf Elemente hat, die "position: absolute;" definiert haben.

Es soll ja so sein, dass der komplett gelbe Bereich (container_oben) ganz unten liegt. Oben soll der Bereich liegen mit Menü und Logo (container_oben_innen). Dieser soll halbtransparent sein.
Und dazwischen soll sich dann beim scrollen der Container mit der Grafik (header / headergrafik) sowie der eigentliche Inhalt mit dem Text (container_inhalt / inhalt) schieben.

Wie Ihr im Code sehen könnt, habe ich auch schon mit den Transparenzen versucht zu arbeiten... leider ohne Erfolg.

Wenn ich jetzt scrolle, verschwinden Headergrafik und Text einfach komplett hinter dem fixierten Header.

-->> Habe mal einen Screenshot der Seite mit Erklärungen angehängt!

Wie kann ich dieses Problem lösen?

Danke und Gruss,
imebro
Angehängte Grafiken
Dateityp: jpg screenshot web.jpg (89,8 KB, 9x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.07.2015, 13:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

deine Angaben sind leider dürftig. Wir haben weder Zugriff auf die Bilder noch auf den Inhalt der PHP-Texte. Am sinnvollsten wäre ein Link zu der Seite.

Zitat:
Nun habe ich auf einer anderen Internetseite gesehen, dass im gleichen Fall dieser oben fixierte Header halbtransparent ist.
Vielleicht solltest du dir auch mal überlegen warum so eine Lösung so selten zu sehen ist. Die meisten User finden solche halbtransparenten Durchsichten schlicht nervig. Beim Scrollen wird die Aufmerksamkeit durch die Bewegung immer wieder zum Header gelockt. obwohl es dort keine Informationen gibt - Benutzerfreundlichkeit geht anders.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2015, 14:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2015
Beiträge: 10
imebro befindet sich auf einem aufstrebenden Ast
Standard

Hallo und danke für Deine Antwort.

Leider kann ich keinen Link posten, da diese Webseite bisher nur LOKAL auf meinem Rechner existiert.

Meine Angaben würde ich jetzt nun wirklich nicht als "dürftig" bezeichnen. Ich habe doch den kompletten HTML- u. CSS-Code eingefügt, sowie eine sehr detaillierte Erklärung

Vielleicht erkläre ich es mal ganz grob:


Der Header soll so aufgebaut sein, dass ganz unten ein gelber Hintergrund ist.
Darüber soll dann ein halbtransparenter Hintergrund in gleicher Größe liegen, der Menü und Logo enthält.
Und zwischen diese beiden Hintergründe soll sich der Contend schieben, wenn nach unten gescrollt wird.

Und dieses ganze Gebilde soll fix oben am Rand stehen.

-------------

Es muss ja nicht so umgesetzt werden, wie ich es gemacht habe (mit Container in Container). Vielleicht habt Ihr ja eine andere Idee, wie man das erfolgreich umsetzen könnte.

In meinem Screenshot sieht man aber, dass sich Menü und Logo nicht direkt am linken bzw. rechten Rand befinden, sondern mit jeweils etwas Abstand. Ich hatte das dadurch erreicht, dass ich eben in den oberen Container einen weiteren zentrierten Container eingefügt hatte, der dann Menü und Logo enthält... das nur zur Info.

Freue mich auf Eure Tipps & ggf. Vorschläge.

Danke und Gruss,
imebro
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Header systemius CSS 10 04.05.2012 08:21
Abstandproblem im #header Bake CSS 8 26.11.2011 18:55
Untermenü im IE nici CSS 10 22.06.2009 22:19
header verrutscht... weblearner CSS 6 03.12.2008 20:34
Header mit img, h1 und form Uwe_B CSS 22 02.10.2008 12:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:37 Uhr.