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

[patrick_l]

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.

<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.

<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]

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)

<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

<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]

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.

 

[cythux]

Eventuell mal pascal anschreiben, vielleicht hat er eine Idee - damit dies auch ohne plugins am Ende geht

 

[patrick_l]

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.

 

[cebito]

So vielleicht http://jsfiddle.net/Lg9k59b7/

 

[patrick_l]

Ceb, als wenn ich den Braten gerochen hätte. Merci! Hast was gut bei mir.

Liebe Grüße, Patrick

 

[cebito]

btw. kannst den .wrap-div auch weglassen und die Eigenschaften der ul geben - wieder Markup gespart

 

[patrick_l]

btw. kannst den .wrap-div auch weglassen und die Eigenschaften der ul geben - wieder Markup gespart

Jep, weiß ich. Der muss jedoch bleiben. Werden noch zwei Elemente hinzugefügt und nach rechts gefloatet. Also passt schon sweit.