T
tklustig
Erfahrenes Mitglied
- 17. März 2018
- #1
Hallo Leute,
ich generiere über PHP u.a. zwei labels und bekomme es einfach nüscht gebacken, den Abstand zwischen den labels zu verkleinern. (s.Anhang labels.png)
Eigentlich müsste die CSS-Anweisung
CSS:
line-height: 25px;
meine Intention bewerkstelligen.
Tut es aber nüscht. Vermutlich, weil eine andere CSS-Regel mächtiger ist?
Weiß jemand Rat?
Hier der CSS-Code
Code:
<style> .box { float: left; width: 15%; margin-right: 2%; padding: 20px; background: #eee; box-sizing: border-box; } .box:last-child { margin-right: 0; } label{ display:block; text-indent:2.5em; line-height: 25px; font-weight: 500; float:right; }</style>
und hier der durch php generierte HTML-Code
PHP:
<?php for ($i = 0; $i < count($geschlecht); $i++) { if ($geschlecht[$i] == 1) { ?><div class="box"> <?= Html::img($url_symbol_male, ['alt' => 'pic not found', 'title' => 'männlich', 'style' => 'width:35px;height:55px']); ?> <?= "<label style='font-weight: lighter';>" . $name[$i] . "</label>" ?>//dieser Abstand soll verkleinert werden <?= "<label>" . $Zieladressen[$i] . "</label>" ?></div><?php } else if ($geschlecht[$i] == 2) { ?><div class="box"><?= Html::img($url_symbol_female, ['alt' => 'pic not found', 'title' => 'weiblich']); ?> <?= "<label style='font-weight: lighter';>" . $name[$i] . "</label>" ?> <?= "<label>" . $Zieladressen[$i] . "</label>" ?></div><?php } else if ($geschlecht[$i] == 3) { ?><div class="box"><?= Html::img($url_symbol_bi, ['alt' => 'pic not found', 'title' => 'Transgender']); ?> <?= $name[$i] ?> <?= "<label>" . $Zieladressen[$i] . "</label>" ?></div><?php } }
Anhänge
Sempervivum
Erfahrenes Mitglied
- 18. März 2018
- #2
Wenn ich dein CSS und dein HTML in eine Testseite schreibe, funktioniert es mit line-height einwandfrei.
Vermutlich, weil eine andere CSS-Regel mächtiger ist?
Das vermute ich auch, label ist ja etwas sehr globales. Um es herauszufinden, müsste man die ganze Seite untersuchen können.
Oder Du versucht dieses:
Code:
div.box label{ all: unset; display:block; text-indent:2.5em; line-height: 25px; font-weight: 500; float:right; }
d. h. die Eigenschaften zuvor in den Grundzustand versetzen.
T
tklustig
Erfahrenes Mitglied
- 18. März 2018
- #3
das all:unset bringt rein gar nix.
Wenn ich das zweite label vor den Zileadressen weglasse, verringert sich der Abstand etwa um die Hälfte, ist aber immer noch zu weit weg. Wenn ich das line-height in firedebug wegknipse, verringert sich nur der Abstand relativ zur Box, nicht jedoch zwischen den label, wie eigentlich beabsichtigt...
Gemäß des Anhangs sieht das jetzt aus. Nicht perfekt, aber damit kann ich leben...
Anhänge
Zuletzt bearbeitet:
basti1012
Erfahrenes Mitglied
- 18. März 2018
- #4
Kannst du den ein label nicht ein margin-bottom:-15px; geben? Ist zwar keine schöne art ,aber zum Testen mal interesant was passiert.
M
MrMurphy
Mitglied
- 18. März 2018
- #5
Hallo tklustig
Du enthälst uns leider wichtige CSS- und wohl auch wichtige HTML-Angaben vor. Mit dem gezeigten Quelltext lässt sich die Darstellung wie auf dem ersten Bild nicht erreichen.
Grundsätzlich wage ich zu bezweifeln dass das label-Element in diesem Zusammenhang überhaupt korrekt ist.
Das Abstandsproblem liegt aber an der Anwendung von float ohne sich ausreichend über die Folgen zu informieren.
.box hat eine Breite von 15 Prozent. Dadurch passt die nach rechts gefloatete E-Mail-Adresse nicht mehr neben das Bild sondern rutscht unter das Bild.
Damit die E-Mail-Adresse neben das Bild passt muss .box passend verbreitert werden.
Mit line-height, margin und ähnlichen Angaben hat das Problem überhaupt nichts zu tun.
Insgesamt ist "float: right" auch nicht dafür gedacht Text oder andere Elemente rechtsbündig auszurichten. Grundsätzlich ist float deshalb nicht geeignet dein Problem zu lösen. Da wirst du merken wenn du .box sehr breit machst.
Zu bedenken ist auch das E-Mail-Adressen sehr unterschiedliche Längen haben können.
Für die von dir gewünschte Darstellung gibt es Flexbox oder CSS-Grid. Speziell wenn das Layout responsive werden soll.
Gruss
MrMurphy
Zuletzt bearbeitet:
T
tklustig
Erfahrenes Mitglied
- 18. März 2018
- #6
Da ich ein Framework verwende, werden generell die CSS - Regeln von Bootstrap verwendet.
Um das responsive Design brauche ich mich nicht zu kümmern, das erledigt die GridView des Frameworks für mich
Ich habe hier ausnahmsweise eine eigene entwickelt, da ich nicht weiß, welche Bootstrap-CSS-Anweisungen meine Intention erfüllen bzw. ob es überhaupt welche gibt, die sie erfüllen. Sofern Ihr euch mit Bootstrap besser auskennt wäre es mir eine Hilfe, zu erfahren, welche <div>'s ich mit welchen Bootstrap-CSS-Anweisungen versehen soll! Das wäre mir sowieso am liebsten!!
Den geäußerten Bedenken stimme ich zu und erwarte weiterhin Euer Feedback...
An basti1012: Eine Negativierung der Regeln habe ich vorher bereits ausprobiert. Es passiert gar nix!
Sempervivum
Erfahrenes Mitglied
- 18. März 2018
- #7
Poste doch mal die URL der Seite.
T
tklustig
Erfahrenes Mitglied
- 18. März 2018
- #8
Wozu? Ich entwickle doch unter 127.0.0.1(localhost)
Wozu ist da die URL relevant??
Jan-Frederik Stieler
Monsterator
Moderator
- 18. März 2018
- #9
Hi,
eine URL wäre sinnvoll damit wir Deinen Quellcode analysieren können.
Wir sehen hier nur einen Ausschnitt und wissen nicht was sonst noch so mit reinspielt.
Ich z.B. Hab keine Lust mir das HTML aus Deinem PHP Code zusammenzuftimmeln.
Grundsätzlich, wer floatet muss auch clearen und Deine Labels entsprechen nicht den Regeln. Den Labels müssen Elementen zugeordnet sein sonst machen sie keinen Sinn.
Also entweder for-Attribut verwenden oder mit dem Label das zu beschreibende Elment umschließen.
Zu Bootstrap, um deren Grid zu verwenden musst Du eine Containerklasse verwenden und dann auf die Elemente die col-Klassen verteilen.
Dein Anstand kommt zustande weil das Bild links den Text verdrängt.
Am besten fasst Du die beiden Texte zusammen so das du das Bild und ein DIV hast. Dann setzt Du beides auf Display: inline-Block. Und fertig.
Grüße
Um antworten zu können musst du eingeloggt sein.