Positionierung mit CSS, Abstände bestimmen

[Jim]

Guten morgen,

sag mal, ist es wirklich sooooo schwierig? Ich probiere seit Stunden mit Firebug und bekomme es einfach nicht hin wie ich es haben möchte.

Gibt es einen einfachen Weg Abstände zu berechnen? Gibt es einen Tool oder Hilfsmittel (Messgitter, Lineal?) dazu?

Zu meinem Problem: Im Footer habe ich 4 Icons. Ich wollte den gleichen Abstand zwischen alle 4 haben, und der Abstand zum Boxrand sollte auch gleich sein.

Vielleicht könnte jemand von Euch das kurz mal anschauen?

zum Shop

P.S.: Bitte keine Komplette-Lösungen Posten, Ansätzen wäre mir lieber da ich das Thema mal richtig lernen möchte.

Schöne Grüße

Jim



Linkback: https://www.modified-shop.org/forum/index.php?topic=12232.0

[Tomcraft]

Dein Problem ist folgendes:

Du gibst jeder Box eine eigene Klasse, das würde ich nicht machen. ich würde nur der linken eine eigene Klasse geben, da diese evtl. links kein "margin" haben soll.

Schematisches Konstrukt:

Code: PHP  [Auswählen]

<div id="footer-boxen">
  <div class="float-badgebox-left">...</div>
  <div class="float-badgebox">...</div>
  <div class="float-badgebox">...</div>
  <div class="float-badgebox">...</div>
</div>
 

Jetzt lässt du alle nach links "floaten" und setzt einfach "margin-left" für "float-badgebox" und "float-badgebox-left" bis es passt. Dann musst du nicht mehr mit 4 Klassen rum wurschteln, sondern setzt nur 1x den Abstand zum linken Rand("float-badgebox-left") und passt dann die Abstände für die weiteren Boxen nur noch durch entsprechendes "margin" bei "float-badgebox" an.

Grüße

Torsten

[Matt]

Ich hätte da mehrere:
Logos alle mit der gleichen Breite versehen, Inhalt von #footerbadges-box zentrieren. Was die richtige Breite ist, um den korrekten Außenabstand zu erhalten, musst du durch experimentieren herausfinden.

Der andere wäre allen Boxen die gleiche Breite zu geben (du solltest die für alle gültigen Boxeigenschaften in eine eigene CSS-Anweisung '#footerbadges-box div' packen), zentriert ausrichten und dann für die beiden äußeren über margin den Abstand zum Rand einstellen. Screenshot im Anhang. Rahmen nur aus Veranschaulichungsgründen. Da deine Logos nicht gleich breit sind bzw. nicht alle einen Rahmen haben sieht das aber immer etwas komisch aus.

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[swolfram [templatix]]

Man kann es auch berechnen

EDIT: Korrektur Beispiel
Gesamtbreite der Seite 980px
minus "margin" rechts und links 40px
minus eingestelltem "margin" der jeweiligen Boxen 20px
geteilt durch Anzahl der Boxen
ergibt die Breite der einzelnen Box auf den Pixel genau

Das wäre die grobe Formel

[Jim]

Vielen Dank an alle!

Ich bin dabei die verschiedene Ansätzen zu probieren (lokal auf XAMPP) und werde mich nochmal melden.

Schöne Grüße

Jim

[Jim]

Nach lange hin und her Probiererei habe ich mich für Torstens Vorschlag entschieden. Ich hätte gern den von Matt auch mal genommen aber ich habe es leider nicht hinbekommen bzw. nicht ganz verstanden. Mit dem Messvorschlag von swolfram habe ich die Abstände vorab berechnet.

Ich habe alle 4 Icons von links nach rechts perfekt platziert hinbekommen. Danach wollte ich dann die alle horizontal-mittig haben aber leider keine sauberer weg gefunden dieses zu realisieren. Die einzige weg der funktioniert hat ist jede Icon einen eigene Klasse geben hat und die Abstände mit margin-top ausgeglichen. Selbst mit vertical-align: center; habe ich es nicht hinbekommen.

Wenn ich das ganze mal anschaue denke es wird besser aussehen wenn ich die Icons ganz von Footer entfernen und die lieber hintun wo jetzt die Bestseller-Liste ist (s. Screenshot). Die Bestseller-Liste werde ich dann entfernen da ich glaube dort schaut sowieso kein Mensch hin.

Schöne Grüße

Jim

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[Tomcraft]

Hi Jim,

die Hintergrund-Farbe sieht fürchterlich aus! Nimm mal dort im Footer bitte die wesentlich hübschere Farbe der Boxen, also "#F3EBC8". Die Farbe im Footer ist einfach zu dunkel und gibt der Schrift zu wenig Kontrast.

Grüße

Torsten

[Jim]

Hmmm, ich habe eben in Firebug die BG-Farbe geändert und ich muss Dir völlig Recht geben! Template-Design gehört nicht zu meinen Stärken muss ich ehrlich zugeben. Vielen Dank für Deinen Tipp.

Ich wollte die Grund-Farben nicht andern da es einen Kauftemplate ist und bin davon ausgegangen das der Designer bei der Farbe-Gestaltung schon was dabei gedacht hat.

Vielleicht ist es endlich mal Zeit einen neuen Template zu kaufen oder designen lassen. Habt ihr jemand im Team der so was drauf hat? Klar, der Markus könnte mir was machen, aber ich denke er ist für die nächsten Jahren schon ausgebucht.

Schöne Grüße

Jim

[Tomcraft]

Ich sehe da aber immer noch die fürchterliche Farbe im Footer.

Markus hat bestimmt noch Zeit dir ein schickes Template zu designen, wenn du denn möchtest.

Grüße

Torsten

[Jim]

Hmmm, ich habe eben in Firebug die BG-Farbe geändert [...]

Und jetzt ist die fürchterliche Farbe endgültig weg!

Schöne Grüße

Jim

[Tomcraft]

Viel freundlicher für die Augen!

Grüße

Torsten