Text neben Bild per CSS ausrichten

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

  1. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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

    Beiträge:
    1.943
    Zustimmungen:
    15
    MacUser seit:
    08.09.2003
    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>)
     
    Zuletzt bearbeitet: 23.05.2005
  3. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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

    Beiträge:
    1.943
    Zustimmungen:
    15
    MacUser seit:
    08.09.2003
    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

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    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:

  6. msslovi0

    msslovi0 MacUser Mitglied

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

    [DLMURL="http://www.blogpotato.de/demo/zweizeilig.html"]Der Versuch einer Lösung[/DLMURL] 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
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  7. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    MacUser seit:
    30.07.2004
    @ 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

    Beiträge:
    84
    Zustimmungen:
    0
    MacUser seit:
    15.01.2004
    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.
     
Die Seite wird geladen...
Ähnliche Themen - Text neben Bild
  1. Triggertrix
    Antworten:
    3
    Aufrufe:
    544
    Triggertrix
    19.08.2012
  2. K2vp
    Antworten:
    3
    Aufrufe:
    976
    K2vp
    09.07.2012
  3. hightime-fan
    Antworten:
    3
    Aufrufe:
    1.042
    hightime-fan
    26.03.2012
  4. Shrike
    Antworten:
    1
    Aufrufe:
    883
    Shrike
    04.07.2011
  5. McFreaq
    Antworten:
    2
    Aufrufe:
    499
    McFreaq
    25.02.2009