73%
22%
19%
11%
6%
Mittwoch, 24. August 2005, 19:26
Text vertikal ausrichten
Hallo! Ich habe ein kleines Problem bei der vertikalen Ausrichtung von Text bzw genauer gesagt einer Überschrift.
Also ich möchte die Überschrift <h1> neben dem linken Bild <img> haben - und zwar horizontal nach rechts ausgerichtet und vertikal nach unten (bottom) ausgerichtet - bei meinem Code passiert jedoch nichts. Was mache ich falsch? Bzw ist das überhaupt möglich? Könnte es am "float:left" des Bildes liegen?!?!
Habe zur Veranschaulichung noch ein Bild angehängt. Danke schon mal für die Antworten!
|
Quellcode |
1 2 3 4 5 6 7 8 |
<html> <body> <div style="width:760;height:40px;border:1px solid #000000;"> <img src="" style="width:200px;height:40px;float:left" alt="bild"> <h1 style="font-size:10pt;font-weight:bold;color:#000000;margin:0px;text-align:right;vertical-align:bottom">überschrift</h1> </div> </body> </html> |
Also ich möchte die Überschrift <h1> neben dem linken Bild <img> haben - und zwar horizontal nach rechts ausgerichtet und vertikal nach unten (bottom) ausgerichtet - bei meinem Code passiert jedoch nichts. Was mache ich falsch? Bzw ist das überhaupt möglich? Könnte es am "float:left" des Bildes liegen?!?!
Habe zur Veranschaulichung noch ein Bild angehängt. Danke schon mal für die Antworten!
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Dr. z0idb3rg« (24. August 2005, 19:29)
Mittwoch, 24. August 2005, 19:41
also ich würd das so lösen:
bild rein klatschen inne tabelle mit zwei zellen neben einnander und dann einfach den link/text in die andere zelle und mit an die richtige stelle befördern
man aknns zwar besser lösen aber ich weis nich wie
bild rein klatschen inne tabelle mit zwei zellen neben einnander und dann einfach den link/text in die andere zelle und mit an die richtige stelle befördern
man aknns zwar besser lösen aber ich weis nich wie
www.SchalkerTreff.de neu ! Kostenlos S04-Bilder-Hochladen und tolle Preise sichern !
Mittwoch, 24. August 2005, 19:50
Zitat
Original von pX*Marcel
also ich würd das so lösen:
bild rein klatschen inne tabelle mit zwei zellen neben einnander und dann einfach den link/text in die andere zelle und mit an die richtige stelle befördern
man aknns zwar besser lösen aber ich weis nich wie
Hmm mit Tabellen sowieso nicht und selbst da könnte man es besser anstellen
Trotzdem danke 
Weitere Vorschläge?
Mittwoch, 24. August 2005, 21:17
Einen Vorschlag habe ich schon
Im Moment richtest du den Text innerhalb von h1 unten aus. h1 dürfte aber nur Texthöhe haben. und h1 wird zuoberst augerichtet.
Das heisst: entweder vertical-align in <div> reinschreibe, oder h1 einen Höhe zuweisen.
Ausprobiert habe ich keins von beidem, das fällt mir aber spontan dazu ein, ich hoffe es hilft
mfg Gimli
EDIT: Sry, ich liege falsch...
vertical-aligne sollte ich am Eltern-Element ausrichten....
versuch mal <p> anstatt <div> zu nehmen, oder keine Höhe festzulegen.
Ansonsten vielleicht mal text-bottom anstelle von bottom versuchen. Wenn das alles nix hilft weiss ich nicht weiter..
(Link: http://css4you.de/example/vertical-align.html )
Im Moment richtest du den Text innerhalb von h1 unten aus. h1 dürfte aber nur Texthöhe haben. und h1 wird zuoberst augerichtet.
Das heisst: entweder vertical-align in <div> reinschreibe, oder h1 einen Höhe zuweisen.
Ausprobiert habe ich keins von beidem, das fällt mir aber spontan dazu ein, ich hoffe es hilft
mfg Gimli
EDIT: Sry, ich liege falsch...
vertical-aligne sollte ich am Eltern-Element ausrichten....
versuch mal <p> anstatt <div> zu nehmen, oder keine Höhe festzulegen.
Ansonsten vielleicht mal text-bottom anstelle von bottom versuchen. Wenn das alles nix hilft weiss ich nicht weiter..
(Link: http://css4you.de/example/vertical-align.html )
"Linux is evolution, not intelligent design." - Linus Torvalds
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Gimli« (24. August 2005, 21:22)
Donnerstag, 25. August 2005, 16:48
Original von Gimli
vertical-aligne sollte ich am Eltern-Element ausrichten....
versuch mal <p> anstatt <div> zu nehmen, oder keine Höhe festzulegen.
Ansonsten vielleicht mal text-bottom anstelle von bottom versuchen. Wenn das alles nix hilft weiss ich nicht weiter..
(Link: http://css4you.de/example/vertical-align.html )
Huhu! Bringt leider alles nicht die gewünschte Änderung
und ich lerne (bzw versuche es zumindest) zur Zeit fleissig css auf css4you.de ![:]](../wcf/images/smilies/pleased.gif)
Danke für die Vorschläge ... sonst noch any suggestions?
PS: Weiß jemand wo gaby is?
Freitag, 26. August 2005, 16:02
Original von Dr. z0idb3rg
Danke für die Vorschläge ... sonst noch any suggestions?
PS: Weiß jemand wo gaby is?
Sie ist bei www.selfhtml.de.
Ich habe sie mal gefragt, warum sie nicht hierbleibt.
Es gefällt ihr nicht, daß man hier keine Postings verlinken kann, die man durch die Suche findet. Und immer alles neu schreiben hatte sie keine Lust. :-(
LG
Netinja
Freitag, 26. August 2005, 16:56
Original von netinja
Es gefällt ihr nicht, daß man hier keine Postings verlinken kann, die man durch die Suche findet. Und immer alles neu schreiben hatte sie keine Lust. :-(
Dann sage ihr mal bitte sie soll zurück kommen und dann sage ich ihr wie man die Beiträge die man so findet auch verlinken kann, einfach den gefundenen Link aufrufen udn den dann verlinkne das geht, einfach den gefundenen link kopieren geht nicht.
Gruß
Seven
Bevor du hier Fragen stellst, lese alle Dokumentationen und klicke die folgenden Links um mehr zu erfahren
WMW Forensuche,
WMW F.A.Q. und/oder
Allgemeine suche
WMW Forensuche,
WMW F.A.Q. und/oder
Allgemeine suche
Dienstag, 30. August 2005, 09:46
Original von gaby*
Original von Dr. z0idb3rg
PS: Weiß jemand wo gaby is?
*bg* *bg*
Hast du dein Problem mittlerweile gelöst?
Wenn ja - wie?
Grüße
gaby
Hehe die Rettung naht
Da ich mich vorerst mit etwas anderem befasst hatte, habe ich immer noch keine Lösung zu dem Problem. Als nächstes hätte ich dann wohl versucht die Grafik im "Header" auf 760x40px zu skalieren bzw zu vergrößern, diese dann als Hintergrundbild einzusetzen und den Text dann darüber zu klatschen ... sollte ja wohl zumindest rein theoretisch problemlos klappen ... da jedoch so eine Riesengrafik auch geladen werden möchte wäre ich über Ladezeit-freundlichere Methoden sehr dankbar )BTW: Und aus Interesse würd ich natürlich auch gern wissen, was an meinen Code nicht stimmt
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Dr. z0idb3rg« (30. August 2005, 09:46)
Donnerstag, 1. September 2005, 09:08
Original von Gimli
Ansonsten vielleicht mal text-bottom anstelle von bottom versuchen.
Wenn das alles nix hilft weiss ich nicht weiter..
(Link: http://css4you.de/example/vertical-align.html )
Nachteil hierbei ist, daß man dem span-Element keine Höhe oder Breite geben kann, denn es ist ja ein Inline-Element und kein Block-Element.
Wird es nun so lang, daß es nicht mehr vollständig in die Reihe paßt, wird ein Zeilenumbruch erzeugt, wobei der zweite Teil dann _unter_ das Bild rutscht.
Den Zeilenumbruch kann man zwar durch white-space: nowrap verhindern, aber dann wird eben die ganze Zeile unter das Bild rutschen, wenn der Text in deinem H1-Element zu lang wird.
Das siehst du, wenn du bei obigem Link das Browserfenster einmal zusammenschiebst.
---------------------------------
Für mehrzeiligen Text unten bündig zum Nachbar-Element zu positionieren, nimmt man eine andere Methode:
Ich sag's gleich zu Anfang:
Auch die Methode in meinem bsp-code birgt Probleme beim Verkleinern des Browserfensters. (Überlagerung der Inhalte)
Dabei muß das rechte Element (der Text) in dem gemeinsamen Elternelement (der umschließenden Box, hier 'aussen-box') absolut positionieren werden mit 'bottom: 0px'.
Dies hat aber nur dann eine Wirkung, wenn das Eltern-Element ('hier: 'aussen-box') ebenfalls positioniert ist (egal wie, außer static). Am Besten also
position: relative;
top:0;
left:0;
Auf diese Weise ist die umschließende Box positioniert, obwohl sie im Textfluß immer noch die gleiche Position hat, als wäre sie nicht positioniert.
--------------------------------------------------------
Nun hat aber der IE bei dieser Methode einen scheußlichen Bug. :-((
Schreibt man nun unterhalb der relativ positionierten aussen-box ganz normal weiter, positioniert sich der footer immer am untersten Element in der HTML-Datei, obwohl er eigentlich am unteren Rand der aussen-box bleiben müßte.
Bei diesem Bug war ich nun auch mit meiner Weisheit am Ende und mußte die Profis fragen. *bg*
http://gaby77.ga.funpic.de/web/demos/pos…er-unten-0.html
Grüße
gaby
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »gaby*« (1. September 2005, 09:10)
Donnerstag, 1. September 2005, 11:52
Original von Dr. z0idb3rg
BTW: Und aus Interesse würd ich natürlich auch gern wissen, was an meinen Code nicht stimmt
Hmm, ehrlich gesagt, habe ich mir den erst gar nicht richtig angeschaut.
Ist ein bißchen unübersichtlich geschrieben. (Man muß senkrecht und auch noch waagrecht scrollen)
*wink wink* (auch an die anderen, die Quelltext in solch einer Form in das Code-Fenster posten)
Außerdem ist eine fehlende Doctype-Angabe für mich schon das KO-Kriterium bei einer Quelltextanalyse.
Aber jetzt hast du ja erst mal einige Möglichkeiten aufgezählt bekommen.
Grüße
gaby
Donnerstag, 1. September 2005, 12:01
Original von netinja
Original von Dr. z0idb3rg
PS: Weiß jemand wo gaby is?
Sie ist bei www.selfhtml.de.
Das ham wir gerne:
Erst Fahnenflucht begehen und dann auch noch zur Verräterin werden!
Ist dir unser Forum nicht mehr gut genug, oder warum treibst du dich hier herum?
Na warte nur, wenn du zurückkommst, gibt's erst mal eine Woche Bau.
Grüße
gaby
Freitag, 2. September 2005, 21:14
hi,
mit einer tabelle samt zellen sieht das so aus
dann hast in der linken zelle (jene die 57% hat) mit valign=bottom den text unten.
ohne tabellen, zellen, also text unten beim pic:
<IMG src="xxx.gif" align=baseline border=0>TEXT
... versuch das
mit einer tabelle samt zellen sieht das so aus
|
|
Quellcode |
1 2 3 4 |
<tr>
<td width="57%" valign="bottom"> </td>
<td width="43%"> </td>
</tr>
|
dann hast in der linken zelle (jene die 57% hat) mit valign=bottom den text unten.
ohne tabellen, zellen, also text unten beim pic:
<IMG src="xxx.gif" align=baseline border=0>TEXT
... versuch das
Im Leben gibt man nur Briefe auf, sonst nix!
www.realtype.org
www.realtype.org
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »webmastersworld« (2. September 2005, 21:15)