Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - Mit Hilfe von Divisions (divs) mittig ausrichten?

patrick_l

Hat es drauf

Hi allerseits,

ich habe gerade ne kleine Denkblockade. Es geht um folgendes. Im Footer soll unter anderem auch eine Breadcrumb-Navigation untergebracht werden. Der Footer selbst bekommt die volle Breite. Darin liegend mehre Wrapper zum Ausrichten der einzelnen Inhalte (Breadcrumb, VCard etc.).

Mir geht es jetzt darum, die Farbe des aktiven Breadcrumb-Bereichs bis an den Außenrand des Browsers zu erweitern (siehe Skizze > Blauer Pfeil). Jedoch soll die Breadcrumb-Navigation selbst weiterhin mittig ausgerichtet bleiben. Hier komme ich gerade nicht weiter.

Eigentlich würde ich von der Semantik her nur eine Division setzen. Diese zum Ausrichten nehmen und dort später die Navigation inkludieren. Dem Section-Element könnte ich die allgemeine Farbe für die Navigation mitgeben. Mit dem eigentlichen Menü würde das ganze dann so oder so überlagert.

HTML:
<section id="breadcrumb">
  <div class="wrap">
    <!-- breadcrumb here! -->
  </div>
</section>

So, mit obigen fehlt mir jedoch der linke Teil. Daher nun an eine weitere Verschachtelung gedacht, die wie folgt aussieht.

HTML:
<section id="breadcrumb">
  <div class="col-2 first"></div>
  <div class="wrap">
    <!-- breadcrumb here! -->
  </div>
  <div class="col-2"></div>
</section>

So, wie verklickere ich jetzt den beiden flexiblen Divisions außerhalb des Wrappers, das sie sich den Platz nehmen, den sie bekommen. Komme genau an dieser Stelle nicht weiter. De facto auch kein vollständiges Markup posten kann. Eigentlich nen simples Konstrukt, nur komm ich einfach nicht drauf wo mein Fehler liegt.

Hier noch die Skizze, damit ihr es hoffentlich auch ohne Markup nachvollziehen könnt.



Liebe Grüße, Patrick
 

cythux

Aktives Mitglied

Benutzt da ein Framework, bei foundation gibt es dafür extra eine class eventuell hilft dir dies ja ein wenig (der Code stammt aus den Docs von Foundation)
HTML:
<nav class="breadcrumbs">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a class="unavailable" href="#">Gene Splicing</a>
  <a class="current" href="#">Cloning</a>
</nav>
sowie im Grid
HTML:
<div class="row">
  <div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
  <div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
  <div class="small-11 small-centered columns">11 centered</div>
</div>
 

patrick_l

Hat es drauf

Ich danke dir. Ich möchte jedoch weitestgehend auf Frameworks verzichten. Diese eine Stelle ist auch so das einzige Problem was ich habe. Layout-technisch gesehen ist zwar der Footer ziemlich am "rotieren", was die Funktionen angeht. Aber eben leicht gestrickt. Wenn eben nicht die Breadcrumb-Navigation wäre. Nur so am Rande. Wird mit WordPress aufgezogen.
 

patrick_l

Hat es drauf

Jep, werde jetzt erst nochmal ne Nacht drüber schlafen. Wenn dann immer noch nicht die zündende Idee dabei ist, Pascal drauf anhaue. Wer doch gelacht, wenn das nicht auch so zu lösen wäre. Wobei, Kleinvieh macht auch Mist. ;) Danke trotzdem für deinen Input.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben