mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:04 Benutzername: Passwort: Auto-Login

Thema: CSS - Horizontale Navi hilfe vom 09.01.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS - Horizontale Navi hilfe
Autor Nachricht
eyepe
Threadersteller

Dabei seit: 30.05.2005
Ort: Thüringen
Alter: 36
Geschlecht: Männlich
Verfasst Sa 09.01.2010 12:06
Titel

CSS - Horizontale Navi hilfe

Antworten mit Zitat Zum Seitenanfang

Hallo,

wie sollte der CSS Part für so eine Navi im idealfall aussehen?



Mein HTML dazu sieht so aus:
Code:

    <div id="subnavi">
        <span class="leftbutton back">
            <a style="border-left:0;" href="#">Zurück</a>
            </span>
        <span class="center">
            <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a>
        </span>
        <span class="rightbutton">
            <!--<a href="#">Ausleihen</a>--><a style="border-right:0;" href="#">Weiter</a>
        </span>
        <div style="clear:both;"></div>
    </div>


Und mein CSS-Versuch:
Code:

#subnavi {
   width: 898px;
   background-color: #ca5000;
   padding: 10px 0;
   border: 1px solid #f09358;
   margin-bottom: 20px;
   text-align: center;
   overflow: hidden;
   position: absolute;
   }
#subnavi a {
   color: #FFFFFF;
   text-decoration: none;
   padding: 10px 20px;
   border-right: 1px solid #ab4502;
   border-left: 1px solid #df7935;
   }
#subnavi a:hover {
   color: #051623;
   }
#subnavi .back a:hover {
   }
.leftbutton {
   float: left;
   padding: 10px 0;
   border-right: 1px solid #df7935;
   margin: -10px 0;
   position: absolute;
   left: 0px;
   top: 10px;
   }
.center {
   padding: 10px 0;
   border-left: 1px solid #ab4502;
   border-right: 1px solid #df7935;
   }
.rightbutton {
   float: right;
   padding: 10px 0;
   border-left: 1px solid #ab4502;
   margin: -10px 0;
   position: absolute;
   right: 0px;
   top: 10px;
   }


Leider fällt die Leiste zusammen, sobald die zentrierten Elemente fehlen. Desweiteren bereitet das "position: absolute" für den weiteren Seitenaufbau Probleme.

Ansonsten funktioniert es zwar grundsätzlich, aber ich befürchte da gibt es einen besseren Ansatz. *zwinker*

Ich danke schonmal für die Hilfe!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Sa 09.01.2010 12:36
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn Du für die verlinkten Zahlen jeweils eine feste Breite vergeben kannst (imho problemlos möglich, da Textzoom die Breite der Ziffern nicht übermäßig erhöht), ist es kein Problem. Aufwendig wird es nur, wenn Du die floatenden Zahlen-Links mit unbekannter Breite horiz. zentrieren willst (und sie müssen floaten, wegen ihrer pixelgenau von oben bis unten reichenden border - das ist mit display: inline; nicht zuverlässig möglich, und display: inline-block; würde ebenfalls einen hohen Aufwand bedeuten).

Unabhängig davon würde ich das Ganze als ul auszeichnen, d.h. wie ein normales Menü, denn auch hier ist es schlicht eine Auflistung der Optionen, die der Nutzer hat.


Zuletzt bearbeitet von heiko_rs am Sa 09.01.2010 12:49, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
eyepe
Threadersteller

Dabei seit: 30.05.2005
Ort: Thüringen
Alter: 36
Geschlecht: Männlich
Verfasst Sa 09.01.2010 12:57
Titel

Antworten mit Zitat Zum Seitenanfang

Bei den Zahlen sollte eine feste breite möglich sein, da sie max. zweistellig werden. Allerdings weis ich nicht, wie viele Seitenzahlen erscheinen werden. Des weiteren ist es so, dass sich die Links ändern. Da steht also nicht immer "Zurück" und "Weiter".

Im groben:
Startseite
Unterseite
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Sa 09.01.2010 13:59
Titel

Antworten mit Zitat Zum Seitenanfang

Okay, dann sollte schon alles variabel sein, d.h. Breite und Anzahl etc.

Anmerkungen zum Code-Beispiel: Die Umbrüche des > sind nicht wirklich toll (alternativ auskommentieren), aber bei display: inline-block; verursacht Quelltext-Whitespace einen horiz. Abstand von ca. 0.2em zwischen den Elementen (wie auch zwischen 2 Wörtern in normalem Text), und die dadurch nötige Pi-mal-Daumen-Schieberei (inkl. Zurücksetzen für den IE < 8, der bei zoom keine Abstände erzeugt) ist halt auch nicht toll.

Weiterhin zieht Opera 8 die Linien nicht bis ganz nach unten (als hätten die inline-block-li margin-bottom), aber diesbzgl. weiter zu probieren habe ich keine Lust *zwinker* Alle anderen Browser laufen, d.h. z.B. auch NN 7 und IE ab 5.5 (5.0 wäre auch kein Problem, habe ich aber erstmal außenvor gelassen).

Übrigens ist die Breite für die li mit display: inline-block; (sowie deren a) nicht zwangsläufig notwendig, macht die Konstruktion aber in FX < 3 stabiler.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
   margin: 0;
   padding: 0;
   }

#auswahl {
   width: 800px;
   list-style: none;
   text-align: center;
   background: #c00;
   }

#auswahl #vor {
   float: left;
   }

#auswahl #zurueck {
   float: right;
   }

#auswahl .direkt,
#auswahl .direkt a {
   width: 2.3em;
   }

#auswahl .direkt {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
   }

#auswahl a {
   display: block;
   color: #fff;
   padding: 5px 12px;
   }

#auswahl .direkt a {
   padding: 5px 0;
   }

#auswahl #zurueck,
#auswahl .direkt a {
   border-left: 1px solid #fff;
   }

#auswahl #vor,
#auswahl #last a {
   border-right: 1px solid #fff;
   }

</style>

<!--[if lt IE 8]>
<style type="text/css">

#auswahl .direkt {
   display: inline;
   zoom: 1;
   }

#auswahl a {
   float: left;
   }

</style>
<![endif]-->

</head>

<body>

<ul id="auswahl">
<li id="vor"><a href="#">vor</a></li>
<li id="zurueck"><a href="#">zurück</a></li>
<li class="direkt"><a href="#">1</a></li
><li class="direkt"><a href="#">2</a></li
><li class="direkt"><a href="#">3</a></li
><li class="direkt"><a href="#">4</a></li
><li class="direkt"><a href="#">5</a></li
><li class="direkt" id="last"><a href="#">6</a></li>
</ul>

</body>

</html>


Zuletzt bearbeitet von heiko_rs am Sa 09.01.2010 14:03, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
eyepe
Threadersteller

Dabei seit: 30.05.2005
Ort: Thüringen
Alter: 36
Geschlecht: Männlich
Verfasst Sa 09.01.2010 15:32
Titel

Antworten mit Zitat Zum Seitenanfang

Ich danke dir vielmals für deine Hilfe. Aber eine Kleinigkeit wäre da noch. Ich bekomm' meine Border jetzt nicht mehr hin. Ich hatte davor immer links-rechts abwechselnd hell-dunkel für diesen Relief-Effekt. Wo muss ich da jetzt ansetzten? Noch ein #auswahl li mit border-left und -right?

Bzw so sieht es gerade aus:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
   padding: 0;
   border: 0;
   margin: 0;
   }
body {
   background-color: #051623;
   color: #FFFFFF;
   font-family: "Trebuchet MS", Verdana;
   font-size: 12px;
   padding: 20px;
   }

#subnavi {
   width: 898px;
   list-style: none;
   text-align: center;
   background-color: #ca5000;
   border: 1px solid #f09358;
   }
#subnavi li {
   border-left: 1px solid #ab4502;
   border-right: 1px solid #df7935;
   }
#subnavi #left {
   float: left;
   }

#subnavi #right {
   float: right;
   }

#subnavi .direkt,
#subnavi .direkt a {
   width: 2.3em;
   }

#subnavi .direkt {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
   }

#subnavi a {
   display: block;
   color: #FFFFFF;
   text-decoration: none;
   padding: 5px 12px;
   }

#subnavi .direkt a {
   padding: 5px 0;
   }

#subnavi #right,
#subnavi .direkt a {
   border-right: 0;
   }

#subnavi #left,
#subnavi #last a {
   border-left: 0;
   }

</style>

<!--[if lt IE 8]>
<style type="text/css">

#subnavi .direkt {
   display: inline;
   zoom: 1;
   }

#subnavi a {
   float: left;
   }

</style>
<![endif]-->

</head>

<body>

<ul id="subnavi">
<li id="left"><a href="#">links</a></li>
<li id="right"><a href="#">rechts</a></li>
<li class="direkt"><a href="#">1</a></li
><li class="direkt"><a href="#">2</a></li
><li class="direkt"><a href="#">3</a></li
><li class="direkt"><a href="#">4</a></li
><li class="direkt"><a href="#">5</a></li
><li class="direkt" id="last"><a href="#">6</a></li>
</ul>

</body>

</html>


Zuletzt bearbeitet von eyepe am Sa 09.01.2010 15:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Sa 09.01.2010 16:11
Titel

Antworten mit Zitat Zum Seitenanfang

Am HTML ändert sich nix, Du musst dann nur li und a eine border geben. Die Breite von a würde ich dann aber rauswerfen (Boxmodell), und der IE bekommt dann zoom: 1; für a, statt float: left;.

Übrigens fehlt mir gerade die Editier-Funktion, daher hier noch nachträglich: Ich hatte in meinem Code-Beispiel erst später eine Breite hinzugefügt, und dabei vergessen, die Selektoren der beiden border-Deklarationen anzupassen - wegen des Boxmodells sollte natürlich nicht mehr a die border bekommen, sondern li (d.h. a muss jeweils aus den Selektoren gelöscht werden).
  View user's profile Private Nachricht senden
 
Ähnliche Themen Horizontale ul-Navi
Horizontale Navi bei contenido
Horizontale Navi - Wie realisiere ich das am besten?
horizontale css navi mit horizontaler subnavi zentrieren
Hilfe! HOrizontale Navi mit horizontaler Subnavi
Horizontale Scrolleiste im IE
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.