Link in bestimmter Darstellung erzeugen


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

tklustig

Erfahrenes Mitglied
#1
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:
linkSOLL.jpg
Hier ein Screenshot, wie der Link momentan aussieht:
linkSOLL.jpg

Hier der Code(CSS):
CSS:
.borderLink{
    border-color: green;
    border-width: 5px;
    border-style:inherit;
}
HTML bzw. PHP:
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;
 

Anhänge

Zuletzt bearbeitet:

tklustig

Erfahrenes Mitglied
#2
Momentan mache ich das so, was allerdings nur als Notlösung fungiert, bis mir hier eine Alterantive aufgezeigt wird:
linkSOLL.jpg
CSS Code:
CSS:
.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.
 

Anhänge

Sempervivum

Erfahrenes Mitglied
#3
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:
CSS:
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.
 
Zuletzt bearbeitet:

tklustig

Erfahrenes Mitglied
#4
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"...
CSS:
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

Erfahrenes Mitglied
#5
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:
PHP:
$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.
 
Zuletzt bearbeitet:
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…