Element am Rand anzeigen <li>-tag

Verfasser Nachricht

caN1337

Beiträge: 208
Bewertung: 6
Registriert seit: Apr 2013
Status: offline

Beitrag: #1

Element am Rand anzeigen <li>-tag

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.

[Link: Registrierung erforderlich]

15.10.2013 06:54

Diese Nachricht in einer Antwort zitieren

Dennis

Beiträge: 1.306
Bewertung: 6
Registriert seit: May 2009
Status: offline

Beitrag: #2

RE: Element am Rand anzeigen <li>-tag

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

15.10.2013 07:21

caN1337

Beiträge: 208
Bewertung: 6
Registriert seit: Apr 2013
Status: offline

Beitrag: #3

RE: Element am Rand anzeigen <li>-tag

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)

[Link: Registrierung erforderlich]

15.10.2013 08:17

Dennis

Beiträge: 1.306
Bewertung: 6
Registriert seit: May 2009
Status: offline

Beitrag: #4

RE: Element am Rand anzeigen <li>-tag

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

15.10.2013 08:36

caN1337

Beiträge: 208
Bewertung: 6
Registriert seit: Apr 2013
Status: offline

Beitrag: #5

RE: Element am Rand anzeigen <li>-tag

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>

[Link: Registrierung erforderlich]

15.10.2013 08:56

sic_

Beiträge: 677
Bewertung: 0
Registriert seit: Feb 2013
Status: offline

Beitrag: #6

RE: Element am Rand anzeigen <li>-tag

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.

15.10.2013 10:48

caN1337

Beiträge: 208
Bewertung: 6
Registriert seit: Apr 2013
Status: offline

Beitrag: #7

RE: Element am Rand anzeigen <li>-tag

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

[Link: Registrierung erforderlich]

15.10.2013 12:03

Baumstrukturmodus | Brettstrukturmodus

« Ein Thema zurück | Ein Thema vor »

Möglicherweise verwandte Themen...
Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	C# WPF Anwendung Bilder aus Ordner anzeigen	Kempl	3	2.498	24.10.2016 12:58 Letzter Beitrag: avaez
	Sinusbot Playlist öffentlich anzeigen?	DJ_Drio	3	2.131	05.06.2016 07:52 Letzter Beitrag: lasercrafter
	Google Analytics Statistiken im Externen ACP anzeigen	IaMmE	6	1.568	20.08.2012 13:36 Letzter Beitrag: Aaron
	Aktuellen Status anzeigen.	Mave1993	2	1.455	27.02.2012 15:26 Letzter Beitrag: Voice-Sponsor
	Text verzögert anzeigen	MrSanYo	2	1.247	29.01.2012 17:27 Letzter Beitrag: ccoding

Druckversion anzeigen
Thema einem Freund senden
Thema abonnieren
Thema zu den Favoriten hinzufügen