Dropdown Menu Buttons nebeneinander?

2 Antworten

Hallo!

Ich habe den Code nur kurz überflogen, JavaScript konnte ich nur zwei Aufrufe entdecken. Die sind beide gleich.

Wie teilst du der Funktion mit, auf welche Schaltfläche geklickt wurde? Wie hast du das umgesetzt?

Viele Grüße
Heiko

Statt display: block nimm display: inline

Abstand zwischen zwei Tabellen über HTML/CSS?

table.border1 {

  width: 100%; height: 50%;

  border-collapse: collapse;

  text-align: center;

  vertical-align: middle;

  border: 2px solid #000000; }

caption {

  letter-spacing: 2em;

  border: 1px solid #000000;

  background-color: #008080;

  color: #FFFF00;

  font-size: xx-large; }

th, td {

  font-family: Arial;

  padding: 2px;}

th {

  background-color: #ccc;

  border: 1px solid #000000; }

th.WT {

  color: #3FFFFF; }

th.Woche {

 width: 3%; }

th.Block {

 width: 3%; }

th.Zeiten {

 width: 4%; }

td.Woche {

  font-size: 32pt;

  background-color: #FFFF00;

  border-bottom: 2px solid #000000;

  border-right: 1px solid #000000; }

td.Block {

  background-color: #ffff88;

  font-size: 16pt;

  border-bottom: 2px solid #000000;

  border-right: 1px solid #000000; }

td.AZeit {

  background-color: #ffffcc;

  border-bottom: 1px dotted #000000; }

td.EZeit {

  background-color: #ffffcc;

  border-bottom: 2px solid #000000; }

td.Fach {

  border-top: 2px solid #000000;

  border-left: 2px solid #000000;

  border-right: 2px solid #000000;

  border-bottom: 1px dashed #000000;

  background-color: #ffffe8;

  color: #800000;

  font-weight: bold;

  width: 16%; }

td.Lehrer {

  width: 10%;

  border-left: 2px solid #000000;

  border-bottom: 2px solid #000000;

  border-right: 1px dashed #000000;

  background-color: #ffffe8;

  font-size: 10pt; }

td.Raum {

  width: 6%;

  border-bottom: 2px solid #000000;

  border-right: 2px solid #000000;

  background-color: #ffffe8;

  font-size: 12pt; }

td.unten {

  border-bottom: 5px solid #000000;

}

td.Info {

  background-color: #abcdef;

}

td.Info1{

background-color: #FFFF00;

}

td.Info2{

  background-color: #008080;

}

td.Info3{

  background-color: #CCC;

}

td.Info4{

  background-color: #00FFFF;

}

td.Info5{

  background-color: #F5B3FF;

}

td.Info6{

  background-color: #FF00FF;

}

td.Info7{

  background-color: #808000;

}

td.Info8{

 background-color: #BDEDBA;

}

td.Info9{

  background-color: #FFB300;

}

td.Info10{

  background-color: #00FF25;

}

td.Info11{

  background-color: #FF0000;

}

td.Info12{

  background-color: #B18380;

}

td.BB{

  background-color: #FFFF00;

}

td.CC{

  background-color: #008080;

}

td.DD{

   background-color: #CCC;

}

td.EE{

   background-color: #00FFFF;

}

td.FF{

 background-color: #F5B3FF;

}

td.GG{

 background-color: #FF00FF;

}

td.HH{

   background-color: #808000;

}

td.II{

    background-color: #BDEDBA;

}

td.JJ{

   background-color: #FFB300;

}

td.KK{

    background-color: #00FF25;

}

td.LL {

     background-color: #FF0000;

}

td.MM{

    background-color: #B18380;

}

table.border2{

    width: 30%; height: 30%;

   border-collapse: collapse;

  text-align: center;

  vertical-align: middle;

  border: 2px solid #000000; }

Ich möchte gerne zwischen der oberen tabell und er tabell unten(2)einen Abstand haben. Könnt ihr mir bitte schreiben wie das geht.(Die Infos in der Mitte sind nicht wichtig.)

Danke!!!!

...zur Frage

Wie kann sich durch Javascript/HTML der Bereich A beim Aufklappen von Bereich B automatisch schließen, siehe CodeBSP?

Von Seitenanfang bis Head-Ende habe ich folgendes stehen, die spitzen klammern wurden im CodeBSP nicht angezeigt, stattdessen solch ein unverständlicher "& l t ;"-Quatschsinn:

html
    head
        title
            Meine Geichte-Bibliothek
        /title

        script type="text/javascript"
            function toggle(id){
                var e = document.getElementById(id);

                if (e.style.display == "none"){
                  e.style.display = "";
                } else {
                  e.style.display = "none";
                }
            }
        /script
    /head

Und folgendes CodeSP habe ich im BODY stehen:

a href="javascript:toggle('f0100')" I. Gedichte von Goethe /a  div id="f0100" style="display: none"

a href="javascript:toggle('f0101')" 01. Epirrhema /a  div id="f0101" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0102')" 02. Gefunden /a  div id="f0102" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0103')" 03. Erlkönig /a  div id="f0103" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0104')" 04. Das Göttliche /a  div id="f0104" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0105')" 05. Heydenröslein /a  div id="f0105" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0106')" 06. Osterspaziergang /a  div id="f0106" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0107')" 07. Prometheus /a  div id="f0107" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0108')" 08. Selige Sehnsucht /a  div id="f0108" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0109')" 09. Verschwiegenheit /a  div id="f0109" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0110')" 10. Willkommen und Abschied /a  div id="f0110" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0111')" 11. Zauberlehrling /a  div id="f0111" style="display: none" Text folgt /div  br

/div

Viele aufklappbare Gedichte stehen unter einem aufklappbaren Titel, dem Namen des jeweiligen Verfassers, wie Goethe, Schiller, Lessing usw. Wie kann ich es bewerkstelligen, dass sich beim Öffnen von Schiller der Bereich Goethe automatisch schließt, ohne auf irendwelcherlei externe .js-Dateien verlinken zu müssen? Ich gestehe, dass ich gewissermaßen, zumindest was JS-Belange angeht, eher ein ScriptKiddie bin. Ich habe auch einiges über Hover, also Drübergleiten mit Maus gelesen, aber um euch gegenüber ehrlich zu sein nur Bahnhof und Bratkartoffeln verstanden :(

Das habe ich denn nun davon, dass unser Informatik-Lehrer damals nur immer über Ufos und Verschörungstheorien fabulierte, anstatt uns handfesten Unterrichtsstoff über Javascript, jQuery und PHP einzuprügeln .. :// .. sniff

Falls mir jemand leicht erklärlich / verständlich da bei diesem Code helfen könnte, würde mich das wirklich S E H R freuen.

Liebe Grüße und ein schönes Wochenende.

@-}-}--- Matthias :)

...zur Frage

WordPress Menü fixieren?

Hallo, ich würde gerne mein Menü fixieren. Wie gebe ich das genau ein? Ich weiß das diese Frage schon gestellt wurde, habe es aber nicht geschafft mit fixed. Kenn mich da überhaupt nicht aus, bin mir nicht mal genau sicher ob ich die richtige Stelle raus gesucht habe^^. Alles was ich bisher gemacht habe sah echt komisch dann aus...

Wäre sehr dankbar für eure Hilfe!

2.0 Menu
    --------------------------------------------------------------*/
    .main-navigation {
        position: realtive;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
    }
    .main-navigation ul ul ul {
        left: -999em;
        top: 0;
    }
    .main-navigation ul ul a {
        width: 200px;
        color: #fff !important;
    }
    .main-navigation ul ul li {
        padding: 10px;
        text-transform: none;
        border-bottom: 1px solid #505050;
    }
    .main-navigation ul ul li:last-child {
        border-bottom: 0;
    }
    .main-navigation li:hover > a {
    }
    .main-navigation ul ul :hover > a {
    }
    .main-navigation ul ul a:hover {
    }.main-navigation {
        position: relative;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
...zur Frage

Was möchtest Du wissen?