navigationsleiste responsive design
meursault
- css
Ich habe gerade den ganzen Tag ohne Erfolg versucht eine Navigationsleiste für meine responsives Webdesign zu erstellen. Das Problem ist folgendes: wenn ich den Browser zusammenschieb, kommt irgendwann der Punkt wo das div mit den Schaltflächen eine Zeile nach unten rutscht. In der Höhe ist die Navigationsleiste absolut und nur die <div id="LayoutDiv1"> soll "zusammenrutschen". Das wiederum bis zu einem gewissen Punkt (135px von links) und ab da soll die Breite absolut und horizontal scrollbar sein.
Ich steh einfach nur noch auf dem Schlauch und bin für fast alles offen.
HTML:
<div id="LayoutDiv1"> </div>
<div id="LayoutDiv2">
<a href="#"><img src="../navi_verti/navi_verti_r1_c1.png"></a>
<a href="#"><img src="../navi_verti/navi_verti_r1_c2.png"></a>
<a href="#"><img src="../navi_verti/navi_verti_r1_c3.png"></a>
<a href="#"><img src="../navi_verti/navi_verti_r1_c4.png"></a>
<a href="#"><img src="../navi_verti/navi_verti_r1_c5.png"></a>
</div>
CSS:
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
margin-top: 1.5%;
min-width: 135px;
max-width: 30%;
display: inline-block;
background-color: rgba(170,170,170,0.7);
height: 31px;
#LayoutDiv2 {
clear: none;
float: left;
margin-top: 1.5%;
margin-left: 0%;
display: inline-block;
width: 640px;
height: 31px;
background-color: rgba(170,170,170,0.7);
DANKE!