Thema: Text mit CSS in einer Zeile

[bitmaster]

Hi,

ich stelle meine Webseite zurzeit auf CSS um. Ich möchte einen Text links stehen haben und einen rechts. Die beiden Texte sollen aber auf gleicher höhe sein. Somit funktioniert mein Code nicht, da die Texte hiermit nicht auf gleicher Höhe sind:

Code: [Auswählen]

<div style="text-align:left">hallo0</div>

<div style="text-align:right">hallo</div>
Ich würde gerne wissen wie der Code aussieht, mit dem die Texte auf gleicher höhe sind.

vielen dank!!!

[MNemo]

z.B. so

Code: [Auswählen]

<div style="float:right">hallo</div>
<div>hallo0</div>
edit:
http://www.css4you.de/

[Termite]

Hallo,

hab mich mit html nie intensiev auseinander gesetzt.

aber soweit ich das in errinerung hab gibst du nur den style für den inhalt an.

du kanst aber auch das div durch die gegend schieben wie du lustig bist.

sagt dir http://de.selfhtml.org/ etwas? schau mal dort unter CSS dort sollte sicher die lösung auf dein problem zu finden sein.

gruss

[bitmaster]

So, vielen dank!

@MNemo: Aber was mache ich, wenn ich z.B. 4 Objekte habe, die alle nebeneinander stehen sollen mit einem gewissen Abstand?

Dazu mache ich zurzeit das hier:

Code: [Auswählen]

<div style="position:absolute; top:0; left:0;">hallo0</div>

<div style="position:absolute; top:0; left:50;">hallo1</div>

<div style="position:absolute; top:0; left:100;">hallo1</div>

<div style="position:absolute; top:0; left:150;">hallo1</div>
Aber ich möchte keine absoluten Werte angeben. Kann ich nicht irgendwie nur den Abstand angeben? Wenn ich relative nehme, dann stimmt die Höhe ja nicht mehr.

vielen dank!!!

[bitmaster]

So ich habs nun herausgefunden:

Code: [Auswählen]

<div style="float:left; margin-left:0px;">hallo0</div>

<div style="float:left; margin-left:10px;">hallo1</div>

<div style="float:left; margin-left:10px;">hallo1</div>

<div style="float:left; margin-left:10px;">hallo1</div>nochmals vielen dank!

[MNemo]

Wenn du auf 'div' verzichtest(nur für IE6/7) und stat dessen 'span' oder so ähnlich nimmst kannst du auch damit arbeiten

Code: [Auswählen]

display:inline-block;
display:-moz-inline-box;  /*für Firefox 2.x  */
width: 50px;
http://www.quirksmode.org/css/display.html#inlineblock


getestet unter FF2.0.0.14, Safari 3.1.1, IE7

[bitmaster]

Wie div ist nur für den IE? Das funktioniert aber auch auf Firefox. Das habe ich selber getestet (2.0.0.14). Oder verstehe ich dich falsch?

Der Mozilla erwartet ein -moz vor dem inline-block Befehl? Wenn das wirklich so ist, dann ist das aber echte Scheiße. Sry aber über MS und den IE wird so oft geschimpft. Aber wenn der Foirefox dann tatsächlich eigene Befehle erwartet, dann ist das echt zum Kotzen. Dann sieht das Ganze bald so aus:

display:inline-block /* für vernünftige Browser */
display:-moz-inline-block /*damit auch der Firefox den Befehl versteht */
display:-ie-inline-block /* damit auch der IE den Befehl versteht */
display:-opera-inline-block /* damit auch der Opera den Befehl versteht */

Das kann doch wohl nicht sein. Können die sich nicht an Standards halten? Dann können sie gleich für ihren eigenen Browser ne eigene Sprache schreiben. Echt zum Kotzen.

Nun zu meinem nächsten Problem:

Wenn ich jetzt anstatt Text ein Bild verwende und die Monitorauflösung zu klein ist, dann kann man nicht nach rechts scrollen sondern das Bild wird eine Etage tiefer angezeigt. Wie kann man das verhindern?

vielen dank!!

[bitmaster]

Ich habe jetzt die Sachen mit <div style="float:left; width:2000px"> ... </div> umgeben. Jetzt erfolgt wie gewünscht kein Zeilenumbruch mehr. Aber nun lässt sich das Fenster 2000 Pixelbreit nach rechts/links scrollen. Kann man das verhindern? Also kann man dafür sorgen, dass kein Zeilenumbruch erfolgt ohne einen festen Wert für width angeben zu müssen?

vielen dank

EDIT: Nachdem was google ausspuckt scheint es kein dynamisch wachsendes div zu geben. Dann muss ich wohl wieder zu den Tabellen zurück.

[MNemo]

Wie div ist nur für den IE? Das funktioniert aber auch auf Firefox. Das habe ich selber getestet (2.0.0.14). Oder verstehe ich dich falsch?

das verstehst du falsch. Da IE6/7 den standard nicht richtig/vollständig umsetzt funzt "inline-block" nicht mit 'div'

Der Mozilla erwartet ein -moz vor dem inline-block Befehl? Wenn das wirklich so ist, dann ist das aber echte Scheiße. Sry aber über MS und den IE wird so oft geschimpft. Aber wenn der Foirefox dann tatsächlich eigene Befehle erwartet, dann ist das echt zum Kotzen.

Mozilla unterstützt den inline-block befehl gar nicht. nur einen ähnlichen befehl(vermutlich noch aus zeiten befor inline-block Standard war) -moz-inline-box. Und IE hat übrigens auch seine eigenen Befehle, die zu keinem offiziellen Standard gehören; nur sind diese im Gegensatz zu denen von Mozilla nicht gesonderd gekennzeichnet.

Das kann doch wohl nicht sein. Können die sich nicht an Standards halten? Dann können sie gleich für ihren eigenen Browser ne eigene Sprache schreiben. Echt zum Kotzen.

Das sehe ich ganz genauso. Wesshalb ich auch keinen IE benutze der Standards meist falsch oder garnicht implementiert. Siehe Acid2-Test

Nun zu meinem nächsten Problem:

Wenn ich jetzt anstatt Text ein Bild verwende und die Monitorauflösung zu klein ist, dann kann man nicht nach rechts scrollen sondern das Bild wird eine Etage tiefer angezeigt. Wie kann man das verhindern?

vielen dank!!

Hilft da ein &nbsp;

[bitmaster]

das verstehst du falsch. Da IE6/7 den standard nicht richtig/vollständig umsetzt funzt "inline-block" nicht mit 'div'

OK, sry.

Mozilla unterstützt den inline-block befehl gar nicht. nur einen ähnlichen befehl(vermutlich noch aus zeiten befor inline-block Standard war) -moz-inline-box. Und IE hat übrigens auch seine eigenen Befehle, die zu keinem offiziellen Standard gehören; nur sind diese im Gegensatz zu denen von Mozilla nicht gesonderd gekennzeichnet.

Eben, nur dann sollten sie weniger auf den IE schimpfen sondern es einfach mal besser machen (OK einfach wahrscheinlich nicht).

Das sehe ich ganz genauso. Wesshalb ich auch keinen IE benutze der Standards meist falsch oder garnicht implementiert. Siehe Acid2-Test

Jo, ich glaube nur Opera unterstützt den vollständig (oder keiner, kA mehr genau).

Hilft da ein &nbsp;

schön wärs

bitmaster

[FreakyPenguin]

Eben, nur dann sollten sie weniger auf den IE schimpfen sondern es einfach mal besser machen (OK einfach wahrscheinlich nicht).

Dir ist aber schon bewusst, dass inline-block zu css 2.1 gehört, das vom w3c noch nicht offiziell freigegeben wurde? Und soweit ich weiss, wird inline-block in FF3 unterstützt. Ah und nochwas: http://www.webdevout.net/browser-support

Jo, ich glaube nur Opera unterstützt den vollständig (oder keiner, kA mehr genau).

Also in konqueror (KHTML) sehe ich da eigentlich keine Fehler, und mit FF3 sieht er auch gut aus.

[bitmaster]

@FreakyPenguin: OK, wie gesagt das wusste ich nicht.