Probleme bei Größenangaben

[Michael]

Hallo zusammen,

ich versuche gerade mal wieder meine bescheidenen Kenntnisse in HTML und CSS zu erweitern. Ich habe nun eine HTML-Datei erstellt, in der ein Bild angezeigt werden soll, das über den kompletten Bildschirm geht. Sowohl in der Höhe, als auch in der Breit. Also habe ich einfach im Quelltext die Höhe und Breite auf 100% festgelegt. Beim Opera wird dies nun auch korrekt angezeigt. Im IE allerdings nicht. Hier wird nur die Breite korrekt dargestellt, die Höhe jedoch nicht.
Dieses Problem hatte ich auch schon bei Tabellen u.ä. und auch bei prozentualen Positionsangaben.

Gibt es hier eine andere und bessere Möglichkeit Maße und Positionen so anzugeben, dass es keine Festwerte sind, sondern in % oder ähnlichem?

[Daniel]

Hallo Michael,

also Du willst ein Bild auf 100% x 100% strecken? Also Bilder sollte man eigentlich immer in der Größe auch darstellen, in der sie auch ursprünglich sind.

Könntest Du mal ein Beispiel online stellen zum Anschauen und Rumtesten, damit könnte ich mehr anfangen, zumindest kann ich mir bei Live-Versionen das ganze besser vorstellen und auch mal ein paar Sachen ausprobieren.

Was willst Du eigentlich mit solch gestreckten Bildern anfangen? Bzw. aus welchem Grund müssen diese so variable sein?

Gruß Daniel

[Michael]

Also im Prinzip ist es nur ein Versuch. Das Bild soll auch nicht gestreckt werden, sondern ist eigentlich größer, als der Bildschirm (1300x1000 Pixel).

Im Prinzip will ich einen Hintergrund für eine Homepage haben. Dazu soll in diesem Fall einfach mal eine Grafik herhalten. Diese sollte natürlich dann den gesammtetn Bildschirm ausfüllen (oder besser gesagt das Browser-Fenster). Da ja nun nicht jeder die gleiche Bildschirmauflösung hat, wie ich, möchte ich dass die Größe variabel ist und sich dem Bildschirm anpasst. Aber leider klappt das ganze nur bei Opera. Der IE stellt sich hier quer. Deshalb such ich nach einer anderen Lösung.

[Manuel]

Hi Michael!

Ist die Seite denn scrollbar? Denn dann bringt dir eine Höhe von 1000px eh nicht viel, da das Bild ja dann irgendwann aufhört und es dort einen Schnitt gibt, es sei denn du machst das Bild kachelbar oder lässt es in die Hintergrundfarbe auslaufen.
Eigentlich müsste es dafür reichen, wenn du mit CSS ein backgroundimage definierst. Probleme könnten nur beim IE auftreten, da dieser CSS nicht vollständig interpretiert. Auf http://www.css4you.de steht aber bei jeder Funktion dabei, welche denn nun von welchem Browser richtig interpretiert wird. Falls das mit CSS nicht funktioniert, musst du es halt direkt in HTML definieren.

Du solltest nur bedenken, dass ein solch großes Bild auch nicht gerade klein ist, daher für Modemuser nicht gerade toll (falls es diese noch gibt? *gg*) und den Traffic senkt dieses natürlich auch nicht. Meist stören solche Hintergrundbilder nur, da sie den Inhalt ebenfalls schlechter lesbar machen usw.

Will dir das auf keinen Fall ausreden, aber es spricht ne Menge dagegen find ich

Lg.
Manuel

[Michael]

Danke für die Antworten.

Also das Bild läuft in der tat in der Hintergrundfarbe aus. Die Seite soll auch nicht scrollbar sein. Alle Inhalte sollen später in einem IFrame angezeigt werden. Das Bild dient eigentlich nur als eine Art Rahmen- und Struckturelement für das Iframe und die Unterteilung in Navigations- und Datenbereich. Mir ist bisher keine bessere Möglichkeit dafür eingefallen.

Also bisher habe ich die Größe des Bildes nur direkt im HTML-Code geschrieben. Werde mal mit CSS rumprobieren.

Mit momentan 1,2MB (als PNG) ist es in der Tat noch ein wenig groß Aber läuft bisher ja auch nur zu Testzwecken auf meinem Rechner. Als JPEG ist es dann auch nur noch 43KB groß, was ich wohl auch für Modems als angemessen bezeichnen würde

Was die Lesbarkeit betrifft, da habe ich keine Bedenken, da ich das Bild extra zur Struckturierung angelegt habe und dabei schon darauf geachtet habe, dass es nicht stört.

Ich poste einfach mal das Bild hier (ein wenig verkleinert), damit ihr euch das ganze besser vorstellen könnt. Falls ihr Ideen habt, wie ich ein ähnliches Ergebnis auf einem anderen Wege erreichen kann, wäre das natürlich toll.



Das Layout ist in diesem Fall noch nicht ganz fertig, wie man unschwer sehen kann. Da bastel ich noch ein wenig dran rum. Aber so in etwa sollte es später aussehen. Vorallem die Farben. Kommen höchstens noch ein paar kräftige Akzente hinzu.

[Manuel]

Das würde ich aber auf jeden Fall zerschneiden, denn so speicherst du ja auch die riesige weiße Fläche in der Mitte im jpg, was du dir ja locker sparen könntest, da du diese Fläche auch als normale Hintergrundfarbe definieren könntest bzw. da das iFrame diese Fläche dann später eh überschreibt. Diese Seite war damals auch mit einem iFrame. Bin aber froh, dass ich davon los bin. Ist sicherlich ne nette Sache, aber das kommt natürlich immer darauf an, was du machen willst.

Also wie gesagt, ich würde es slicen und dann in divs mit CSS wieder zusammen bauen. Dabei dann fein repeat ausstellen und es passt wunderbar


Lg,
Manuel

[Paddy]

Bin da absolut der selben Meinung wie Manu! Das bekommst du auch super mit css hin. Überleg auch mal das dieses Bild bei jedem Aufruf deiner Seite geladen wird. --- Wat fürn Traffic ---

Du brauchst eingentlich nur einen schmalen Streifen von dem, ich geh mal davon aus es ist das Menü. Das nimmst du als Background-image für deinen Menü-Div-Layer.

Dann brauchst du nur noch Stück oben und unten wo die linie gebogen ist.

und fertig!

So machste aus einem 300kb Hintergrund Bild drei Schnipsel die jeweils nur ungefähr 20kb groß sind.
Klar in Zeiten von DSL denkt keiner mehr über sowas nach. Aber nur weil die Straßen breiter sind muss man doch net mit breiteren Autos fahren.

Was ich noch vergessen habe:
Suchmaschine bedanken sich bei dir, wenn du Frames benutzt, mit einem schlechten Ranking. Würd mir also überlegen ob ich ein I-Frame einsetze. Fand das auch mal ganz gut. Aber was soll das weg von Frames hin zu I-Frames????? Das ist doch vom Regen in die Traufe. Div-Layer können auch scrollbar gemacht werden.

Paddy

[Daniel]

Also im Prinzip ist es nur ein Versuch. Das Bild soll auch nicht gestreckt werden, sondern ist eigentlich größer, als der Bildschirm (1300x1000 Pixel).

Im Prinzip will ich einen Hintergrund für eine Homepage haben. Dazu soll in diesem Fall einfach mal eine Grafik herhalten. Diese sollte natürlich dann den gesammtetn Bildschirm ausfüllen (oder besser gesagt das Browser-Fenster). Da ja nun nicht jeder die gleiche Bildschirmauflösung hat, wie ich, möchte ich dass die Größe variabel ist und sich dem Bildschirm anpasst. Aber leider klappt das ganze nur bei Opera. Der IE stellt sich hier quer. Deshalb such ich nach einer anderen Lösung.

Naja, so wie Du es vorhast/vorhattest wäre wirklich keine Optimale Lösung. Das Strecken (auch wenn es darum geht das Bild zu verkleinern) eines Bildes ist nie wirklich eine gute Lösung, da Du da total unterschiedliche Varianten herausbekommen würdest => die Bildschirmauflösungen bzw. die inneren Bereiche variieren dafür viel zu stark und Du hast nicht immer das gleiche Verhältnis. Dadurch würdest Du die Grafik teilweise nur total verzerren.

Wie auch schon die anderen gesagt haben ist hier eine CSS Lösung (ohne iFrame) die beste Möglichkeit.

Ich habe mir mal die Mühe gemacht und es mal versucht, da ich aber nicht genau wusste, was Du jetzt auf den Hintergrund wie haben möchtest, konnte ich nur raten, aber hier mal meine Vorgehensweise:

1. Zerlege den Hintergrund in logische Bereiche: Header, Navigation, Content, Footer (=slicen)
2. Einen Teil der Grafik brauchst Du auch für den Hintergrund, also eine komplette Zeile auch herausschneiden.
3. Die Balken am rechten Ende müssen auch weiterlaufen, also auch diese jeweils in der Höhe des Headers bzw. Footers 1px breit slicen (ganz am hinteren rechten Ende!).

Das ganze sollte dann in etwa so aussehen:


Die einzelnen Teile so:
bg.jpg:


bg_head.jpg:


bg_header.jpg:


bg_nav.jpg:


bg_foot.jpg:


bg_footer.jpg:


4. Nun gehts daran das ganze in HTML / CSS zu schreiben. Ich habe das mal kurz gemacht. Das ganze jetzt allerdings zu erklären, puh, das würde etwas dauern. Es ist jetzt nur ein Vorschlag, mit CSS lässt sich manchmal ein und das selbe Design unterschiedlich realisieren.

Hier gehts zu meiner Version, schau in den Code und stell Fragen zu Punkten, die Du gerne erläutert haben willst:

http://test.daniel-guth.de/other_tests/michael.html

[Krabbi]

Whew, ist schon erstaunlich das man sowas allein mit CSS hinbekommt O_o Ich hätte ehrlich gesagt sicher wieder ein paar sinnlose Tabellen genommen und hätte eben nur die Bilder die z.B. als nich kachelbarer Background da sein müssen mit CSS eingebunden. Ich bin aber ziemlicher CSS n00b und mein HTML schläft langsam wieder ein

[Michael]

Wow. Also erstmal ein dickes Danke für alle Antworten (besonders Daniel!). Ziemlich genau so sollte das später auch werden. Der größte Teil der CSS-Befehle sagt mir was, wäre wahrscheinlich nur nicht auf die Idee gekommen das ganze so umzusetzen. Werde mich da jetzt mal etwas genauer einlesen.

Welche Befehle ich noch nicht kannte sind "float" und "clear".
Was bewirken die, wie muss man die einsetzen?

Danke nochmal!!!

[Manuel]

Hi Michael!

Schau mal hier:

EDIT: Links wegen Daniel's super Erklärung entfernt

Lg,
Manuel

[Daniel]

Nichts zu danken. War relativ schnell umgesetzt und wenn es hilft das klar zu machen, dann immer gern. Etwas erklären dauert da bei mir schon länger und ehrlich gesagt, ist das nicht meine Stärke, trotzdem habe ich mal versucht das mit float und clear erklärend darzustellen, zu finden unter:

http://test.daniel-guth.de/other_tests/float_clear.html

Gruß Daniel

@Manu, jetzt hab ich mir soviel Mühe gegeben und Du kommst mit den zwei Links an, argh...

[Michael]

Klasse! Das hilft mir auf jeden Fall weiter. Habe mir den ganzen Quelltext noch nicht angeschaut, weil ich grade am Rhein auf Fotosafari war, aber ich werde mich melden, wenn mir noch was unklar ist.

Bis dahin erstmal dickes Dankeschön an alle Helfer!

[Michael]

So.. bin grade mal dabei das ganze durch zu gucken. Dabei fällt mir als aller erstes deine Schreibweise auf. So wie du das machst, kannte ich das bisher noch gar nicht.

Du schreibst z.B.:

"body { font: 0.8em/1.4em Verdana, Arial, Helvetica, sans-serif; }"
Kurzfassung

Ich hätte das jetzt immer so gemacht:

"body { font-size: 0.8em/1.4em; font-familiy: Verdana, Arial, Helvetica, sans-serif; }"

Macht das einen bestimmten Unterschied oder ist das einfach nur eine andere Art der Schreibweise, von der ich nur noch nix gehört habe?
Was mir auffällt, ist die Tatsache, dass man weniger schreiben muss. Das ist ja schon mal ganz nett

Achja... was ist "em" für eine Einheit? Ist das eine feste (also wie px) oder eine variable (wie %)? Was bedeuten die zwei Werte bei deinem Beispiel? Warum sind die durch den "/" getrennt?

"repeat-y/-x" ist mir auch neu. Heisst das einfach, dass der angegebene Hintergrund dann nur in y-/x-Richtung wiederholt wird?

Mir fällt grade noch ein Problem ein, das ich schon so oft hatte. Wenn ich die Scrollleiste an die Farben meiner Homepage anpassen will, wie muss ich das tun? Ich habe aus SelfHTML die entsprechenden Befehle, aber irgendwie funktioniert das nie so, wie es soll. Ich habe mal eine Seite gemacht, da hat es einwandfrei im IE und Opera geklappt. Deshalb habe ich einfach den Code aus der Seite in eine neue an die gleiche Stelle kopiert und die Farben geändert, aber hier zeigt sich keine Wirkung. Die Scrollleiste ist immer noch grau, wie sie standarmäßig so ist oder aber es sind nur bestimmte Leisten eingefärbt, aber nicht alle. Blicke da nicht mehr durch.

[Daniel]

So.. bin grade mal dabei das ganze durch zu gucken. Dabei fällt mir als aller erstes deine Schreibweise auf. So wie du das machst, kannte ich das bisher noch gar nicht.

Du schreibst z.B.:

"body { font: 0.8em/1.4em Verdana, Arial, Helvetica, sans-serif; }"
Kurzfassung

Ich hätte das jetzt immer so gemacht:

"body { font-size: 0.8em/1.4em; font-familiy: Verdana, Arial, Helvetica, sans-serif; }"

Macht das einen bestimmten Unterschied oder ist das einfach nur eine andere Art der Schreibweise, von der ich nur noch nix gehört habe?
Was mir auffällt, ist die Tatsache, dass man weniger schreiben muss. Das ist ja schon mal ganz nett

Achja... was ist "em" für eine Einheit? Ist das eine feste (also wie px) oder eine variable (wie %)? Was bedeuten die zwei Werte bei deinem Beispiel? Warum sind die durch den "/" getrennt?

Font Ist die Kurzschreibweise mit der man gewisse Eigenschaften zusammenfassen kann. So kann man unter font folgende zusammenfassen (Reihenfolge sollte eingehalten werden): font-style, font-variant, font-weight, font-size / line-height (siehe Deine letzte Frage), font-family.

Weitere Kurzschreibweisen, die mir gerade einfallen sind border und background.

"repeat-y/-x" ist mir auch neu. Heisst das einfach, dass der angegebene Hintergrund dann nur in y-/x-Richtung wiederholt wird?

Richtig erkannt

Mir fällt grade noch ein Problem ein, das ich schon so oft hatte. Wenn ich die Scrollleiste an die Farben meiner Homepage anpassen will, wie muss ich das tun? Ich habe aus SelfHTML die entsprechenden Befehle, aber irgendwie funktioniert das nie so, wie es soll. Ich habe mal eine Seite gemacht, da hat es einwandfrei im IE und Opera geklappt. Deshalb habe ich einfach den Code aus der Seite in eine neue an die gleiche Stelle kopiert und die Farben geändert, aber hier zeigt sich keine Wirkung. Die Scrollleiste ist immer noch grau, wie sie standarmäßig so ist oder aber es sind nur bestimmte Leisten eingefärbt, aber nicht alle. Blicke da nicht mehr durch.

Scrollleisten sollte man auch nicht farblich ändern, auch wenn die Standardeinstellung eventuell nicht zu der Webseitengestaltung passt, ist das ein no-no unter Webdesignern.

Gründe dagegen gibt es wie Sand am mehr, wichtigster Punkt imho ist Accessibility, zB wenn man da an Farbenblinde denkt, die ihre Scrolleisten und andere Einstellungen an ihre Bedürfnisse angepasst haben.

Gruß Daniel