1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Text neben Bild per CSS ausrichten

Dieses Thema im Forum "Web-Design" wurde erstellt von kaifreund, 23.05.2005.

  1. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Hallo Forum,
    ich würde gerne rechts neben verschiedene Bilder (die auf klick ein neues Fenster öffnen) *beliebiger* Höhe und Breite einen zweiteiligen Text positionieren.
    Das 'Leckerli' soll sein das Teil 1 des Textes oben bündig zum Bild positioniert werden soll, Teil 2 aber untenbündig, und genau das bekomme ich nicht hin. Da die Bilder verschieden hoch sind möchte ich vermeiden den unten bündigen Text "von Hand" per pixel-Positionierung einbinden zu müssen, idealer Weise sollte der sich immer von allein unten ausrichten. Tja aber wie?

    bisher:
    HTML:
    <div><a name="wasist02a">Das Programm berücksichtigt dabei den analytischen Fehler als unabdingbare Vorraussetzung.</div>
    <div style="float:left;"><a href="../pics/Web_2_0.bmp" target="neu"><img src="../pics/Web_2_0.bmp" width="216" border="0" alt="Likelynet analytischer Fehler"></a></div>
    <div class="details">Ein beliebiger Plot zweier Variablen. Jeder Messpunkt besitzt eine analytische Unschärfe. In der Abbildung werden die Unschärfen aller Messpunkte überlagert. Die Farben stellen eine Art Messwertdichte dar.</div>
    <div class="enlarge">click image to enlarge</div>
    <div class="top"><a href="#top">back to top</a></div>      


    Code:
    img{
    border-right-width:15px;
    border-top-width:4px;
    border-bottom-width:4px;
    border-style:solid;
    border-color:white;
    }
    
    .details{
    text-align: left;
    vertical-align:top;
    font-weight:normal;
    border: solid black 1px;
    }
    
    
    .enlarge, .top{
    font-weight:normal;
    font-style:italic;
    font-size: 10px;
    text-align: left;
    }
    
    .top{
    clear:left;
    padding-bottom:60px;
    }
     
  2. xlqr

    xlqr MacUser Mitglied

    Mitglied seit:
    08.09.2003
    Beiträge:
    1.942
    Zustimmungen:
    15
    versuch doch mal das bild und die zwei texte in ein div zu legen ...

    (evtl. würd ich auch die inneren objekte nicht in divs packen, sondern das bild direkt im <img> stylen und die texte mit einem <p> oder <span>)
     
  3. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Hi xlqr,
    hmmm... warum in ein div? -aber selbst wenn ich das mache, wie bekomme ich dann den Textteil 2 untenbündig 'dynamisch' an der jeweiligen Bildgrösse ausgerichtet?
    Nicht versteh...

    kai
     
  4. xlqr

    xlqr MacUser Mitglied

    Mitglied seit:
    08.09.2003
    Beiträge:
    1.942
    Zustimmungen:
    15
    ich dachte mir das so: die höhe des divs dynamisch am img ausrichten und die position der texte wiederum am div - einer klebt oben, der andere unten ... das müsste schon gehen.

    [ganz einfach wärs natürlich in einer tabelle :D]
     
  5. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    Ich bin zu blöd...
    Wenn ich das Bild und die Texze in ein div einschliesse, wie formatiere ich denn dann die Ausrichtung des 2ten Textes?
    Sorry bin noch ziemlicher Beginner... Ich lege mal ein screenshot anbei- das "click to enlarge" soll unten am bild ausgerichnet sein, auf dem Bild der status Quo...
    Lieben Dank...
     

    Anhänge:

    • click-to-enlarge.jpg
      Dateigröße:
      22,2 KB
      Aufrufe:
      46
  6. msslovi0

    msslovi0 MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Das geht nicht [tm]. Woher soll der div wissen, wie hoch und breit das Bild ist?

    Der Versuch einer Lösung setzt daher den Einsatz einer serverseitigen Scriptsprache voraus, die ausliest, wie groß das Bild ist und den Code entsprechend anpasst. Evtl. geht es auch mit Javascript, aber das bringt alle Nachteile einer clientseitigen Scriptsprache auf den Plan.

    BMP ist BTW kein webfähiges Format. Davon abgesehen sind die Dateien riesengroß, da BMP keinerlei Komprimierung kennt.

    Matt
     
  7. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Mitglied seit:
    30.07.2004
    Beiträge:
    52
    Zustimmungen:
    0
    @ matt

    .bmp ist zu gross schon klar, aber das war auch nur mal schnell hingeklickert -aber danke trotzdem.

    Die vage Hoffnung die ich bezüglich der Ausrichtung hatte war, das es vielleicht möglich sein hätte können mit vertical-align:top Text1 und irgendwie mit vertical-align:bottom Text2 neben das Bild zu bekommen... Aber an dem "irgendwie" bleibe ich wohl hängen...

    gruesse
    kai
     
  8. mirkot.

    mirkot. MacUser Mitglied

    Mitglied seit:
    15.01.2004
    Beiträge:
    84
    Zustimmungen:
    0
    Hast du mal versucht, das Bild, und jeden Text, 1 und 2 (Absatz; p class=oben und p class=unten), in ein einziges div zu packen und dann mit css auszurichten?

    mirkot.