Autor Thema: Text mit CSS in einer Zeile  (Gelesen 5730 mal)

bitmaster

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« am: 04. June 2008, 16:20 »
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:

<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!!!
In the Future everyone will need OS-64!!!

MNemo

  • Beiträge: 547
    • Profil anzeigen
Gespeichert
« Antwort #1 am: 04. June 2008, 16:39 »
z.B. so
<div style="float:right">hallo</div>
<div>hallo0</div>

edit:
http://www.css4you.de/
« Letzte Änderung: 04. June 2008, 16:53 von MNemo »
„Wichtig ist nicht, besser zu sein als alle anderen. Wichtig ist, besser zu sein als du gestern warst!“

Termite

  • Beiträge: 239
    • Profil anzeigen
Gespeichert
« Antwort #2 am: 04. June 2008, 16:41 »
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

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« Antwort #3 am: 04. June 2008, 17:44 »
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:

<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!!!
In the Future everyone will need OS-64!!!

bitmaster

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« Antwort #4 am: 04. June 2008, 19:31 »
So ich habs nun herausgefunden:

<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!
In the Future everyone will need OS-64!!!

MNemo

  • Beiträge: 547
    • Profil anzeigen
Gespeichert
« Antwort #5 am: 04. June 2008, 19:36 »
Wenn du auf 'div' verzichtest(nur für IE6/7) und stat dessen 'span' oder so ähnlich nimmst kannst du auch damit arbeiten

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



„Wichtig ist nicht, besser zu sein als alle anderen. Wichtig ist, besser zu sein als du gestern warst!“

bitmaster

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« Antwort #6 am: 04. June 2008, 19:49 »
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!!
In the Future everyone will need OS-64!!!

bitmaster

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« Antwort #7 am: 04. June 2008, 21:40 »
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.
« Letzte Änderung: 04. June 2008, 22:17 von bitmaster »
In the Future everyone will need OS-64!!!

MNemo

  • Beiträge: 547
    • Profil anzeigen
Gespeichert
« Antwort #8 am: 04. June 2008, 22:58 »
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.

Zitat
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


Zitat
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;
„Wichtig ist nicht, besser zu sein als alle anderen. Wichtig ist, besser zu sein als du gestern warst!“

bitmaster

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« Antwort #9 am: 04. June 2008, 23:20 »
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
In the Future everyone will need OS-64!!!

FreakyPenguin

  • Administrator
  • Beiträge: 301
    • Profil anzeigen
    • toni.famkaufmann.info
Gespeichert
« Antwort #10 am: 05. June 2008, 07:38 »
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

  • Troll
  • Beiträge: 1 138
    • Profil anzeigen
    • OS-64 = 64 Bit Operating System
Gespeichert
« Antwort #11 am: 05. June 2008, 13:37 »
@FreakyPenguin: OK, wie gesagt das wusste ich nicht.
In the Future everyone will need OS-64!!!

 

Einloggen