<div>s, float/overlay über anderen Elementen in css
Diese Frage bezieht sich auf meine web-Seite unter dieser Adresse: http://www.acehscmaths.com/welcome/testhome
Wenn Sie klicken Sie auf die "Chart" - Menü-option (neben dem logo rechts oben), zieht er down Menü mehr Optionen, diese bewirkt dann, dass die ganze Seite nach unten gedrückt werden. Gibt es jemanden, den ich das anwenden einer CSS-Einstellung, um diese drop-down-Elemente, so dass Sie überlagern sich über den vorhandenen Inhalt (um nicht zu drücken die ganze Seite nach unten).
Ich bin mir nicht sicher, welche bits der code, den ich kopieren sollte, so habe ich einfach kopiert, das Menü in Frage:
<div class="col-md-3">
<div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">
<ul class="side-menu">
<li>
<a href="charts.html" class="is-dropdown-menu">
<span class="badge pull-right"></span>
<i class="icon-bar-chart"></i> Charts
</a>
<ul>
<li>
<a href="charts.html#area_chart_anchor">
<i class="icon-random"></i>
Area Chart
</a>
</li>
<li>
<a href="charts.html#circle_chart_anchor">
<i class="icon-bullseye"></i>
Circular Chart
</a>
</li>
<li>
<a href="charts.html#bar_chart_anchor">
<i class="icon-signal"></i>
Bar Chart
</a>
</li>
<li>
<a href="charts.html#line_chart_anchor">
<i class="icon-bar-chart"></i>
Line Chart
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">
<ul class="side-menu">
<li>
<a href="newquestion">
<i class="icon-question"></i> Question
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">
<ul class="side-menu">
<li>
<a href="newnotes">
<i class="icon-book"></i> Study Notes
</a>
</li>
</ul>
</div>
</div>
Vielen Dank im Voraus.
InformationsquelleAutor user1149620 | 2013-12-29
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hinzufügen der folgenden Anpassungen in Ihrer css sollte das Problem zu beheben und halten die Flüssigkeit layout Ihrer Seite.
Vielleicht braucht es ein wenig Anpassung sollte aber Sortieren, das Problem.
Nochmals vielen Dank für diese. Ich denke aber, das styling ist gebrochen, wenn dies zu tun - bitte könnten Sie mir helfen herauszufinden, warum und wie zu beheben. Nochmals vielen Dank für Ihre Geduld. Ich möchte, dass es so Aussehen http://www.acehscmaths.com/welcome/testhome2 aber mit den dropdown-Effekt (d.h. nicht bewegt, andere divs) http://www.acehscmaths.com/testhome - es gibt nur einen Unterschied in der CSS zwischen den 2 Versionen, die version mit dem dropdown, aber ärmer styling hat die folgenden CSS-Hinzugefügt: .side-menu { position:relative; } .side-menu li ul { position:absolute; z-index:99; width:100%; }
Nein, überhaupt kein problem! Man könnte hinzufügen, der border-radius und box-shadow-Eigenschaften '.side-Menü' auf '.side-menu li ul', aber mit den helleren hintergrund werden Sie unweigerlich verlieren, die gewünschte Tiefe, fürchte ich.
Danke, ich habe gerade diese änderung vorgenommen und es sieht jetzt viel besser. Vielen Dank nochmal für die Hilfe - du hast eindeutig ein CSS-Experte - also, wenn Sie denken, von einem anderen Weg, um es schöner Aussehen, dann lassen Sie es mich bitte wissen. Ich denke, es sieht ziemlich gut jetzt (aktualisiert am oben genannten URL - acehscmaths.com/welcome/testhome). Danke.
InformationsquelleAutor asherstoppard
Zu side-bar-wrapper .side-Menü > li > ul (Ihr ul unter li mit der Klasse aktiv) hinzufügen
Können Sie wählen, kleineren z-index. Ich Breite auf 350px denn es schien in etwa gleich zu sein, sondern Sie sollten es Ihren Weg.
position: absolute;
ist schon genug, wenn keine anderen Elemente auf der z-indexIn meinem test ohne z-index, Dropdown verborgen bleibt, also schlug ich den z-index auch.
Hallo, vielen Dank. Dieser funktioniert. Habe ich jetzt umgesetzt, aber es hat verursacht ein anderes Problem. Das Menü ist dementsprechend ausgelegt/dimensioniert, so dass eine Feste Breite-hier bricht die Strömung. Irgendeine Idee, wenn es einen Weg gibt, kann ich das beheben so gut, bitte? Nochmals vielen Dank.
InformationsquelleAutor CAPS LOCK
Den verborgenen Teil:
Müssen Sie die z-index, da erscheinen andere Dinge auf Ihrer Seite mit absoluter Positionierung.
InformationsquelleAutor Tarun