zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamischer Abstand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.07.2020, 19:42
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 52
hatschiii befindet sich auf einem aufstrebenden Ast
Standard Dynamischer Abstand



Ich habe eine Spalte die so breit ist wie der rote Rahmen. Darin werden die Shariff Icons dargestellt. Nun ist die Gesamtbreite der Icons aber geringer als die Spalte. Ich möchte nun, dass die Abstände zwischen den Icons dynamisch angepasst werden, so, dass die Icons links und rechts bündig an den Spaltenrand anschließen.

Geht das mit CSS?

Hier noch der Code:


Geändert von hatschiii (21.07.2020 um 19:46 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.07.2020, 21:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Leider kann man an dem Screenshot die wichtigsten Dinge (das CSS) nicht sehe. Aber versuche mal der Liste <ul> ein zusätzlichen Style
HTML-Code:
justify-content: space-between;
zu geben. Oder eine der anderen gültigen Werte:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.07.2020, 09:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Um die Frage zu beantworten: Ja das geht mit CSS.
Falls detaillierte Antwort gewünscht ist dann braucht es natürlich auch die Info wie der jetzige Code aussieht. Screenshots vom Code zählen da nicht, damit kann man leider nicht arbeiten.

Ansonsten ist das, was Sailer gesagt hat die richtige Antwort: Flexbox verwenden.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.07.2020, 11:18
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 52
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

Super, 1000 Dank für die schnellen Antworten

Hier der Link: https://cookie.dlgo.de/beispiel-seite/

In der rechten Sidebar sidn oben die blauen Buttons. Am grauen Rahmen sieht man den Abstand links und rechts.

space-between funktioniert... allerdings ist da noch ein kleiner rand links und rechts. Wenn das Fenster schmäler wird (und damit auch die Sidebar) rutscht ein Button in die nächste Zeile. Mit space-between leider nicht zentriert sondern linksbündig.
Mit space-around oder space-evenly bekomme ich die Zentrierung wieder hin, allerdings wird dann der Abstand links und rechts größer. Gibt es eine Chance den Abstand am linken und rechten Rand so wie bei space-between oder noch besser ganz auf 0px zu bekommen?

Geändert von hatschiii (22.07.2020 um 11:43 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.07.2020, 11:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Da musst du dein CSS aber mal ordentlich aufräumen... da sind viele Überflüssige Dinge und Doppelungen drin.
Auf die Schnelle aber mal ein Ansatz, wie du deine Probleme abgehen könntest:
Code:
#content-core {
  display: flex;
}

#sidebar {
  min-width: 267px !important;
}
Der Rest ist dann Fleißarbeit - hmmm - ich bin nicht fleißig
Mit Zitat antworten
  #6 (permalink)  
Alt 22.07.2020, 18:54
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 52
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

Danke Sailor56

Tja, aufräumen ist schwierig... das wird ja alles durch Wordpress und Apps erzeugt. bei jedem Update ist da wieder alles beim Alten. Außerdem ist das nur eine Testinstallation wo fast nur das nackte Wordpress mit meinem Theme läuft

Gehört nicht den Fleißigen die Welt? Keine Lust auf Weltherschaft?
Mit Zitat antworten
  #7 (permalink)  
Alt 22.07.2020, 19:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

OK... WordPress ist schon eine besondere Baustelle, aber wenn du das nutzen willst, dann musst du damit leben. Für CSS Änderungen solltest du dann allerdings ein Child Theme anlegen und die Änderungen dort vornehmen - besser noch, wenn es sich um reine Änderungen am CSS handelt, dann dies Änderungen im 'zusätzlichen CSS' des Customizers eintragen. Die bleiben auch bei einem Update erhalten.

Hat denn mein Vorschlag aus meinem letzten Beitrag dich weiter gebracht?
Mit Zitat antworten
  #8 (permalink)  
Alt 23.07.2020, 10:50
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 52
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

Ja, habe es lösen können, danke!

Child Theme habe ich mir gespart da meine Änderungen zu tiefgreifen sind und das Child Theme zuvielProbleme gemacht hat. Es ist einfacher alles im Theme zu ändern... ändert man auch den Namen des Themes kommen auch keine Updates mehr
Mit Zitat antworten
  #9 (permalink)  
Alt 23.07.2020, 12:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Keine Updates ??? Dann hast du dir selbst eine ziemliche Sicherheitslücke gebastelt... gerade bei WP kannst du dich so nicht vor Hackern & Co schützen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.07.2020, 10:39
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 52
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich mein Theme selbst gebaut hätte gäbe es auch keine Updates
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Abstand nach unten durch clear:both iceman_fx CSS 19 27.04.2012 11:45
Zentrieren und bei Zoom gleichen Abstand!? Jerry0022 CSS 3 07.07.2011 23:08
Pixelgenauigkeit - Unerklärliche 3px Abstand horstenpeter CSS 8 16.05.2010 23:57
XHTML vs. HTML und ein unerklärlicher Abstand bei Elementen tom_77 (X)HTML 12 09.02.2008 23:01
Abstand zwischen divs sv650at CSS 2 18.12.2006 19:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:28 Uhr.