nicht angemeldet
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