Bilder und Tabellen neben Text

  • Hallo Leute,
    ich muss für die Uni eine Seite in XHTML+CSS basteln.
    Im Moment stehe ich vor einem kleinen Problem.

    Ich habe einem Text Rechtsabstand zugewiesen, damit ich rechts von dem Text (aber im selben div) kleine Bilder und Tabellen einfügen kann.

    Mit float: right; habe ich es immerhin geschafft ein Bild neben dem Text zu positionieren. Will ich aber nun eine Tabelle unterhalb des Bildes einfügen (was ich bis jetzt auch nur mit provisorischem Massen-<br /> geschafft habe) rutscht der Text auf die Höhe der neuen Tabelle. Ich nehme an, weil der gesamte Text in einem <p> drin liegt? Gibt es eine Möglichkeit den Text in einem <p> zu lassen und die Bilder und Tabellen ordentlich rechts neben dem Text und untereinander (ohne <br />) zu positionieren?

    Als Veranschaulichung hier ein Bild und der entsprechende Quelltext.

    [Blockierte Grafik: http://img413.imageshack.us/img413/4226/blaj.jpg]

    Code
    .rand {
    float: right;
    margin-left: 10px;
        }

    Vielen Dank im Voraus, ich hoffe ihr versteht mein Problem und könnt mir helfen.

    MfG Joey

  • Du brauchst zwei getrennte Spalten/Divs, in die die jeweiligen Inhalte reinkommen. Eine davon floatest du.
    Habe dir mal auf die Schnelle was gebastelt, zusätzlich noch mit einem zentrierenden #wrapper:

  • Es tut mir Leid, dass ich mich erst jetzt bedanke, aber ich hatte sehr sehr viel zu tun.

    Es scheint zu funktionieren und ich danke dir vielmals sejuma.

    Wenn ich auf weitere Probleme stoße, kann ich die dann hier stellen oder soll ich jedesmal ein neues Thema öffnen?

    Mfg Joey

  • Ich habe eine weitere Frage. Es geht immernoch um den Text der links ist und rechts davon Bilder die neben dem Text stehen sollen.

    Dank sejuma funktioniert jetzt alles soweit. Ein kleines Problem bzw. wahrscheinlich nur ein kleiner Denkfehler besteht aber weiterhin. Seht euch erstmal das Bild an:

    [Blockierte Grafik: http://img180.imageshack.us/img180/9822/blau.jpg]

    Wie euch vielleicht auffällt ist bei den beiden Bildern die untereinander stehen ein größerer Abstand als z.B dem Bild und der Tabelle. Grund dafür ist, dass ich jedem Element in #rand margin-bottom: 15px; zugewiesen habe. Damit allerdings zwei Bilder untereinander stehen muss ich immer jeweils ein <br /> dazwischen knallen. Ansonsten rutschen sie nebeneinander.
    Bei Tabellen ist das nicht der Fall.

    Lange Rede kurzer Sinn:
    Gibt es eine Möglichkeit die beiden Bilder untereinander darstellen zu lassen ohne mit <br /> zu arbeiten.

    Oder

    Gibt es sowas wie Ausnahmen in CSS?
    Sowas in der Art wie:

    #rand * -br {
    margin-bottom: 15px;
    }

    Vielen Dank im Voraus

  • style="text-align: center;" dem Div geben wo sich das Bild befindet ist Valide. <img> ist ein Inline Element, deshalb greift da auch die Zentrierung.

    Mit der Methode andere Sachen zu zentrieren ist nur humbug.

  • Wieso meckert der W3C Validator bei meiner Imagemap an der Stelle:
    <map name="Landkarte">?

    Er gibt folgende Fehlermeldung aus:
    "The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. "

    Hier der ganze Code

  • EDIT: Ich hab die ganze Zeit gearbeitet und nur ab und zu auf F5 gedrückt. Somit gar nicht gesehen, dass es eine 2. Seite gibt und du mir geantwortet hast :) Nicht dass du denkst ich würde deine Hilfe nicht schätzen und mich nicht bedanken ;) Danke

    Wieso meckert der W3C Validator bei meiner Imagemap an der Stelle:
    <map name="Landkarte">?

    Er gibt folgende Fehlermeldung aus:
    "The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. "

    Hier der ganze Code

  • Die Funktion der Image-Map bleibt leider nur erhalten, solange da name="bla" steht. Naja ein Fehler auf der gesamten Seite wir schon nicht so schlimm sein.

    Viel Dank an euch beide für eure Hilfe :)