nicht angemeldet
Inneres DIV Element größer als Äußeres - Scrollbare Navigation
Hallo zusammen,
ich suche zur Zeit eine Lösung für folgendes Problem:
Ich habe eine horizontale Navigationsleiste mit n Navigationselementen.
Wenn ich jetzt sagen wir mal 20 Navigationselemente habe, gehen die rechts aus dem sichtbaren Bereich raus, so dass der User Scrollen muss, was sehr bescheiden aussieht.
Deshalb möchte ich die Navigation per JS "Scrollfähig" machen.
Dazu habe ich einen Div-Container mit der Eigenschaft "overflow:hidden" erstellt und dort den Navigationscontainer reingesetzt.
Wenn ich dem Container eine fixe Breite von beispielsweise 1000px gebe und dem Navigationselement ebenfalls eine fixe Breite von 2600px gebe, dann klappt der Code soweit komplett. Auch das Scrollen per JS funktioniert fehlerfrei.
Nun ist aber das Problem, dass der Container eine fixe Breite hat. Wenn ein User mit einer Auflösung von 1680*1050 surft wird er sich wundern, warum er scrollen muss, obwohl noch massig Platz auf seinem Display ist.
Deshalb habe ich mir gedacht, dass es doch eigentlich möglich sein müsste, dass relative Breitenangaben verwendet werden. Wenn ich das jedoch mache, wird auf die maximale Breite skaliert - somit ist die Scrollleiste nicht mehr 100% des Browser breit sondern 100% des breitesten Elements - in diesem Beispiel also 2600px.
Und genau das ist meine Frage:
Wie kann ich ein DIV Element mit fixer, beliebiger Breite in einen DIV-Container stecken, der jedoch auf maximal 100% der Browserbreite skaliert ist?
Der Browser in dem das ganze funktionieren muss ist der IE6, die anderen sind unwichtig. Auch ist das verwenden von JS komplett erlaubt und erwünscht.
Ich hatte schon überlegt, dass beim Skalieren die Breite des Containers fix und jedes mal geändert wird, aber dafür fehlen mir JS Kenntnisse.
Mein bisheriger Quellcode sieht so aus:
<html>
<head>
<title>Scrollfunktionstest</title>
<style type="text/css">
#navi {
display:block;margin:3px;padding:3px;
}
#navi li{
display:block;float:left;list-style:none;margin:3px;padding:3px;
}
</style>
<script language="javascript">
//Variable für die Position
var feinheit = 3;
function bewegen(richtung){
obj = document.getElementById("navmov");
obj2 = document.getElementById("navcontainer");
if (richtung == "-"){
if(parseInt(obj.style.left) + parseInt(obj.style.width) > parseInt(obj2.style.width)){
obj.style.left = parseInt(obj.style.left) - feinheit;
}
}
else if (richtung == "+"){
if(parseInt(obj.style.width) - parseInt(obj.style.left) - parseInt(obj.style.width) + parseInt(obj2.style.width) > parseInt(obj2.style.width)){
obj.style.left = parseInt(obj.style.left) + feinheit;
}
}
}
</script>
</head>
<body>
<table style="width:100%;">
<tr>
<td>
<div style="border:1px solid #f00;overflow:hidden;width:900px;height:40px;" id="navcontainer">
<div style="left:-50px;height:20px;width:2600px;position:relative" id="navmov">
<ul id="navi">
<li>Item Nummer 1</li>
<li>Item Nummer 2</li>
<li>Item Nummer 3</li>
<li>Item Nummer 4</li>
<li>Item Nummer 5</li>
<li>Item Nummer 6</li>
<li>Item Nummer 7</li>
<li>Item Nummer 8</li>
<li>Item Nummer 9</li>
<li>Item Nummer 10</li>
<li>Item Nummer 11</li>
<li>Item Nummer 12</li>
<li>Item Nummer 13</li>
<li>Item Nummer 14</li>
<li>Item Nummer 15</li>
<li>Item Nummer 16</li>
<li>Item Nummer 17</li>
<li>Item Nummer 18</li>
<li>Item Nummer 19</li>
<li>Item Nummer 20</li>
<li>Item Nummer 21</li>
<li>Item Nummer n</li>
</ul>
</div>
</div>
</td><td>
<div id="suche" style="width:300px; border:1px solid #f00;height:20px;background-color:#ff00ff;z-index:22;float:left;">Suchfunktion mit 300px Breite</div></td></tr></table>
<a href="#" onmousemove="javascript:bewegen('-')">LINKS</a>
<a href="#" onmousemove="javascript:bewegen('+')">RECHTS</a>
</body>
</html>
Ich möchte jetzt im Endeffekt, dass das Element navcontainer 100% der Tabellenzelle ausfüllt, wenn ich jedoch width:100% setze bezieht sich diese Breite auf das innere DIV-Element, da dieses das breiteste ist.
Ich weißt, dass Tabellen für Formatierungen verhasst sind und es geht hierbei im Endeffekt nicht um das fertige Design, sondern darum wie soetwas zu realisieren sein könnte. Wenn die Funktionalität steht kümmere ich mich um Konformität, also bitte seid nicht zu böse :-)
Vielen Dank schonmal für die Mühe bis hierher gelesen zu haben, ich hoffe das ist nur eine kleine Denklücke oder eine mir unbekannte CSS Eigenschaft und dass das Problem klar ist.
Gruß
Joachim
-
Habs jetzt so zusammengefrickelt:
function resizeit(){
document.getElementById('navcontainer').style.width = document.body.clientWidth -350 + 'px';
}<body onresize="javascript:resizeit()" onload="javascript:resizeit()">
Wenn jemand noch Ideen hat wie's anders geht - immer her damit :-)
-
Hi, bist du dir sicher, dass deine navigation
ueber 20 Punkte sinnvoll ist?
Ist es nicht moeglich, dass du deine
Navigation schachtelst? So scheint es mir ziemlich unuebersichtlich...-
Hallo,
ja, die Aufgabe ist eine theoretische Aufgabe, alternativ zu den 20 Elementen könnte es auch sein, dass die Menüpunkte eine große Schriftart oder ein Logo o.ä. erhalten, wodurch eine Navigation mit 5-7 Elementen bereits bei einer 800*600 Auflösung Probleme machen.Aber mit der JS Lösung bin ich soweit relativ zufrieden, wenn ich jetzt noch die Größe des inneren Elements dynamisch anpassen könnte wäre das ideal.
-
Wenn JS erwuenscht ist, koenntest du auch eine andere Variante
versuchen. Du koenntest deine Menuepunkte in einem Array speichern.
Zeige dann immer soviele an, wie du Platz hast. oder eine feste
Anzahl. Mittels vor- oder zurück- Button kannst du dann die naechsten
Punkte anzeigen.
Das waere dann auch eine Art scrollen. Das koenntest du dann mittels
onmouseover() noch verbessern...
-
-
-