nicht angemeldet
Hintergrund zentriert, skaliert und kompatibel
0 
Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0 0 
MudGuard
0
Hintergrund zentriert, skaliert und kompatibel
Hallo,
ich habe schon vor längerer Zeit einen CSS-Tag in meine Website eingebaut, obwohl ich mich da eigentlich nie dran getraut hatte. Zweck war, das Hintergrundbild statisch zu lassen und Text und der Rest drüber scrollt. Ergebnis: http://www.withteeth.de
So weit so gut. Jetzt habe ich mir allerdings so einen etwas bonzigen 19"-TFT-Monitor gekauft, der ist Widescreen und schon sieht die Website anders aus: Nämlich mit schwarzem Rand / Balken auf der rechten Seite.
In der ...ui... umfangreichen und guten Dokumentation hier hab ich einen einfachen Trick gefunden, wie ich die Grafik wenigstens zentrieren kann:
background-position:center;
allerdings sind auf diese Weise eben auf beiden Seiten Balken. :(
Viel lieber würde ich die Grafik je nach Bildschrimauflösung automatisch skalieren lassen. So Windows-Desktop mäßig. Da kann ich ja auch Bilder mit geringerer Auflösung skaliert als Hintergrund verwenden ohne dass das komisch aussehen muss.
Gibt es da eine einfache Ergänzung für den folgenden Code, die das bewerkstelligen könnte?
Der CSS-Code im <head>-Bereich sieht u.a. so aus:
<style type="text/css">
body {
background-image:url(i/neubg/03.gif); background-repeat:no-repeat;
background-position:center;
background-attachment:fixed; padding:0px; }
div.mybody { }
</style>
Falls nicht, auch gut. Mit der Zentrierung bin ich schon mal ein Stück weiter.
Ach so,
ein PS:
Ich hab noch eine Frage.
Ich bin mir nicht sicher, ob das speziell an meinem Programm liegt (Namo Web Editor 6), aber im Laufe der Zeit ist meine Startseite index.htm immer größer und größer geworden. Wenn ich in die HTML-Code-Sicht gehe, sind da teilweise hunderte Zeilen untereinander leer. Ist das die Ursache der Blähung bzw. macht das was, wenn ich die leeren Zeilen einfach alle lösche?
Danke für Antworten,
dw
-
Hello out there!
ich habe schon vor längerer Zeit einen CSS-Tag in meine Website eingebaut, obwohl ich mich da eigentlich nie dran getraut hatte.
CSS ist aber für Angaben zur Darstellung da. Nicht HTML-Attribute; nicht missbräuchlich eingesetzte „Tabellen“.
Ergebnis: http://www.withteeth.de
Verweise inbinden. Ergebnis: http://www.withteeth.de
Du solltest deinen Quelltext mal überprüfen. Ergebnis: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.withteeth.de%2F
Jetzt habe ich mir allerdings so einen etwas bonzigen 19"-TFT-Monitor gekauft,
Andere Besucher deiner Seiten haben das vielleicht schon vor dir getan. Du darfst niemals davon ausgehen, dass deine Seiten bei anderen so aussehen wie bei dir.
Viel lieber würde ich die Grafik je nach Bildschrimauflösung automatisch skalieren lassen.
Die Bildschirmauflösung ist für dich völlig irrelvant. Was du meinst, ist die Größe das Anzeigebereichs (Viewport).
CSS bietet (noch) keine Möglichkeit, Hintergrundbilder zu skalieren.
Ist das die Ursache der Blähung
Was dein Quelltext bei mir auslöst, geht über Blähungen schon hinaus. SCNR.
bzw. macht das was, wenn ich die leeren Zeilen einfach alle lösche?
Ja, das macht was: den Quelltext besser.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi,
Ist das die Ursache der Blähung
Was dein Quelltext bei mir auslöst, geht über Blähungen schon hinaus. SCNR.
bzw. macht das was, wenn ich die leeren Zeilen einfach alle lösche?
Ja, das macht was: den Quelltext besser.
Nicht nur die Zeilenumbrüche sind Problematisch (ca. 2 Byte pro Zeilenumbruch bei Ansi), sondern auch die vielen Leerzeichen, bei Tabellenelementen und Tabellen. Du solltest wennschon eine Art Baumansicht aufbauen, so ungefähr:
<table>
<tr>
<td>
<table>
<tr>
<td>
</tr>
</table>
</td>
</tr>
</table>So finde ich, sollte beispielsweise eine verschachtelte Tablelle aussehen, das ist am übersichtlichsten. Da du aber anscheinend sowieso mit einem Vysiwyg-Editor arbeitest, kannst du die vielen Leerzeichen auch einfach entfernen.
Lade dir hierfür mal diesen Editor:
http://http://www.flos-freeware.ch/notepad2.htmlMit ihm kannst du problemlos beliebige Zeichenfolgen ersetzen. Gehe dazu auf das Ersetzen-Symbol und gebe in die obige Zeile ein paar Leerzeichen ein. In die untere brauchst du nichts einzugben, wenn du die Leerzeichen löschen willst. Gib aber mindesten 2 Leerzeichen in die obige Zeile ein, damit die sinnvollen Leerzeichen im Text erhalten bleiben.
Einen schönen Samstag noch!
P.S.: Das Probgramm eignet sich auch perfekt als Einstieg in die Welt der richtigen HTML-Editoren. Da bekommst du nämlich saubereren Quelltext hin!
Jedenfalls habe ich auch mit WYSIWYG-Editoren (Frontpage) gearbeitet, bis ich dieses Programm fand!-
Hallo D.R..
Da du aber anscheinend sowieso mit einem Vysiwyg-Editor arbeitest, […]
Ich bezweifle, dass Gunnar dies tut.
Lade dir hierfür mal diesen Editor:
http://www.flos-freeware.ch/notepad2.htmlEin sehr guter Vorschlag.
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/-
Hello out there!
Da du aber anscheinend sowieso mit einem Vysiwyg-Editor arbeitest, […]
Ich bezweifle, dass Gunnar dies tut.
Die Zweifel sind durchaus berechtigt. ;-)
Aber ich bezweifle, dass D.R. mit „du“ mich meinte.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi,
Da du aber anscheinend sowieso mit einem Vysiwyg-Editor arbeitest, […]
Ich bezweifle, dass Gunnar dies tut.
Die Zweifel sind durchaus berechtigt. ;-)
Aber ich bezweifle, dass D.R. mit „du“ mich meinte.
Genau, das Posting war nämlich an "dw" gerichtet und nicht an Gunnar Bittersmann, ich meinte also "dw". Hätte man aber eigentlich merken müssen :-). Und bei "dw" ist es sehr wahrscheinlich, dass er einen WYSIWYG-Editor nimmt, ich hatte mit Frontpage auch immer ein ähnliches Problem. Allerdings waren die Tabellenelente da noch etwas logischer Strukturiert. Wenn es wenigstens Tabstopps statt Leerzeichen gewesen wären, hätte ich kaum Einwände, da ein Tabstopp nur 1 Byte kostet. 10 Leerzeichen dagegen 10Byte!
Das war ein Hauptgrund für mich, lieber mit einem richtigen Texteditor zu arbeiten. Notepad 2 (das ich übrigens in diesem Forum kennengelernt habe) kam mir da genau entgegen, da mir der Editor, wegen seinem Schwarz auf Weiß zu unübersichtlich war.Einen schönen Samstag noch!
-
Hi,
Genau, das Posting war nämlich an "dw" gerichtet und nicht an Gunnar Bittersmann,
Warum hast Du dann auf das Posting von Gunnar geantwortet und nicht auf das von dw?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Genau, das Posting war nämlich an "dw" gerichtet und nicht an Gunnar Bittersmann,
Warum hast Du dann auf das Posting von Gunnar geantwortet und nicht auf das von dw?
Weil an dieser Stelle das "Quelltext-Problem" angesprochen wurde und ich es sowieso besser lesbar finde, wenn eine Nachricht auf die andere folgt, und nicht mal so und mal so.
Deshalb versuche ich mein Posting möglichst immer hinten dran zu hängen. Falls da jemand anderer Meinung ist, kann ich das ja ändern!Einen schönen Samsag noch!
-
Hello out there!
Weil an dieser Stelle das "Quelltext-Problem" angesprochen wurde
Ich fand dein Posting an der Stelle schon richtig plaziert und fühlte mich durch das „du“ auch nicht angesprochen.
und ich es sowieso besser lesbar finde, wenn eine Nachricht auf die andere folgt, und nicht mal so und mal so.
Deshalb versuche ich mein Posting möglichst immer hinten dran zu hängen.Ähm – nein! Wir haben hier bewusst ein Forum, kein Board. [FOREN-BOARDS]
Falls da jemand anderer Meinung ist, kann ich das ja ändern!
Wäre nett.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
-
-
-
-
-
-
Hallo dw,
gunnar hat recht:
css:- es gibt keine methode, um hintergrundbilder auf bildschirmgröße zu skalieren. Du kannst allerdings hg-bilder clever einsetzen.
Schau mal da rein, das ist ein kurs für gutes css-design:
http://addictedtonew.com/archives/60/how-to-nail-a-sexy-layout/
Quelltext:
je weniger leerzeilen, desto besser.
allerdings muss man den Code nachher noch lesen können, alsonichtallesamstück.grüße,
claus - es gibt keine methode, um hintergrundbilder auf bildschirmgröße zu skalieren. Du kannst allerdings hg-bilder clever einsetzen.