XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)
-   -   Hilfestellung für "den richtigen Code" MENUE zum aufklappen (http://xhtmlforum.de/showthread.php?t=66052)

KrautundRüben 27.10.2011 01:54

Hilfestellung für "den richtigen Code" MENUE zum aufklappen
 
Hallo zusammen,

ich hab ein kleines aber feines problem....

ich mache eigentlich nur sachen mit Photoshop, aber nun möchte ich auch mal selber was machen. Es hakelt auch "nur" noch am Menü.

Ich hoffe Ihr könnt mir sagen, auf welche Art und Weise ich das Programmieren kann, ich hab schon öfter danach gesucht, mich dann aber eher in der Suche selbst verloren.

Da ich ja weiss, wie es aussehen soll, denke ich Bilder sagen mehr als tausend Worte!

Hier der Normalzustand:
http://www.outlook-import-gmbh.de/Bi.../menuebsp1.jpg
und hier dann aufgeklappt!
http://www.outlook-import-gmbh.de/Bi.../menuebsp2.jpg

- Wichtig wäre eben, dass die Unterpunkte erst nach einem Klick zu sehen sind (Mouseover wäre auch nett)...ABER

- möglichst nur mit HTML und CSS. (geht das überhaupt?)

- der blaue Balken am rechten Rand ist immer da, wo man sich gerade befindet.

Ich hätte SEHR gerne ein paar gute Tipps, bzw, eine kurze Erklärung, mit welchen Befehlen das überhaupt zu meistern ist, und evtl gibts ja mehrere Möglichkeiten!

Wäre nett von Euch, einem Newbie ein bischen unter die Arme greift...:mrgreen:

Gruß

KrautundRüben

zeji 27.10.2011 12:56

Man kann rein mit html und css kein Klick-Event abfangen, dazu benötigst du Javascript.

Per Hover ist es aber schon möglich, und zwar über die Pseudo-Klasse :hover.


Als Ansatz für den Menüaufbau. Benutze Listenelemente:


HTML-Code:

<ul class="firstLevel" id="menu">
        <li class="firstLevelItem"><a href="">Start</a></li>
        <li class="firstLevelItem">
                <a href="">Start1</a>
                <ul class="secondLevel" id="submenu">
                        <li class="secondLevelItem"><a href="">Seite 1 a<a></li>
                        <li class="secondLevelItem active"><a href="">Seite 1 b<a></li>
                        ...
                </ul>
        </li>
    ...
</ul>


KrautundRüben 31.10.2011 21:04

....brauche Hilfe
 
Hallo....

ich bin jetzt soweit mit der Seite fertig.....fehtl nur noch das Menü!

Hab das mal alles hochgeladen,damit man es anschauen kann.

Ich bekomme das aber nicht richtig hin, das mit dem Menü, da fehlt mir einfach zu viel Wissen.

Außerdem hab ich noch das Problem, das der "footer" also der balue Balken unter den 3 Bildern je nach Browser woanders steht! (ich finde den Fehler einfach nicht!)

Werde dann mal (wohl oder übel) anfangen zu lesen, wie das mit dem Firstlevel und SecondLevel funzt.... ich sitzt schon 2 Tage vorm PC (nebenbei ja noch Arbeiten), iwann wird einem schumrig davon :)

Wäre cool, wenn mir mir jmd einen Tipp geben könnte!
www.sprengel-seminare.de


Ach ja, und nicht lachen, wenn Ihr Fehler findet, bin Anfänger, und hab mir mithilfe eines Tutorials und meinem Photoshop Layout dann die Seite zusammengeschrieben! Also ich verstehe denke ich mal zu 90% alles, aber das hätte ich ohne TUT und ohne stundenlanges auspporbieren nicht hinbekommen, ich bin froh, dass mein Phase5 und Webocton diese Validierungstools haben :)



Hier ist der Code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Sprengel Seminare - f&uuml;r mehr Lebensqualit&auml;t</title>

        <meta name="keywords" content="Stichworte" />
        <meta name="copyright" content="Roland Sprengel" />
        <meta name="author" content="IL-Schmidt" />
        <meta name="description" content="Beschreibung" />
        <meta name="language" content="de-de" />

        <link rel="stylesheet"  href="./style/style.css" charset="utf-8" type="text/css" media="screen, projection" />

</head>

<body>
    <div id="rahmen">
        <div id="header">
        <h1> <a href="./index.htm"> Startseite | Sprengel Seminare - f&uuml;r mehr Lebensqualit&auml;t</a></h1>
        <ul style="border: 3;" id="menue">
        <li class="start chosen"> <a href="./index.htm">&nbsp;&nbsp;Start</a></li>
        <li class="seminare"> <a href="./seminare.htm">&nbsp;&nbsp;Seminare</a></li>
        <li class="ausbildung"> <a href="./ausbildung.htm">&nbsp;&nbsp;Ausbildung</a></li>
        <li class="about"> <a href="./about.htm">&nbsp;&nbsp;Zur Person</a></li>
        <li class="kontakt"> <a href="./kontakt.htm">&nbsp;&nbsp;Kontakt</a></li>
        </ul>
        </div>

    <div id="content">
        <h2>Sch&ouml;n dass Sie hier sind!</h2>
            <p align="justify">Wir von "<a href="http://www.sprengel-seminare.de">Sprengel Seminare</a>"haben das Ziel, Menschen in Ihre Kraft zu bringen, sie dabei zu unterst&uuml;tzen, Ihre Potenziale zu leben. Und das in verschiedenen <a href="http://sprengel-seminare.de/seminare.html">Bereichen</a>.
            <br />
            <br />
            Selbst leben statt gelebt werden.<br />
            Wecken Sie die Kraft in sich
            <br />
            <br />
            Hallo - wie f&uuml;hlen Sie sich?  <br />
            <br />
            Sie erleben kaum Gl&uuml;ck weil Sie vor lauter "Aus der Puste sein" wegen Stress und Leistungsdruck nie Zeit f&uuml;r Ihr "inneres Ich" finden? <br />
            <br />
            Sehnen Sie sich nach einer ehrlichen, erf&uuml;llten Beziehung? <br />
            <br />
            Sie wollen neue Wege gehen, wissen aber nicht wie?    <br />
            <br />
            Haben Sie das Gef&uuml;hl, nur zu funktionieren statt zu leben?  <br />
            <br />
            Sie k&ouml;nnen nicht raus aus Ihrer Haut, aber w&uuml;rden gerne ?<br />
            <br />
            Irgendwie einsam? Verlassen? Entt&auml;uscht?  <br />
            <br />
            Sie k&ouml;nnen etwas tun - zum Gl&uuml;ck.  <br /><br />
            Manchmal muss man sich nur die Augen reiben. Oder die dunkle Brille absetzen, die die Wahrnehmung verd&uuml;stert. Achten Sie auf das Geheimnis Ihres eigenen Lebens. Das Leben ist unruhig. Es gibt keinen Weg zur Ruhe, der nur &auml;u&szlig;erlich bleibt. Jeder Weg, der zu neuer Lebensqualit&auml;t f&uuml;hrt, geht &uuml;ber die Erfahrung der eigenen Wahrheit. Denken sie immer daran: Ihr Potential kann Berge versetzen. Unsere Seminare k&ouml;nnen ihnen dabei die Hand reichen und Antworten finden.<br />
            <br />
            Leben Sie -  statt gelebt zu werden. Erleben Sie Kraft und Zufriedenheit. Gehen Sie in ihren eigenen Berg, denn da liegt ein gro&szlig;er Schatz: Sie selbst.<br />
            </p>

    <br/>
    <br/>
    <table>
        <tr>
            <td align="left"><img src="./media/gipfelstuermer.jpg" title="Ich habe es geschafft! Meinen Traum erf&uuml;llt" alt="mit erhobenen Armen auf einem Gipfel" /></td>
            <td align="center"><img src="./media/jubel.jpg" title="Geschafft! Alle haben es geschafft!" alt="Gruppe die jubelnd auf dem Berg sitzt" /></td>
            <td align="right"><img src="./media/radfahrer.jpg" title="Das Ziel erreicht" alt="Radrennen - Sieger f&auml;hrt durchs Ziel" /></td>
        </tr>
    </table>


</div>

    <div id="footer">
    &copy; Sprengel Seminare |<a href="./impressum.htm"> Impressum </a>|<a href="http://www.il-schmidt.de"> Webdesign</a>
    </div>

    <div id="blog">
    <h3><a href="./seminare.htm">Aktuelle Seminare</a></h3>
    <p>
    <b>Wochenendseminar<br />"Dynamik in Beziehungen"</b><br />
    vom 02.12. - 04.12.2011 <br />
    Beginn: Freitag 16:00 h <br />
    Ende:&nbsp;&nbsp;Sonntag 16:00 h <br />
    <br />
    Wie gl&uuml;cklich ist Ihre Beziehung?<br />
    Wollen Sie etwas &auml;ndern?<br />
    <br />
    <a href="./dynamikinbeziehungen.htm">Mehr?</a>
    </p>
    </div>

</div>

</body>
</html>

und hier die CSS:
Code:

/*-----------------------------------------------------*/
/*----------------------- Haupt -----------------------*/
/*-----------------------------------------------------*/


* {

        margin: 0;
        padding: 0;
        border: 0 none;

}

html
    {
    background:transparent url(../layout/background.jpg) repeat-x;
    }

#rahmen {
    width: 980px;
    margin: 0 auto;
    padding: 0 0 0 0;
    }

#header {
    background:transparent url('./../layout/header-background.jpg') no-repeat;
    height: 200px;

    }

#header h1 {
    width: 360px;
    height: 206px;
    padding: 0 0 0 18px;
    float: right;

}

#header h1 a {
    width: 360px;
    height: 206px;
    background: url(./../layout/logo.png) no-repeat;
    text-indent: -5000px;
    overflow: hidden;
    display: block;
}

#content {
    position: absolute;
    width: 506px ;
    padding: 0 0 0 0;
    margin-left: 237px;
}



#footer {
        position: absolute;
        background:center url(./../layout/footer.jpg) no-repeat;
        width: 506px;
        padding: 20px;
        margin-left: 217px;
        top: 920px;

}

#blog {
    position: absolute;
    width: 207px;
    height: 236px;
    background: transparent url(../layout/blog-background.jpg)no-repeat;
    padding: 10px 10px 10px 10px;
    margin-left: 770px;
    top: 240px;
}
/*-----------------------------------------------------*/
/*--------------------- Schrift -----------------------*/
/*-----------------------------------------------------*/
body {
    color: #000000;
    font-size: 70%;
    font-family: Verdana, Tahoma;
}

a {
    color: #006ab3;
    text-decoration: none;
}

a:hover, a:focus {
    color: #f31635;
}

#menue {
    font-size: 11px;
    font-family: verdana, Tahoma;
    letter-spacing: 1px;
    font-weight: lighter;
    }
#menue a {
    color: #707173;
}
#menue a:hover, a:focus {
    color: #006ab3;
}

h2 {
    color: #006ab3;
    font-family: Verdana, Tahoma;
    font-size: 16px;
    line-height: 1.3;
    font-weight: lighter;
    margin-top: 10px;
    margin-bottom: 10px;
}

h3 {
    color: #006ab3;
    font-family: Verdana, Tahoma;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    color: #000000;
    font-family: verdana, tahoma;
    letter-spacing: 0.005em;
    text-align: justify;
}

#footer {
    color:#FFFFFF;
    font-family: verdana, tahoma;
        font-size: 11px;
        text-align: center;
        font-weight: lighter;
    letter-spacing: 0.02em;

}
#blog {
    letter-spacing: 0.025em;
}

#footer a{
    color: #FFFFFF;
}

#footer a:hover, #footer a:focus {
        color: #f31635;
}

/*-----------------------------------------------------*/
/*----------------------- Teil ------------------------*/
/*-----------------------------------------------------*/

#menue {

    width: 207px;
    padding: 245px 0 0 0;
    list-style-type: none;
    border-top : 4px;
    border-color: #707173;
 }


#menue li {
    padding: 0.32em;
    width: 207px;
    border-bottom: 1px;
}
#menu li a {
    background: transparent url('./../layout/menueaktiv.jpg')no-repeat;
    padding: 345px 0 0 530px;
        display: block;
        border-style:  dotted;
}

#content .startgallery {
    list-style-type: none;
}
#content .startgallery li {
    float: left;
        padding: 0 2px 0 0;
}

/*-----------------------------------------------------*/
/*---------------------- Detail -----------------------*/
/*-----------------------------------------------------*/



/*-----------------------------------------------------*/
/*--------------------- CSS-Hacks ---------------------*/
/*-----------------------------------------------------*/
.clearfix:after,
#content .startgallery:after,
#content .startgallery li:after,

#header:after,
#menue:after {

        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;

}


KrautundRüben 01.11.2011 04:21

ist das der richtige aufbau für meine Lösung?
 
http://xhtmlforum.de/66042-bei-hover-aufklappen.html

also ich meine, würde das menü so auch aufklappen, wenn er den Code auf alle seinen Seiten einfügen würde?

dann könnte ich mir das da "abgucken" (try and error)

Praktikant 01.11.2011 09:20

Du hast doch auf gar keiner Seite ein Untermenü?

Das Problem mit dem Footer liegt wahrscheinlich an der absolut sinnlosen absoluten Positionierung.
Erstetze diese einfach durch floats und es durfte dein Problem lösen.
Wenn der Footer genau mittig im div#rahmen ist, dann bietet sich zum Zentrieren margin: 0 auto; an.

KrautundRüben 01.11.2011 12:59

genau das will ich ja ändern.....aber mir will es nicht so recht gelingen!

ich brauche auch nur zu dem Punkt "Seminare" 5 Unterpunkte, welche eben beim drüberfahren oder draufklicken aufklappt.....

könntest Du mir evtl einen einzigen Unterpunkt dazuschreiben? Damit ich quasi eine Vorlage habe, um die anderen zu machen.
Ich raff nicht ganz, wie ich das in der CSS machen soll.

Danke fürs float, ich werde es gleich mal nachlesen, und umsetzten!

Praktikant 01.11.2011 13:09

Die geschützten Leerzeichen sind auch ganz böse. Für so etwas gibt es margin und padding. Grundlagenlektüre: LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller).

Des Weiteren kannst du mit CSS nichts ausgeben. Dafür ist HTML zuständig. Und was im HTML nicht steht kann auch nicht über CSS gesteuert werden.

Eine verschachtelte Liste sieht so aus:
HTML-Code:

<ul>
  <li>Listenpunkt 1</li>
  <li>Listenpunkt 2
    <ul>
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
    </ul>
  </li>
  <li>Unterpunkt 3</li>
</ul>

Allerdings kann ich dir kein komplettes Menü erstellen mit Code und allem. Das würde zu lange dauern.

Du musst das Untermenü dann über CSS ausblenden und bei Hover des entsprechenden Menüpunktes das Untermenü über CSS einblenden.
Auf der Seite, die das Untermenü "besitzt" sollte es natürlich immer eingeblendet sein.

KrautundRüben 01.11.2011 14:34

nein, das meinte ich ja gar nicht, dass mir jmd das komplette menü macht, nur evtl hilft, die richtigen Werte in der CSS für einen Unterpunkt zu machen...

ich probiere einfach mal wie weit ich komme.....

hakelig wird ja auch der 'menue-background',
ist im Moment ein Bild, wird aber hinfällig wenn das Menü aufklappt.
Meine Versuche das mit border-right (für den blauen Balken, der im Menü auf der rechten Seite des Aktiven Punktes sein soll)

und mit border-top (ul) und border-bottom (li) für die "Rahmen-Striche" des Menüs sind iwie nie angezeigt worden.

KrautundRüben 01.11.2011 15:54

Zitat:

Zitat von Praktikant (Beitrag 504825)
Du hast doch auf gar keiner Seite ein Untermenü?

Das Problem mit dem Footer liegt wahrscheinlich an der absolut sinnlosen absoluten Positionierung.
Erstetze diese einfach durch floats und es durfte dein Problem lösen.
Wenn der Footer genau mittig im div#rahmen ist, dann bietet sich zum Zentrieren margin: 0 auto; an.


Nachdem ich den "footer-div" in den Content div verschoben habe, ordnet sich nun der footer autoamtisch immer richtig an, allerdings nicht aus der seite SEMINAR.

zudem kommt, dass die rechte Tabelle im IE ganz rechts anordnet. ich versteh nicht, warum sich die div-"tabelle-rechts" nun nicht mehr am content ausrichtet (der ja nur 506px breit ist) sondern nun am div-"rahmen"

paulepulmo 01.11.2011 18:01

Vielleicht hilft dir ja das hier. Vorrausgestzt du möchtest deine Navi kontextbezogen anzeigen lassen. (Gegoogelt und Treffer)

Verschachtelte Navigationsleiste kontextbezogen anzeigen mit CSS für php include-Anweisung

KrautundRüben 01.11.2011 19:44

Zitat:

Zitat von paulepulmo (Beitrag 504853)
Vielleicht hilft dir ja das hier. Vorrausgestzt du möchtest deine Navi kontextbezogen anzeigen lassen. (Gegoogelt und Treffer)

Verschachtelte Navigationsleiste kontextbezogen anzeigen mit CSS für php include-Anweisung

DANKE FÜR DEN TIPP! das sieht gut aus.

ich werde es probieren:

es ist allerdings immer noch auf der Seite SEMINARE das Problem, dass die rechte Tabelle ganz rechts ist ( nur im IE) aber im FireFox wird sie an der richtigen Stelle angezeigt.

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Sprengel Seminare - Seminare</title>

        <meta name="copyright" content="Roland Sprengel" />
        <meta name="author" content="IL-Schmidt" />
        <meta name="description" content="Beschreibung" />
        <meta name="language" content="de-de" />
        <meta name="identifier" content="http://www.sprengel-seminare.de" />
        <meta name="robots" content="all, index" />
        <meta name="revisit-after" content="1 days" />
        <meta name="Content-Language" content="de" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="author" content="www.sprengel-seminare.de" />
        <meta http-equiv="organisation" content="www.sprengel-seminare.de" />
        <meta name="keywords" content="Roland Sprengel, sprengel-seminare, Seminare, Dynamik in Beziehungen, Geldseminar, Training, Trauma, Burn-out" />

        <link rel="stylesheet"  href="./style/seminare.css" charset="utf-8" type="text/css" media="screen, projection" />

</head>

<body>
<div id="rahmen">
    <div id="header">
    <h1> <a href="./index.htm"> Startseite | Sprengel Seminare - f&uuml;r mehr Lebensqualit&auml;t</a></h1>
        <ul  id="menue">
            <li class="start chosen"> <a href="./index.htm">&nbsp;&nbsp;Start</a></li>
            <li class="seminare"> <a href="./seminare.htm">&nbsp;&nbsp;Seminare</a></li>
            <ul id="submenue">
                <li class="geldseminar"><a href="./geldseminar.htm">Geldseminar</a></li>
                <li class="burnout"><a href="./burnout.htm">Burn-out</a></li>
                <li class="dynamikinbeziehungen"><a href="./dynamikinbeziehungen.htm">Dynamik in Beziehungen</a></li>
                <li class="lebenstatttrauma"><a href="./lebenstatttrauma.htm">Leben statt Trauma</a></li>
                <li class="zieleerreichen"><a href="./zieleerreichen.htm">Ziele erreichen</a></li>
            </ul>
            <li class="ausbildung"> <a href="./ausbildung.htm">&nbsp;&nbsp;Ausbildung</a></li>
            <li class="about"> <a href="./about.htm">&nbsp;&nbsp;Zur Person</a></li>
            <li class="kontakt"> <a href="./kontakt.htm">&nbsp;&nbsp;Kontakt</a></li>
        </ul>
    </div>

    <div id="content">
    <h2>Behandlungsmethodik</h2>
            <p align="justify">
            Der wesentliche Kern meiner Arbeit ist die Aktivierung der biologischen Selbstheilkr&auml;fte bis auf Zellebene. Es ist eine Kombination aus Traumaheilung, Arbeit mit Ressourcen, systemischer Arbeit.<br />
            Auch der Aspekt der Ern&auml;hrung spielt hier eine wichtige Rolle.<br /><br />
            Ein ganz wesentliches Ziel der Behandlung ist, dass Klienten die F&auml;higkeit einer Umsetzung von Selbsthilfe erlernen und nicht aufgrund von Traumatisierungen und fr&uuml;hkindlich bedingten Entwicklungsst&ouml;rungen in eine eventuell neue Co-Abh&auml;ngigkeit mit dem Therapeuten gelangen.<br /><br />
            Die Therapie in meiner Praxis ist eine Art Training f&uuml;r K&ouml;rper, Geist und Seele, bei Trauma f&uuml;r das Nervensystem. Die Thematik Trauma wird leider in vielen Therapie - und Behandlungsformen sowie auch bei Beratungen wenig ber&uuml;cksichtigt, da diesbez&uuml;glich zu wenig Wissen und Bewusstsein vorhanden ist. <br /><br />
            Viele Vortr&auml;ge, die ich gemacht habe, haben gezeigt, dass gerade P&auml;dagogen und Menschen in Beratungsfunktionen mit dieser Thematik geradezu &uuml;berfordert sind und Unterst&uuml;tzung ben&ouml;tigen.
            Aus diesem Grunde biete ich hier Fachseminare an, die speziell auf Inhalte und individuelle Bed&uuml;rfnisse ausgerichtet sind.
            </p>

    <br/>
    <br/>
    <div id="tabellevertikalrechts">
    <table>
    <td>
        <tr><img src="./media/furkapass.jpg" alt="Geschafft....der Fukapass mit 2436m hoch." /><br /><br />
            <img src="./media/jetztjetztjetzt.jpg" alt="Nicht warten... JETZT handeln"  <br /><br /> <br />
            <img src="./media/weglast.jpg" alt="Der Weg sieht oft schlimmer aus als er wirklich ist."<br /></tr>
    </td>
    </table>
    </div>

    <div id="tabellevertikallinks">
    <table><br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#006ab3"><b>Behandelt werden</b/></font>
    <br />
    <br />
    <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%">Posttraumatische Belastungs- <br />st&ouml;rungen<br />(siehe Traumakategorien)<br /><br /></td>
    </tr>

    <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%">Angst- und Panikst&ouml;rungen<br /><br /></td>
    </tr>

    <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%">Psychosymatische Symptome<br /><br /></td>
    </tr>

      <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%">Phobien<br /><br /></td>
    </tr>

    <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%">Lernst&ouml;rungen, Schulprobleme bei Kindern<br /><br /></td>
    </tr>

    <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%">Vorbereitung und Stabilisierung des Nervenysystems<br /><br /></td>
    </tr>


    <tr>
      <td width="10%">&nbsp;</td>
      <td align="left" valign="top"  width="10%"><img src="./layout/punkt.jpg" /></td>
      <td width="70%"><ul>bei bevorstehenden Herausforderungen:<br /><br />
                            <li>Pr&uuml;fungen<br /><br /></li>
                            <li>Trennungen, Scheidungen<br /><br /></li>
                            <li>Bevorstehende Konflikte, Kl&auml;rungen<br /><br /></li>
                            <li>Entscheidungen privat und beruflich<br /><br /></li>
                            <li>Bewerbungen</li>
                            </ul>
      </td>
    </tr>
    </table>

    <div id="footer">
    &copy; Sprengel Seminare |<a href="./impressum.htm"> Impressum </a>|<a href="http://www.il-schmidt.de"> Webdesign</a>
    </div>

    </div>


</div> <!-- ENDE DIV CONTENT -->




<div id="blog">
    <h3><a href="./seminare.htm">Aktuelle Seminare</a></h3>
    <p>
    <b>Wochenendseminar<br />"Dynamik in Beziehungen"</b><br /><br />
    vom 02.12. - 04.12.2011 <br />
    Beginn: Freitag 16:00 h <br />
    Ende:&nbsp;&nbsp;Sonntag 16:00 h <br />
    <br />
    Wie gl&uuml;cklich ist Ihre Beziehung?<br />
    Wollen Sie etwas &auml;ndern?<br />
    <br />
    <a href="./dynamikinbeziehungen.htm">Mehr?</a>
    </p>
</div>

</div> <!-- ENDE RAHMEN -->

</body>
</html>

CSS:
Code:

/*-----------------------------------------------------*/
/*----------------------- Haupt -----------------------*/
/*-----------------------------------------------------*/


* {

        margin: 0;
        padding: 0;
        border: 0 none;

}

html
    {
    background:transparent url(../layout/background.jpg) repeat-x;
    }

#rahmen {
    width: 980px;
    margin: 0 auto;
    padding: 0 0 0 0;
    }

#header {
    background:transparent url('./../layout/header-background.jpg') no-repeat;
    height: 200px;

    }

#header h1 {
    width: 360px;
    height: 206px;
    padding: 0 0 0 18px;
    float: right;

}

#header h1 a {
    width: 360px;
    height: 206px;
    background: url(./../layout/logo.png) no-repeat;
    text-indent: -5000px;
    overflow: hidden;
    display: block;
}

#content {
    position: absolute;
    width: 506px ;
    padding: 0 0 0 0;
    margin-left: 237px;
}

#tabellevertikalrechts {
    position: relative;
    text-align: right;
    line-height: 120%;
    float: right;
}

#tabellevertikallinks {
    position: relative;
    width: 243px;
    height: 552px;
    background: transparent url(../layout/blogseminar-background.jpg)no-repeat;
    text-align: left;
    line-height: 140%;
    float: left;


    }


#footer {
        position: relative;
        background:center url(./../layout/footer.jpg) no-repeat;
        width: 506px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin: 20px auto;
        float: none;
}

#blog {
    position: absolute;
    width: 207px;
    height: 236px;
    background: transparent url(../layout/blog-background.jpg)no-repeat;
    padding: 10px 10px 10px 10px;
    margin-left: 770px;
    top: 240px;
}
/*-----------------------------------------------------*/
/*--------------------- Schrift -----------------------*/
/*-----------------------------------------------------*/
body {
    color: #000000;
    font-size: 70%;
    font-family: Verdana, Tahoma;
}

a {
    color: #006ab3;
    text-decoration: none;
}

a:hover, a:focus {
    color: #f31635;
}

#menue {
    font-size: 11px;
    font-family: verdana, Tahoma;
    letter-spacing: 1px;
    font-weight: lighter;
    }
#menue a {
    color: #707173;
}
#menue a:hover, a:focus {
    color: #006ab3;
}

#submenue {
    font-size: 11px;
    font-family: verdana, Tahoma;
    letter-spacing: 1px;
    font-weight: lighter;
    }
#submenue a {
    color: #707173;
}
#submenue a:hover, a:focus {
    color: #006ab3;
}

h2 {
    color: #006ab3;
    font-family: Verdana, Tahoma;
    font-size: 16px;
    line-height: 1.3;
    font-weight: lighter;
    margin-top: 10px;
    margin-bottom: 10px;
}

h3 {
    color: #006ab3;
    font-family: Verdana, Tahoma;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    color: #000000;
    font-family: verdana, tahoma;
    letter-spacing: 0.005em;
    text-align: justify;
}

#footer {
    color:#FFFFFF;
    font-family: verdana, tahoma;
        font-size: 11px;
        text-align: center;
        font-weight: lighter;
    letter-spacing: 0.02em;

}
#blog {
    letter-spacing: 0.025em;
}

#footer a{
    color: #FFFFFF;
}

#footer a:hover, #footer a:focus {
        color: #f31635;
}

/*-----------------------------------------------------*/
/*----------------------- Teil ------------------------*/
/*-----------------------------------------------------*/

#menue {
    width: 207px;
    padding: 245px 0 0 0;
    list-style-type: none;
 }


#menue li {
    padding: 0.32em;
    background: transparent url('./../layout/menue-background.png')no-repeat;
    width: 207px;
}
#menu li a {
    background: transparent url('./../layout/menueaktiv.jpg')no-repeat;
    padding: 245px 0 0 209px;
        display: block;
}

#submenue li {
    margin-left: 40px;
    padding: 0.32em;
    background: transparent url('./../layout/menue-background.png')no-repeat;
    width: 160px;
    border-right: medium;
}
#submenu li a {
    background: transparent url('./../layout/menueaktiv.jpg')no-repeat;
    padding: 255px 0 0 209px;
        display: block;
}


#content .startgallery {
    list-style-type: none;
}
#content .startgallery li {
    float: left;
        padding: 0 2px 0 0;
}

/*-----------------------------------------------------*/
/*---------------------- Detail -----------------------*/
/*-----------------------------------------------------*/



/*-----------------------------------------------------*/
/*--------------------- CSS-Hacks ---------------------*/
/*-----------------------------------------------------*/
.clearfix:after,
#content .startgallery:after,
#content .startgallery li:after,

#header:after,
#menue:after {

        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;

}

da ist bestimmt irgend ein schwachsinniger Fehler drin, den ich nicht finde.

(ich hätte bevor ich die Seite angefangen habe, mir mal "litlle boxes" zu Gemüte führen sollen. Aber ich soll heute fertig sein :) )

KrautundRüben 01.11.2011 20:06

so ich hab das Aktive Menü soweit fertig.....so reicht es



ich habe einfach die Unterpunkte hinzugefügt, und auf den Seiten den es nciht eingeblendet werden soll, in der CSS mit "display: none;" ausgeblendet, funzt super.

War gar nicht so schwer :)

So, jetzt fehlen mir eigentlich nur noch der blaue Balken rechts vom Menü.
Er soll immer hinter dem Punkt stehen, dessen Seite gerade aktiv ist.

Praktikant 01.11.2011 21:32

Wirf deine Hintergrundgrafik raus. Gib dem Link das padding und den Border unten. Der Link sollte dann im Hauptmenü etwas schmaler werden.
Die Pseudoklassen :hover, :focus und :active bekommen zudem noch den rechten Rahmen.

Die Untermenüs genauso, nur musst du hier die Breite einschränken.

Wenn du über der Liste auch einen Rahmen haben willst, dann gib der Listen eben auch einen oberen Rahmen.

Dann sieht dein Menü ungefähr aus wie jetzt und hat den blauen Strich.

KrautundRüben 01.11.2011 23:13

cool, vielen Dank!

ich war gerade mit meiner Freundin essen, und nun gucken wir noch einen Film. Hab Ihr versprochen, das der PC ausbleibt ...

ich werds morgen ausprobieren!

Schönen Abend noch!

Praktikant 01.11.2011 23:14

Zitat:

Zitat von KrautundRüben (Beitrag 504876)
Hab Ihr versprochen, das der PC ausbleibt ...

Das Versprechen haste ja wohl gebrochen :mrgreen:

KrautundRüben 03.11.2011 10:06

Vielen dank!
 
Super,....vielen DAnk für Deine Hilfe!!!

hat alles geklappt.
ZUmindest ist es nun so, wie ich es haben wollte!

ausser dem Tabellen fehler im IE auf der Seminar-Seite funzt alles.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:20 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023