Link in bestimmter Darstellung erzeugen

[tklustig]

Hallo Leute,
folgender Code erstellt mir einen Link, der allerdings (optisch) nicht so aussieht, wie in meiner yii2 Applikation (die über Bootstrap verfügt, was die momentan Applikation nicht soll und darf). Es muss gewährleistet sein, dass sich die Links ggf. untereinander anordnen, je nachdem, wie viele Checkboxen aktiviert wurden. Deshalb verbietet sich vermutlich die Verwendung von position, top und right. Hier ein Screenshot, wie der Link aussehen sollte:

Hier ein Screenshot, wie der Link momentan aussieht:


Hier der Code(CSS):

.borderLink{
    border-color: green;
    border-width: 5px;
    border-style:inherit;
}

HTML bzw. PHP:

    function createLink($name, $jobboerse, $replaceJob, $replaceTown) {
        $url = WebStringErsetzen($jobboerse, "###", $replaceJob);
        $url = WebStringErsetzen($url, "&&&", $replaceTown);
        $link = "<a class='borderLink' href='$url' target='_blank' title='Load $name' >$name laden</a>";
        return $link;
    }
.
.
$link2BeShown = createLink($name, $string2BeReplaced, $job, $place);
echo $link2BeShown;

 

[tklustig]

Momentan mache ich das so, was allerdings nur als Notlösung fungiert, bis mir hier eine Alterantive aufgezeigt wird:

CSS Code:

.borderLinkIndeed{
    border-left-width: 500px;
    border-right-width: 500px;
    border-left-color: green;
    border-right-color: green;
    position: absolute;
    top:63%;
    right: 30%;
    border-style:dashed;
}
.borderLinkStepStone{
    border-left-width: 482px;
    border-right-width: 500px;
    border-left-color: green;
    border-right-color: green;
    position: absolute;
    top:66%;
    right: 30%;
    border-style:dashed;
}

Der php Funktion wurde ein zusätzlicher Parameter übergeben, der die CSS Klasse enthält.

 

[Sempervivum]

Weil dir sonst niemand antwortet, will ich es mal versuchen. Leider erkenne ich nicht, um welches Element es sich handelt in den Soll- und Ist-Bildern. Aber anhand deiner Klassen vermute ich, dass es sich um "Indeed laden" und "Stepstone laden" handelt? Wenn es sich bei dem Problem auch um die Anordnung handelt, so ist absolute Positionierung und riesige Ränder wahrscheinlich eine schlechte Wahl. Mit Flexlayout und Hintergrundfarbe sollte es einfacher sein.
Edit: Wenn ich mir dein erstes Sollbild ansehe, müsste dieses CSS schon ausreichend sein:

a.borderLink {
    display: block;
    background-color: darkgreen;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

Bei dieser Version wäre dann die gesamte Fläche klickbar. Wenn Du das nicht willst, sondern nur der Text reagieren soll, brauchst Du wahrscheinlich einen zusätzlichen Container.

 

[tklustig]

Weil dir sonst niemand antwortet, will ich es mal versuchen. Leider erkenne ich nicht, um welches Element es sich handelt in den Soll- und Ist-Bildern. Aber anhand deiner Klassen vermute ich, dass es sich um "Indeed laden" und "Stepstone laden"...

a.borderLink {
    display: block;
    background-color: darkgreen;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

...
Korrekt. Die Breite passt schon mal. Allerdings sollten die Links durch einen Rahmen oder aber eine Verschiebung von jeweils 3% nach unten voneinander abgetrennt sein, so wie in meinem Screenshot des 'Antwortposts' aufgezeigt. Außerdem sollen die Links ganz oben, noch vor dem <div> Element, welches die Uhrzeit einblendet, dargestellt werden

 

[Sempervivum]

Allerdings sollten die Links durch einen Rahmen oder aber eine Verschiebung von jeweils 3% nach unten voneinander abgetrennt sein, so wie in meinem Screenshot des 'Antwortposts' aufgezeigt.

Da in deinem Bild der Zwischenraum die Hintergrundfarbe hat, würde es sich anbieten, ihn durch margin-top oder margin-bottom zu erzeugen.

Außerdem sollen die Links ganz oben, noch vor dem <div> Element, welches die Uhrzeit einblendet, dargestellt werden

Die Links werden ja offenbar durch dieses PHP in das HTML eingefügt:

$link2BeShown = createLink($name, $string2BeReplaced, $job, $place);
echo $link2BeShown;

Du brauchst diesen Code ja nur dorthin zu verschieben, wo sie dargestellt werden sollen, d. h. über das div mit der Uhrzeit.

 

[Sempervivum]

#5 editiert: Für den Zwischenraum muss es margin, nicht padding sein.