Unterkante zweier Bilder auf gleicher Höhe

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Unterkante zweier Bilder auf gleicher Höhe

    Also, wenn ich zwei Bilder habe, eines ist 50 Pixel hoch und das andere ist 250 Pixel hoch und ich will die nebeneinander in einem Div haben, Unterkante auf gleicher Höhe, dann fang ich so an:
    Code:
    <div style="text-align:right;">
<img src="" style="height:250px;">
<img src="" style="height:50px; float:left;">
</div>
    Dann ist aber das kleine Bild oben, aber ich hätte das gerne an der Unterseite des DIVs.
    Das ganze sollte XHTML 1.0 - Strict valid sein und position:absolute ist nicht möglich, weil er mir dann den Rest des Layouts zerschießt hat da wer ne andere Lösung?

    Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!
    bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
    Wie man Fragen richtig stellt
    Stichworte: -
  • #2
    ich denke da ist
    PHP-Code:
    vertical-align: bottom; 
    zuständig ...
    [COLOR=royalblue]Ein großes DANKE an alle, die sich auf selbstlose Weise im Forum einbringen.[/COLOR]

    [COLOR=silver]btw: REAL PROGRAMMERs aren't afraid to use GOTOs![/COLOR]

    [color=indigo]Etwas ernster, aber auch nicht weiter tragisch, sieht die Situation bei Software-Patenten aus. Software-Patente sind eine amerikanische Erfindung und stehen auf dem selben Blatt wie genveränderte Babynahrung, die im Supermarkt nicht mehr als solche gekennzeichnet werden soll, um die Hersteller nicht gegenüber denen natürlicher Produkte zu diskriminieren ...[/color]
    (from here)

    Kommentar

    • #3
      Original geschrieben von Meillo
      ich denke da ist
      PHP-Code:
      vertical-align: bottom; 
      zuständig ...
      und auf welches Tag? Eigentlich hatte ich das nämlich auch überall ausprobiert

      Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!
      bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
      Wie man Fragen richtig stellt

      Kommentar

      • #4
        ob wirklich "vertical-align: bottom;" oder evtl. eher "bottom: 0;" angebracht sind bin ich mir jetzt auch nicht so sicher ... jedenfalls findest du unter http://www.css4you.de die benötigten Infos
        ... und dann heißt es eben ausprobieren

        Tipp: mach die 2 Pics in einen Div-Container.
        [COLOR=royalblue]Ein großes DANKE an alle, die sich auf selbstlose Weise im Forum einbringen.[/COLOR]

        [COLOR=silver]btw: REAL PROGRAMMERs aren't afraid to use GOTOs![/COLOR]

        [color=indigo]Etwas ernster, aber auch nicht weiter tragisch, sieht die Situation bei Software-Patenten aus. Software-Patente sind eine amerikanische Erfindung und stehen auf dem selben Blatt wie genveränderte Babynahrung, die im Supermarkt nicht mehr als solche gekennzeichnet werden soll, um die Hersteller nicht gegenüber denen natürlicher Produkte zu diskriminieren ...[/color]
        (from here)

        Kommentar

        • #5
          Container &amp; Co

          Nachdem du die Bilder ja anhand von dem DIV ausrichtest und er sozusagen der Container ist musst du es folgendermaßen einrichten

          Code:
          <div style="vertical-align:bottom;"> ....(Bilder).... </div>
          Achja sowas findest du auf SELFHTML auch!

          Ciao HoRaZ
          Es ist unmöglich alles zu wissen,

          Kommentar

          • #6
            Re: Container &amp; Co

            ich kenn css4you schon fast auswendig, ich hab da gestern eine Stunde nach ner Lösung gesucht -.-


            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </head>

  <body>
    <div style="vertical-align:bottom;">
	<img src="2.jpg" style="float:right;" /> <!-- das große -->
	<img src="1.jpg" />
    </div>
  </body>
</html>
            so funktioniert es jedenfalls nicht

            Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!
            bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
            Wie man Fragen richtig stellt

            Kommentar

            • #7
              Hi,

              vertical-align geht nicht, siehe auch http://www.css4you.de/vertical-align.html

              display: table-cell; versteht allerdings der IE nicht !

              Das bottom: 0 würde auch nur bei einer Positionierung (absolute, relative, fixed) funktionieren. Ich würde die Bilder relativ positionieren und es dann mit bottom: 0; versuchen.

              Gruß Uwe

              Kommentar

              • #8
                Original geschrieben von uspri
                Ich würde die Bilder relativ positionieren und es dann mit bottom: 0; versuchen.
                ack!
                [COLOR=royalblue]Ein großes DANKE an alle, die sich auf selbstlose Weise im Forum einbringen.[/COLOR]

                [COLOR=silver]btw: REAL PROGRAMMERs aren't afraid to use GOTOs![/COLOR]

                [color=indigo]Etwas ernster, aber auch nicht weiter tragisch, sieht die Situation bei Software-Patenten aus. Software-Patente sind eine amerikanische Erfindung und stehen auf dem selben Blatt wie genveränderte Babynahrung, die im Supermarkt nicht mehr als solche gekennzeichnet werden soll, um die Hersteller nicht gegenüber denen natürlicher Produkte zu diskriminieren ...[/color]
                (from here)

                Kommentar

                Vorherige template Weiter
                Lädt...
                X