Erledigt - Navigation gestalten

[lachender_engel]

Hallo Zusammen.
Ich habe einen Knoten in meinen Gedanken und hoffe bei Euch auf HIlfe.
Für eine Seite muss ich eine back/next-Navigation (vor/zurück ;-)) erstellen. Die soll so aussehen:

Im Moment sieht mein .
Hat jemand eine Idee woran ich noch schrauben muss, damit die Grafiekn links und rechts von den Links stehen und zwischen den Links genug Platz ist?
Ich habe da echt ein Brett vor dem Kopf. Ich verzweifle gerade :-(

Danke für Eure Mühe!

 

[Bertram_Heinrichs]

Probier mal zu dem:

.pagination .back {
background: url(sprite-nav-left.gif) no-repeat;

noch:
background-position:
mit anzugeben.

 

[patrick_l]

Deine Pagination Navigation würde ich einfach in ein menu-tag packen und die Anker nach links und rechts floaten. Alternativ mit dem Flexbox Modell arbeiten. Die Sprite Grafiken kann man sich auch sparen. Ich würde diese lediglich als Pseudo-Elemente hinzufügen.

Spoiler: Markup

<menu class="pagination">
  <div class="pagination-inner-1">
      <a href="#" class="back">back</a>
      <a href="#" class="next">next</a>
  </div>
</menu>

Pagination v.1: Floating

/* Pagination wrap */
menu.pagination {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-top: 2px dotted grey;
  border-bottom: 2px dotted grey;
}

/* Pagination v.1 Floating */
menu .pagination-inner-1 {
  max-width: 960px;
  margin: 0 auto;
}
menu .pagination-inner-1 a {
  color: grey;
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: color 300ms ease-in-out;
          transition: color 300ms ease-in-out;
}
menu .pagination-inner-1 a:hover {
  color: red;
}
menu .pagination-inner-1 .back {
  float: left;
}
menu .pagination-inner-1 .back::before {
  content: "◀";
  margin-right: 7px;
}
menu .pagination-inner-1 .next {
  float: right;
}
menu .pagination-inner-1 .next::after {
  content: "▶";
  margin-left: 7px;
}
menu .pagination-inner-1 .back::before, menu .pagination-inner-1 .next::after {
  color: white;
  background-color: grey;
  border-radius: 3px;
  padding: 6px 8px;
}

Hier nochmal in Aktion:
-

Liebe Grüße, Patrick

 

[patrick_l]

So, ich erlaube mir mal einen Doppelpost.

Ich habe dir @lachender_engel zur Veranschaulichung auch die Flex-Variante auf Codepen hinterlegt. Es gibt noch weitere Möglichkeit und leicht abgewandelte Varianten, es jedoch bei den beiden belasse. Wenn du Fragen hast, raus damit.

Spoiler: Markup

<!-- Pagination v.2: Flexbox-->
<menu class="pagination">
  <div class="pagination-inner-2">
      <a href="#" class="back">back</a>
      <a href="#" class="next">next</a>
  </div>
</menu>

Pagination v.2: Flexbox

/* Pagination wrap */
menu.pagination {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-top: 2px dotted grey;
  border-bottom: 2px dotted grey;
}

/* Pagination v.2 Flexbox */
menu .pagination-inner-2 {
  max-width: 960px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
}
menu .pagination-inner-2 a {
  color: grey;
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: color 300ms ease-in-out;
          transition: color 300ms ease-in-out;
}
menu .pagination-inner-2 a:hover {
  color: red;
}
menu .pagination-inner-2 .back::before {
  content: "◀";
  margin-right: 7px;
}
menu .pagination-inner-2 .next::after {
  content: "▶";
  margin-left: 7px;
}

menu .pagination-inner-2 .back::before,
menu .pagination-inner-2 .next::after {
  color: white;
  background-color: grey;
  border-radius: 3px;
  padding: 6px 8px;
}

-

Liebe Grüße, Patrick

 

[lachender_engel]

@patrick_l, Du bist der Hit. Vielen herzlichen Dank für die Mühe!
Das ist es, was ich brauchte: Jemanden der aus einem anderen Blickwinkel schaut und mir den Nebel lichtet!
Sehr guter Lösungsweg. Da sind meine Sprites nicht notwendig.
Perfekt!

Ich mich für die Floating-Variante entschieden

 

[patrick_l]

Das ist es, was ich brauchte: Jemanden der aus einem anderen Blickwinkel schaut und mir den Nebel lichtet!

Kenne ich selber nur zu gut. Hier und da stehe ich auch wie Ochs vorm Berg.

Edit:

Sehr guter Lösungsweg. Da sind meine Sprites nicht notwendig

Deine Grafiken sind ja kein Sprite, oder arbeitest du mit nem Preprocessor (Sass+Compass) und/oder Task-Runner?

Liebe Grüße, Patrick