zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Greenhorn bittet dringend um Hilfe! Positionierung!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2008, 12:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2008
Beiträge: 14
fromthemoon befindet sich auf einem aufstrebenden Ast
Standard Greenhorn bittet dringend um Hilfe! Positionierung!

Hallo Leute!

seit gestern versuche ich nun erfolglos dieses IMG relativ zum Browserfenster zu fixieren: es soll z.B. right: 100px; top: 200px; ausgerichtet sein, so dass es unabhängig von der Auflösung des Bildschirms an selber Stelle sich einfindet, ohne dass der Abstand zum Browserfester geringer oder grösser wird, angestrebt ist ein konstanter Abstand.

#blur {
background: #a7a7a7 url(img/bspimage.png) no-repeat fixed 890px 450px; opacity:.76;
}

Falls mir jemand helfen könnte , wäre ich sehr dankbar!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2008, 13:06
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Grundsätzlich mache es so:
Zitat:
#blur {
background: #a7a7a7 url(img/bspimage.png) no-repeat;
width: 890px;
height: 450px;
/*Positionierung*/
margin-top: 10px;
margin-left: 100px;
}
Du musst den Container, der das Backgroundbild enthält, die Grössen geben und diesen selber positionieren.
Wo willst Du den haben? bzw. wie gross sollen die Abstände sien?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2008, 20:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2008
Beiträge: 14
fromthemoon befindet sich auf einem aufstrebenden Ast
Standard

Hallo Paracelsus! besten Dank für Deine Antwort - leider bringt sie mich nicht wirklich weiter...

#blur {
background: #a7a7a7 url(img/bild.png) no-repeat fixed 890px 450px; opacity:.76;
}
Es müsste irgendwie möglich sein, dieses bild.png sa zu positionieren, dass der Abstand zwischen ihm und rechtem sowie unterem bzw. oberem Browserrand unabhängig von der verwendeten Bildschirmauflösung konstant bleibt... Sei es durch position: relative/absolute oder irgendwie anders

Das Problem ist, das sobald ich etwas unternehme (z.B. Deinen Vorschlag umsetze) sich dieses auf andere Elemente auswirkt: diese sollen aber unbeeinflusst bleiben... Ich möchte nur bild.png im konstanten Abstand zum Browserrand haben, dennoch, vielen Dank für Deine Mühe!
Mit Zitat antworten
  #4 (permalink)  
Alt 19.05.2008, 20:28
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Also:
Du willst ein Bild das bei 800x600 gleich weit vom Rand entfernt ist, wie bei 1920x1200?
Äh?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.05.2008, 20:36
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Geht doch.
Die Positionierung muss dazu 50% sein und natürlich der Container muss die Sache mitmachen.
Denn "50% 0" heißt 50% von der Seite mit einem Bezugspunkt 50% zur Mitte von der linken Kante. Sollte also gehen, wenn ich jetzt nicht total daneben liege...
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : BACKGROUND-POSITION }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #6 (permalink)  
Alt 19.05.2008, 20:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2008
Beiträge: 14
fromthemoon befindet sich auf einem aufstrebenden Ast
Standard

Schaut Euch das bitte live an - eine Spielwiese zum Testen, mehr nicht -


Bei 1280 x 1024 ist das kleine .png image an einer bestimmten Stelle des Panoramafotos. Dort soll es auch bei 1024 x ... oder was auch immer bleiben, na ja, das ist meine Vorstellung... Ich hoffe, Paracelsus und BlackHawk und Community können helfen...

Danke!

Übrigens: ich verlange viel aber je genauer Ihr mir sagen könnt, wie ich dieses anzustellen habe, desto besser kann ich dieses umsetzen, die Materie ist für mich sehr abstrakt: ich befasse mich mit ihr seit gestern abend!

Leute, danke, danke, danke

Geändert von fromthemoon (19.05.2008 um 23:19 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 19.05.2008, 20:48
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

"klein .png image" - geht das ein bisschen genauer? Nenn das Kind beim Namen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #8 (permalink)  
Alt 19.05.2008, 20:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2008
Beiträge: 14
fromthemoon befindet sich auf einem aufstrebenden Ast
Standard

Nun, sehr wohl, der Herr:



Das ist das "kleine" .png

Geändert von fromthemoon (19.05.2008 um 23:19 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 19.05.2008, 21:03
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Code:
#blur {
background:#A7A7A7 url(img/blur-gray.png) no-repeat fixed 80% 450px;
opacity:0.76;
}
Den roten Wert musst du dir passend in Prozentwerten einstellen, dann orientiert sich die kleine Grafik relativ zur Breite des Elternelements, was bei dir <body> und damit die Ansichtsbreite ist.

Das gleiche gilt natürlich auch für die anderen "Kleinen-png".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.05.2008, 21:07
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Ach das.
Na, der Fehler ist simpel, Du musst dem Container, der das Bild enthält ein Grösse geben (so groß wie möglich, allerdings kriegste dann scrollbars, wenn der Viewport kleiner wird)! Das Bildchen das innerhalb dargestellt wird ist ja sonst ausserhalb der Grenzen des Containers und damit nicht sichtbar.
Am besten wäre, du setzt das Bild auf den body:
Zitat:
body {
background: #a7a7a7 url(DeinBild.png) no-repeat fixed 890px 450px; /* oder eben Prozentuale Werte */
opacity:0.76;

}
Dan klappt es auch mit dem fixierten Hintergrund. Was ich nun nicht weiss, wie sich IE kleiner als 7 dabei verhält, da ich an meiner neuen - noch nicht fertigen Maschine - sitze.

Geändert von paracelsus (19.05.2008 um 21:20 Uhr)
Mit Zitat antworten
Sponsored Links
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
Bitte um Hilfe bei der CSS Positionierung matschi CSS 7 10.11.2008 18:12
Hilfe mit der Positionierung einer verschachtelten Liste VitaminT CSS 2 03.06.2008 14:46
Steam funktioniert nicht !!! Dringend HILFE !!! Splinter Offtopic 19 03.07.2007 09:30
Tabelle in DIV umwandeln - Dringend Hilfe gesucht! gnrmarcel CSS 2 12.11.2006 15:00
CSS-Neuling bittet um Hilfe: Code-Überprüfung Sascha Müller CSS 9 03.02.2005 15:34


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