• Jetzt starten
  • Newsletter
  • Kategorien
    • Onlineshop & E-Commerce
    • Shopdesign
    • Marketing
    • Suchmaschinen (SEO)
    • Produkte
    • Zahlung & Versand
    • Rechtsfragen
    • Händlergeschichten
  • Suche
  • Menü Menü
mriess

Die Funktionsweise von Innen- und Außenabständen in der Shop-Gestaltung

5. Dezember 2007/0 Kommentare/in Onlineshop & E-Commerce, Shopdesign /von mriess

Wer seinen Shop mit einem individuellen Design versehen will, kommt nicht an den Einstellungsmöglichkeiten für die Abstände zwischen den einzelnen Seitenbereichen vorbei. Eine kurze Erläuterung zur Funktionsweise der Eingabewerte Innenabstand und Außenabstand.

Über die Karteikarte Anpassung innerhalb eines Styles können Sie jeden einzelnen Seitenbereich individuell gestalten. Hier finden Sie auch die Eingabefelder für Abstände. Die Seitenbereiche Kopfzeile, Oben, Unten und Fußzeile verfügen über Eingabemöglichkeiten für Innen- und Außenabstand. Die Seitenbereiche Links, Inhaltsbereich und Rechts lassen eine Steuerung des Innenabstands zu: Eingabefelder für Innen- und Außenabstände Um die Funktionsweise leicht nachzuvollziehen, modifizieren wir den Style Plain. Dieser Style besitzt weder störende Hintergrundbilder noch vorbelegte Abstandswerte und eignet sich deshalb besonders gut für Testzwecke oder zum Neuaufbau eines eigenen Designs. (Wie Sie bei laufendem Shop-Betrieb an alternativen Designs arbeiten, lesen Sie hier.) Auswahl des Styles “Plain” Als Beispiel werden wir den Seitenbereich Navigationsleiste: Oben bearbeiten. Um ihn mit Leben zu füllen, fügen wir zunächst einige Inhaltselemente ein, z.B. Links zu den Kategorien und zum Impressum. Für die obere Navigationsleiste ist eine Höhe von 27px vorbelegt. Alle Abstandswerte sind auf 0px eingestellt. Das Resultat dieser Werte: Der Bereich ist exakt 27px hoch und grenzt an allen Seiten ohne Abstand an die benachbarten Seitenbereiche: Navigationsleiste mit Nullwerten für Abstände Der Innenabstand wirkt innerhalb eines Seitenbereiches und stellt eine Art Grenzstreifen zwischen dem Bereichsinhalt und der Außengrenze des Inhaltselements dar. Wir tragen einen Innenabstand von 10px für alle Seiten ein. Im Ergebnis erhalten wir eine an allen Seiten um jeweils 10px vergrößerte Navigationsleiste (im Bild farbig markiert). Dies hat natürlich Konsequenzen für die Abmessungen der Leiste – die Navigation mißt nun 27+10+10 = 47px in der Höhe: Innenabstand 10px Der Außenabstand wirkt außerhalb eines Seitenbereiches und schafft einen freien Raum zu allen angrenzenden Seitenbereichen. Wir tragen nun zusätzlich zum Innenabstand einen Außenabstand von 10px für oben und unten ein. Die oben und unten angrenzenden Seitenbereiche rücken um jeweils 10px von der Navigationsleiste ab – die Navigation beansprucht nun einen Platz von 27+10+10+10+10 = 67px in der Höhe: Außenabstand 10px Ein wichtiger Unterschied zwischen Innen- und Außenabstand ist nun erkennbar. Während für den Innenabstand alle Gestaltungsattribute des Seitenbereichs gelten (z.B. die Hintergrundfarbe), bleibt der Außenabstand davon unberührt. Er befindet sich tatsächlich außerhalb des Seitenbereichs, für den er eingetragen wurde. Nach dem Einfügen eines Hintergrundbildes wird dies noch einmal deutlicher – während das Bild im Bereich des Innenabstands sichtbar wird, bleibt es im Außenabstand verborgen: Seitenbereich mit Hintergrundbild Durch geschickte Kombination verschiedener Hintergrundbilder und Abstandswerte lassen sich so nahezu alle Designvorstellungen verwirklichen. Zu beachten ist nur, daß die Seitenbereiche in ihrer Höhe bzw. Breite um die Werte für Innen- und Außenabstand wachsen und entsprechend mehr Raum beanspruchen. Tip für CSS-Profis: Die Funktion Innenabstand entspricht dem CSS-Wert padding. Die Funktion Außenabstand entspricht dem CSS-Wert margin.

mriess
Website |  + postsBio

ist SVP R&D+Consulting bei ePages und verantwortet den Bereich Research & Development und Consulting in Jena. Er studierte Versorgungstechnik in Erfurt und arbeitete dann sieben Jahre lang mit einem eigenen Ingenieurbüro in der Software-Entwicklung sowie als freier Dozent an der FH Erfurt. Danach war Rieß drei Jahre lang als Projektmanager bei Intershop in nationalen und internationalen Projekten tätig, bevor er Anfang 2003 zu ePages wechselte.

  • mriess
    https://blog.epages.com/de/author/mriess/
    So verarbeitet Ihr ePages-Shop Produktbilder
  • mriess
    https://blog.epages.com/de/author/mriess/
    Neue Umstellung: Google testet Mobilkompatibilität von Suchergebnissen
  • mriess
    https://blog.epages.com/de/author/mriess/
    Inhalte mit SSL verschlüsseln – wichtige Änderung in Firefox 23
  • mriess
    https://blog.epages.com/de/author/mriess/
    Wie kann ich … wichtige Einstellungen überprüfen?
Eintrag teilen
  • Teilen auf Facebook
  • Teilen auf WhatsApp
  • Teilen auf LinkedIn
  • Per E-Mail teilen
https://blog.epages.com/wp-content/uploads/2021/03/pattern.png 210 430 mriess https://blog.epages.com/wp-content/uploads/2021/11/logo-epages-blog.svg mriess2007-12-05 12:27:512007-12-05 12:27:51Die Funktionsweise von Innen- und Außenabständen in der Shop-Gestaltung
0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar Antworten abbrechen

Du musst angemeldet sein, um einen Kommentar abzugeben.

Beiträge suchen

Neueste Beiträge

  • Barrierefreiheit von Online-Shops (Gastbeitrag der IT-Recht Kanzlei)
  • So sammeln Sie mehr Bewertungen für Ihren Onlineshop
  • Winter-Release 2025: Neue Features für mehr Internationalisierung und Produktsicherheit
  • Pflicht zur E-Rechnung ab 2025 (Gastbeitrag der IT-Recht Kanzlei München)
  • Herbst-Release-Video: die neuen Features der letzten Monate

Kategorien

  • ePages Direct
  • Händlergeschichten
  • Marketing
  • Onlineshop & E-Commerce
  • Produkte
  • Rechtsfragen
  • Shopdesign
  • Suchmaschinen (SEO)
  • Zahlung & Versand

Podcast

epages podcast

E-Commerce-Tipps gibt es jetzt auch zum Hören! In „Digital handeln“ sprechen wir mit Experten und Händlern und tauchen tiefer in aktuelle Themen des E-Commerce ein.

podcast digital handeln apple podcast digital handeln spotifiy podcast digital handeln google podcast digital handeln soundcloud

Sie haben Fragen?

epages facebook community

In unserer ePages Community bringen wir Shopbetreiber, ePages-Mitarbeiter und -Partner zusammen, um alle Themen rund um die ePages-Software und den Onlinehandel zu diskutieren.

Jetzt beitreten

Tipps für einen erfolgreichen Start in den E-Commerce

Checkliste: So starten Sie in den E-Commerce
Quellen für Produktideen: Die ultimative Liste
Produktfotos: So vermeiden Sie Fehler
Die richtige Kategoriestruktur für Ihren Online-Shop
Farbpsychologie im E-Commerce so setzen Sie Farben füer Ihren Onlineshop gekonnt ein
21 Tipps mit denen Sie Ihren Onlineshop bekannt machen

ePages Blog Newsletter

ePages Blog Newsletter

© 2025 ePages · Pilatuspool 2 · 20355 Hamburg · Deutschland

Kontakt · AGB · Impressum · Datenschutz
Privatsphäre-Einstellungen ändern · Historie der Privatsphäre-Einstellungen · Einwilligungen widerrufen

  • Deutsch
    • English (Englisch)
    • Français (Französisch)
    • Español (Spanisch)
Nach oben scrollen
Wählen Sie die passende Lösung für Ihr Business

Website für stationäre Händler

Laden
Verkaufen mit Ladengeschäft

Website für Onlinehändler

Online
Nur online verkaufen

Anmelden

Shop für Ihr Ladengeschäft

Laden
Ladengeschäft

Nur online verkaufen

Online
Online verkaufen