Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - Navigation gestalten

lachender_engel

Aktives Mitglied

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:
navigation.JPG

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!
 

patrick_l

Hat es drauf

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.

HTML:
<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
CSS:
/* 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
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

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

HTML:
<!-- 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
CSS:
/* 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
 
Zuletzt bearbeitet:

lachender_engel

Aktives Mitglied

@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

Hat es drauf

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
 
Zuletzt bearbeitet:
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.612
Beiträge
1.538.343
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben