Text innerhalb eines Absatzes rechts _und_ links klebend

[Jeena Paradies]

Hallo ,

Ich habe fast das gleiche Problem wie diese Dame hier:
http://forum.de.selfhtml.org/archiv/2003/10/60032/#m337548

So war das ungefär bei ihr:
-----------------------------------------
<style>
.links {
 float: left;
 text-align: left;
}
.rechts {
 float: right;
 text-align: right;
}
</style>
.....................
<span class="links">linker Text</span>
<span class="rechts">rechter Text</span>
-----------------------------------------

Bei mir kommt noch einiges außenrum (hier in vereinfachter Form):

-----------------------------------------
<table>
 <tr>
  <td>
   <div style="width: 350px;">
    <p>
     <span class="links">linker Text</span>
     <span class="rechts">rechter Text</span>
    </p>
   </div>
  </td>
 </tr>
</table>
-----------------------------------------

Und leider funktioniert die andere Lösung bei mir nicht. Worauf muss ich noch achten? Könnt ihr mir bitte auf die Sprünge helfen?

Beobachten könnt ihr das ganze unter http://www.guweb.com/cgi-bin/guestbook?id=KOORBASH

Da soll einfach das Datum und die Urzeit innerhalb der gleichen Zeile rechts stehen.

Grüße
Jeena Paradies

[Christian Seiler]

Hallo Jeena,

Beobachten könnt ihr das ganze unter http://www.guweb.com/cgi-bin/guestbook?id=KOORBASH

Ähem...

float: wirkt sich nur auf Blockelemente aus.

1. Möglichkeit: Nimm <div> statt <span>
2. Möglichkeit: display: block;

Viele Grüße,
Christian

[Jeena Paradies]

Hallo ,

float: wirkt sich nur auf Blockelemente aus.

Das dachte ich auch immer, bis ich das Posting gelesen habe, und dort schreibt sie ja auch, dass es geklappt hat.

2. Möglichkeit: display: block;

Das habe ich jetzt gemacht aber leider ohne Erfolg. Ich habe mal gelesen dass es Probleme gibt wenn man float innerhalb anderer Blöcke benutzt kann mich aber nicht mehr erinnern warum und weshalb.

Grüße
Jeena Paradies

[Christian Seiler]

Hallo Jeena,

2. Möglichkeit: display: block;
   Das habe ich jetzt gemacht aber leider ohne Erfolg.

Aus Deinem CSS:

| text-align: right;
| float: right:
| display: block;

Fällt Dir in der zweiten Zeile ganz rechts nicht etas auf? ;-)

Ich habe mal gelesen dass es Probleme gibt wenn man float innerhalb anderer Blöcke benutzt

In diesem Fall nicht.

Viele Grüße,
Christian

[frankxberlin]

kurze frage: dort einfach ein tabelle rumzubauen, eine zeile, zwei spalten mit jeder jeweils dem align links und rechts ist vermutlich keine effiziente lösung, oder, weil den html-text um eine tabelle reicher macht, oder?

frank

[Steven]

Hi,

kurze frage: dort einfach ein tabelle rumzubauen, eine zeile, zwei spalten mit jeder jeweils dem align links und rechts ist vermutlich keine effiziente lösung, oder, weil den html-text um eine tabelle reicher macht, oder?

Nur wenn es sich um tabellarische Informationen (z.B. Fußballbundesligatabelle) handelt etc. Sonst wäre das ein Missbrauch von table.

Gruß
Steven

[frankxberlin]

oha, na, für den simpel-htmler taugen sie missbräuchlich auf für anderes; wenn ich bilder und menü und sonstige infos auf der seite verteile, habe ich ja auch keine fußballtabelle. da ja frames out sind, was bleibt denn dann noch? steht denn hier in selfhtml auch was über missbrauch?

frank

[Heiner]

Nimm doch div-Elemente. Die kann man wunderbar formatieren. Ist eh einfacher als Tabellen aufzubauen.

Heiner

[frank berlin]

danke für den tipp; habe mir grade das dicke buch bestellt, damit ich beim lesen nicht och noch in den monitor glotzen muss. erleichtert auch das verständnis, das dann aus der praxis heraus zu extrahieren. habe bisher nur von frontpage abgeguckt und ein bisschen in selfhtml nachgesehen. für einige grundprinzipien vermutlich ganz hilfreich...; ich dachte, weil ich das auch auf jeder internetseite sehe, je größer, desto mehr, dass das alles nur mit tabellen ginge. nun schau ich mal, was div so kann (:-)

dank, frank

[Jeena Paradies]

Hallo ,

kurze frage: dort einfach ein tabelle rumzubauen, eine zeile, zwei spalten mit jeder jeweils dem align links und rechts ist vermutlich keine effiziente lösung, oder, weil den html-text um eine tabelle reicher macht, oder?

So war das ja auch, und gerade bei dieser Seite wäre es eigentlich auch gar nicht so schlimm, aber der Quellcode war dadurch meiner Meinung nach super verkompliziert. Natürlich gilt das bevor der Server von guweb.com sich da drüber macht.

Aber es gibt noch einen anderen Grund warum ich das gefragt habe. Ich habe das schon oft bei xhtml 1.1 strict Dokumenten machen wollen, die dann natürlich auch nicht aus Tabellen bestehen, und nie habe ich gewusst wie ich das bewerkstelligen soll. Deshalb habe ich dann ein anderes Design gemacht, und gut war. Irgendwann muss ich das aber auch lernen. Und jetzt weiß ich das. Jetzt kann ich jedes mal in die Datei gucken und nachschauen wie ich das gemacht habe.

Grüße
Jeena Paradies

[MudGuard]

Hi,

Beobachten könnt ihr das ganze unter http://www.guweb.com/cgi-bin/guestbook?id=KOORBASH
float: wirkt sich nur auf Blockelemente aus.

Wíe kommst Du darauf?

<zitat src="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float">
'float'
    Value:   left | right | none | inherit
    Initial:   none
    Applies to:   all but positioned elements and generated content
</zitat>

Fehlerursache dürfte der Wert

right:
display: block;

für die float-Eigenschaft sein (ein Doppelpunkt ist kein Strichpunkt...)

cu,
Andreas

[Christian Seiler]

Hallo Andreas,

float: wirkt sich nur auf Blockelemente aus.

Wíe kommst Du darauf?

Keine Ahnung, jetzt wo Du es sagst. ;-)

Viele Grüße,
Christian

[Jeena Paradies]

Hallo ,

<zitat src="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float">
'float'
    Value:   left | right | none | inherit
    Initial:   none
    Applies to:   all but positioned elements and generated content
</zitat>

float kapiere ich bis heute überhaupt nicht. :-/

Fehlerursache dürfte der Wert
right:
display: block;

Also ein blöder Tippfehler.

Ich habe das jetzt geändert, aber jetzt ist alles total durcheinander.
http://www.guweb.com/cgi-bin/guestbook?id=KOORBASH

Hm eine blöde Angelegenheit.

Grüße
Jeena Paradies

[Christian Seiler]

Hallo Jeena,

Ich habe das jetzt geändert, aber jetzt ist alles total durcheinander.
http://www.guweb.com/cgi-bin/guestbook?id=KOORBASH

Das darauffolgende Element muss clear: both; haben. (also p.nachricht in Deinem Fall)

Viele Grüße,
Christian

[Jeena Paradies]

Hallo ,

Das darauffolgende Element muss clear: both; haben. (also p.nachricht in Deinem Fall)

Ach ja jetzt funktioniert es auch schon fast perfekt. Nur eine Sache stört noch. Die Hintergrundfarbe von p.name wird nicht übernommen. Aber auch nur die. Wenn ich die helle Hintergrundfarbe für die zwei <span> definiere, dann werden auch nur die so eingefärbt. Ich verstehe nicht warum das p.name nicht eingefärbt wird. Hat da jemand noch irgendeine Idee?

Grüße
Jeena Paradies

[Christian Seiler]

Hallo Jeena,

Ich verstehe nicht warum das p.name nicht eingefärbt wird.

Auch auf Grund des float-Modells.

Hat da jemand noch irgendeine Idee?

<p class="name">
  <span class="links"></span>
  <span class="rechts"></span>
  <br style="clear: both;">
 </p>

Viele Grüße,
Christian

[Jeena Paradies]

Hallo ,

Jetzt funktioniert es endlich genau so wie ich mir das vorgestellt habe. Super vielen Dank für deine Hilfe.

Ich verstehe nicht warum das p.name nicht eingefärbt wird.
Auch auf Grund des float-Modells.

Wie und wo kann ich solche Sachen selbst herausfinden? Hast du eventuell einen Link, wo float für Dumme erklärt wird? Mit der Deffinition vom W3C komme ich wirklich nicht zurecht.

Grüße
Jeena Paradies