Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 16

Thema: Bilder und Tabellen neben Text

  1. #1
    Youngster
    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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.



    Code:
    <div id="text">
                        <h1> Der Aquazoo</h1><br />
                        <img class="rand" width="150px" height="150px" title="Rand1" alt="Aquazoo Logo" src="bilder/aquazoo_rand1.jpg"/>
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <table border="1" width="150px" cellpadding="3" cellspacing="3" style="float:right;">
                            <tr>
                                <th colspan="2" align="center"> Preise
                            </tr>
                            <tr>
                                <td>Erwachsene</td>
                                <td>6.00&euro;</td>
                            </tr>
                            <tr>
                                <td>Kinder und Jugendliche<br />
                                    (6-18 Jahre)</td>
                                <td>4.00&euro;</td>
                            </tr>
                            <tr>
                                <td>Kinder unter 6 Jahre</td>
                                <td>frei</td>
                            </tr>
                        </table>
                        <p style="margin: 0 165px 0 0;">
                        Der Aquazoo befindet sich im D&uuml;sseldorfer Norden, genauer gesagt im Stadtteil Golzheim. Er ist in den angrenzenden Nordpark eingebettet. [...]
                    </p>
                    <br />
                    </div>
    Code:
    .rand {
    float: right;
    margin-left: 10px;
        }
    Vielen Dank im Voraus, ich hoffe ihr versteht mein Problem und könnt mir helfen.

    MfG Joey
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Bilder und Tabellen neben Text

    Packe das Bild & die Tabelle in den selben Container - diesen Container floatest du dann.
    Vorschlag: am sinnvollsten wäre wohl ein DIV in dem Fall

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    Aber sowohl Text, Bild und Tabelle sind doch in einem Div?

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    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:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Aquazoo</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #wrapper {
    width: 900px;
    margin: 0 auto;
    }
    
    #rechts {
    float: right;
    width: 150px;
    margin-top: 60px;
        }
    
    #content {
    margin-right: 180px;
    }
    </style>
    </head>
    <body>
     <div id="wrapper"><!--zentriert die Seite-->
    <div id="rechts">
    
                        <img width="150px" height="150px" title="Rand1" alt="Aquazoo Logo" src="bilder/aquazoo_rand1.jpg"/>
             
                        <table border="1" width="150px" cellpadding="3" cellspacing="3" style="float:right;">
                            <tr>
                                <th colspan="2" align="center"> Preise
                            </tr>
                            <tr>
                                <td>Erwachsene</td>
                                <td>6.00&euro;</td>
                            </tr>
                            <tr>
                                <td>Kinder und Jugendliche<br />
                                    (6-18 Jahre)</td>
                                <td>4.00&euro;</td>
                            </tr>
                            <tr>
                                <td>Kinder unter 6 Jahre</td>
                                <td>frei</td>
                            </tr>
                        </table>
                    </div><!--Ende #rechts-->
    
    <div id="content">
    <h1> Der Aquazoo</h1>
    <p>
    Der Aquazoo befindet sich im D&uuml;sseldorfer Norden, genauer gesagt im Stadtteil Golzheim. Er ist in den angrenzenden Nordpark eingebettet. [...]
    </p>
    </div><!--Ende #content-->
    </div><!--Ende #wrapper-->
    </body>
    </html>

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    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

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    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:



    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

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    Hallo,

    ich habe eine Tabelle in einem <div> drin.
    Das <div> ist gewollt größer als die Tabelle. Wie bekomme ich jetzt die gesamte Tabelle, nicht nur den Tabelleninhalt, zentriert in dem <div> dargestellt?



    Bitte hilft mir,
    danke im Voraus

  8. #8
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Bilder und Tabellen neben Text

    <table style="marign: auto;">

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    Vielen Dank

    MfG Joey

  10. #10
    Youngster
    Themenstarter

    Registriert seit
    23.03.2010
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder und Tabellen neben Text

    Edit: Problem selbst gelöst
    Geändert von Joey (31.03.2010 um 18:45 Uhr)

Ähnliche Themen

  1. Text neben Bild
    Von SteveO! im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 23.06.2009, 19:14
  2. Bilder neben Div
    Von Krusty im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 05.10.2008, 09:53
  3. tabelle neben den text
    Von Micha34343 im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 02.01.2007, 05:13
  4. Neben Tabellen schreiben, aber wie denn?
    Von Go im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.05.2006, 14:32
  5. Text neben Bild
    Von WHN im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 07.04.2005, 22:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •