Autor |
Nachricht |
eyepe
Threadersteller
Dabei seit: 30.05.2005
Ort: Thüringen
Alter: 36
Geschlecht:
|
Verfasst Sa 09.01.2010 12:06
Titel CSS - Horizontale Navi hilfe |
|
|
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.
Ich danke schonmal für die Hilfe!
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Sa 09.01.2010 12:36
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
eyepe
Threadersteller
Dabei seit: 30.05.2005
Ort: Thüringen
Alter: 36
Geschlecht:
|
Verfasst Sa 09.01.2010 12:57
Titel
|
|
|
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
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Sa 09.01.2010 13:59
Titel
|
|
|
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 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
|
|
|
|
|
eyepe
Threadersteller
Dabei seit: 30.05.2005
Ort: Thüringen
Alter: 36
Geschlecht:
|
Verfasst Sa 09.01.2010 15:32
Titel
|
|
|
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
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Sa 09.01.2010 16:11
Titel
|
|
|
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).
|
|
|
|
|
|
|
|
Ä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
|
|