[GELÖST] postion: fixed - stehe auf dem Schlauch

jeff1980 · 15. März 2012 12:05

Hallo,

bei einer neu gestalteten Seite stehe ich vor einem kleinen Problem. Hier erst mal der Link:
www.brenjo.de

Es geht dabei um den Schriftzug "Heidrun-Auro Brenjo" neben dem Header. Den habe ich per CSS gedreht und mit position: relative an die jetzige Position verfrachtet. Es ist im Prinzip auch ok so. Allerdings könnte ich mir vorstellen, dass der Schriftzug nun beim Scrollen stehen bleibt (eigentlich ja position: fixed). Das bekomme ich im Prinzip auch hin - allerdings verschiebt sich der Schriftzug je nach Bildschirmauflösung. Ist mir auch klar, da er sich ja nun meines Wissens nicht mehr am header sondern am body orientiert.
Kann man das irgendwie umgehen? Möglichst auch mit CSS?

Bei Bedarf poste ich gern auch das Template und die CSS-Datei - aber da die Seite recht übersichtlich ist reicht es ja vielleicht auch so.

Danke schon mal ...
Jan

NaN · 15. März 2012 12:10

Gib doch dem Header einfach mal position:relative. Dann müsste sich das position:fixed am Header orientieren.

otter24 · 15. März 2012 13:19

Moin ...

neeee das wird auch nicht funktionieren denn "fixed" orientiert sich im Gegensatz zu absolute am Viewpoint des Browsers und nicht am Elternelement.
Der Schriftzug wird also bei unterschiedlichen Auflösungen immer durch die Gegend "rutschen".

Vielleicht hilft Dir das hier weiter..

Gruß aus HH

jeff1980 · 15. März 2012 13:50

Hi,

das mit dem Viewpoint scheint genau der Haken zu sein. Der Begriff fehlte mir wohl bei meiner Suche, denn das habe ich jetzt gefunden: http://www.mediengestalter.info/forum/4 … 915-1.html

Bei mir sieht es nun so aus:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]
#header {
	position: fixed; 
	top: 0px; 
	left: 50%;
	z-index: -1;
	width: 1000px; 
	margin-left: -500px;
}

h1 {
	font-family: GabrielleRegular, Georgia, serif;
	font-size: 54px;
	color: [[$green]];
	font-weight: normal;
	position: relative;
	left: -540px;
	top: -100px;
	-webkit-transform: rotate(-90deg);  
	-moz-transform: rotate(-90deg);  
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

So funktioniert es zumindest im Safari und FF 11 (Mac).
Werd gleich mal mein Windows für den Rest bemühen (und mir dann wahrscheinlich die Haare raufen).

Danke für die Denkanstöße smile

Edith: Noch ein z-index: -1 hinzugefügt, damit der Header nicht über dem Menü liegt, wenn man runter scrollt.

Beitrag geändert von jeff1980 (15. März 2012 13:54)

otter24 · 15. März 2012 13:59

Also der FF auf Windows ist OK Safari und Opera auch ...
Der IE 8 zickt ab ... Der zeigt den Schriftzug gar nicht erst an ...

Du hast noch ein div für das Bild dazu gepackt, oder?

Gruß aus HH

jeff1980 · 15. März 2012 14:11

Danke, dass Du schon mal unter Windows geschaut hast - im IE 8 fehlt sowieso noch die Hälfte (Schatten, runde Ecken ...). Das muss ich noch mal nachrüsten - auch für ältere FF und Webkit-Browser.
Aber das die Schrift Komplett fehlt, ist komisch. Mal sehen, ob ich da was rausbekomme.

Das div für das große Bild war vorher aber auch schon da.

mike-r · 15. März 2012 14:38

ich würde das anders lösen, die Schrift fixed als Grafik in den Hintergrund des Body (oder ein wrapper-div) und die h1-Überschrift mit negativem Texteinzug in den eigentlichen Header, semantisch würde das gut zu "ich begleite Sie ..." passen.

hat als Effekt, dass es mit erheblich weniger fehleranfälligem Code auch in Steinzeitbrowsern funktioniert wink

jeff1980 · 15. März 2012 15:27

Habs jetzt mit conditional comments gelöst - der IE bekommt einen anderen Header.
Ich habe irgendwie das Gefühl, dass er auch mit der Drehung schon nicht umgehen konnte, denn selbst im IE9 wurde der Schriftzug gar nicht angezeigt.

Den Gedanken mit Bild im Hintergrund hatte ich auch schon - aber ein wrapper würde die Seite wieder breiter machen und unter Umständen einen horizontalen Scrollbalken verursachen.
Und ich habe bei fixen Hintergrundbildern immer das Gefühl, dass die Seite dann extrem träge scrollt - speziell auf älteren Rechnern und in älteren Browsern.

Ich lasse es aber auf jeden Fall noch mal sacken ... Das Optimum ist noch nicht erreicht wink

mike-r · 15. März 2012 21:03

jeff1980 schrieb:

aber ein wrapper würde die Seite wieder breiter machen und unter Umständen einen horizontalen Scrollbalken verursachen.

Mhh. Gegenargument: Ohne Scrollbalken bekomme ich nicht mit, dass da noch ein Element ist. Muss man abwägen.

Übrigens habe ich bei 1024px einen Scrollbalken, da Du in Deinen Berechnungen wahrscheinlich den box-shadow vergessen hast (1000px+2×4px+Scrollbalken rechts > 1024px)

Und ich habe bei fixen Hintergrundbildern immer das Gefühl, dass die Seite dann extrem träge scrollt - speziell auf älteren Rechnern und in älteren Browsern.

Ich kenne das Problem nur von wiederholenden Grafiken.

Beitrag geändert von mike-r (15. März 2012 21:04)

jeff1980 · 22. März 2012 14:42

So, hab mich heute noch mal dran gesetzt und es mit einem zusätzlichem Wrapper und Hintergrundbild gelöst. Gefällt mir doch besser, da es jetzt überall einheitlich ist ... ops

Forum für CMS/made simple

#1 15. März 2012 12:05

[GELÖST] postion: fixed - stehe auf dem Schlauch

#2 15. März 2012 12:10

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#3 15. März 2012 13:19

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#4 15. März 2012 13:50

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#5 15. März 2012 13:59

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#6 15. März 2012 14:11

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#7 15. März 2012 14:38

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#8 15. März 2012 15:27

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#9 15. März 2012 21:03

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

#10 22. März 2012 14:42

Re: [GELÖST] postion: fixed - stehe auf dem Schlauch

Fußzeile des Forums