Tutorial HTML, CSS u. PHP - Forum

[yobas]

Tag allerseits.

Habe eine frage zu Untermenüs, und zwar wie funktioniert das genau?
denn heute hab ich eine Internet seite gesichtet ( designnation.de ) was ich genau meine sind diese Navigationsleisten bei Hauptmenü.
Kenne mich momentan nur mit <ul><li></li></ul> und <span></span> aus.

( designnation.de html code )

Code: Alles auswählen

<div class="box">

          <h3><img src="/Theme/Default/Grafiken/haupt_navi.gif" alt="Hauptnavigation" /> Hauptmenü</h3>
             <ul>
                 <li style="margin-bottom: 10px;"><a href="http://tutorials.designnation.de/">Übersicht</a></li>
                    
        <li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/1.gif);" class="active"><a href="http://tutorials.designnation.de/Adobe-Photoshop/">Adobe Photoshop   </a> <span class="anzahl">388</span></li>              <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Bildmanipulation/">Bildmanipulation</a> <span class="anzahl">20</span></li>

                          <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Buttons/">Buttons</a> <span class="anzahl">11</span></li>
                          <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Grundlagen/">Grundlagen</a> <span class="anzahl">10</span></li>
                          <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Interface/">Interface</a> <span class="anzahl">3</span></li>
                          <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Objekte/">Objekte</a> <span class="anzahl">-1</span></li>

                          <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Text/">Text</a> <span class="anzahl">22</span></li>
                          <li style="margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Texturen/">Texturen</a> <span class="anzahl">8</span></li>
                              <li style="margin-top: 10px; margin-bottom: 10px;margin-left: 15px;" class="sub"><a href="http://tutorials.designnation.de/Adobe-Photoshop/Sonstiges/">Sonstiges</a> <span class="anzahl"></span></li>
           
           <li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/5.gif);"><a href="http://tutorials.designnation.de/Cinema-4D/">Cinema 4D   </a> <span class="anzahl">130</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/6.gif);"><a href="http://tutorials.designnation.de/3D-Studio-Max/">3D Studio Max   </a> <span class="anzahl">1</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/7.gif);"><a href="http://tutorials.designnation.de/XHTML-CSS/">(X)HTML / CSS   </a> <span class="anzahl">64</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/7.gif);"><a href="http://tutorials.designnation.de/PHP-MySQL/">PHP / MySQL   </a> <span class="anzahl">81</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/7.gif);"><a href="http://tutorials.designnation.de/Ajax-Javascript/">Ajax / Javascript   </a> <span class="anzahl">11</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/8.gif);"><a href="http://tutorials.designnation.de/Fotofrafie/">Fotografie   </a> <span class="anzahl">10</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/9.gif);"><a href="http://tutorials.designnation.de/Bildung/">Bildung   </a> <span class="anzahl">-2</span></li><li style="line-height: 25px;background-image: url(http://www.designnation.de/Grafiken/tut/0.gif);"><a href="http://tutorials.designnation.de/Sonstiges/">Sonstiges   </a> <span class="anzahl">98</span></li>               

             </ul>

        </div>

Was ich noch fragen wollte ist, kann man Tags anordnen wie eine Navigation? sprich das man in der Navigations List A Tags einfügen kann z.b wenn jemand bei mir ein ( Inserat, nenn ich das mal ) erstellt, das dass dann in der Navigation dargestellt wird? und das man dann bei der Navigations list A eine aufzählung bekommen kann? so wie bei designnation.de nur das es voll automatisch gemacht wird?

[webmaster3000]

Hallo!

Ein System, in dem registriere Nutzer Inhalte hinzufügen können. kann man mit PHP erstellen.

Verschachtelte Listen sehen so aus:

Code: Alles auswählen

<ul>
    <li>Listenpunkt 1. Ordnung
         <ul>
               <li>Listenpunkt 2. Ordnung</li>
         </ul>
    </li>
</ul>

Hofe, ich konnte helfen,
webmaster3000

[yobas]

Danke für die Antwort

jetzt wüsste ich wie man Untere Menüs erstellt, aber noch nicht wie man die Verstecken kann.
Möchte gerne Wissen wie man die per Click Hervorruft wie bei Designnation.de.

Danke für die Antwort

Liebe Grüsse Yobas
(Peace)

[lauras]

In dem man sie einfach auf der Hauptseite nicht in den Quellcode schreibt und auf der Unterseite schon? Wahlweise auch per Javascript.
Wie wäre es denn, wenn du bevor du fragen stellst einfach mal in den Code dieser betreffenden Website schaust? Dann sollte dir nämlich einiges deutlicher werden und wir müssen nicht erklären, was eigentlich schon im Code drin steht ;)

[yobas]

habe versucht den code zu verstehen aber verstehe ihn glaub ich noch nicht ( beschämtes lächeln )

[Sarkkan]

Das ist doch nicht schlimm (:
Du bist noch am Anfang, dass kommt noch Außerdem denke ich wirst du noch keine Erfahrungen mit JavaScript gemacht haben, also nur halb so schlimm

Versuch es aber dann erst mal ohne diesen Effekt. Wir (/Ich) geben ungerne kompletten Code heraus, sondern wollen meistens eigentlich nur Denkansätze liefern.
Nur wenn es unbedingt notwendig sein sollte und du gaaaanz nett fragen würdest, könnte man da mal verhandenln^^

[SilverLion]

Hi yobas,

es gibt - neben den bereits genannten Effekten (Javascript etc.) - auch noch die Möglichkeit mittels CSS solche Layouts zu schreiben. Ich würde Dir empfehlen mal nach "CSS-basierte Layouts" googlen. Vielleicht hilft Dir das bei Deinem Verständnis weiter ;-)

LG vom Löwen

[lauras]

Öhm.. ich gehe eigentlich davon aus, dass er CSS benutzt (was eigentlich selbstverständlich sein sollte). Aber über CSS gibt es nur schwer die Möglichkeit, etwas per "Klick" einzublenden - dazu braucht man dann entweder unterschiedlichen Code auf beiden Seiten (was für den Anfang denke ich empfehlenswert ist) oder Javascript.. Wie genau soll ihm da die Suche nach "CSS-basierte Layouts" weiterhelfen?

Grüße

[SilverLion]

Guten Morgen Lauras,

da ich yobas Ausgangspost der Art verstanden habe, dass er Verständnisschwierigkeiten hat, habe ich ihm diese Google Suche empfohlen, weil es dort in den Suchergebnissen einen Artikel gibt, der sehr leicht zu verstehen ist (nach diesem Tutorial habe ich meine - momentan offline befindende - Seite auch mit einer Nav-Leiste versehen.)

Dort erhält er Schritt für Schritt erklärt wie sich so eine Nav-Leiste aufbaut. Angefangen von verschachtelten <li> über den dazugehörigen CSS-Code zum nachbauen.

LG vom Löwen

[lauras]

Dann gib ihm doch den Link zum Artikel?^^

[SilverLion]

Dann gib ihm doch den Link zum Artikel?^^

Sehr gerne:

1.) http://de.selfhtml.org/css/layouts/einfuehrung.htm
2.) http://de.selfhtml.org/css/layouts/mehrspaltige.htm
3.) http://de.selfhtml.org/css/layouts/navigationsleisten.htm#definieren

Zu 1.) eine grundlegende Einführung in CSS-Layout
Zu 2.) Positionierung von CSS - Layouts an Hand eines drei-Spaltigen Layouts
Zu 3.) die eigentliche Antwort auf yobas Frage die nach der Lektüre der beiden Links vorher sehr einfach nachzubauen ist.

LG vom Löwen

[yobas]

Guten Tag allerseits.
Danke für die Tollen Antworten!

Möchte euch noch sagen das ich die Navigationlisten mit CSS verstanden habe, jedoch nicht die mti den zusätzlichen Ebenen. das sollte sich in kürze ändern da ich so eine tollen Link erhalten habe, sprich wurde hier rein gepostet.


mein momentaner Beispiel Navigation ( der später mal in der Homepage vorkommt. HINWEIS diese A,B bis C Beschreibung, ist nur ein beispiel )

Code: Alles auswählen

</div>

   <ul>

   <li><a href="#">Alle</a></li>
   <li><a href="#">A </a></li>
   <li><a href="#">B</a></li>

   <li><a href="#">C</a></li>
   <li><a href="#">D</a></li>
   <li><a href="#">E</a></li>

   <li><a href="#">F</a></li>
   <li><a href="#">G</a></li>
   <li><a href="#">H</a></li>

   <li><a href="#">I</a></li>
   <li><a href="#">J</a></li>
   <li><a href="#">K</a></li>

   <li><a href="#">L</a></li>
   <li><a href="#">M</a></li>
   <li><a href="#">N</a></li>

   <li><a href="#">O</a></li>
   <li><a href="#">P</a></li>
   <li><a href="#">Q</a></li>

   <li><a href="#">R</a></li>
   <li><a href="#">S</a></li>
   <li><a href="#">T</a></li>

   <li><a href="#">U</a></li>
   <li><a href="#">V</a></li>
   <li><a href="#">W</a></li>

   <li><a href="#">X</a></li>
   <li><a href="#">Y</a></li>
    <li><a href="#">Z</a></li>
   

   </ul>

      </div>

Code: Alles auswählen

CSS

#Navigation li {


   list-style-type: none;
   display: inline;
   float: left;
   font-size: 13px;

         }

#Navigation a, #Navigation strong {

      text-decoration: none;
      letter-spacing: 1px;
      display: block;
      padding: 15px 14px;
      color: #E2E2E2;
      border-right: 1px solid #5c5c5c;

      }

#Navigation a:hover, #navigation a:focus, #navigation a:active {


      text-decoration: underline;
      top: -30px;

                  }

das war bis jetzt ja gar nicht so schwer (gelernt durch das BUCH: from zero 2 hero / HTML&CSS mit 352 Seiten ) leider war dort keine Zwei Ebenen Navigation Erwähnt worden. Daher wusste ich nicht wie man dies bewerkstelligt.

Grüsse

[yobas]

Endlich hab ich gefunden wonach ich suchte! und zwar nach diesem hier!
leider kann ich dies nicht benutzten weil, möcht gerne selbst so was schreiben nur geht das wohl nicht, solange ich keine ahnung habe von PHP/Java
naja jedenfalls wisst ihr das nächste mal wenn ich mich melde.

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>



<body>

<a href="#" onClick="if (document.getElementById('subnavi_1').style.display == 'inline') {

                        document.getElementById('subnavi_1').style.display = 'none';

                    } else {

                        document.getElementById('subnavi_1').style.display = 'inline';

                    }">navi_1</a>

<div id="subnavi_1" style="display: none;">

<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi

</div>

<br>

<a href="#" onClick="if (document.getElementById('subnavi_2').style.display == 'inline') {

                        document.getElementById('subnavi_2').style.display = 'none';

                    } else {

                        document.getElementById('subnavi_2').style.display = 'inline';

                    }">navi_2</a>

<div id="subnavi_2" style="display: none;">

<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

</div>

</body>

</html>

LG und Peace

[webmaster3000]

Na ja, funktionieren mag es, aber schöner HTML-Code ist es nicht.

Gruß,
webmaster3000

[SilverLion]

Na ja, funktionieren mag es, aber schöner HTML-Code ist es nicht.

Gruß,
webmaster3000

in wiefern (wenn diese Frage interessehalber gestattet ist?)

LG vom Löwen!