Hilfe für einen Neuling!!!

rene1972

Hallo erstmal!

Ich wurde von unserem Vorstand gebeten unsere Hp weiterezuführen und etwas aufzubessern, da der Vorgänger den Verein verlassen hat! Leider habe ich so gut wie keine Ahnung von dem ganzen und bin gerade im einarbeiten!
Mein Problem ist ein Drop Down Menü!

Hier die Originalseite wo ich eventuell ein DropDown ( bei "uber uns" )einfügen möchte http://www.svoe-kleinmuenchen.at/

Ich habe auch schon etwas rumprobiert und habe für mich brauchbares Menü und Design hinbekommen jedoch funktioniert es nur im Firefox http://members.liwest.at/haindl/httpdocs/ und nicht im iexplorer! Wobei ich sagen muss das diesen Menü mit"Css3 Menü" erstellt wurde!

Ich persönlich möchte bei den 2ten link weitermachen jedoch weis ich nicht ob es für einen Laien umsetzbar ist das Menü für Firefox und Iexplorer anzupassen !

Habe auch schon eine mänge Sachen Probiert aber entweder werden die Buttons nicht angezeigt oder es verschiebt sich alles und die Seite ist nicht mehr anzusehen!

Jetzt zu meiner Frage!

Könnte mir jemand bei einer von den Beiden Links weiterhelfen????

Also bei 1 ein drop down effect einfügen !
Index.html

Code

<!-- navigation starts-->
  <div id="nav"> 
    <ul>
      <li id="current"><a href="index.html">startseite</a></li>
      <li><a href="kurse.html">KURSE</a></li>
      <li><a href="news.html">NEWS</a></li>
      <li><a href="uns.html">ÜBER UNS</a></li>
            <li><a href="termine.html">TERMINE</a></li>
      <li><a href="traunauweg.html">Zwinger VOM TRAUNAUWEG</a></li>
      <li><a href="anfahrt.html">ANFAHRT</a></li>
    </ul>
    <!-- navigation ends-->
  </div>

Alles anzeigen

kleinmünchen.css

Code

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }


body {
    background: #CCC;
    font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
    color: #333333; 
    text-align: center;
    margin: 15px 0;
}


/* links */
a, a:visited {    
    color: #5A93C9;
    background: inherit;
    text-decoration: none;
}
a:hover {
    color: #88ac0b;
    background: inherit;
    text-decoration: underline;
}


/* headers */
h1, h2, h3 {
    font-family: 'Trebuchet MS', Tahoma, Sans-serif;
    font-weight: Bold;         
}
h1 {
    font-size: 190%;    
    font-weight: normal;
    color: #555;
}
h2 {
    font-size: 130%;
    text-transform: uppercase;
    color: #88ac0b;
}
h3 {
    font-size: 130%;    
}


h1, h2, h3, p {
    padding: 10px;        
    margin: 0;
}
ul, ol {
    margin: 5px 20px;
    padding: 0 20px;
}
ul {
    list-style: none;
}


/* images */
img {
    background: #FAFAFA;
    border: 2px solid #fafafa;
    padding: 5px;
}
img.float-right {
      margin: 5px 0px 10px 10px;  
}
img.float-left {
      margin: 5px 10px 10px 0px;
}


code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      /* white-space: pre; */
      background: url('post.jpg');
    border: 1px solid #E0DBC9; font-style:normal; font-variant:normal;  font-weight:500; line-height:1.5em; font-size:1em; font-family:Lucida  Console, courier new, monospace  
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
    margin: 10px;
     background: url('post.jpg');
    border: 1px solid #E0DBC9;
    color: #A89A6A; font-style:normal; font-variant:normal;  font-weight:bold; line-height:1.5em; font-size:1.3em;  font-family:Trebuchet MS, Tahoma, Sans-serif; padding-left:25px;  padding-right:0; padding-top:0; padding-bottom:0
}




/* start - table */
table {
    border-collapse: collapse;
    margin: 10px;    
}
th strong {
    color: #fff;
}
th {
    background: #93BC0C url('nav.jpg') repeat-x;
    height: 29px;
    padding-left: 12px;
    padding-right: 12px;
    color: #FFF;
    text-align: left;
    border-left: 1px solid #B6D59A;
    border-bottom: 2px solid #FFF;
}
tr {
    height: 30px;
}
td {
    padding-left: 11px;
    padding-right: 11px;
    border-left: 1px solid #E8E8E8;
    border-bottom: 1px solid #DFDFDF;
}
td.first, th.first {
    border-left: 0px;
}
tr.row-a {
    background: #F8F8F8;
}
tr.row-b {
    background: #EFEFEF;        
}
/* end - table */


/* form elements */
form {
    margin:10px; padding: 0 5px;
    border: 1px solid #D5D5D5; 
    background-color: #DFDFDF;     
}
label {
    display:block;
    font-weight:bold;
    margin:5px 0;
}
input {
    padding:2px;
    border:1px solid #eee;
    font: normal 1em Verdana, sans-serif;
    color:#777;
}
textarea {
    width:400px;
    padding:2px;
    font: normal 1em Verdana, sans-serif;
    border:1px solid #eee;
    height:100px;
    display:block;
    color:#777;
}
input.button { 
    height: 24px;
    margin: 0;
    color: #FFF;
    background: #8EB50C url('nav.jpg') repeat-x 0 0;
    border: medium none;; font-style:normal; font-variant:normal;  font-weight:bold; font-size:12px; font-family:Arial, Sans-serif;  padding-left:3px; padding-right:3px; padding-top:2px; padding-bottom:2px
}


/* search form */
.searchform {
    background-color: transparent;
    border: none;    
    margin: 0 0 0 3px; padding: 5px 0 10px 0;    
    width: 220px;    
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
    width: 130px;
    color: #777; 
    height: 18px;
    padding: 2px;    
    border: 1px solid #E5E5E5;
    vertical-align: top;
}
.searchform input.button { 
    width: 60px;
    height: 24px;
    padding: 2px 5px;
    vertical-align: top;
}


/********************************************
   LAYOUT
********************************************/ 
#wrap {
    position: relative;
    width: 825px;
    background: #CCC url('content.jpg') repeat-y center top;
    margin: 0 auto;
    text-align: left;
    left: 517px;
    top: 19px;
    height: 527px;






}
#top-bg {
   position: absolute;
    width: 820px;
    height: 19px;
    background: #CCC url('top-bg.jpg') repeat-y center top;    
    top: 0; left: 0;
    z-index: 2    
}
#content-wrap {
    position: relative;
    clear: both;
    float: left;
    width: 790px;
    padding: 0;
    background: #E8E8E8;
    border-top: 5px solid #FFF;
    border-bottom: 2px solid #D0D0D0;
    margin-left: 15px;
    display: inline;
    left: 2px;
    top: 201px;




}
#header {
    width: 820px;
    position: relative;
    height: 100px;
    background: #CCC url('header-bg.jpg') repeat-y center top;
    padding: 0;
    color: #FFF;
    left: 1px;
    top: 12px;




}
#header h1#logo-text a {
    position: absolute;
    margin: 0; padding: 0;
    font: bold 36px 'Trebuchet MS', Arial, Sans-serif;
    letter-spacing: -1px;
    color: #787676;
    text-transform: none;
    text-decoration: none;

    /* change the values of top and left to adjust the position of the logo*/
    top: 25px; left: 30px;    
}
#header h1#logo-text span {
    color: #9A9696;
}
#header p#slogan {
    position: absolute;
    margin: 0; padding: 0;
    font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
    text-transform: none;
    color: #838181;

    /* change the values of top and left to adjust the position of the slogan*/
    top: 67px; left: 95px;        
}


/* header links */
#header #header-links {
    position: absolute;
    top: 20px; right: 20px;    
    color: #838181;
    font-size: 10px;    
}
#header #header-links a {    
    color: #838181;
    text-decoration: none;    
}
#header #header-links a:hover {
    color: #444;        
}


/* header-photo */
#header-photo {
    clear: both;
    height: 200px;
    width: 790px;
    margin: 0 auto;
    background: #FFF url('header-photo.jpg') no-repeat center;
}


/* Navigation */
#nav {
    clear: both;    
    padding: 0;        
}
#nav ul {
    float: left;
    background: url('nav.jpg') repeat-x;    
    width: 790px;        
    text-transform: uppercase;
    padding: 0;    
    display: inline; list-style-type:none; margin-left:15px; margin-right:0; margin-top:0; margin-bottom:0
}
#nav ul li {
    display: inline;
    margin: 0; padding: 0;
}
#nav ul li a {
    display: block;
    float: left;
    width: auto;
    margin: 0;
    padding: 0 14px;
    border-right: 1px solid #899D00;
    border-left: 1px solid #A7D101;
    border-bottom: none;
    color: #FFF;
    font: bold 13px/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;    
    letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
    background: url('nav-hover.jpg') repeat-x;    
}
#nav ul li#current a {    
    background: url('nav-current.jpg') repeat-x;    
}


/* Main Column */
#main {
    float: left;
    width: 67%;
    padding: 20px 0 0 0; margin: 0 0 0 10px;
    display: inline;
}
#main h2 {
    font: normal 1.9em 'Trebuchet MS', Tahoma, Sans-serif;
    color: #85970C; 
    text-transform: none;
    padding: 10px 0 0px 10px;             
}
#main h2 a {
    color: #85970C;
    text-decoration: none;    
}
#main ul li {
    list-style-image: url('bullet.gif');
}


/* Sidebar */    
#sidebar {
    float: right;
    width: 27.5%;
    padding: 20px 10px 0 0; margin: 0;        
}    
#sidebar h3 {
    padding: 5px 5px; 
    font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
    color: #8C9F0D;         
}
#sidebar ul.sidemenu {
    text-align: left;
    padding: 0;
    text-decoration: none;        
    background: url('dots.jpg') repeat-x left top;; margin-left:0; margin-right:4px; margin-top:7px; margin-bottom:8px
}
#sidebar ul.sidemenu li {
    background: url('dots.jpg') repeat-x left bottom;
    margin: 0 2px;        
    color: #8F8F8F; list-style-type:none; padding-left:5px; padding-right:0; padding-top:4px; padding-bottom:4px
}
* html body #sidebar ul.sidemenu li {
    height: 1%;
}
#sidebar ul.sidemenu li a {
    text-decoration: none;    
    background-image: url('none');    
    color: #666666            
}
#sidebar ul.sidemenu li a:hover {    
    color: #1773BC;    
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { background: none; }


/* footer */
#footer-wrap {
    clear: both;
    width: 820px;
    font-size: 95%;    
    text-align: left;
    background: url('footer-bottom.jpg') no-repeat center bottom;;  padding-left:0; padding-right:0; padding-top:15px; padding-bottom:15px     
}
#footer-wrap a {
    text-decoration: none;
    color: #666666;
    font-weight: bold;
}
#footer-wrap a:hover {
    color: #000;    
}
#footer-wrap p {
    padding:10px 0;
}
#footer-wrap h3 {
    color: #666666;
    margin: 0;
    padding: 0 10px; 
    text-transform: uppercase;
}


#footer-columns {
    color: #888;
    margin: 0 auto; 
    padding: 0;    
    width: 760px;        
}
#footer-columns ul {
    padding: 0;    
    background: url('footer-dots.jpg') repeat-x left top;;  list-style-type:none; margin-left:0; margin-right:0; margin-top:10px;  margin-bottom:0
}
#footer-columns li {
    background: url('footer-dots.jpg') repeat-x left bottom;        
}
#footer-columns li a {
    display: block;
    font-weight: normal;
    padding: 4px 0 4px 10px;
    width: 96%;
}
#footer-columns .col3, .col3-center {
    float: left;
    width: 32%;
}
#footer-columns .col3-center { 
    margin: 0 15px; 
}


/* bottom */
#footer-bottom {
    clear: both;
    color: #666;    
    margin: 0 auto; 
    width: 820px;
    padding: 10px 0;
    text-align: center;
}


/* postmeta */
.post-footer {
    background: url('post.jpg');
    padding: 5px; font-size: 95%;    
    color: #AEA471;
    border: 1px solid #E0DBC9; margin-left:10px; margin-right:10px; margin-top:5px; margin-bottom:10px
}
.post-footer .date{ margin: 0 10px 0 5px;    }
.post-footer a.comments { margin: 0 10px 0 5px;    }
.post-footer a.readmore { margin: 0 10px 0 5px;    }
.post-info { font-size: .95em; padding: 0 10px; margin-left: 2px; color: #888; }


/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }


/* display and additional classes */
.clear { clear: both; }


/* =Internet Explorer Fixes
----------------------------------------------------------------------*/


.hoverbox a
{
    position: relative;
}


.hoverbox a:hover
{
    display: block;
    font-size: 100%;
    z-index: 1;
}


.hoverbox a:hover .preview
{
    top: -38px;
    left: -50px;
}


.hoverbox li
{
    position: static;
}




/* =xxx
----------------------------------------------------------------------*/








/* =Hoverbox Code
----------------------------------------------------------------------*/


.hoverbox
{
    cursor: default;
    list-style: none;
}


.hoverbox a
{
    cursor: default;
}


.hoverbox a .preview
{
    display: none;
}


.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}


.hoverbox img
{
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 100px;
}


.hoverbox li
{
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}


.hoverbox .preview
{
    border-color: #000;
    width: 250px;
    height: 250px;
}


/* =Internet Explorer Fixes
----------------------------------------------------------------------*/


.hoverbox a
{
    position: relative;
    left: 192px;
    top: 10px;




}


.hoverbox a:hover
{
    display: block;
    font-size: 100%;
    z-index: 1;
}


.hoverbox a:hover .preview
{
    top: -38px;
    left: -50px;
}


.hoverbox li
{
    position: static;
}

Alles anzeigen

oder bei 2 für den Iexplorer anzupassen!
konnte leider keinen code mehr einfügen ,bitte um rückmeldung falls das kein zu grosses Problem darstellen würde

hoffe ich habe hier mit dem Einfügen vom code alles richtig gemacht!!

Danke schon mal !! Mfg Rene

threadi

Schreib mal in der CSS-Datei statt

Code

ul#css3menu1 li:hover > *

so

Code

ul#css3menu1 li:hover ul

Dann sollte es eigentlich auch im Internet Explorer >= 7 funktionieren. Wenn nicht, welche Version hast Du getestet?

Bandit

Du hast noch ganz andere Probleme, siehe http://validator.w3.org/check?verbose=…nmuenchen.at%2F

rene1972

Danke erstmal für die schnellen Antworten!
@ threadi
habs mit Internet Explorer7 probiert ging nicht
und habe jetzt mal mit Internet Explorer 9 probiert geht auch nicht

@Bandit
Ja habs schon gemerkt das da ne mänge Arbeit auf mich zu kommt!!
Aber eigentlich funktioniert ja die Original seite( Ich meine wegen der Fehler)!
Das hat jetzt nichts mit der Anzeige der Buttons zu tun , die müssten ja trotzdem im gleichen Design angezeigt werden oder?

threadi

Ja, weil Du die Seite immer mit der IE7-Engine anzeigen lässt auf Grund o.g. HTML-Codes.

rene1972

was heist das jetzt für mich? müsste ich den ganzen code umschreiben oder wie soll ich weiter vorgehen!

threadi

Ah, sorry, Irrtum meinerseits. Du solltest erstmal nur das berücksichtigen und in deiner CSS-Datei anpassen, was ich oben geschrieben habe. Die Änderung sehe ich bisher nämlich nicht unter deiner Vorschau-URL.

rene1972

threadi

ich denke du meinst diesen bereich!!

Code

ul#css3menu1 li:hover ul{
    display:block;}

das hätte ich geändert

threadi

Die Änderung sehe ich nicht unter http://members.liwest.at/haindl/httpdocs/.
Außerdem hast Du oben stehende Anmerkungen zu dem fehlerhaften HTML-Code offenbar auch noch nicht berücksichtigt. Da sind so einige Fehler drinne die für eine Fehldarstellung durchaus auch verantwortlich sein könnten.

rene1972

ok das wird etwas länger dauern! danke jedenfalls und ich meld mich wieder!

alxy

Ein Tip:
Das zweite ist ja schon ein Template. Warum lädst du dir nichts ein funktionierendes herunter (!), überlegst dir eine praktikable Verzeichnis und Dateistruktur und pflegst die Inhalte ein. Glaub mir, damit bist du schnell und länger glücklich.

alxy

Tags