|
|||
bewegliche Fussleiste wenn Menü afgeklappt wird
Hallo,
hab ne Frage zu meinem Style sheet. Bekomm es iwie nicht hin. Hab ein Menü auf der linken seite, wie im Anhang zu sehn ist. Mein Problem ist das wenn ich das Menü aufklappe sich die Fußleiste nicht mit nach unten bewegt und somit das Menü sich einfach über die Fußleiste aufklappt, was natürlich nicht sein soll. Die Fußleiste soll also nich statisch an der stelle bleiben sondern sich mit nach unten bewegen sobald das Menü darüber hinaus ragt wenn es aufgeklappt ist. Code:
/* KLASSEN ANWEISUNGEN */ body { width: 1000px; font-family: Arial; font-size: 14px; color: #000; margin: 0px; background-image:url(../images/background2.jpg); background-repeat: repeat-x; } html {overflow-y:scroll;} /* LAYOUT - ANWEISUNGEN */ #site { position: absolute; width: 1000px; /* left: -50%; */ margin-left: 2px; background-color: #FFF; margin-top: 5px; margin-bottom: 5px; } #topCase1 { position: static; height: 150px; width: 1000px; background-image:url(../images/testlogo2.jpg); } #topCase2 { position: static; height: 30px; width: 180px; margin-left: 820px; margin-top: -60px; background-color: transparent; text-align: left; } #topCase3 { position: static; height: 30px; width: 1000px; background-color: transparent; text-align: left; vertical-align: top; padding-top: -20px; } #topCase4 { position: static; height: 100px; width: 1000px; /* background-color: #AAA; */ /* background-image: url(../images/header.gif); */ /* background-image:url(../images/background3.jpg); */ /* background-image: url(../images/sparten.gif); */ /* background-position: center; */ /* margin-left: -20px; */ /* padding-bottom: 5px; */ } #breadcrumb { position: static; width: 900px; height: 25px; /* padding-left: 5px; padding-top: 4px; */ background-color: transparent; background-image: url(../images/nav.gif); background-repeat: repeat-x; } #newsflash { position: static; width: 100px; height: 25px; margin-top: -25px; margin-left: 900px; /* padding-left: 5px; */ /* padding-top: 4px; */ background-color: transparent; /* BLANK */ /* background-image: url(../images/nav.gif); */ background-image: url(../images/nav.gif); background-repeat: repeat-x; } #content { position: static; width: 1000px; } #left { position: static; float: left; width: 220px; margin-top: 0px; padding-bottom: 20px; /* min-height: 300px; */ /* background-color: lightgrey; */ } #text { position: static; margin-top: 0px; margin-left: 220px; /* Workaround für min-height -> nicht für IE kompatibel */ min-height: 350px; height: auto !important; /* für moderne Browser */ height: 350px; /* für den IE */ width: 700px; padding-top: 5px; padding-left: 0px; padding-right: 0px; padding-bottom: 10px; font-size: 10px; font-family: Arial; } #footer { position: static; width: 1000px; height: 30px; /* background-color: #CC0011; */ /* background-image: url(../images/bg_nav_2nd_lev_left_border.gif); */ background-image: url(../images/footer2.gif); } #footertext { font-size: 10px; font-family: Arial; text-align: center; /* vertical-align: bottom; */ padding-top: 7px; } /* WEBSITE ELEMENTE POSITIONIEREN */ #date { position: absolute; margin-left: 950px; margin-top: 10px; font-size: 8px; } #logo { position: absolute; } #caseText { position: absolute; color: #FFF; font-size: 10px; /* font-style: italic; */ margin-top: 5px; margin-left: 20px; } #modules_left { position: static; margin-top: 0px; margin-left: 0px; float: left; } #modules_user3 { position: static; } /* SUCHERGEBNISSEITE */ #searchForm { font-size: 12px; font-family: Arial; } #searchForm a{ font-size: 12px; font-family: Arial; font-weight: bold; } .highlight { font-size: 12px; font-family: Arial; font-weight: bold; font-style: italic; color: #df0024; } /* SUCHERGEBNISSEITE - */ .small { font-size: 12px; font-family: Arial; } /* STANDARD HTML FORMATIERUNGEN */ h1 { color: #000000; font-size: 16px; font-weight: bold; margin: 0px; /* Befehl für Firefox */ } h2 { color: #000000; font-size: 14px; font-weight: bold; /* padding-top: 5px; */ /* padding-left: 10px; */ margin: 0px; /* Befehl für Firefox */ } h3 { color: #000000; font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } h4 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #000000; } } img { border: 0px; } /* allgemeine Linkfarbenanpassung */ a:link { /* color: darkred; */ color: #df0024; text-decoration: none; } a:visited { color: #df0024; text-decoration: none; } a:hover { color: #df0024; text-decoration: underline; } /* Linkfarbenanpassung bei Veröffentlichungen */ a:link.redads { text-decoration:none; color:#000000; } a:visited.redads { text-decoration:none; color:#000000; } a:hover.redads { text-decoration:underline; color:#df0024; } a:active.redads{ text-decoration:none; color:#df0024; } a:focus.redads{ text-decoration:none; color:#df0024; } a img { border: none; } /* Joomla Standard Elemente */ /* Versuch kmi 26.09.2008 */ /* .content { font-size: "2"; font-family: "Arial, Helvetica, sans-serif"; color: "#333333"; text-align: "justify"; } */ /* Überschrift */ .componentheading { color: #000000; font-size: 14px; font-weight: bold; padding-bottom: 10px; } /* Beitragsüberschrift */ .contentheading { color: #000000; font-size: 14px; font-weight: bold; font-family: Arial; } /* Kleiner Text */ .small { color: #000000; font-size: 10px; font-weight: normal; } /* Erstellungsdatum eines Beitrages */ .createdate { color: #000000; font-size: 10px; font-weight: normal; } /* Veränderungsdatum eines Beitrages */ .modifydate { color: #000000; font-size: 10px; font-weight: normal; } /* MODUL LATESNEWS FORMATIERUNG */ ul.latestnews { list-style-type: none; padding: 0px; margin: 0px; } a.latestnews { font-style: italic; text-decoration: none; color: #FFF; } a:hover.latestnews { font-style: italic; text-decoration: underline; color: #FFF; } /* MODUL MOSTREAD FORMATIERUNG */ ul.mostread { list-style-type: none; padding: 0px; margin: 0px; } a.mostread { font-style: italic; text-decoration: none; color: #FFF; } a:hover.mostread { font-style: italic; text-decoration: underline; color: #FFF; } /* Weiterlesen Link */ a.readon { font-size: 11px; font-family: Arial; } /* MODUL POLL FORMATIERUNG */ .poll { margin-left: -10px; } .pollstableborder { text-align: left; /* IE - Formatierung */ font-style: italic; } .sectiontableentry1 { text-align: left; /* IE - Formatierung */ font-style: normal; } .sectiontableentry2 { text-align: left; /* IE - Formatierung */ font-style: normal; } /* MENÜ DIV FORMATIERUNG */ .moduletable_menu { background-image:url(../images/backgroundMenu.jpg); background-repeat: no-repeat; } .moduletable_menu h3 { margin: 0px; padding-left: 20px; padding-top: 10px; font-size: 12px; color: #000; } /* MENÜ FORMATIERUNG */ .menu { margin: 0px; padding: 0px; padding-top: 10px; padding-left: 20px; list-style-image:url(../images/menu.gif); line-height: 20px; font-size: 12px; font-weight: bold; } /* kmi 20.10.2008 */ .moduletable ul { margin-top: 5px; padding-left: 10px; } /* Anpassung von rokslideshow in der LEFT Position */ .moduletable_slideshow { padding-left: 10px; } /* Anpassung bzw. einrücken des Menue*/ .moduletable_mainmenu { margin-left: 15px; } /* Anpassung von rokslideshow in der LEFT Position */ .moduletable_slideshow2 { padding-left: 10px; } .moduletable_breadcrumb { padding-top: 3px; padding-left: 10px; } /* Nächste Messetermine auf LEFT */ .moduletable_latestevents { padding-top: 0px; padding-left: 10px; width: 190px; font-family: Arial; font-size: 11px; } .moduletable_latestevents li span.location { font-weight: bold; } .moduletable_latestevents ul { padding-left: 0px; } /* Sprachauswahl auf LEFT */ .moduletable_languageselection { padding-top: 10px; padding-left: 10px; } /* Suchbox auf LEFT */ .moduletable_search { padding-top: 10px; padding-left: 10px; } /* Befehl um den Abstand der einzelnen Elementen im Navigationspfad zu ändern a.pathway { padding-left: 10px; } */ /* Positionierung der Header-Grafik */ .moduletable_header { position: static; margin-top: -5px; margin-left: -20px; } /* Positionierung des Topmenüs */ .moduletable_exmenu { position: static; margin-top: 0px; } /* Positionierung der Footer-Textes */ .moduletable_footer { margin-top: 10px; margin-left: -20px; } /* KATEGORIE FORMATIERUNG kmi 23.10.2008 */ a.category { font-size: 12px; line-height: 1.5em; } a.contentpagetitle { font-size: 14px; font-family: Arial; } tr.sectiontableentry1 { font-size: 12px; line-height: 1.5em; text-indent: 2px; } tr.sectiontableentry2 { font-size: 12px; line-height: 1.5em; text-indent: 2px; } /* ANMELDEMASKE FORMATIERUNG */ .moduletable_login { margin-top: 10px; width: 175px; font-size: 10px; padding-left: 10px; } .moduletable_login h3 { font-size: 12px; padding-left: 20px; } .moduletable_login p { margin: 0px; } .moduletable_login ul li { display:none; } /* .moduletable_login ul { list-style-type: none; margin: 0px; padding: 0px; padding-top: 10px; padding-left: 10px; } */ /* WHOSONLINE FORMATIERUNG */ .moduletable_online { font-size: 11px; } .moduletable_online h3 { font-size: 13px; margin: 0px; padding-top: 15px; padding-bottom: 5px; } /*Suchmaske*/ .search { text-align: left; padding-left: 0px; padding-top: 0px; font-family: Arial; font-size: 12px; } wäre über jede Hilfe sehr dankbar! |
Sponsored Links |
|
||||
Zitat:
Absolute positionierte Elemente sind aus dem Textfluss genommen und deshalb bekommt Dein Footer auch nicht mit, wenn das Menü aufgeklappt wird. |
|
|||
also wenn ich beim "footer die position: absolute" setze verschiebt sie sich sobald das Menü aufgeklappt wird, aber leider nur beim IE.
Beim Firefox bleibt die fussleiste immer noch da wo sie ist!! Gibt es da nen bestimmten befehl noch für den FF, der eingetragen werden muss? gruss |
|
|||
Zitat:
das auto hatte ich wegen meinem problem im kopf bei mir funktioniert alles wenn ich position im #footer weg lasse der footer bewegt sich dann nach unten im firefox (ie kann ich nicht testen hab nicht) aber wie wärs mit den html code |
|
|||
hier der HTML Code
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" > <head> <title>INTERNORMEN Intranet</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, Joomla" /> <meta name="title" content="Schwarzes Brett" /> <meta name="author" content="Patric Auer" /> <meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" /> <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" /> <title>Schwarzes Brett</title> <script type="text/javascript" src="/joomla/media/system/js/mootools.js"></script> <script type="text/javascript" src="/joomla/media/system/js/caption.js"></script> <!-- Verkn�pfung zum CSS herstellen --> <link rel="stylesheet" href="/joomla/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/joomla/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/joomla/templates/internormen/css/template_css.css" type="text/css" /> </head> <body> <div id="site"> <div id="topCase1"> </div> <div id="topCase2"> <div id="caseText"> </div> </div> <div id="topCase3"> <!--<h2>Feld3</h2>--> <div id="caseText"> </div> </div> <div id="topCase4"> <!-- <h2>User3</h2> --> <!-- <img src="/joomla/../images/background3.jpg /> --> <!-- Einbindung von Flashheader - Anfang <object type="application/x-shockwave-flash" height="100" width="1000" data="http://www.internormen.com/cms/templates/internormen/images/test_akt.swf"> <param value="http://www.internormen.com/cms/templates/internormen/images/test_akt.swf" name="movie" /> <param name="quality" value="high" /> <param value="false" name="menu" /></object> Einbindung von Flashheader - Ende--> <!-- Einbindung von Flashheader - Anfang--> <object> <embed wmode="transparent" height="100" width="1000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/joomla/../joomla/images/header/header.swf" play="true" loop="true" menu="true"> </embed> </object> <!--Einbindung von Flashheader - Ende--> <div id="caseText"> </div> </div> <div id="breadcrumb"> </div> <div id="newsflash"> <url=http://www.internormen.com/cms/de/neuigkeiten/neue-produkte> </div> <div id="content"> <div id="left"> <div id="modules_left"> <div class="moduletable_mainmenu"> <h3>Intranet</h3> <ul class="menu"><li class="parent item26"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=26"><span>Abteilungen</span></a></li><li class="parent item16"><a href="http://192.168.99.199/joomla/"><span>Telefon/Fax/E-Mail</span></a></li><li class="parent item12"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=12"><span>Software</span></a></li><li class="parent item27"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=27"><span>Technische Daten</span></a></li><li class="parent item28"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=28"><span>Preislisten</span></a></li><li class="parent item29"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=29"><span>Info-Pläne</span></a></li><li class="parent item54"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=54"><span>Formulare</span></a></li><li id="current" class="active item53"><a href="/joomla/index.php?option=com_content&view=article&id=3&Itemid=53"><span>Schwarzes Brett</span></a></li><li class="parent item59"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=59"><span>Ausbildung</span></a></li><li class="parent item76"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=76"><span>Arbeitsanweisungen</span></a></li><li class="parent item70"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=70"><span>Schulungsunterlagen</span></a></li><li class="parent item4"><a href="/joomla/index.php?option=com_content&view=frontpage&Itemid=4"><span>Links</span></a></li></ul> </div> <div class="moduletable_login"> <form action="/joomla/index.php?option=com_content&view=article&id=3&Itemid=53" method="post" name="login" id="form-login" > <fieldset class="input"> <p id="form-login-username"> <label for="modlgn_username">Benutzername</label><br /> <input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" /> </p> <p id="form-login-password"> <label for="modlgn_passwd">Passwort</label><br /> <input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" /> </p> <p id="form-login-remember"> <label for="modlgn_remember">Angemeldet bleiben</label> <input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" /> </p> <input type="submit" name="Submit" class="button" value="Anmeldung" /> </fieldset> <ul> <li> <a href="/joomla/index.php?option=com_user&view=reset"> Passwort vergessen?</a> </li> <li> <a href="/joomla/index.php?option=com_user&view=remind"> Benutzername vergessen?</a> </li> <li> <a href="/joomla/index.php?option=com_user&task=register"> Registrieren</a> </li> </ul> <input type="hidden" name="option" value="com_user" /> <input type="hidden" name="task" value="login" /> <input type="hidden" name="return" value="L2pvb21sYS9pbmRleC5waHA/b3B0aW9uPWNvbV9jb250ZW50JnZpZXc9YXJ0aWNsZSZpZD0zJkl0ZW1pZD01Mw==" /> <input type="hidden" name="034cbbe4b5a639907a46c645629073f8" value="1" /></form> </div> </div> </div> <div id="text"> <table class="contentpaneopen"> <tr> <td class="contentheading" width="100%"> Schwarzes Brett </td> </tr> </table> <table class="contentpaneopen"> <tr> <td valign="top"> <table align="left" border="1"> <tbody style="text-align: left;"> <tr style="text-align: left;"> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span>Umgang mit Kommunikationseinrichtungen </span></span></td> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span> </span></span><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><a href="/joomla/index.php?option=com_content&view=article&id=1%3Aumgang-mit-kommunikationseinrichtungen&catid=5%3Aschwarzes-brett&Itemid=53">...mehr</a></span></td> </tr> <tr style="text-align: left;"> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span>Erste-Hilfe-Lehrgang Grundausbildung</span></span></td> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span> <a target="_self" href="/joomla/index.php?option=com_content&view=article&id=2%3Aerste-hilfe-lehrgang-grundausbildung-&catid=5%3Aschwarzes-brett&Itemid=53">...mehr</a> <br /></span></span></td> </tr> <tr style="text-align: left;"> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span>Arbeitszeitenregelung</span></span></td> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span> <a href="/joomla/index.php?option=com_content&view=article&id=4%3Aarbeitszeitenregelung&catid=5%3Aschwarzes-brett&Itemid=53">...mehr</a> <br /></span></span></td> </tr> <tr style="text-align: left;"> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span>Kaffemaschinen</span></span></td> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span> <a href="/joomla/index.php?option=com_content&view=article&id=5%3Akaffeemaschinen&catid=5%3Aschwarzes-brett&Itemid=53">...mehr</a> <br /></span></span></td> </tr> <tr style="text-align: left;"> <td style="text-align: left;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span>Regelung bei Fehl- und Kranktagen</span></span></td> <td style="text-align: center;"><span style="font-size: 10pt; font-family: arial,helvetica,sans-serif;"><span> <a href="/joomla/index.php?option=com_content&view=article&id=6%3Aregelung-bei-fehl-und-kranktagen&catid=5%3Aschwarzes-brett&Itemid=53">...mehr</a> </span></span></td> </tr> </tbody> </table> </td> </tr> </table> <span class="article_separator"> </span> </div> </div> <div id="footer"> <div id="footertext"> </div> </div> </div> </body> </html> IE wird richtig dargestellt, FF leider nicht. Bin am verzweifeln gruss |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
Vertikale Navigation: IE6 - Whitespace-Bug? | b.erry | CSS | 6 | 12.02.2009 16:46 |
Umbruch in einem LI bei horizontalem Menü | M4rco | CSS | 12 | 13.10.2006 11:26 |
Navigation - Menü | T.S. | CSS | 6 | 18.02.2006 18:49 |