Sponsor-Board.de
Element am Rand anzeigen <li>-tag

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: Element am Rand anzeigen <li>-tag (/showthread.php?tid=42920)

Element am Rand anzeigen <li>-tag - caN1337 - 15.10.2013 06:54

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.

RE: Element am Rand anzeigen <li>-tag - Dennis - 15.10.2013 07:21

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

RE: Element am Rand anzeigen <li>-tag - caN1337 - 15.10.2013 08:17

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)

RE: Element am Rand anzeigen <li>-tag - Dennis - 15.10.2013 08:36

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-heightRedface0% geben, dann kannst du dich damit rantasten, dann ist der button auf jeden fall immer unten

RE: Element am Rand anzeigen <li>-tag - caN1337 - 15.10.2013 08:56

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>



RE: Element am Rand anzeigen <li>-tag - sic_ - 15.10.2013 10:48

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.

RE: Element am Rand anzeigen <li>-tag - caN1337 - 15.10.2013 12:03

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