Text in div unten anordnen

[ldb]

Hallo zusammen, da bin ich schon wieder mit einer neuen Frage:
Ich habe mein Layout ganz leicht abgeändert, so dass mein Copyright-Text jetzt unten in der Infobox steht. Ich möchte die Position dieses h1-Tags jetzt so definieren, dass der Text immer am unteren Rand "kleben bleibt", auch wenn man den Text in der Infobox verändert. Ich habe es mit
text-align:bottom
versucht, hatte aber keinen Erfolg, der Text orientert sich immer noch an
margin-top

Hat einer von euch eine zündende Idee? Die Seite findet man hier:
Workbook Lukas Bieri

Gruss und vielen Dank für die bisher so hilfreichen Antworten!
LDB


PS: Ich habe die Bilder momentan alle in 72dpi konvertiert. Ich schaffe es einfach nicht, die dpi auf 300 zu lassen und die Pixelgrösse zu verändern, hat mir da jemand auch noch einen Tipp?

 

[ewrson]

Hallo ldb,

du meinst diesen abschnitt? -> <h1> Infos und Aktuelles </h1>
Und dieser text soll am unterstrich "kleben"?

Gruß

 

[bodil]

Du kannst ein umgebendes Div mit position:relative mit einem weiteren Div (oder h1 oder what ever) füllen, das du mit position:absolute und bottom:0px (oder so) einbaust. Das innere Div orientiert sich dann an der Unterkante des umgebenden Divs.

Mit welcher Software bearbeitest du deine Bilder?

 

[ldb]

Hallo ewrson,
Dank der Antwort von bodil hat sich das Problem schon gelöst. Danke trotzdem!

@bodil:
Erstmals danke für den- einmal mehr- wertvollen Tip! Ich werde das gleich ändern...
Ich verwende Adobe Illustrator, würde von mir eigentlich auch behaupten, dass ich das Programm beherrsche... Aber ich schaffe es einfach nicht, die Pixelgrösse des Bildes einzustellen. Die Icons sind eigentlich Vektorgrafiken.
Kann ich die png's mit Photoshop zurechtschnippseln?

Gruss und Dank,
LDB

 

[bodil]

Ja, mit Photoshop ist das kein Problem. Da gibt es die Funktion Datei -> Für Web und Geräte speichern, da kannst du auch die Größe einstellen. Aber schau doch mal in deinem Illustrator, ob du die Grafiken nicht sogar als svg-Dateien exportieren kannst. Dann bleiben es Vektorgrafiken, du musst dich nicht um die Skalierung kümmern, sie machen auch in Vergrößerungen keine Pixel und die Browser können sie trotzdem handeln. Soweit die Theorie, mit der Praxis hab ich leider keine Erfahrung mit svg-Dateien, aber ich denke, du kannst sie verwenden wie andere Bild-Dateien auch.

 

[ldb]

Hallo bodil,
Danke für die Antwort, ich werde die Bilder mal Photoshop zum Fras vorwerfen ;)
Die Idee mit den svg-Dateien hatte ich auch schon, allerdings habe ich auch nach langem googlen nichts wirklich hilfreiches gefunden. Und ich habe irgendwo gelesen, dass der IE (oh Wunder) nicht mit svg-Dateien umgehen kann. Da ich mit meiner Website aber für alle Browser verfügbar sein möchte, werde ich wohl oder übel auf png's zurückgreifen müssen.

Ich habe ein nettes Programm gefunden, dass eine Volltextsuche generiert:
Create a search engine for any website - Search Maker Pro - search engine software
Die Benutzeroberfläche ist schrecklich, aber der Generator an sich ist recht gut... Was haltet ihr davon?

Gruss LDB

 

[bodil]

Nachvollziehbar. Aber a) der IE9 unterstützt svg und b) zum Standard wird nur, was auch eingesetzt wird ...

Wie funktioniert deine Website? Einzelne HTML-Dateien oder steckt ein System (CMS) dahinter, das die Seiten generiert?

 

[ldb]

Leider kein CMS (ich bin ein Anfänger und das würde meine Kentnisse bei Weitem übersteigen). Die Website besteht einfach aus einzelnen HTML-Dateien.
Mit den Standarts hast du recht. Es ändert sich nur was, wenn die Entwickler dazu gezwungen werden. Allerdings möchte ich meine Website möglichst kompatibel machen, somit bin ich wohl nicht Derjenige, der "Pionier" spielen sollte...

Leider hat die Konvertierung nichts genutzt (oder ich hab's nicht gerafft). Ich habe das Bild in Photoshop geöffnet, dann "Save for Web and Devices" gewählt und die gewünschte Pixelgrösse eingegeben. Das Bild wurde zwar auf die gewünschte Pixelgrösse verkleinert, aber die dpi scheinen sich auch reduziert zu haben. Wenn ich das Bild vergrössere, ist es pixelig wie zuvor. Was mache ich falsch?

 

[bodil]

Ignoriere die dpi. Die Pixel zählen. Du hattest im css stehen, Bilder sollten 61 Pixel hoch sein, das kannst du auch beim Erstellen der Bilder einstellen. (Voraussetzung: Nach dem Export aus dem Illustrator haben sind die Bilder noch mindestens so groß.)
Die dpi interessieren nur beim Druck von Grafiken. Browser machen aus jedem Pixel der Grafik einen Bildpunkt auf dem Bildschirm.

 

[ldb]

[FONT=.Helvetica NeueUI]Wenn ich dich richtig verstanden habe, ist es also egal, ob ich ein Bild mit 72 oder 300 dpi verwende? Ich könnte schwören, ich hätte was anderes gelernt, aber es kann auch gut sein, dass ich was falsches in Erinnerung habe...[/FONT][FONT=.Helvetica NeueUI]Mich stört allerdings, dass der Header, der ja ein Bild ist, auf einem iPad mit Retina-Display so pixelig wirkt. Gibt es da keine Möglichkeit (ausser Vektorgrafiken)?[/FONT]
[FONT=.Helvetica NeueUI]
[/FONT]
[FONT=.Helvetica NeueUI]Vielen Dank für die bisherigen Antworten und einen schönen Machmittag! (Schneit es in Deutschland auch?)[/FONT]
[FONT=.Helvetica NeueUI]LDB[/FONT]

 

[Banana_Jones]

[FONT=.Helvetica NeueUI]Mich stört allerdings, dass der Header, der ja ein Bild ist, auf einem iPad mit Retina-Display so pixelig wirkt. Gibt es da keine Möglichkeit (ausser Vektorgrafiken)?[/FONT]
[FONT=.Helvetica NeueUI]LDB[/FONT]

Man hält das Bild 2mal vor, einmal "normal" und einmal doppelt so groß für Retina. Dieses wird dann abhängig vom Device ausgeliefert (Über JS oder CSS). Weitere Informationen

 

[ldb]

Danke für den Link, ich werde das wohl so umsetzen. Ich habe zwar noch einige Fragen, aber dafür mache ich lieber einen neuen Thread auf :)

Danke an alle Helfer, vor Allem an bodil!
LDB