Probleme mit relativen Größenangaben

[heikeg]

Hallo Forum,

kurz zu mir, ich bin selber noch blutige Anfängerin im Web-Design, also bitte ich um Nachsicht!

Durch die Lektüre im Selfhtml und auch den FAQs, wird empfohlen, statt des Tabellenlayouts, es mit Boxen und realtiven Angaben zu managen.

Mein Problem ist, solange ich die Fenstergröße nicht verkleinere, ist ja alles noch in Ordnung, aber wenn ich es dann zusammenschiebe, dann saust manches ineinander, vor allem beim Firefox, der IE7.0 ist da etwas moderater.

Ich habe mal die Datei, mal hier abgelegt chat-body.html

Vielleicht können mir Profis da einige Tipps geben.

Vielen Dank im Voraus.

Gruß Heike

[Gunnar Bittersmann]

@@heikeg:

nuqneH

Mein Problem ist, solange ich die Fenstergröße nicht verkleinere, ist ja alles noch in Ordnung, aber wenn ich es dann zusammenschiebe, dann saust manches ineinander

Weil du für '#kopf' eine in Pixel festgemeißelte Höhe vergeben hast.

Vielleicht können mir Profis da einige Tipps geben.

Die Deklaration von 'height' löschen.

Qapla'

[heikeg]

Hi,

so schnell hätte ich jetzt gar nicht mit Antwort gerechnet. Vielen Dank für den Tip, es hat funktioniert.

Gruß Heike

[heikeg]

Hallo,

also immer noch bin ich dabei, statt Tabellenlayout es über Div-Container und CSS zu magen.

Wenn ich aber 3 Bereiche Nebeneinander ansiedele, gibt es wieder das Problem, das beim zusammenfahren des Browserfensters, das dritte Element nach unten abhaut.

Mein Beispiel für eine Chathomepage

  
#content .achtung {  
        width: 100%;  
        margin-left: auto;  
        margin-right: auto;  
        margin-top: 10px;  
        line-height: 14pt;  
}  
#content .image-l {  
        /*width: 100px;*/  
        margin-right: 30px;  
}  
#content .text {  
        width: 70%;  
        float: left;  
}  
#content .image-r {  
        float: right;  
}  
  

Bei .text habe ich mal die width-Angabe weg gelassen, da war das Springen noch extremer.

Könnt ihr mir da wieder einen Tipp geben?

Desweiteren fällt mir andauernd auf, dass IE7 und Firefox, margin-Abstände anders umsetzen. Ich dachte, da ich für den IE, die komplette DTD angebe, wäre ich aus diesem Quirksmodus raus.

Was mache ich da falsch?

Gruß Heike

[ChrisB]

Hi,

Wenn ich aber 3 Bereiche Nebeneinander ansiedele, gibt es wieder das Problem, das beim zusammenfahren des Browserfensters, das dritte Element nach unten abhaut.

Dieses Verhalten ist bei floatenden Elementen beabsichtigt.

Könnt ihr mir da wieder einen Tipp geben?

Wenn du für das umgebende Element der gefloateten eine ausreichende Mindestbreite angibst, brechen sie nicht mehr um, dafür kann ggf. gescrollt werden.

MfG ChrisB

[heikeg]

Hallo Chris,

danke, ich hatte mich mit min- und max-width noch nicht auseinandergesetzt, da ich dachte, dass es noch nicht alle Browser unterstützen, ich werde es mal ausprobieren, danke.

Gruß Heike

Hi,

Wenn ich aber 3 Bereiche Nebeneinander ansiedele, gibt es wieder das Problem, das beim zusammenfahren des Browserfensters, das dritte Element nach unten abhaut.

Dieses Verhalten ist bei floatenden Elementen beabsichtigt.

Könnt ihr mir da wieder einen Tipp geben?

Wenn du für das umgebende Element der gefloateten eine ausreichende Mindestbreite angibst, brechen sie nicht mehr um, dafür kann ggf. gescrollt werden.

MfG ChrisB

[Gunnar Bittersmann]

@@heikeg:

nuqneH

Wenn ich aber 3 Bereiche Nebeneinander ansiedele, gibt es wieder das Problem, das beim zusammenfahren des Browserfensters, das dritte Element nach unten abhaut.

Wohin auch sonst? Wenn alles nebeneinander bleibt, müsste der Nutzer ja bei schmalem Viewport horizontal scrollen, was nicht nutzerfeundlich ist.

Dir geht es um die Bilder Links und rechts der Liste? Wenn diese nur Verzierung sind, sollten die überhaupt nicht im Markup (HTML-Dokument) auftauchen.

Na gut, das eine hat mit "Bild switch vom Künstler Pit"* noch einen Alternativtext, gehört also zum Inhalt, also ins HTML. Und zwar ohne überflüssiges 'div' drumrum vor(!) die Liste. Im Stylesheet bekommt es 'float: right'.

Das Ausrufezeichenbild aber nicht. Gib es der Liste als Hintergrundbild und sorge mit 'padding-left' dafür, dass der Text nicht überm Bild steht.

Und schon sollte sich dein Problem erledigt haben. Das nächste, bitte.

Qapla'

* Der Alternativtext sollte als "Bild switch vom Künstler Pit" im Markup stehen ('ü', nicht 'ü'). „Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden. Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen […]“ [ESCAPES]

[heikeg]

Hallo Gunnar,

da ich wirklich unerfahren bin, frag ich als erstes, was

nuqneH

bedeutet, genauso wie am Schluss "Qapla'?

Aber nun zum Eigentlichen:

Wohin auch sonst? Wenn alles nebeneinander bleibt, müsste der Nutzer ja bei schmalem Viewport horizontal scrollen, was nicht nutzerfeundlich ist.

naja, auf der einen Seite hast du schon Recht, aber auf der anderen Seite, sehe ich dann manchmal doch den Vorteil in festen Breiten, da dann alles da an Ort und Stelle bleibt, wo man es haben wollte. Allerdings schreibe ich dies, ohne jetzt die anderen Vorschläge ausprobiert zu haben :-).

Dir geht es um die Bilder Links und rechts der Liste? Wenn diese nur Verzierung sind, sollten die überhaupt nicht im Markup (HTML-Dokument) auftauchen.

Ja, es ging mir um die beiden Bilder. Wie ich vorweg schrieb, bin ich in sachen Webpublishing noch Neuling, deshalb frage ich mal ganz dumm, wo stehen dann sonst die Bilder, wenn sie nicht ins Markup gehören? Und wenn irgendwo anders notiert, dann muß doch aber das Markup dafür irgendwie Platz schaffen oder?

Na gut, das eine hat mit "Bild switch vom Künstler Pit"* noch einen Alternativtext, gehört also zum Inhalt, also ins HTML. Und zwar ohne überflüssiges 'div' drumrum vor(!) die Liste. Im Stylesheet bekommt es 'float: right'.

»»
Werde ich mal ausprobieren danke.

Das Ausrufezeichenbild aber nicht. Gib es der Liste als Hintergrundbild und sorge mit 'padding-left' dafür, dass der Text nicht überm Bild steht.

Ist ne Variante, an die ich noch gar nicht gedacht habe, ich werds mal versuchen.

Und schon sollte sich dein Problem erledigt haben. Das nächste, bitte.

Qapla'

* Der Alternativtext sollte als "Bild switch vom Künstler Pit" im Markup stehen ('ü', nicht 'ü'). „Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden. Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen […]“ [ESCAPES]

Da ist schon ein Meta-Tag bzgl. der Schrift, es liegt an meinem Editor, leider kann ich das dem nicht abgewöhnen, dass er mir aus äs, ös, üs und ßs die Referenzierung setzt.

Ich nutze zur Zeit Alphacode-Studio, da er für mich manch andere Features bietet.

Danke nochmal für die Unterstützung.

Gruß Heike

[Stonie]

Hallöle!

Ich nutze zur Zeit Alphacode-Studio, da er für mich manch andere Features bietet.

So schön, dass es sich um andere Features lohnt, kann ein Editor nicht sein, der nicht macht, was man ihm sagt. Schau dir mal Notepad++ an.

File Griese,

Stonie

[Gunnar Bittersmann]

@@heikeg:

nuqneH

da ich wirklich unerfahren bin, frag ich als erstes, was

nuqneH
bedeutet, genauso wie am Schluss "Qapla'?

Wirklich unerfahren?

Wohin auch sonst? Wenn alles nebeneinander bleibt, müsste der Nutzer ja bei schmalem Viewport horizontal scrollen, was nicht nutzerfeundlich ist.

naja, auf der einen Seite hast du schon Recht, aber auf der anderen Seite, sehe ich dann manchmal doch den Vorteil in festen Breiten, da dann alles da an Ort und Stelle bleibt, wo man es haben wollte.

Worin wäre da der Vorteil? Und Vorteil für wen? Den Nutzer?

wo stehen dann sonst die Bilder, wenn sie nicht ins Markup gehören?

Im Stylesheet, wo alle Style-Angaben hingehören. (Verzierung ist Styling.)

Und wenn irgendwo anders notiert, dann muß doch aber das Markup dafür irgendwie Platz schaffen oder?

Das Markup „schafft“ genügend Elemente. Jedes von diesen kann per CSS ein Hintergrundbild bekommen.

Qapla'