|
|||
Div Layer einblenden
Hallo,
Hallo, hinter dem etwas komplizierten Titel verbirgt sich etwas, dass denke ich alle kennen: Ich will einen Div Layer einblenden ohne, dass sich der Dokumentinhalt verschiebt. Auf der Seite befindet sich eine Suchfunktion und ein Button für die erweiterte Suche. Klickt man auf diesen Button soll ein Div Layer eingeblendet werden, indem die zusätzlichen Suchoptionen angezeigt werden. Dieser Layer soll den Hintergrund dann quasi überdecken. Im Moment wird der Layer aber einfach nur eingefügt und der restliche Dokumentinhalt nach unten verschoben. Das soll allerdings unterbunden werden, der Inhalt soll da bleiben wo er ist. So wie wenn ich hier in der Menüleiste auf "Community" klicke und sich dann sanft der Layer Community Links etc. einblendet. Ich hab den code da auch schon durchforstet, allerdings fällt es mir schwer, da das wesentliche rauszukriegen. Code Fragmente: Code:
envi.css #search { float:right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width:auto; height:auto; z-index:1; } #advancedSearch { position:relative; z-index:-1; display:none; float:right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width:auto; height:auto; background-color:#fff; padding:10px; margin:5px; line-height:3; } HTML-Code:
<div id="search"> <form action="scidoc.php" method="get" name="searchForm"> <label class="text">Search <input type="text" name="search"/></label> <input type="button" value="Advanced Search" onclick="showAdvanced('advancedSearch')" /> <div id="advancedSearch"> <?php echo '<label class="text"> from <select name="begin">'; $thisYear=getdate(); echo $thisYear["year"]; for ($x=1999; $x<= $thisYear["year"];$x++){ echo '<option value='.$x.'>'.$x.'</option>'; } echo '</select></label> <label class="text"> to <select name="end">'; for ($x=1999; $x<= $thisYear["year"];$x++){ if ($x==$thisYear["year"]) { echo '<option selected="yes">'.$x.'</option>'; break; } echo '<option value='.$x.'>'.$x.'</option>'; } echo '</select></label><br/>'; ?> <label class="text"> Document type <select name="document"> <option value="all" selected="yes">all</option> <option value="paper">paper</option> <option value="extern">extern</option> <option value="research">research doc</option> </select> </label> <br/> <input type="submit" value="search"> <input type="reset" value="reset"> </form> </div> </div> Also wenn mir jemand sagen kann warum der Layer mit der Id "AdvancedSearch" immer alles nach unten verschiebt oder besser wie man es vermeidet wäre ich euch sehr dankbar. Liebe Grüße Whity |
Sponsored Links |
|
|||
Moin,
ich schätze, es liegt daran, dass #advancedsearch relativ positioniert ist, bzw. wie die Elemente, die darauf folgen positioniert sind (clearer dazwischen?), bzw. wie der Layer positioniert ist, in dem die beiden Such-Container sind. Mit clearer meine ich einen Dummy-Layer, der nach den Floats "aufräumt"... Du kannst mal ausprobieren, ob Du die Floats raus lässt und stattdessen absolut positionierst, bzw. den Layer, in dem die Floats sind absolut positionierst, und die darauf folgenden auch. Vielleicht würde es auch reichen den #advancedsearch absolut zu positionieren (kein float). Ob das funktioniert kann ich Dir aber nicht garantieren, dafür steht hier zu wenig Code. Noch eine kleine Anmerkung, die eigentlich nichts zur Sache beisteuert: Die Seite wird nicht valide sein (falls sie es sein soll). Grüße |
Sponsored Links |
Stichwörter |
css layer einblenden |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |