✔ Links formatieren "pagination"

GN911 · 25. Juli 2009

Hallo,

ich möchte folgende Links formatieren die wie auf dem Bild aussehen soll.
Er zeigt die Bilder zum weiter u. zurückblättern nicht an (Pfad ist richtig) und .current ist auf der baseline wie die anderen Links.

Code:

              <div id="calination">
                <a href="#"><span class="previous"><img src="img/arrow_prev.gif" width="14" height="25" alt="" /></span></a>
                <a href="#">Mo</a>
                <a href="#">Di</a>
                <a href="#"><span class="current">Mi</span></a>
                <a href="#">Do</a>
                <a href="#">Fr</a>
                <a href="#">Sa</a>
                <a href="#">So</a>
                <a href="#"><span class="next"><img src="img/arrow_next.gif" width="14" height="25" alt="" /></span></a>
              </div>

      #calination a { border: 1px #dadada solid; margin-right: 2px; }  
      #calination span.next a, #calination span.next a:hover,
      #calination span.previous a, #calination span.previous a:hover { border: 0 none; } 

      #calination a:link,
      #calination a:visited { color: #9c0; text-decoration: none; text-align: center; font-size: 133.33%; border: 1px #9c0 solid; padding: 3px 6px; }
      #calination a:hover { border: 1px #dadada solid; }

      #calination a span.current { color: #dadada; font-size: 250%; font-weight: bold; border: 0 none; padding: 4px 6px; }  
      #calination a.current, #calination a:hover.current { color: #dadada; font-size: 250%; font-weight: bold; border: 0 none; padding: 3px 6px; }

Gruß GN911

Loomis · 26. Juli 2009

Hi,

das einzige was mir da auffällt wäre das none bei border:0 none;. Nimm das mal raus, vielleicht hilfts

GN911 · 26. Juli 2009

Hallo,

habe es jetzt wie folgt gelöst:

HTML:

      ul.calination { list-style: none; }
      ul.calination li { display: inline; float: left; font-size: 133.33%; margin: 0; padding: 0 2px; }
      ul.calination li a { display: block; color: #9c0; line-height: 21px; text-decoration: none; margin: 0; padding: 1px 4px; border: 1px #dadada solid; }
      ul.calination li a:hover { text-decoration: none; border: 1px #9c0 solid; }
      ul.calination li.day_activ { color: #dadada; font-size: 250%; font-weight: bold; line-height: 26px; margin:0; padding: 0 6px; border: 0; }
      ul.calination li a.week_before { background: url(../../img/arrow_prev.gif) no-repeat top right; width: 14px; height: 25px; text-indent: -9999px; margin: 0; padding: 0; border: 0; }
      ul.calination li a.week_after { background: url(../../img/arrow_next.gif) no-repeat top left; width: 14px; height: 25px; text-indent: -9999px; margin: 0; padding: 0; border: 0; }
      ul.calination li a.week_before:hover { background: url(../../img/arrow_green_prev.gif) no-repeat top right; border: 0; }
      ul.calination li a.week_after:hover { background: url(../../img/arrow_green_next.gif) no-repeat top left; border: 0; }

jetzt soll das Teil aber mittig in einem DIV positioniert werden, was es leider nicht mach?

HTML:

      .centerCol { width: auto; text-align: center; margin: 0 90px 0 100px; }

            <div class="centerCol">
                <ul class="calination">
                  <li><a class=week_before href="#">&lt;</a></li>
                  <li><a href="#">Mo</a></li>
                  <li><a href="#">Di</a></li>
                  <li class="day_activ">Mi</li>
                  <li><a href="#">Do</a></li>
                  <li><a href="#">Fr</a></li>
                  <li><a href="#">Sa</a></li>
                  <li><a href="#">So</a></li>
                  <li><a class=week_after href="#">&gt;</a></li>
                </ul>
            </div>
        </div>

GN911

Quaese · 26. Juli 2009

Hi,

um die Links in der Höhe anpassen zu können, solltest du sie als Blockelemente auszeichnen und weiterhin mittels float aus dem Textfluss genommen werden. Die Höhe erhalten sie über die Zeilenhöhe, die Breite wird für die gerahmten Elemente auf eine Breite/Mindestbreite festgelegt. Die Paddingwerte entfallen im Gegenzug.

Mein Vorschlag:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<style type="text/css">
  <!--
#calination a{
  display: block;
  float: left;
  line-height: 31px;
  min-width: 33px;
  width: auto !important;
  width: 33px;
  text-align: center;
}
#calination a { border: 1px #dadada solid; margin-right: 2px; }
#calination span.next a, #calination span.next a:hover,
#calination span.previous a, #calination span.previous a:hover,
#calination a.blank,
#calination a img { border: 0 none !important; }

#calination a.blank{
  width: auto !important;
  min-width: 14px !important;
}
#calination a img {
  display: block;
  padding: 3px;
}

#calination a:link,
#calination a:visited { color: #9c0; text-decoration: none; text-align: center; font-size: 133.33%; border: 1px #9c0 solid;}
#calination a:hover { border: 1px #dadada solid; }

#calination a span.current { color: #dadada; font-size: 250%; font-weight: bold; border: 0 none;}
#calination a.current, #calination a:hover.current { color: #dadada; font-size: 250%; font-weight: bold; border: 0 none;}
 //-->
</style>
</head>

<body>
<div id="calination">
  <a href="#" class="blank"><span class="previous"><img src="img/arrow_prev.gif" width="14" height="25" alt="" /></span></a>
  <a href="#">Mo</a>
  <a href="#">Di</a>
  <a href="#" class="blank"><span class="current">Mi</span></a>
  <a href="#">Do</a>
  <a href="#">Fr</a>
  <a href="#">Sa</a>
  <a href="#">So</a>
  <a href="#" class="blank"><span class="next"><img src="img/arrow_next.gif" width="14" height="25" alt="" /></span></a>
</div>
</body>
</html>

Ciao
Quaese

GN911 · 26. Juli 2009

Hallo Quaese,

ich bin mir jetzt nicht sicher, ob wir das gleiche meinen.
Unter http://www.xlabs.de/78/ siehst du die Seite.
Die Navigation soll center, sowie middle in .centerCol dargestellt werden.

hier habe ich dein Beispiel: http://www.xlabs.de/78/test.html

GN911

Quaese · 26. Juli 2009

Hi,

ok, ich hatte dich offensichtlich falsch verstanden.

Versuch mal folgendes:

Code:

.centerCol {
	margin: 0 100px;
	text-align: center;
	width: auto;
}
ul.calination {
	float: left;  /* vertikale Anpassung */
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0 auto 0 85px; /* 85 = ((Breite centerCol) - (Breite ul.calination))/2 = (442 - 271)/2  (abgerundet)*/
	padding: 0;
}
* html ul.calination{
	margin-left: 42px; /* wg. double-margin-bug */
}

Ciao
Quaese

hela · 27. Juli 2009

Hallo,
so abwegig war die Idee für das Menü Inline-Elemente zu verwenden gar nicht. Folgendes geht auch:

HTML:

<div class="centerCol">
  <div class="cal-menue">
    <a href="#" class="prev">&lt;</a>
    <a href="#">Mo</a>
    <a href="#">Di</a>
    <a href="#" class="current">Mi</a>
    <a href="#">Do</a>
    <a href="#">Fr</a>
    <a href="#">Sa</a>
    <a href="#">So</a>
    <a href="#" class="next">&gt;</a>
  </div>
</div>

CSS:

Code:

div.cal-menue {
/*  text-align: center; Zentrierung vererbt vom DIV.centerCol */
  font-size: 1.333em; /* Schriftgröße! */
  margin-top: -0.5em; /* vertikale Positionierung */
}
div.cal-menue a {
  border: 1px solid #ddd;
  padding: 0 0.2em;
  color: #9c0;
  text-decoration: none;
  vertical-align: middle;
}
div.cal-menue a:hover {
  border-color: #9c0;
}
div.cal-menue a.current {
  padding: 0;
  font-size: 2em;
  font-weight: bold;
  cursor: default;
}

div.cal-menue a.current,
div.cal-menue a.prev,
div.cal-menue a.next {
  border: 0;
  color: #ddd;
}
div.cal-menue a.prev {
  background-image: url(../img/arrow_prev.gif);
  background-position: center;
  background-repeat: no-repeat;
}
div.cal-menue a.next {
  background-image: url(../img/arrow_next.gif);
  background-position: center;
  background-repeat: no-repeat;
}

div.cal-menue a.prev:hover {
  background-image: url(../img/arrow_green_prev.gif);
  color: #9c0;
}
div.cal-menue a.next:hover {
  background-image: url(../img/arrow_green_next.gif);
  color: #9c0;
}

Falls im DIV.centerCol kein weiterer Inhalt steht und im Dokument kein anderes Element mit der Klassenbezeichnung "centerCol" auftaucht, dann könntest du dir den DIV.cal-menue auch sparen.

GN911 · 27. Juli 2009

hela hat gesagt.:
Falls im DIV.centerCol kein weiterer Inhalt steht und im Dokument kein anderes Element mit der Klassenbezeichnung "centerCol" auftaucht, dann könntest du dir den DIV.cal-menue auch sparen.

also .centerCol ist nur dafür vorgesehen. Wird also nicht nochmal verwendet.
Wie mach ich das denn ohne DIV.cal-menu?

Gruß GN911

GN911 · 27. Juli 2009

Hallo,

habe es wie folgt jetzt gemacht:

HTML:

      .centerCol { width: auto; text-align: center; margin: 0 90px 0 100px; }

      .centerCol {
          font-size: 133.33%; /* Schriftgröße! */
          margin: -0.5em 0; /* vertikale Positionierung */
      }

      .centerCol a {
          border: 1px solid #dadada;
          padding: 0 0.5em;
          color: #9c0;
          text-decoration: none;
          vertical-align: middle;
      }

      .centerCol a:hover {
          border-color: #9c0;
      }

      .centerCol a.current {
          padding: 0;
          font-size: 200%;
          font-weight: bold;
          cursor: default;
      }

      .centerCol a.current,
      .centerCol a.prev,
      .centerCol a.next {
          border: 0;
          color: #dadada;
      }

      .centerCol a.prev {
          text-indent: -9999px;
          background: url(../../img/arrow_prev.gif) no-repeat center right;
      }

      .centerCol a.next {
          text-indent: -9999px;
          background: url(../../img/arrow_next.gif) no-repeat center left;
      }

      .centerCol a.prev:hover {
          background-image: url(../../img/arrow_green_prev.gif);
      }

      .centerCol a.next:hover {
          background-image: url(../../img/arrow_green_next.gif);
      }

Nun wollte ich den Text in .prev und .next mittels text-indent: -9999px; verschwinden lassen.
Funktioniert aber nicht?

gruß GN911

hela · 28. Juli 2009

GN911 hat gesagt.:
...Nun wollte ich den Text in .prev und .next mittels text-indent: -9999px; verschwinden lassen.
Funktioniert aber nicht?

Kann auch nicht funktionieren.
Sieh dir bitte mal an, was die text-indent-Eigenschaft eigentlich bewirkt. Spätestens dann sollte eigentlich klar werden, dass man diese Eigenschaft nur einem Blockelement zuweisen kann. Da aber nun offensichtlich alles als einzeiliger Text im DIV#centerCol steht, ist das untauglicher Versuch am ungeeigneten Objekt.

Ich weiss auch nicht so recht, warum du das machen willst. Wenn du die gleiche Schriftfarbe wie der Hintergrund wählst, dann sieht man auch beim scharfen Hinsehen nichts davon.
Ansonsten müsstest du es so machen, wie Quaese dir das vorgeschlagen hat.

✔ Links formatieren "pagination"

GN911

Erfahrenes Mitglied

Anhänge

Loomis

Mitglied Bunt

GN911

Erfahrenes Mitglied

Quaese

Moderator

GN911

Erfahrenes Mitglied

Quaese

Moderator

hela

GN911

Erfahrenes Mitglied

GN911

Erfahrenes Mitglied

hela

Neue Beiträge