Code Frage [CSS/HTML]

overdose · 21.06.2006, 13:33

Ich würde gerne wissen wie ich für meine Blogseite einen fixen Background definieren kann. Faktisch möchte ich eine Grafik haben die an einem bestimmten Punkt auftaucht (Unten Links/recht o.ä.) und nicht repeatet wird. Zu sehen hier: http://www.blog.mediaprojekte.de/ (Die Grafik "zu cool für IE" z.B.)

Ich habs schon mit http://de.selfhtml.org/css/eigenscha...und_attachment versucht...aber irgendwie bekomme ich die Grafik nicht dahin wo ich sie hinhaben will. Und bei einer anderen Bildschirmauflösung geht schon mal gar nichts mehr.

Vielleicht habt ihr ja ne Ahnung.

Xaicon · 21.06.2006, 13:44

Warum Background? Ich würde einfach ein Div unten ins Eck setzten. So haben die das da auch gemacht. Mein Vorschlag:

HTML-Code:

<html>
<head>
<title>untenrechts</title>
<style type="text/css">
body {background: #ffffff;}
#untenrechts {position:absolute; bottom:0; right:0; width:100px; height:100px; border:1px solid #000000; background: url(./img/bild.jpg) no-repeat; z-index:100;}
</style>
</head>
<body>
<div id="untenrechts"></div>
</body>
</html>

Mal eben ganz spontan geschrieben ohne Fehlerkorektur. Sollte aber stimmen.
Sag 'peip' wenn Du eine Erklärung brauchst.

Du könntest auch wenn Du wirklich ein nur Hintergrundbild in die Ecke rechts unten packen willst das so machen:

HTML-Code:

<html>
<head>
<title>untenrechts</title>
<style type="text/css">
body {
  background-color: #ffffff; 
  background-image:url(./img/bild.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;}
</style>
</head>
<body>
</body>
</html>

Da bin ich mir jetzt aber nicht sicher ob das alle gängigen Browser richtig interpretieren und ob es valide ist. Das kann ich dir aber nachher gleich testen...
Bei dieser Lösung kannst Du natürlich das Bild nicht mit einem Link oder einer Aktion versehen.

overdose · 21.06.2006, 13:51

Ja, ich wusste doch das der Xai sowas kann.

Ich versuche das jetzt gleich mal und melde mich dann wieder. THX schonmal

EDIT: Das problem ist jetzt nur das die Grafik nicht an der unteren Bildhälfte verbleibt sondern ab dem Moment wo man herunter scrollt nicht mit geht sonder stehen bleibt.

Alp.traum · 21.06.2006, 14:10

~~Ich weiss nicht genau ob es was bringt, aber probier zusätzlich noch z-index: 1; als CSS-Eigenschaft.~~ Mist steht ja schon da, hab nicht aufgepasst. Welche von beiden Varianten hast du denn genommen? Wär super wenn du gleich noch nen Link geben kannst wo man sich das anschauen kann, ist besser zum helfen.

Xaicon · 21.06.2006, 14:11

bei zweiter Lösung ginge das so:

HTML-Code:

<html>
<head>
<title>untenrechts</title>
<style type="text/css">
body {
  background-color: #ffffff; 
  background-image:url(./yxcvv.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed;}
</style>
</head>
<body>
</body>
</html>

also + background-attachment: fixed;

Bei der Lösung mit dem div ist das etwas umständlicher, da die Browser recht unterschiedlich reagieren. im Prinzip ist es aber dann so, dass der Body nicht mehr gescrollt wird, sondern der Seiteninhalt in einem extra div mit 'overflow=auto' geladen. Beispiel folgt, wenn die Arbeit mal nicht ruft...

overdose · 22.06.2006, 06:51

Also das letzte hat super funktioniert...jetzt muss ich mir 'nur' noch Gedanken um die Grafik an sich machen.

Danke Xai!

Zu sehen unter: http://digital-anger.de/blog/

Xaicon · 22.06.2006, 09:36

Ja, kein Thema.
Willst Du die Grafik noch mit einer Aktion belegen? Wenn ja wird das etwas umständlicher damit es auch in allen gängigen Browsern anständig läuft.
Besonders auf der rechten Seite...

Wenns ist meld Dich einfach nochmal...

overdose · 03.03.2007, 17:03

*grab buddel...

Ich hab da mal wieder was: Ab dem Moment wo ich die Grafik auf der Startseite verlinke (zur main.htm) springt mir die Grafik vom absoluten Bottom weg (um ca. 3px).

Dabei habe ich bereits folgendes:

HTML-Code:

<div style="position:absolute; bottom:0; right:0; z-index:100">

Xaicon · 03.03.2007, 19:24

HTML-Code:

<body style="margin:0; padding:0;">
<div style="position:absolute; bottom:0; right:0; z-index:100; margin: 0; ">

wird sicher helfen...

overdose · 03.03.2007, 20:43

Irgendwie immer noch nicht so ganz...hmmm.

Xaicon · 04.03.2007, 01:44

Zitat:

Zitat von digital-anger.de

Na 'nen zweiter Body-Tag is' auch nich ganz das ware. Musst die Werte für margin und padding in den ersten Body-Tag mit reintun...

Stichworte	Lesezeichen
css, html	Mister Wong YiGG.de Google del.icio.us

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
da vinci code	Soulstone	Film und Fernsehen	16	22.05.2006 20:41
HTML Problem	-JD-	Internet	2	19.06.2004 08:51
Literaturempfehlung zu HTML und Webdesign für Anfänger?	pcfreak	Internet	9	22.04.2004 14:17
HTML - XHTML - welche unterschiede?	pcfreak	Internet	2	14.04.2004 18:15
welchen html editor würdet ihr empfehlen?	porschinho	Internet	8	17.11.2003 14:01

21.06.2006, 13:33	#1 (permalink)
overdose	Code Frage [CSS/HTML] Ich würde gerne wissen wie ich für meine Blogseite einen fixen Background definieren kann. Faktisch möchte ich eine Grafik haben die an einem bestimmten Punkt auftaucht (Unten Links/recht o.ä.) und nicht repeatet wird. Zu sehen hier: http://www.blog.mediaprojekte.de/ (Die Grafik "zu cool für IE" z.B.) Ich habs schon mit http://de.selfhtml.org/css/eigenscha...und_attachment versucht...aber irgendwie bekomme ich die Grafik nicht dahin wo ich sie hinhaben will. Und bei einer anderen Bildschirmauflösung geht schon mal gar nichts mehr. Vielleicht habt ihr ja ne Ahnung. __________________ .when you change the rules, you change the game!

21.06.2006, 13:44	#2 (permalink)
Xaicon	AW: Code Frage [CSS/HTML] Warum Background? Ich würde einfach ein Div unten ins Eck setzten. So haben die das da auch gemacht. Mein Vorschlag: HTML-Code: <html> <head> <title>untenrechts</title> <style type="text/css"> body {background: #ffffff;} #untenrechts {position:absolute; bottom:0; right:0; width:100px; height:100px; border:1px solid #000000; background: url(./img/bild.jpg) no-repeat; z-index:100;} </style> </head> <body> <div id="untenrechts"></div> </body> </html> Mal eben ganz spontan geschrieben ohne Fehlerkorektur. Sollte aber stimmen. Sag 'peip' wenn Du eine Erklärung brauchst. Du könntest auch wenn Du wirklich ein nur Hintergrundbild in die Ecke rechts unten packen willst das so machen: HTML-Code: <html> <head> <title>untenrechts</title> <style type="text/css"> body { background-color: #ffffff; background-image:url(./img/bild.jpg); background-repeat: no-repeat; background-position: right bottom;} </style> </head> <body> </body> </html> Da bin ich mir jetzt aber nicht sicher ob das alle gängigen Browser richtig interpretieren und ob es valide ist. Das kann ich dir aber nachher gleich testen... Bei dieser Lösung kannst Du natürlich das Bild nicht mit einem Link oder einer Aktion versehen. __________________ Man reiche mir mein LART! Kein Support bei IT-Fragen via ICQ, Skype, PN oder Email! (Stammuser ausgenommen)

21.06.2006, 13:51	#3 (permalink)
overdose	AW: Code Frage [CSS/HTML] Ja, ich wusste doch das der Xai sowas kann. Ich versuche das jetzt gleich mal und melde mich dann wieder. THX schonmal EDIT: Das problem ist jetzt nur das die Grafik nicht an der unteren Bildhälfte verbleibt sondern ab dem Moment wo man herunter scrollt nicht mit geht sonder stehen bleibt. __________________ .when you change the rules, you change the game!

21.06.2006, 14:10	#4 (permalink)
Alp.traum	AW: Code Frage [CSS/HTML] ~~Ich weiss nicht genau ob es was bringt, aber probier zusätzlich noch z-index: 1; als CSS-Eigenschaft.~~ Mist steht ja schon da, hab nicht aufgepasst. Welche von beiden Varianten hast du denn genommen? Wär super wenn du gleich noch nen Link geben kannst wo man sich das anschauen kann, ist besser zum helfen. __________________ life is great, you just have to look at it from the right perspective

21.06.2006, 14:11	#5 (permalink)
Xaicon	AW: Code Frage [CSS/HTML] bei zweiter Lösung ginge das so: HTML-Code: <html> <head> <title>untenrechts</title> <style type="text/css"> body { background-color: #ffffff; background-image:url(./yxcvv.jpg); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed;} </style> </head> <body> </body> </html> also + background-attachment: fixed; Bei der Lösung mit dem div ist das etwas umständlicher, da die Browser recht unterschiedlich reagieren. im Prinzip ist es aber dann so, dass der Body nicht mehr gescrollt wird, sondern der Seiteninhalt in einem extra div mit 'overflow=auto' geladen. Beispiel folgt, wenn die Arbeit mal nicht ruft... __________________ Man reiche mir mein LART! Kein Support bei IT-Fragen via ICQ, Skype, PN oder Email! (Stammuser ausgenommen)

22.06.2006, 06:51	#6 (permalink)
overdose	AW: Code Frage [CSS/HTML] Also das letzte hat super funktioniert...jetzt muss ich mir 'nur' noch Gedanken um die Grafik an sich machen. Danke Xai! Zu sehen unter: http://digital-anger.de/blog/ __________________ .when you change the rules, you change the game!

22.06.2006, 09:36	#7 (permalink)
Xaicon	AW: Code Frage [CSS/HTML] Ja, kein Thema. Willst Du die Grafik noch mit einer Aktion belegen? Wenn ja wird das etwas umständlicher damit es auch in allen gängigen Browsern anständig läuft. Besonders auf der rechten Seite... Wenns ist meld Dich einfach nochmal... __________________ Man reiche mir mein LART! Kein Support bei IT-Fragen via ICQ, Skype, PN oder Email! (Stammuser ausgenommen)

03.03.2007, 17:03	#8 (permalink)
overdose	AW: Code Frage [CSS/HTML] *grab buddel... Ich hab da mal wieder was: Ab dem Moment wo ich die Grafik auf der Startseite verlinke (zur main.htm) springt mir die Grafik vom absoluten Bottom weg (um ca. 3px). Dabei habe ich bereits folgendes: HTML-Code: <div style="position:absolute; bottom:0; right:0; z-index:100"> __________________ .when you change the rules, you change the game!

03.03.2007, 19:24	#9 (permalink)
Xaicon	AW: Code Frage [CSS/HTML] HTML-Code: <body style="margin:0; padding:0;"> <div style="position:absolute; bottom:0; right:0; z-index:100; margin: 0; "> wird sicher helfen... __________________ Man reiche mir mein LART! Kein Support bei IT-Fragen via ICQ, Skype, PN oder Email! (Stammuser ausgenommen)

03.03.2007, 20:43	#10 (permalink)
overdose	AW: Code Frage [CSS/HTML] Irgendwie immer noch nicht so ganz...hmmm. __________________ .when you change the rules, you change the game!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen