Sponsor-Board.de
Antwort schreiben  Thema schreiben 

Element am Rand anzeigen <li>-tag

Verfasser Nachricht

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
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

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
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

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
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

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

15.10.2013 08:36
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

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
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

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
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

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
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Antwort schreiben  Thema schreiben 

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

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

Sponsor-Board.de

Community
Über uns
Partner
Powered by Mybb: Copyright 2002-2024 by MyBB Group - Deutsche-Übersetzung von Mybb.de
 
© 2007-2024 Sponsor-Board.de - Hosted by OVH

Willkommen auf SB!   Sie benötigen ein Sponsoring?   1. Anmelden   2. Sponsoring-Anfrage erstellen   3. Nachrichten von Sponsoren erhalten   Kostenlos!   Jetzt registrieren