zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild fixieren, aber inhalt scrollen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #51 (permalink)  
Alt 22.10.2004, 15:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir
@Ulle: Ich hatte vorhin getestet, ob es am body oder am viewport ausgerichtet ist.
Durch großzügiges Verteilen von paddings und margins wurde das attachment verschoben. Liegt also am body.
wieder NEIN .....


Wenn überhaupt ist nur margin relevant, weil border-Grenze ist gleich background-Grenze, und das hatte ich getestet.

Es liegt am sichtbaren Fenster / ~Viewport an.

Code:
html,body   { 
   margin: 0; 
   padding: 0; 
   background-color: #FF9922; 
   color: #000000; 
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size: 100.01%; 
} 

body { 
   margin: 2em;

   background-color: #88CCFF; 
   background-attachment: fixed; 
   background-image: url(http://www.xhtmlforum.de/images/interface/b1.jpg); 
   background-position: right; 
   background-repeat: no-repeat; 
} 

usw.
oder so

Code:
html,body	{
	margin: 0;
	padding: 0;
	background-color: #FF9922;
	color: #000000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100.01%;
}

html { /* dies ist kein einsetzbarer CODE !!! Lediglich zum TEST im FF */

	margin: 2em;
	border: 1px solid #000000;
}


body {
	background-color: #88CCFF;
	background-attachment: fixed;
	background-image: url(http://www.xhtmlforum.de/images/interface/b1.jpg);
	background-position: right;
	background-repeat: no-repeat;
}



usw.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #52 (permalink)  
Alt 22.10.2004, 15:02
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von terrikay
background-position:fixed wird also anscheinend immer auf den Body angewendet - egal, in welchem div man es definiert.
Die Position wird am Viewport ausgerichtet und mit »background-attachment« angegeben.

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #53 (permalink)  
Alt 22.10.2004, 15:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Soweit ich es verstanden habe

Der VIEWPORT ist nur einmal vorhanden
__________________
</ulle>
Mit Zitat antworten
  #54 (permalink)  
Alt 22.10.2004, 15:09
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

@ulle: Wieder ein Danke

Das mit dem em's zum testen hätte auch mir einfallen sollen.
So sieht man es noch besser und jetzt richtig.
Du hast recht



@toscho: Sehe gerade dein Post. Drei Stunden lang grübeln, wo es ein Blick in die spec auch getan hätte (wenn ich denn auf die Idee gekommen wäre...)

Auch Dir ein herzliches Danke. Damit ist klar, dass der IE ein Verhalten zuläßt, das er nicht sollte (wieder mal).

An alle: Wieder was gelernt. Nochmals danke.

@ rezei: Somit kannst Du, wenn du browserübergreifend programmieren willst, das background-attachment:fixed nicht auf container anwenden, sry.

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #55 (permalink)  
Alt 22.10.2004, 22:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2004
Beiträge: 36
rezei befindet sich auf einem aufstrebenden Ast
Standard

Hmm,
was soll ich sagen, ich danke Euch allen zu erst mal für die vielen Grübeleien, die Ihr Euch angetan habt um mir zu helfen...

Da ich jetzt heute Nacht noch was fertig stellen muß, werde ich es erst mal so ausrichten, daß man wenigstens mit dem IE die Seite gut anschauen kann, das geht dort ja anscheinend alles. Ist aber nur für ein bis zwei Tage dann werde ich das alles halt noch mal ändern müssen.

Wenn es nun erstmal nicht so geht, dann werde ich vielleicht doch mit tabellen arbeiten müssen, wenn ich die Seite umprogrammiere... Wollte ich ja eigentlich nicht.
Wie schauts da aus ? Meint Ihr ich habe da probleme mit dem Hintergrundbild und dem Overflow ?


Danke nochmals,

Greetz und einen schönen Abend noch...

Rezei
Mit Zitat antworten
  #56 (permalink)  
Alt 23.10.2004, 21:37
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Die Grübeleien waren nicht umsonst

Ich habe folgendes gelernt:

1. Wenn ich was net genau weiß, erstmal in die spec schauen ( @ thomas )
2. Kenne ich durch die empirische Analyse das Verhalten der Gecko-Engines beim background-attachment:fixed deutlich besser als vorher ( auch wenns mir voraussichtlich wenig nutzt, aber wer weiß..)
3. Hat ulle (thanks ) mir effektivere Wege zur Problemanalyse gezeigt
4. wissen wir jetzt, warum dass bei Dir nicht funkt....
5. könntest Du Dir überlegen, warum du den rund 15% Nicht I.E. Nutzern einfach ein normales Hintergrundbild für den Container vorsetzt: Das scrollt zwar nach oben weg, aber mal im Ernst: Die wenigsten Seiten werden soviel Content haben, dass das spürbar ist und ein Hintergrundbild ist ein Hintergrundbild und sollte nicht sooooo auffallen...
denk noch mal über die Möglichkeit mit den conditional comments nach: der I.E. kriegt sein fixed und der Rest eben den "normalen" Background.

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #57 (permalink)  
Alt 04.11.2004, 13:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2004
Beiträge: 36
rezei befindet sich auf einem aufstrebenden Ast
Standard

Hallo andir, Ulle und alle anderen die hier mitgeholfen haben.

Ich habe noch ein wenig darüber gegrübelt wie ich das Problem bezogen auf mein WEBprojekt noch anders lösen kann ohne auf andere Browsernutzung zu verzichten.

Was haltet Ihr davon, in dem Content DIV-Container einen IFrame zu erstellen mit genau der gleichen Größe, und in diesen dann quasi den Inhalt zu postieren ? Das würde auch den Quelltext der Hauptseite noch ein wenig entlasten, oder ? Dort würde das mit dem background-attachment:fixed doch auch wieder gehen oder ? dann mache ich das Bild links oben in den Frame, und erstelle diesen genau so groß wie ich ihn brauche für das Bild, darauf kann der Inhalt dann ja ruhig scrollen, und ich habe nicht mehr das Problem mit dem Bezug auf den Bodytag...

Was haltet Ihr davon ?


Greetz
rezei


P.S.: Noch eine kurze Frage am Rande, das steht zwar bei CSS4YOU auf der Seite und ich habe auch den Code schon entsprechend kopiert, aber es klappt nicht, wie kann ich einem Link eine andere Farbe geben ? Gibt es hier evtl. Vorrechte beim erteilen der Farben bei Text ?
Mit Zitat antworten
  #58 (permalink)  
Alt 04.11.2004, 14:50
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Wenn Du iframes einsetzt, bekommst Du möglicherweise wieder Probleme mit unterschiedlicher Darstellung deiner Seite

siehe hier: Doctypeswitching:

http://www.fabrice-pascal.de/artikel/dtd/ (ganz unten)

weil iframe nur bei den HTML-Varianten frameset und transitional erlaubt ist.

http://de.selfhtml.org/html/referenz...nten.htm#typen

Damit würden manche Browser im Quirks- manche im Standard-Modus rendern = Mehrarbeit, wenn überhaupt lösbar.

Jetzt stelle ich nochmal die Frage: Wenn Text über das Hintergrundbild drüberläuft, sollte das HIntergrundbild sehr dezent sein, sonst ist der Text sehr schlecht zu lesen, insbesondere bei invertierter Darstellung wie bei Dir.

Was also bringt es? Einen praktischen Nutzen sehe ich da nicht wirklich, nur einen Haufen Mehrarbeit.

Mit dem iframe hast Du auch noch diesen Scrollbalken.. der überall sonst grau oder blau oder hell dargestellt wird (ausser I.E. wenn scrollbar-color) und das Seitendesign damit empfindlich stört. Damit sehen alle anderen das HIntergrundbild erst recht nicht, weil der Kontrast zu hoch ist.

Mach lieber ein paar Seiten mit sehr wenig Text, damit die Seite auch mal in "voller Pracht" bewundert werden kann und ansonsten wird halt gescrollt
oder eben die conditional comments für den IE usw. usw.

Was klappt denn mit den Links nicht?
Ein bisschen Code wäre hilfreich.

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #59 (permalink)  
Alt 04.11.2004, 16:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.10.2004
Beiträge: 36
rezei befindet sich auf einem aufstrebenden Ast
Standard

Hallo andir,

also es ist so. Das mit der fixierten Grafik ist eben so gewünscht. Das sollte wenn möglich so sein. Nun kommen in gewisse Bereiche halt mal so viel Inhalt daß es eben scrollbar sein MUSS. Scrollbalken habe ich ja auch, wenn mein Content da in der Seite steht. Ob das jetzt gut oder schlecht aussieht, darüber kann man eben streiten.
Ich werde das jetzt mal mit dem iframe testen, so hatte ich auch das Gästebuch eingebunden, das hat ohne Probleme geklappt. Mal sehen wie das ist. Ansonsten mache ich das mit den Cond.Comments.

Wegen den Links. Da funzt alles, ich will eben nur, daß da nicht dieses standardmäßige blau verwendet wird, sondern eben eine andere Farbe.

Ich habe im Pagestyle für den Contentbereich eine Schriftfarbe definiert, und jetzt wollte ich unten dran quasi noch diese Befehle mit Link definieren, also Farbe wenn drüber mit Maus, Farbe bei schon besucht, Farbe wenn noch jungfräulich...
Aber wenn ich die Befehle einfüge dann macht er nichts, die Farbe der Links verändert sich nicht. Was mache ich da falsch ?

Ich setze hier mal den Code ein, wie er den entsprechenden Contentbereich definieren soll:


Code:
.contentgrafik {
  background-image: url(/testseite/images/jpgs/hintergrund_links.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 650px;
  height: 335px;
  overflow: auto;
  float: right;
  color: #000000;
  line-height:25px;
  text-align: left;
  font:Verdana;
  }
Hier habe ich natürlich nur den Code ohne meine Änderungen, da ich, als das nicht gefunzt hat, den Code wieder zurückgeschrieben habe und da ich hier im Büro sitze und die geänderten Daten nur zuhause habe kann ich nur das hier bieten. Ich habe die Änderungsbefehle wie auf CSS4YOU gesehen quasi direkt kopiert und dann unter der FONT definition eingefügt. Was mich ein wenig irritiert hat, war die Tatsache, daß eben diese Link Definitionen nochmal separate Klammern hatten ich dachte, wenn ich noch was definieren will, dann immer so wie alle anderen Angaben in dem oberen Beispiel und die Klammern sind quasi nur am Anfang und abschließend. Ich hoffe, das ist verständlich, wenn nicht, suche ich bei CSS4YOU den Code noch raus und poste ihn dann hier, ok ?


Viel Input, ich hoffe, das klappt auch alles mal

Greetz
rezei
Mit Zitat antworten
Sponsored Links
  #60 (permalink)  
Alt 04.11.2004, 17:17
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Warum machst Du das nur für diesen Container?
Lager das doch aus in deine css-Datei für alle Bereiche deiner Seiten.
Übrigens: Da der iframe eine eigene Datei enthält, macht die da nicht mit, wenn du es nicht irgendwie site-weit definierst.

Ansonsten gemacht wie immer?

Code:
a:link{ }
a:visited { }
a: hover{ }
a:active { }
Wenn Du verschiedene Linkgestaltungen (Menü, Content, rechts usw.) haben willst, verpass ihnen Klassen.

In dieser Reihenfolge sonst klappts manchmal nicht mit dem Nachbarn.
Ausserdem solltest Du, wenn Du das mit dem IE überprüfen willst, eine URL setzen und nicht href"#" da der IE sonst den a:link u.U. nicht korrekt darstellt.

andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort


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
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 08:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 16:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 18:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 11:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 12:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:01 Uhr.