Hallo,
ich komme irgendwie nicht weiter.
Versuche meine alte Seite auf den neuesten Stand zu bringen und mache das ganze mit Bootstrap. Das Gerüst steht im Großen und Ganzen, alles soll responsive sein.
Bei kleineren Geräten verschwindet die Navigation und zeigt sich oben als Menü, wie gewünscht, allerdings und jetzt kommt es, der blaue Container bleibt trotzdem sichtbar, den man dann als leeren breiten Rahmen sieht.
Zur Veranschaulichung:
http://www.tierforen.net/_sittichede/anschaffung.htm
CSS:
[CODE]#hornav {
position: relative;
width: 100%;
}
#hornav .container {
background-color: #336699;
box-shadow: 0 -4px 0 #33747a inset, 0 0 20px rgba(0, 0, 0, 0.1);
min-height: 60px;
display: block;
}
#hornav .navbar-nav {
float: none;
}
#hornav .no-padding {
padding-bottom: 0 !important;
}
#hornav ul#hornavmenu {
display: inline-block;
margin: 0 0 -6px;
padding: 0px;
}
#hornav ul#hornavmenu > li {
margin: 0px;
}
#hornav ul#hornavmenu > li > a,
#hornav ul#hornavmenu > li > span {
color: #e3e3e3;
font-size: 14px;
font-weight: normal;
letter-spacing: 1px;
line-height: normal;
padding: 19px 12px 20px;
text-transform: uppercase;
display: block;
}
#hornav ul#hornavmenu > li > a:hover,
#hornav ul#hornavmenu > li > span:hover,
#hornav ul#hornavmenu > li > a.active,
#hornav ul#hornavmenu > li > span.active,
#hornav ul#hornavmenu > li > a.current,
#hornav ul#hornavmenu > li > span.current {
background: #33747a;
}
#hornav .nav > li > a:hover,
#hornav .nav > li > a:focus {
background-color: transparent;
}
/* Dropdown Menu */
#hornav ul ul {
text-align: left;
background: #f2f2f2;
border-radius: 5px;
border: 1px solid #dddddd;
position: relative;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
display: block;
list-style: none;
margin: 0px;
padding: 5px 0 !important;
min-width: 200px;
z-index: 30;
}
#hornav ul ul li {
min-height: 22px;
float: none;
position: relative;
margin: 0;
}
#hornav ul ul li a,
#hornav ul ul li span {
background-color: transparent;
box-shadow: none;
display: block;
padding: 6px 15px;
color: #555555 !important;
text-transform: none;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
#hornav ul ul:before {
background: transparent url(‚…/img/menu_arrow.png‘) no-repeat 0 0;
content: „“;
display: block;
height: 10px;
left: 21px;
position: absolute;
top: -10px;
width: 14px;
}
#hornav ul ul li:first-child a {
border: none;
}
#hornav ul ul li a:active,
#hornav ul ul li a:focus,
#hornav ul ul li a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.05);
}
#hornav ul ul li:hover a {
text-decoration: none;
}
#hornav ul ul ul:before {
display: none;
}
#hornav li ul,
#hornav li ul li ul {
position: absolute;
height: auto;
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 240ms linear;
-o-transition: all 240ms linear;
-ms-transition: all 240ms linear;
-moz-transition: all 240ms linear;
-webkit-transition: all 240ms linear;
top: 70px;
z-index: 1000;
}
#hornav li:hover > ul,
#hornav li ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
top: 60px;
}
#hornav li ul li ul {
left: 220px;
top: 0;
}
#hornav li ul li:hover > ul {
top: 0px;
left: 200px;
}
#hornav ul ul .parent:after {
top: 10px;
right: 15px;
color: #777;
font-size: 14px;
content: „\f105“;
position: absolute;
font-weight: normal;
display: inline-block;
font-family: FontAwesome;
}
[/CODE]
Den Quelltext der Seite sieht man, wenn man die Seite aufruft.
Was habe ich da falsch gemacht?