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
    Mitglied 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.942
    Zustimmungen:
    15
    Mitglied 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
    Mitglied 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.942
    Zustimmungen:
    15
    Mitglied 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
    Mitglied 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.714
    Zustimmungen:
    115
    Mitglied seit:
    20.03.2005
    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
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  7. kaifreund

    kaifreund Thread Starter MacUser Mitglied

    Beiträge:
    52
    Zustimmungen:
    0
    Mitglied 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
    Mitglied 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...

Diese Seite empfehlen