Postion von Inhalten in einer Box definieren

modbot

Hallo

Ich habe auf meiner Webiste einzelne Boxen erstellt, in denen unterhalb eines Bildes und 3 Textzeilen (verschieden lange Texte) ein Button ist, der zu einem Link weiterleitet.

Die Texte orientieren sich an dem Text der darüber steht.

Allerdings möchte ich den Button immer an der selben Position im unteren Bereich der Box fixieren.

Könnt ihr mir vielleicht sagen wie das geht?

Hier der Quellcode:

HTML

<style type="text/css">
/*<=!=[=C=D=A=T=A=[*/
    #nrall
    {
        width: 200px;
        height: 205px;
        float: left;
        padding: 15px;
        background-color: none;
        border: 1px solid #aaaaaa;
        display: inline;
        margin: 13px;
    }
    #nrall img
    {
        width: 100%;   
        display: block;
    }
    #nrall h3
    {
        display: block;  
        size: 1.3em;
        margin: 30px 0 15px 0;
        text-align: center;
    }
    #nrall small
    {
        color: #777777;
        size: 0.8em;
        text-align: center;
    }
    #nrall p
    {
        margin: 15px 0;   
        text-align: center;
    }
    #nrall a
    {
        margin: 15px 0;  
        color: #000000;
        background-color: #00dddd;
        padding: 7px 13px;
        display: block;
        text-align: center;
        background-image: url(https://u.jimcdn.com/cms/o/sca80463b5ba18af8/userlayout/img/pdf.png?t=1527333965);
        background-repeat: no-repeat;
        background-position: 10px 50%;

    }
/*]=]=>*/
</style>
<div id="nrall">
    <img src="Bild_Link" />
    <h3>
        Überschrift
    </h3>
    <small>Artikelnummer: Nummer</small>
    <p>
        Kurzbeschreibung
    </p>
    <a href="Links zum PDF Dokument"_blank">PDF Anleitung</a>
</div>

Alles anzeigen

Dabei hat mir ein Kumpel geholfen, aber mit meinem oben beschriebenen Porblem konnte er mir nicht helfen.

Auf meiner Website habe ich den selben Quellcode zwei mal importiert, weil dazwischen noch unterkategorien usw. komen.
Allerdings soll bei der zweiten Rubrik eine andere Box-Height verwendet werden. Jedoch wird diese dan automatisch für alle Boxen auf der Seite übernommen, auch für die aus der ersten Rubrik.

Ich hoffe ihr habt ne Idee wie ich das ändern kann.

Vielen Dank

Sailor

In deinem Code stimmt so einiges nicht mit dem überein, was du beschreibst!

Zitat

Ich habe auf meiner Webiste einzelne Boxen erstellt, in denen unterhalb eines Bildes und 3 Textzeilen...

neee... hast du nicht! Deine Box 200px * 205px groß und da passt gerade mal das Bild rein... der ganze Rest ist außerhalb der Box.
Setze hier mal 'overflow: hidden;' dann siehst du es. Erkennt man auch leicht an der Rahmenlinie, die nur das Bild umschließt.
Die Frage nach einer festen Positionierung deines Links innerhalb dieser Box kann also gar nicht beantwortet werden... der Link ist außerhalb.
Desweiteren hast du deinen Link zum PDF fehlerhaft geschrieben. Da steht in deinem Code...
<a href="Links zum PDF Dokument"_blank">PDF Anleitung</a>
richtig wäre aber ...
<a href="Links zum PDF Dokument" target="_blank">PDF Anleitung</a>
Im CSS sind auch Fehler
zB
- size: -> gibt es nicht, wenn schon dann 'font-size'
- background-color: none; -> geht nicht, wenn schon, dann 'background-color: transparent;'
Mach das mal richtig und melde dich wieder. Beschreibe dann auch etwas näher, was du unter...

Zitat

Allerdings möchte ich den Button immer an der selben Position im unteren Bereich der Box fixieren.

verstehst und wo die Besonderheit bei

Zitat

Allerdings soll bei der zweiten Rubrik eine andere Box-Height verwendet werden.

sein soll und welches Problem da auftritt???

modbot

Sailor

Sorry, bei dem target="", dass hab ich eigtl drin
Das hab ich versehentlich vergessen.

Ich hab mal ein Bild dazu hochgeladen
So sieht das aktuell bei mir aus
An sich passt alles, bis auf die Position des PDF Feldes.

und das wenn ich das ganze nochmal auf der Website einbinde und die Boxhöhe anpasse, bei beiden Rubriken angepasst wird.
(vieleicht sollte ich dazu sagen, dass ich meine website mit jimdo erstellt habe und nur diese html dokumente einbinde.

Im Prinzip habe ich dann mehrere überschriten unter denen jeweils dieses Dokument mit dne verschiedenen Produkten kommt.

Bei der zweiten Rubrik z.B. ist die Kurzbeschreibung der Produkte etwas länger als bei der ersten Rubrik, weswegen ich die Höhe der Box anpassen möchte.
Wenn ich diese dann größer mache ändert sich auch automatisch die Größe der ersten Rubrik.

Ich hoffe das war verständlicher erklärt.

Hier ist nochmal die originaldatei von dem im Bild gezeigten Produkt:

HTML

<style type="text/css">
/*<=!=[=C=D=A=T=A=[*/
    #nrall
    {
        width: 200px;
        height: 205px;
        float: left;
        padding: 15px;
        background-color: none;
        border: 1px solid #aaaaaa;
        display: inline;
        margin: 13px;
    }
    #nrall img
    {
        width: 100%;   
        display: block;
    }
    #nrall h3
    {
        display: block;  
        size: 1.3em;
        margin: 30px 0 15px 0;
        text-align: center;
    }
    #nrall small
    {
        color: #777777;
        size: 0.8em;
        text-align: center;
    }
    #nrall p
    {
        margin: 15px 0;   
        text-align: center;
    }
    #nrall a
    {
        margin: 15px 0;  
        color: #000000;
        background-color: #00dddd;
        padding: 7px 13px;
        display: block;
        text-align: center;
        background-image: url(https://u.jimcdn.com/cms/o/sca80463b5ba18af8/userlayout/img/pdf.png?t=1527333965);
        background-repeat: no-repeat;
        background-position: 10px 50%;

    }
/*]=]=>*/
</style>
<div id="nrall">
    <img src="https://merbold-electronic.de/wp-content/uploads/214100.jpg" />
    <h3>
        Rear Axle Control
    </h3>
    <small>Artikelnummer: ME-211100</small>
    <p>
        Hinterachslenker
    </p>
    <a href="https://merbold-electronic.de/wp-content/uploads/214100_Anleitung_Drehwinkelsensor.pdf" target="_blank">PDF Anleitung</a>
</div>

Alles anzeigen

Vielen Dank

Sailor

Das ist der selbe, fehlerhafte CSS Code, den du beim ersten mal gepostet hast.... der hilft nicht weiter.
Was du machen musst, um diesen Link zum PDF in jeder Box (mit der Höhe xy_px) an der selben Stelle (zB ganz unten) zu positionieren,
ist dass du den Code für diesen Link (Button) ganz oben als erstes in die Box schreibst und dann mit CSS diesen Button mit 'position: absolute;' aus dem Textfluss herauslöst und dann mit 'margin: xyz_px 0 0 0;' ganz nach unten verschiebst. Mit den Werten beim margin musst du etwas experimentieren damit es passt.
Bei Boxen mit einer anderen Höhe musst du natürlich die Werte entsprechend der anderen Höhe einstellen.
Was mir auch gerade auffällt, du nutzt im CSS durchgehen ID (#), um die Elemente anzusprechen. Wenn du mehrere Boxen hast, dann geht das nicht!!!!
Eine ID darf nur ein einiges mal auf der Seite genutzt werden!!!
Ersetze deine ID (id="blabla") durch Klassen (class="blabla") und im CSS das # durch einen Punkt (.).
Klassen kannst du dann beliebig oft verwenden und dann auch für unterschiedlich hohe Boxen jeweils ein andere Klasse vergeben. (.box_klein , .box_mittel , .box_gross)

basti1012

Sailor Ich finde ja gut das Leute helfen wollen,ich mache es ja auch gerne.
Aber du hattest ihn Oben schon auf einige Fehler hingewissen die er immer noch nicht geändert hat .
Ich glaube auch solange da noch die ganzen Fehler sind hat das positionieren der Sachen auch kein Sinn.
Danach macht er die Fehler weg und es passt dann wieder alles nicht .
So was hatte ich auch mal ausversehen.
Da hatte ich hinter position:relative ein Doppelpunkt gemacht und später habe ich es gemerkt ( Durch Validator ),und nach den Einfügen des Simkolions wahr alles wieder krum und schief.
@modbot ,mach bitte erst den Fehlerhaften Code da raus ,es ist besser du machst es zuerst sonst machst du es mit Pech doppelt und dreifach

Bandit

Zitat von basti1012

Simkolions

Weltklasse

basti1012

Ups,voll übersehen. Nagut man kann das Wort ja noch erraten:-)

Postion von Inhalten in einer Box definieren

Tags

Benutzer online in diesem Thema