Sponsor-Board.de

Moin moin allerseits,

ich habe ein kleines Problem und zwar möchte ich einen Button genau unten rechts in der Ecke eines <li>-tags anzeigen lassen.

Mein Versuch war mit position zu arbeiten, leider ist da das Problem das bei unterschiedlichen Auflösungen andere Ergebnisse zustande kommen.

Code:

<a class="link-button button-blue" style="position: absolute; top: 300px; right: 50px;" href="#">Mehr anzeigen</a>

Habe schon gegooglet aber leider nichts passendes gefunden.

Probier mal mit text-align:right und vertical-align:baseline (oder text-bottom)

Leider auch nicht.. hier mal ein Bild zum besseren Verständnis oben Dennis' Variante unten die oben erwähnte mit position (so sollte es aussehen).

http://101.imagebam.com/download/dxKK_FphHduYEJ058YgH1w/28189/281882966/litag.png(!https)

in dem fall würde ich, da der text drüber sicherlich ein div o.ä. ist, dem text-container eine relative größe wie min-height Redface

0% geben, dann kannst du dich damit rantasten, dann ist der button auf jeden fall immer unten

Ich schreibe jetzt mal meinen gesamten Code hier rein, verstehe nicht so ganz was du meinst Biggrin

CSS Datei:

Code:

div.ref {

margin: 20px;

}

ul.ref {

  list-style-type: none;

  width: 100%;

}

ul.ref a {

display: block;

color: #000;

}

ul.ref a:hover {

}

li.ref {

  padding: 10px;

  overflow: auto;

}

li.ref img {

  float: left;

  margin: 0 15px 0 0;

}

li.ref p {

  font: 500 12px/1.5;

}

h3.ref {

    font-size: 20px;

    text-transform: uppercase;

    font-weight: normal;

    font-family: Oswald;

    color: #1f7cad;

}

li.ref:hover {

  background: #eee;

  cursor: pointer;

}

Page:

Code:

<div class="ref">

    <ul class="ref">

        <li class="ref" style="height: 200px;"><a class="ref" style="display: block;" href="#"><img src="images/referenzen/Intropage/fenster-tueren.jpg" alt="" width="200px" height="200px" /></a>

            <h3 class="ref">Aluminium Fenster und Türen</h3>

            <p class="ref">Hohe Ansprüche? Diese werden mit unseren Aluminium Fenstern und Türen gedeckt. Hohe Stabilität und Langlebigkeit. Aluminium ermöglicht Elemente in großen Dimensionen für große Fensterfronten. Natürlich mit optimaler Wärmedämmung. Aluminium ist ein Baustoff der Zukunft und könnte schon bald Ihren Räumen viel Licht schenken.<a class="link-button button-blue" style="text-align: right; vertical-align: text-bottom;" href="#">Mehr anzeigen</a>

            </p>

        </li>

        <li class="ref" style="height: 200px;"><a class="ref" style="display: block;" href="#"><img src="images/referenzen/Intropage/wintergrten_thumb.jpg" alt="" /></a>

            <h3 class="ref">Wintergärten</h3>

            <p class="ref">Mit einem Wintergarten erfüllen Sie sich Ihren Traum nach mehr Behaglichkeit, nach mehr Licht und noch mehr Wohnkomfort. So ist ein Wintergarten nicht nur als bloße Wohnraumerweiterung zu verstehen, sondern auch als wichtiges Instrument zur Förderung von Gesundheit und Wohlbefinden.<a class="link-button button-blue" style="position: absolute; top: 520px; right: 50px;" href="#">Mehr anzeigen</a>

            </p>

        </li>

        <li class="ref" style="height: 200px;"><img src="images/referenzen/Intropage/berdachungen_thumb.jpg" alt="" />

            <h3 class="ref">Überdachungen</h3>

            <p class="ref">Lorem ipsum dolor sit amet...</p>

        </li>

        <li class="ref"><img src="http://lorempixum.com/100/100/nature/4" alt="" />

            <h3 class="ref">Headline</h3>

            <p class="ref">Lorem ipsum dolor sit amet...</p>

        </li>

    </ul>

</div>

Code:

li.ref { padding: 10px; overflow: auto; position: relative; }

li.ref p a { position: absolute; bottom: 0px; right: 50px }

Nimm bitte das als Ausgangbasis und berichte nachvollziehbar, was es damit für Probleme gibt.

simon_s schrieb:

Code:

li.ref { padding: 10px; overflow: auto; position: relative; }

li.ref p a { position: absolute; bottom: 0px; right: 50px }

Nimm bitte das als Ausgangbasis und berichte nachvollziehbar, was es damit für Probleme gibt.

Wow super, vielen vielen Dank! Smile

caN1337

Dennis

caN1337

Dennis

caN1337

sic_

caN1337